Skip to main content
The following page details an example app that deploys a LangChain deep agent entirely inside a Next.js App Router project: streaming chat UI, subagents, and thread history, all backed by the Agent Streaming Protocol implemented as Next.js Route Handlers (HTTP + SSE). No separate backend process. Source: js-next in the deployment cookbook.

​
Deploy to Vercel

1

Import the repository

Click Deploy with Vercel below, or import langchain-ai/deployment-cookbook manually.Deploy with Vercel
2

Configure the project

Set Root Directory to js-next and add OPENAI_API_KEY in project settings.
3

Deploy

Deploy the project. Route handlers already set runtime = "nodejs" and the SSE route sets dynamic = "force-dynamic", which Vercel needs for streaming.
Optionally enable LangSmith tracing by adding the variables from .env.example.

​
Required API endpoints

The app exposes the Agent Streaming Protocol under /api/threads/.... Route handlers live in app/api/threads/.

​
Minimum (streaming chat)

These three endpoints are enough to run a single-threaded streaming chat with @langchain/react’s HttpAgentServerAdapter:
MethodPathPurpose
POST/api/threads/:threadId/commandsAccept protocol commands (run.start, …) and start agent runs
POST/api/threads/:threadId/streamSSE stream of protocol events for a run
GET / POST/api/threads/:threadId/stateRead and bootstrap checkpointed thread state
The client bootstraps a thread with GET /state (and POST /state on 404) so hydration does not 404 before the first message is sent.

​
Optional (thread sidebar)

This example also implements endpoints for the thread-history sidebar. Omit them if your UI does not need multi-thread management:
MethodPathPurpose
GET/api/threadsList threads known to the checkpointer
DELETE/api/threads/:threadIdDelete a thread’s session and checkpoints
POST/api/threads/:threadId/historyPaginated checkpoint history (Agent Protocol)

​
Request flow

  1. Bootstrap thread state (GET/POST /state).
  2. On submit, the SDK sends run.start to /commands and receives a run_id.
  3. The SDK subscribes to /stream (SSE) for replay + live protocol events.
  4. Subagent (task) runs emit namespaced events surfaced as stream.subagents.

​
Production persistence

Out of the box, the agent uses an in-memory MemorySaver checkpointer (lib/agent/index.ts) and a process-local session map (lib/server/registry.ts). That works for local dev and single-instance servers, but on Vercel (serverless, multiple replicas) conversation state is not durable across cold starts or instances. For production, swap in a durable checkpointer:
PackageBackend
@langchain/langgraph-checkpoint-redisRedis (RedisSaver)
@langchain/langgraph-checkpoint-postgresPostgres (PostgresSaver)
@langchain/langgraph-checkpoint-sqliteSQLite (SqliteSaver)
Replace MemorySaver in lib/agent/index.ts and pass the new checkpointer to createDeepAgent. The route handlers and lib/server/threads.ts helpers stay the same.

​
Redis on Vercel

A common choice for Vercel is Redis via the Marketplace (for example Upstash Redis). Install the integration on your Vercel project; credentials are injected as environment variables automatically. Then wire @langchain/langgraph-checkpoint-redis: 
import { RedisSaver } from "@langchain/langgraph-checkpoint-redis";

const checkpointer = await RedisSaver.fromUrl(process.env.REDIS_URL!);
Use the connection string your Redis provider exposes (Upstash provides both REST and Redis-protocol URLs; the checkpointer needs the Redis URL). You will also want a shared session/replay store in lib/server/registry.ts so SSE reconnection works across serverless invocations. The checkpointer swap is the main step for durable thread history; the session store is a separate concern for live-run replay. For more information, see checkpointer libraries and add memory / persistence.

​
Local development

cp .env.example .env.local   # set OPENAI_API_KEY
pnpm install
pnpm dev
Open http://localhost:3000. 
pnpm build   # production build
pnpm start   # serve the production build
pnpm lint    # eslint

​
Project layout

  • lib/agent/: deep agent (createDeepAgent) with researcher and math-whiz subagents and mock tools. Marked server-only.
  • lib/server/: protocol server logic: session.ts (SSE runs), threads.ts (checkpointer-backed state), serialize.ts, registry.ts.
  • app/api/threads/: Route Handlers for the protocol endpoints above.
  • lib/chat/threads-client.ts: browser thread bootstrap and sidebar helpers.
  • components/: chat UI (ChatApp, Chat, MessageList, Subagents, ThreadHistory, …).

​
See also

Connect these docs to Claude, VSCode, and more via MCP for real-time answers.
Edit this page on GitHub or file an issue.