docs(CPK-7187): address Christian Bromann feedback on Deep Agents docs

marthakelly · claude · marthakelly · commit a2a422482e18 · 2026-04-13T08:13:40.000-07:00
- Fix Deep Agents icon (was identical to LangGraph icon) with official OSS mark
- Rename "LangSmith" tabs to "Deep Agent" throughout quickstart
- Add TypeScript agent tabs (createAgent + langgraph.json) to quickstart Steps 1-3
- Add Annotation deprecation callout on in-app-agent-read TypeScript tab
- Add "Vite + Direct Connection" alternative quickstart section using
  add_langgraph_fastapi_endpoint with langgraph.json http field

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/docs/components/ui/icons/deepagents.tsx b/docs/components/ui/icons/deepagents.tsx
@@ -18,25 +18,17 @@ const DeepAgentsIcon = ({
     <svg
       width={width}
       height={height}
-      viewBox="0 0 128 128"
+      viewBox="0 0 98 98"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={cn(DEFAULT_CLASSNAME, className)}
     >
       <path
-        d="M40.1024 85.0722C47.6207 77.5537 51.8469 67.3453 51.8469 56.7136C51.8469 46.0818 47.617 35.8734 40.1024 28.355L11.7446 0C4.22995 7.5185 0 17.7269 0 28.3586C0 38.9903 4.22995 49.1987 11.7446 56.7172L40.0987 85.0722H40.1024Z"
+        d="M72.5361 42.2004V22.0426H51.7354L51.7354 22.5212C62.5113 22.7991 71.2917 31.6243 72.1695 42.2004H72.5361Z"
         fill="currentColor"
       />
       <path
-        d="M99.4385 87.698C91.9239 80.1832 81.7121 75.9531 71.0844 75.9531C60.4566 75.9531 50.2448 80.1832 42.7266 87.698L71.0844 116.057C78.599 123.571 88.8107 127.802 99.4421 127.802C110.074 127.802 120.282 123.571 127.8 116.057L99.4421 87.698H99.4385Z"
-        fill="currentColor"
-      />
-      <path
-        d="M11.8146 115.987C19.3329 123.502 29.541 127.732 40.1724 127.732V87.6289H0.0664062C0.0700559 98.2606 4.29635 108.469 11.8146 115.987Z"
-        fill="currentColor"
-      />
-      <path
-        d="M110.387 45.7684C102.869 38.2535 92.6608 34.0198 82.0258 34.0234C71.3943 34.0234 61.1863 38.2535 53.668 45.772L82.0258 74.1306L110.387 45.7684Z"
+        d="M49.223 22.0428H24.8759V63.0891C24.8759 70.6689 30.7215 75.3844 40.133 75.3844H72.5471V45.3962H49.223V22.0428Z"
         fill="currentColor"
       />
     </svg>
diff --git a/docs/content/docs/integrations/deepagents/quickstart.mdx b/docs/content/docs/integrations/deepagents/quickstart.mdx
@@ -13,34 +13,58 @@ Before you begin, you'll need the following:
 - An OpenAI API key
 - Node.js 20+
 - Your favorite package manager
-- A LangSmith API key - only required if deploying to LangSmith Platform
+- A LangGraph Platform API key - only required if deploying to the Deep Agent platform
 
 ## Getting started
 <Steps>
     <Step>
         ### Initialize your agent project
 
-        If you don't already have a Python project set up, create one using `uv`:
+        <Tabs groupId="agent_language" items={['Python', 'TypeScript']} persist>
+            <Tab value="Python">
+                If you don't already have a Python project set up, create one using `uv`:
 
-        ```bash
-        uv init my-agent
-        cd my-agent
-        ```
+                ```bash
+                uv init my-agent
+                cd my-agent
+                ```
+            </Tab>
+            <Tab value="TypeScript">
+                If you don't already have a Node.js project set up, create one using `npm`:
+
+                ```bash
+                mkdir my-agent
+                cd my-agent
+                npm init -y
+                ```
+            </Tab>
+        </Tabs>
     </Step>
     <Step>
         ### Add necessary dependencies
 
-        Add the `deepagents`, `langchain-openai`, and `copilotkit` packages:
+        <Tabs groupId="agent_language" items={['Python', 'TypeScript']} persist>
+            <Tab value="Python">
+                Add the `deepagents`, `langchain-openai`, and `copilotkit` packages:
 
-        ```bash
-        uv add deepagents copilotkit langchain-openai
-        ```
+                ```bash
+                uv add deepagents copilotkit langchain-openai
+                ```
+            </Tab>
+            <Tab value="TypeScript">
+                Add the `langchain`, `@langchain/langgraph`, `@copilotkit/sdk-js`, and `@langchain/openai` packages:
+
+                ```bash
+                npm install langchain @langchain/langgraph @copilotkit/sdk-js @langchain/openai
+                ```
+            </Tab>
+        </Tabs>
     </Step>
     <Step>
         ### Create your Deep Agent
 
-        <Tabs groupId="deployment_method" items={['LangSmith', 'FastAPI']}>
-            <Tab value="LangSmith">
+        <Tabs groupId="agent_setup" items={['Python', 'TypeScript', 'FastAPI']}>
+            <Tab value="Python">
                 Create a simple Deep Agent:
 
                 ```python title="main.py"
@@ -61,7 +85,7 @@ Before you begin, you'll need the following:
                 )
                 ```
 
-                Then to test and deploy with LangSmith, create a `langgraph.json`:
+                Then to test and deploy with Deep Agent, create a `langgraph.json`:
 
                 ```sh
                 touch langgraph.json
@@ -80,6 +104,47 @@ Before you begin, you'll need the following:
                 }
                 ```
             </Tab>
+            <Tab value="TypeScript">
+                Create a simple Deep Agent:
+
+                ```ts title="agent.ts"
+                import { createAgent } from "langchain";
+                import { copilotkitMiddleware } from "@copilotkit/sdk-js/langgraph";
+
+                function getWeather(location: string): string {
+                    return `The weather in ${location} is sunny.`;
+                }
+
+                export const agent = createAgent({
+                    model: "openai:gpt-4o",
+                    tools: [getWeather],
+                    middleware: [copilotkitMiddleware],
+                    systemPrompt: "You are a helpful research assistant.",
+                });
+                ```
+
+                Then to test and deploy with Deep Agent, create a `langgraph.json`:
+
+                ```sh
+                touch langgraph.json
+                ```
+
+                ```json title="langgraph.json"
+                {
+                    "node_version": "20",
+                    "dependencies": ["."],
+                    "package_manager": "npm",
+                    "graphs": {
+                        "sample_agent": "./agent.ts:agent"
+                    },
+                    "env": ".env"
+                }
+                ```
+
+                <Callout type="info">
+                    When setting up the Copilot Runtime in the next steps, select the **Deep Agent** tab.
+                </Callout>
+            </Tab>
             <Tab value="FastAPI">
                 Add the `ag-ui-langgraph`, `fastapi`, and `uvicorn` packages:
 
@@ -181,8 +246,8 @@ Before you begin, you'll need the following:
         mkdir -p app/api/copilotkit && touch app/api/copilotkit/route.ts
         ```
 
-        <Tabs groupId="deployment_method" items={['LangSmith', 'FastAPI']}>
-            <Tab value="LangSmith">
+        <Tabs groupId="deployment_method" items={['Deep Agent', 'FastAPI']}>
+            <Tab value="Deep Agent">
                 ```tsx title="app/api/copilotkit/route.ts"
                 import {
                     CopilotRuntime,
@@ -309,8 +374,8 @@ Before you begin, you'll need the following:
     <Step>
         ### Start your agent
 
-        <Tabs groupId="deployment_method" items={['LangSmith', 'FastAPI']}>
-            <Tab value="LangSmith">
+        <Tabs groupId="deployment_method" items={['Deep Agent', 'FastAPI']}>
+            <Tab value="Deep Agent">
                 ```bash
                 npx @langchain/langgraph-cli dev --port 8123 --no-browser
                 ```
@@ -353,3 +418,135 @@ Before you begin, you'll need the following:
         </Tabs>
     </Step>
 </Steps>
+
+---
+
+## Alternative: Vite + Direct Connection
+
+This approach eliminates the Next.js API proxy entirely. Instead, you extend your LangGraph deployment with a built-in CopilotKit-compatible endpoint and point your frontend straight at it — no intermediate runtime layer needed.
+
+<Steps>
+    <Step>
+        ### Add the CopilotKit HTTP endpoint to your agent
+
+        Add `ag-ui-langgraph` to your agent's dependencies:
+
+        ```bash
+        uv add ag-ui-langgraph
+        ```
+
+        Then extend `main.py` to expose a CopilotKit-compatible HTTP endpoint alongside the agent:
+
+        ```python title="main.py"
+        from fastapi import FastAPI
+        from deepagents import create_deep_agent
+        from copilotkit import CopilotKitMiddleware, LangGraphAGUIAgent
+        from ag_ui_langgraph import add_langgraph_fastapi_endpoint
+        from langgraph.checkpoint.memory import MemorySaver
+
+        def get_weather(location: str):
+            """Get weather for a location"""
+            return f"The weather in {location} is sunny."
+
+        agent = create_deep_agent(
+            model="openai:gpt-4o",
+            tools=[get_weather],
+            middleware=[CopilotKitMiddleware()],
+            system_prompt="You are a helpful research assistant.",
+            checkpointer=MemorySaver()
+        )
+
+        app = FastAPI()
+
+        add_langgraph_fastapi_endpoint(
+            app=app,
+            agent=LangGraphAGUIAgent(
+                name="sample_agent",
+                description="A helpful research assistant.",
+                graph=agent,
+            ),
+            path="/",
+        )
+        ```
+
+        Update `langgraph.json` to expose the custom HTTP app when running `langgraph dev`:
+
+        ```json title="langgraph.json"
+        {
+            "python_version": "3.12",
+            "dockerfile_lines": [],
+            "dependencies": ["."],
+            "package_manager": "uv",
+            "graphs": {
+                "sample_agent": "./main.py:agent"
+            },
+            "http": {
+                "app": "./main.py:app"
+            },
+            "env": ".env"
+        }
+        ```
+    </Step>
+    <Step>
+        ### Create a Vite frontend
+
+        ```bash
+        npm create vite@latest frontend -- --template react-ts
+        cd frontend
+        npm install @copilotkit/react-ui @copilotkit/react-core
+        ```
+    </Step>
+    <Step>
+        ### Point CopilotKit at your agent
+
+        Create a `.env` file in the frontend directory:
+
+        ```plaintext title=".env"
+        VITE_RUNTIME_URL=http://localhost:8123
+        ```
+
+        Then update `src/App.tsx` to use CopilotKit with the agent URL directly — no API route needed:
+
+        ```tsx title="src/App.tsx"
+        import { CopilotKit } from "@copilotkit/react-core";
+        import { CopilotSidebar } from "@copilotkit/react-core/v2";
+        import "@copilotkit/react-ui/v2/styles.css";
+
+        function App() {
+          return (
+            <CopilotKit
+              runtimeUrl={import.meta.env.VITE_RUNTIME_URL}
+              agent="sample_agent"
+            >
+              <div style={{ height: "100vh" }}>
+                <CopilotSidebar />
+              </div>
+            </CopilotKit>
+          );
+        }
+
+        export default App;
+        ```
+
+        <Callout type="info">
+            For production, set `VITE_RUNTIME_URL` to your deployed LangGraph Platform URL.
+        </Callout>
+    </Step>
+    <Step>
+        ### Start your agent and frontend
+
+        In one terminal, start the agent:
+
+        ```bash
+        npx @langchain/langgraph-cli dev --port 8123 --no-browser
+        ```
+
+        In a second terminal, start the frontend:
+
+        ```bash
+        cd frontend && npm run dev
+        ```
+
+        Your app will be available at `http://localhost:5173` and connects directly to the agent at `http://localhost:8123`.
+    </Step>
+</Steps>
diff --git a/docs/content/docs/integrations/deepagents/shared-state/in-app-agent-read.mdx b/docs/content/docs/integrations/deepagents/shared-state/in-app-agent-read.mdx
@@ -65,6 +65,10 @@ state updates, you can reflect these updates natively in your application.
         ```
       </Tab>
       <Tab value="TypeScript">
+        <Callout type="warn" title="Annotation is the legacy TypeScript API">
+          LangGraph now recommends [`StateSchema`](https://langchain-ai.github.io/langgraphjs/) over `Annotation` for new TypeScript projects. Full `StateSchema` support in `@copilotkit/sdk-js` is tracked in a follow-up issue. The example below uses the current API.
+        </Callout>
+
         ```ts title="agent-js/src/agent.ts"
         import { Annotation } from "@langchain/langgraph";
         import { CopilotKitStateAnnotation } from "@copilotkit/sdk-js/langgraph";
