feat: add configurable URL

package.json

@@ -22,6 +22,7 @@
     "@langchain/langgraph-sdk": "*",
     "@langchain/openai": "^0.4.4",
     "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/postcss": "^4.0.9",

pnpm-lock.yaml

@@ -43,6 +43,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-slot':
         specifier: ^1.1.2
         version: 1.1.2(@types/react@19.0.10)(react@19.0.0)
@@ -854,6 +857,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.2':
+    resolution: {integrity: sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.6':
     resolution: {integrity: sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==}
     peerDependencies:
@@ -3773,6 +3789,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.10
 
+  '@radix-ui/react-label@2.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.10
+      '@types/react-dom': 19.0.4(@types/react@19.0.10)
+
   '@radix-ui/react-popover@1.1.6(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1

src/components/thread/index.tsx

@@ -137,7 +137,9 @@ export function Thread() {
               onClick={() => setThreadId(null)}
             >
               <LangGraphLogoSVG width={32} height={32} />
-              <span className="text-xl font-medium">LangGraph Chat</span>
+              <span className="text-xl font-semibold tracking-tight">
+                LangGraph Chat
+              </span>
             </button>
 
             <TooltipIconButton
@@ -192,7 +194,9 @@ export function Thread() {
                 {!threadId && (
                   <div className="flex gap-3 items-center">
                     <LangGraphLogoSVG className="flex-shrink-0 h-8" />
-                    <h1 className="text-2xl font-medium">LangGraph Chat</h1>
+                    <h1 className="text-2xl font-semibold tracking-tight">
+                      LangGraph Chat
+                    </h1>
                   </div>
                 )}
 

src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

src/providers/Stream.tsx

@@ -6,6 +6,11 @@ import type {
   RemoveUIMessage,
 } from "@langchain/langgraph-sdk/react-ui/types";
 import { useQueryParam, StringParam } from "use-query-params";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { LangGraphLogoSVG } from "@/components/icons/langgraph";
+import { Label } from "@/components/ui/label";
+import { ArrowRight } from "lucide-react";
 
 const useTypedStream = useStream<
   { messages: Message[]; ui: UIMessage[] },
@@ -21,21 +26,23 @@ const useTypedStream = useStream<
 type StreamContextType = ReturnType<typeof useTypedStream>;
 const StreamContext = createContext<StreamContextType | undefined>(undefined);
 
-export const StreamProvider: React.FC<{ children: ReactNode }> = ({
+const StreamSession = ({
   children,
+  apiUrl,
+  assistantId,
+}: {
+  children: ReactNode;
+  apiUrl: string;
+  assistantId: string;
 }) => {
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
-
   const streamValue = useTypedStream({
-    apiUrl: "http://localhost:2024",
+    apiUrl,
-    assistantId: "agent",
+    assistantId,
     threadId: threadId ?? null,
     onThreadId: setThreadId,
   });
 
-  console.log("threadId", threadId);
-  console.log("streamValue", streamValue.values);
-
   return (
     <StreamContext.Provider value={streamValue}>
       {children}
@@ -43,6 +50,98 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
   );
 };
 
+export const StreamProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [apiUrl, setApiUrl] = useQueryParam("apiUrl", StringParam);
+  const [assistantId, setAssistantId] = useQueryParam(
+    "assistantId",
+    StringParam,
+  );
+
+  if (!apiUrl || !assistantId) {
+    return (
+      <div className="flex items-center justify-center min-h-screen w-screen p-4">
+        <div className="animate-in fade-in-0 zoom-in-95 flex flex-col border bg-background shadow-lg rounded-lg max-w-2xl">
+          <div className="flex flex-col gap-2 mt-14 p-6 border-b">
+            <div className="flex items-start flex-col gap-2">
+              <LangGraphLogoSVG className="h-7" />
+              <h1 className="text-xl font-semibold tracking-tight">
+                LangGraph Chat
+              </h1>
+            </div>
+            <p className="text-muted-foreground">
+              Welcome to LangGraph Chat! Before you get started, you need to
+              enter the URL of the deployment and the assistant / graph ID.
+            </p>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+
+              const form = e.target as HTMLFormElement;
+              const formData = new FormData(form);
+              const apiUrl = formData.get("apiUrl") as string;
+              const assistantId = formData.get("assistantId") as string;
+
+              setApiUrl(apiUrl);
+              setAssistantId(assistantId);
+              console.log({ apiUrl, assistantId });
+
+              form.reset();
+            }}
+            className="flex flex-col gap-6 p-6 bg-muted/50"
+          >
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="apiUrl">Deployment URL</Label>
+              <p className="text-muted-foreground text-sm">
+                This is the URL of your LangGraph deployment. Can be a local, or
+                production deployment.
+              </p>
+              <Input
+                id="apiUrl"
+                name="apiUrl"
+                className="bg-background"
+                defaultValue={apiUrl ?? "http://localhost:2024"}
+                onChange={(e) => setApiUrl(e.target.value)}
+              />
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="assistantId">Assistant / Graph ID</Label>
+              <p className="text-muted-foreground text-sm">
+                This is the ID of the graph (can be the graph name), or
+                assistant to fetch threads from, and invoke when actions are
+                taken.
+              </p>
+              <Input
+                id="assistantId"
+                name="assistantId"
+                className="bg-background"
+                defaultValue={assistantId ?? "agent"}
+                onChange={(e) => setAssistantId(e.target.value)}
+              />
+            </div>
+
+            <div className="flex justify-end mt-2">
+              <Button type="submit" size="lg">
+                Continue
+                <ArrowRight className="size-5" />
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <StreamSession apiUrl={apiUrl} assistantId={assistantId}>
+      {children}
+    </StreamSession>
+  );
+};
+
 // Create a custom hook to use the context
 export const useStreamContext = (): StreamContextType => {
   const context = useContext(StreamContext);