LangSmith Platform

Deploy your LangGraph agent to the LangSmith Platform and connect it to CopilotKit.

CopilotKit + LangSmith Platform

LangSmith Deployment gives your LangGraph and Google ADK agents a managed runtime (serverless by default) — handling scaling, persistence, and the LangGraph Server API. CopilotKit gives those agents a production-ready frontend.

How it works

The two connect through CopilotKit Runtime, a lightweight server-side layer that sits between your browser and your LangSmith deployment. It's the same runtime you'd use with any CopilotKit-powered agent — it just needs to run server-side so your LANGSMITH_API_KEY never reaches the browser.

Browser → CopilotKit Runtime → LangSmith deployment → your agent

LangSmith hosts the agent only; there's no frontend-hosting offering. You host the CopilotKit frontend and runtime wherever you already deploy your app (Vercel, your own Node server, etc.) and point the runtime at the LangSmith deployment URL.

What you get

Chat UI — prebuilt chat interface, or headless hooks to build your own
Shared state — bidirectional sync between agent state and your React UI
Generative UI — render custom components from tool calls in real time
Human-in-the-loop — let users review, approve, or redirect agent actions
Managed persistence — thread history and checkpoints live in the LangSmith deployment

Quickstart

LangSmith authority

These steps reproduce the LangSmith deploy flow inline so you can finish here. For the canonical reference — pricing, deployment types, and self-hosting — see the LangSmith deployment docs.

Prerequisites

You need a LangSmith account on the Plus plan or above and a LangSmith API key (lsv2_...). Deploying uses the LangGraph CLI; Docker is optional (only needed for local container builds). Google ADK additionally needs Python 3.11+, the deployments-wrap-sdk[google-adk] package, and a Google AI API key if you use Gemini models.

Deployment models

This guide uses LangSmith Cloud via the CLI — serverless by default, or --deployment-type dedicated for a dedicated deployment. LangSmith also supports self-hosted control plane, hybrid, and standalone-server models; see the deployment overview to pick one. The CopilotKit wiring below is the same regardless of which model you deploy to.

Install the LangGraph CLI

The CLI scaffolds a deployable project and pushes it to LangSmith:

uv tool install langgraph-cli

Create your deployable app

A LangSmith deployment is any project that exports a graph via langgraph.json.

Scaffold a new project from the official template:

langgraph new ./my-agent --template new-langgraph-project-python

The template ships a langgraph.json that already exports a graph:

{
  "$schema": "https://langgra.ph/schema.json",
  "dependencies": ["."],
  "graphs": {
    "agent": "./src/agent/graph.py:graph"
  },
  "env": ".env"
}

The graphs key (agent here) is the graph ID you'll point CopilotKit at later.

ADK agents don't deploy to LangSmith natively — you wrap the ADK Runner so it exports a LangGraph-compatible graph, then deploy it exactly like a LangGraph app.

Install the wrapper SDK (published as deployments-wrap-sdk, imported as saf_sdk):

pip install "deployments-wrap-sdk[google-adk]"

Wrap your ADK Runner with wrap() and a LangsmithSessionService, then export the result as a module-level agent:

from google.adk.agents import Agent
from google.adk.runners import Runner
from saf_sdk.adk import LangsmithSessionService, wrap

agent = wrap(
    Runner(
        agent=Agent(
            name="my_agent",
            model="gemini-2.5-flash",
            instruction="You are a helpful assistant.",
        ),
        app_name="my_adk_agent",
        session_service=LangsmithSessionService(),
    )
)

The Runner.session_service must be a LangsmithSessionService. ADK's other session services (InMemorySessionService, DatabaseSessionService, VertexAiSessionService) are rejected — session state lives in the LangGraph checkpoint.

Point langgraph.json at the exported symbol:

{
  "$schema": "https://langgra.ph/schema.json",
  "dependencies": ["."],
  "graphs": {
    "my_agent": "./agent.py:agent"
  },
  "env": ".env"
}

The graphs key (my_agent here) is the graph ID you'll point CopilotKit at later. See the Deploy Google ADK agents guide for the full walkthrough.

ADK wrapper limitations

The wrapper adapts ADK onto the LangGraph Server, so some ADK and CopilotKit features don't carry over. Per LangChain's ADK guide:

No multimodal input — only messages[-1].content is forwarded as a single text part; inbound images, files, or audio are dropped.
Last message only — just the final item in messages is sent to the ADK agent each turn.
No live / audio / voice — ADK's run_live() bidirectional streaming isn't used.
Text output only — non-text output parts (images, audio, files) aren't surfaced.
No intermediate events — tool calls, tool results, and sub-agent turns aren't emitted as separate messages.
LangsmithSessionService required — other ADK session services are rejected.
No LangGraph interrupts — interrupt / Command(resume=...) aren't exposed, so human-in-the-loop that relies on native interrupts won't work with a wrapped ADK agent.

Add your API key

Add your LangSmith API key to the project's .env. The deploy command reads it automatically:

LANGSMITH_API_KEY=lsv2_...

Deploy

Verify locally first

Before deploying, run langgraph dev from the project root to serve the graph locally and confirm it starts. This catches import errors, a bad graph export, or (for ADK) a missing LangsmithSessionService or model credentials with clearer feedback than a remote build.

From the project root:

langgraph deploy --name my-agent

This creates a serverless deployment by default. Useful flags and follow-ups:

--deployment-type dedicated — provision a dedicated (non-serverless) deployment
--name <name> — set the deployment name (re-running langgraph deploy with the same name updates the existing deployment in place)
langgraph deploy list — list your deployments
langgraph deploy logs — tail runtime logs
langgraph deploy delete <id> — remove a deployment

Get your deployment API URL

Where to find the URL

In the LangSmith UI, open Deployments in the sidebar, select your deployment, and copy the API URL from the details view. It looks like https://<deployment-id>.<region>.langgraph.app.

Install CopilotKit

In your frontend app:

npm install @copilotkit/react-core @copilotkit/runtime

Set up CopilotKit Runtime

CopilotKit Runtime is the server-side layer that connects your frontend to the LangSmith deployment. Create an API route:

import {
  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { LangGraphAgent } from "@copilotkit/runtime/langgraph";
import { NextRequest } from "next/server";

const runtime = new CopilotRuntime({
  agents: {
    my_agent: new LangGraphAgent({
      deploymentUrl: process.env.LANGGRAPH_DEPLOYMENT_URL!, // your LangSmith API URL
      graphId: "agent", // must match a key in your langgraph.json "graphs"
      langsmithApiKey: process.env.LANGSMITH_API_KEY!,
    }),
  },
});

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter: new ExperimentalEmptyAdapter(),
    endpoint: "/api/copilotkit",
  });
  return handleRequest(req);
};

graphId must match langgraph.json

graphId is the key from the graphs object in your langgraph.json — agent for the LangGraph template, or whatever you named the ADK graph (e.g. my_agent). If it doesn't match, the runtime can't find your graph.

Add the CopilotKit provider

import { CopilotKit } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}

🎉 Run it

Point your app at the deployment and start it. Create .env.local:

LANGGRAPH_DEPLOYMENT_URL=https://<deployment-id>.<region>.langgraph.app
LANGSMITH_API_KEY=lsv2_...

Then:

npm run dev

Add a <CopilotSidebar /> to any page and open localhost:3000. The frontend runs wherever you host it while the agent stays on LangSmith — the /api/copilotkit route forwards each call to your deployment using your API key.

Troubleshooting

The runtime can't find my graph / 404 on invoke

Your graphId must exactly match a key in the graphs object of your deployment's langgraph.json. The LangGraph template names it agent; an ADK app uses whatever key you set (e.g. my_agent). Check the deployment's config in the LangSmith UI if unsure.

401 / authentication errors from the deployment

Confirm LANGSMITH_API_KEY is set on the server (where CopilotKit Runtime runs), not the browser, and that the key belongs to the same LangSmith workspace as the deployment. The key must start with lsv2_.

langgraph deploy fails or hangs

Ensure your LangSmith account is on the Plus plan or above and that LANGSMITH_API_KEY is present in .env. For local container builds, Docker (with the daemon running) is required — on Apple Silicon you also need Docker Buildx.

My ADK agent won't deploy

ADK agents must be wrapped with wrap() from saf_sdk.adk and use a LangsmithSessionService. The wrapped object has to be exported as a module-level variable that langgraph.json points at (e.g. ./agent.py:agent). See the Deploy Google ADK agents guide.

LangSmith Platform

CopilotKit + LangSmith Platform

How it works

What you get

Quickstart

Install the LangGraph CLI

Create your deployable app

Add your API key

Deploy

Get your deployment API URL

Install CopilotKit

Set up CopilotKit Runtime

Add the CopilotKit provider

🎉 Run it

Troubleshooting

What's next?

Generative UI

Shared State

Install the LangGraph CLI

Create your deployable app

Add your API key

Deploy

Get your deployment API URL

Install CopilotKit

Set up CopilotKit Runtime

Add the CopilotKit provider

🎉 Run it