@alexanderolsen/create-deepagent 0.1.0

package/registry/frameworks/nuxt/server/utils/threads.ts

@@ -0,0 +1,404 @@
+/**
+ * Thread state helpers backed by the graph checkpointer.
+ *
+ * Implements the LangGraph SDK thread state wire-shape consumed by
+ * `client.threads.getState` / `updateState` (`GET|POST /threads/:id/state`) and
+ * `getHistory` (`POST /threads/:id/history`), aligned with the Agent Protocol
+ * thread model.
+ */
+
+import type { MemorySaver } from "@langchain/langgraph";
+import type { CompiledGraphType } from "@langchain/langgraph";
+import type { RunnableConfig } from "@langchain/core/runnables";
+
+import { isRecord, sanitizeForJson } from "./serialize";
+
+/**
+ * Compiled LangGraph instance exposed through the custom protocol server.
+ *
+ * Thread routes read and write checkpointed state through this graph's
+ * checkpointer rather than maintaining a separate thread store.
+ */
+export type LocalProtocolGraph = CompiledGraphType;
+
+type StateSnapshot = Awaited<ReturnType<LocalProtocolGraph["getState"]>>;
+
+/**
+ * Raised when a thread has no checkpoint yet.
+ *
+ * The route handlers map this to HTTP 404 so the LangGraph SDK can bootstrap
+ * the thread via `POST /threads/:id/state` before the first run.
+ */
+export class ThreadNotFoundError extends Error {
+  readonly threadId: string;
+
+  constructor(threadId: string) {
+    super(`Thread ${threadId} not found`);
+    this.name = "ThreadNotFoundError";
+    this.threadId = threadId;
+  }
+}
+
+/**
+ * Graph node used when bootstrapping an empty thread.
+ *
+ * Empty `messages` updates must land on `__start__` so conditional edges are
+ * not evaluated before the first human turn exists.
+ */
+const INITIAL_UPDATE_NODE = "__start__";
+
+/**
+ * Default graph node for non-empty state updates on an existing checkpoint.
+ *
+ * Matches the agent's model node when the client omits `as_node`.
+ */
+const DEFAULT_UPDATE_NODE = "model_request";
+
+/** Build the {@link RunnableConfig} that scopes graph calls to a thread id. */
+function threadConfig(threadId: string): RunnableConfig {
+  return { configurable: { thread_id: threadId } };
+}
+
+/**
+ * Build the config passed to `getStateHistory` for root or subgraph-scoped
+ * history, matching langgraph-api's `{ thread_id, checkpoint_ns: "", ...checkpoint }`.
+ */
+function historyConfig(
+  threadId: string,
+  checkpoint?: Record<string, unknown> | null,
+): RunnableConfig {
+  const configurable: Record<string, unknown> = {
+    thread_id: threadId,
+    checkpoint_ns: "",
+  };
+  if (checkpoint && isRecord(checkpoint)) {
+    Object.assign(configurable, checkpoint);
+  }
+  return { configurable };
+}
+
+/** Read the `configurable` bag from a LangGraph run config. */
+function configurableOf(config: RunnableConfig): Record<string, unknown> {
+  return isRecord(config.configurable) ? config.configurable : {};
+}
+
+/**
+ * Return whether a {@link StateSnapshot} represents a persisted checkpoint.
+ *
+ * LangGraph returns an empty configurable bag before the first write; the SDK
+ * treats that as "thread not found" rather than an empty thread state.
+ */
+function threadHasCheckpoint(snapshot: StateSnapshot): boolean {
+  const checkpointId = configurableOf(snapshot.config).checkpoint_id;
+  return typeof checkpointId === "string" && checkpointId.length > 0;
+}
+
+function isStateSnapshot(state: unknown): state is StateSnapshot {
+  return isRecord(state) && "values" in state && "next" in state;
+}
+
+function serializeTaskError(error: unknown): string | null {
+  if (error == null) return null;
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  return String(error);
+}
+
+/** Map a LangGraph run config to the SDK checkpoint wire shape. */
+function runnableConfigToCheckpoint(
+  config: RunnableConfig | null | undefined,
+  fallbackThreadId?: string,
+): Record<string, unknown> | null {
+  if (!config || !isRecord(config.configurable)) return null;
+  const c = config.configurable;
+  const thread_id =
+    typeof c.thread_id === "string" ? c.thread_id : fallbackThreadId;
+  if (!thread_id || typeof c.checkpoint_id !== "string") return null;
+
+  return {
+    thread_id,
+    checkpoint_id: c.checkpoint_id,
+    checkpoint_ns: typeof c.checkpoint_ns === "string" ? c.checkpoint_ns : "",
+    checkpoint_map: isRecord(c.checkpoint_map) ? c.checkpoint_map : null,
+  };
+}
+
+function taskCheckpointFromState(
+  state: unknown,
+): Record<string, unknown> | null {
+  if (state == null || !isRecord(state) || !isRecord(state.configurable)) {
+    return null;
+  }
+  const c = state.configurable;
+  if (typeof c.thread_id !== "string") return null;
+  return {
+    thread_id: c.thread_id,
+    checkpoint_id: typeof c.checkpoint_id === "string" ? c.checkpoint_id : null,
+    checkpoint_ns: typeof c.checkpoint_ns === "string" ? c.checkpoint_ns : "",
+    checkpoint_map: isRecord(c.checkpoint_map) ? c.checkpoint_map : null,
+  };
+}
+
+/**
+ * Serialize a LangGraph {@link StateSnapshot} to the SDK `ThreadState` shape.
+ *
+ * Aligned with langgraph-api's `stateSnapshotToThreadState`, plus
+ * {@link sanitizeForJson} on `values` and nested task `result` payloads.
+ */
+export function serializeThreadState(
+  snapshot: StateSnapshot,
+  threadId: string,
+): Record<string, unknown> {
+  const configurable = configurableOf(snapshot.config);
+  const checkpoint = runnableConfigToCheckpoint(snapshot.config, threadId) ?? {
+    thread_id: threadId,
+    checkpoint_id:
+      typeof configurable.checkpoint_id === "string"
+        ? configurable.checkpoint_id
+        : null,
+    checkpoint_ns:
+      typeof configurable.checkpoint_ns === "string"
+        ? configurable.checkpoint_ns
+        : "",
+    checkpoint_map: null,
+  };
+
+  const tasks = (snapshot.tasks ?? []).map((task) => {
+    const record = task as {
+      id?: unknown;
+      name?: unknown;
+      error?: unknown;
+      interrupts?: unknown;
+      path?: unknown;
+      result?: unknown;
+      state?: unknown;
+    };
+    return {
+      id: record.id,
+      name: record.name,
+      error: serializeTaskError(record.error),
+      interrupts: Array.isArray(record.interrupts) ? record.interrupts : [],
+      path: record.path ?? null,
+      checkpoint: taskCheckpointFromState(record.state),
+      state:
+        record.state != null && isStateSnapshot(record.state)
+          ? serializeThreadState(record.state, threadId)
+          : null,
+      result: record.result != null ? sanitizeForJson(record.result) : null,
+    };
+  });
+
+  const parentConfig = (snapshot as { parentConfig?: RunnableConfig })
+    .parentConfig;
+
+  return {
+    values: sanitizeForJson(snapshot.values ?? {}),
+    next: [...(snapshot.next ?? [])],
+    tasks,
+    checkpoint,
+    metadata: { ...snapshot.metadata },
+    created_at: snapshot.createdAt ?? null,
+    parent_checkpoint: runnableConfigToCheckpoint(parentConfig, threadId),
+  };
+}
+
+/** Summary of a thread for the history sidebar. */
+export type ThreadSummary = {
+  id: string;
+  title: string;
+  updatedAt: string | null;
+};
+
+const UNTITLED = "New conversation";
+
+/** Derive a sidebar title from the first human message in a thread. */
+function deriveTitle(values: unknown): string {
+  if (!isRecord(values) || !Array.isArray(values.messages)) return UNTITLED;
+  for (const message of values.messages) {
+    if (!isRecord(message) || message.type !== "human") continue;
+    const { content } = message;
+    const text =
+      typeof content === "string"
+        ? content
+        : Array.isArray(content)
+          ? content
+              .map((block) =>
+                isRecord(block) && typeof block.text === "string"
+                  ? block.text
+                  : "",
+              )
+              .join("")
+          : "";
+    const trimmed = text.trim();
+    if (trimmed) return trimmed.slice(0, 80);
+  }
+  return UNTITLED;
+}
+
+/**
+ * List every thread known to the checkpointer, newest first.
+ *
+ * The checkpointer is the single source of truth: thread ids are the top-level
+ * keys of {@link MemorySaver.storage}, and each thread's title/timestamp is
+ * derived from its latest checkpoint. Restarting the server clears all of this.
+ */
+export async function listThreads(
+  graph: LocalProtocolGraph,
+  checkpointer: MemorySaver,
+): Promise<ThreadSummary[]> {
+  const ids = Object.keys(checkpointer.storage);
+  const summaries: ThreadSummary[] = [];
+  for (const id of ids) {
+    try {
+      const state = await getThreadState(graph, id);
+      summaries.push({
+        id,
+        title: deriveTitle(state.values),
+        updatedAt:
+          typeof state.created_at === "string" ? state.created_at : null,
+      });
+    } catch {
+      // Skip threads without a readable checkpoint.
+    }
+  }
+  summaries.sort((a, b) =>
+    (b.updatedAt ?? "").localeCompare(a.updatedAt ?? ""),
+  );
+  return summaries;
+}
+
+/**
+ * Read checkpointed thread state for `GET /threads/:threadId/state`.
+ *
+ * @throws {@link ThreadNotFoundError} When the thread has no checkpoint yet.
+ */
+export async function getThreadState(
+  graph: LocalProtocolGraph,
+  threadId: string,
+): Promise<Record<string, unknown>> {
+  const snapshot = await graph.getState(threadConfig(threadId));
+  if (!threadHasCheckpoint(snapshot)) throw new ThreadNotFoundError(threadId);
+  return serializeThreadState(snapshot, threadId);
+}
+
+/**
+ * Parse the `before` pagination cursor accepted by `POST /threads/:id/history`.
+ */
+function parseBeforeCursor(
+  threadId: string,
+  before: unknown,
+): RunnableConfig | undefined {
+  if (before == null) return undefined;
+  if (typeof before === "string") {
+    return { configurable: { thread_id: threadId, checkpoint_id: before } };
+  }
+  if (!isRecord(before)) return undefined;
+
+  if (isRecord(before.configurable)) {
+    return {
+      configurable: { thread_id: threadId, ...before.configurable },
+    };
+  }
+
+  const checkpointId = before.checkpoint_id;
+  if (typeof checkpointId !== "string") return undefined;
+
+  const cursor: RunnableConfig = {
+    configurable: { thread_id: threadId, checkpoint_id: checkpointId },
+  };
+  if (typeof before.checkpoint_ns === "string") {
+    (cursor.configurable as Record<string, unknown>).checkpoint_ns =
+      before.checkpoint_ns;
+  }
+  return cursor;
+}
+
+/**
+ * List past thread states for `POST /threads/:threadId/history`.
+ *
+ * @throws {@link ThreadNotFoundError} When the thread has no checkpoint yet.
+ */
+export async function getThreadHistory(
+  graph: LocalProtocolGraph,
+  threadId: string,
+  options: {
+    limit?: number;
+    before?: unknown;
+    metadata?: Record<string, unknown>;
+    checkpoint?: Record<string, unknown> | null;
+  } = {},
+): Promise<Record<string, unknown>[]> {
+  await getThreadState(graph, threadId);
+
+  const history: Record<string, unknown>[] = [];
+  const iterator = graph.getStateHistory(
+    historyConfig(threadId, options.checkpoint),
+    {
+      before: parseBeforeCursor(threadId, options.before),
+      limit: options.limit ?? 10,
+      ...(options.metadata ? { filter: options.metadata } : {}),
+    },
+  );
+  for await (const snapshot of iterator) {
+    history.push(serializeThreadState(snapshot, threadId));
+  }
+  return history;
+}
+
+/** Choose which graph node should receive an `updateState` write. */
+function resolveUpdateNode(options: {
+  asNode?: string;
+  values: Record<string, unknown> | null;
+  hasCheckpoint: boolean;
+}): string {
+  if (options.asNode) return options.asNode;
+  const messages = options.values?.messages;
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return INITIAL_UPDATE_NODE;
+  }
+  if (!options.hasCheckpoint) return INITIAL_UPDATE_NODE;
+  return DEFAULT_UPDATE_NODE;
+}
+
+/**
+ * Create or update thread state for `POST /threads/:threadId/state`.
+ *
+ * Used by the browser bootstrap and by the SDK when hydrating or editing
+ * conversation history. Applies the update at {@link resolveUpdateNode}, then
+ * returns the latest serialized snapshot.
+ */
+export async function updateThreadState(
+  graph: LocalProtocolGraph,
+  threadId: string,
+  options: {
+    values?: Record<string, unknown> | null;
+    checkpoint?: Record<string, unknown> | null;
+    asNode?: string;
+  } = {},
+): Promise<Record<string, unknown>> {
+  let config = threadConfig(threadId);
+  const checkpoint = options.checkpoint;
+  if (checkpoint && typeof checkpoint.checkpoint_id === "string") {
+    config = {
+      configurable: {
+        ...configurableOf(config),
+        checkpoint_id: checkpoint.checkpoint_id,
+        ...(typeof checkpoint.checkpoint_ns === "string"
+          ? { checkpoint_ns: checkpoint.checkpoint_ns }
+          : {}),
+      },
+    };
+  }
+
+  const snapshot = await graph.getState(config);
+  const resolvedValues = options.values ?? { messages: [] };
+  const resolvedAsNode = resolveUpdateNode({
+    asNode: options.asNode,
+    values: resolvedValues,
+    hasCheckpoint: threadHasCheckpoint(snapshot),
+  });
+
+  await graph.updateState(config, resolvedValues, resolvedAsNode);
+  const updated = await graph.getState(threadConfig(threadId));
+  return serializeThreadState(updated, threadId);
+}

package/registry/frameworks/nuxt/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

package/registry/frameworks/nuxt.ts

@@ -0,0 +1,17 @@
+import { createFramework } from "../../src/registry/framework.js";
+
+export const nuxt = createFramework({
+  id: "nuxt",
+  title: "Nuxt",
+  defaultProjectName: "nuxt-deepagents",
+  address: {
+    scheme: "github",
+    owner: "aolsenjazz",
+    repo: "deployment-cookbook",
+    subPath: "js-nuxt",
+  },
+  envFilePath: ".env",
+  packageJsonPath: "package.json",
+  agentPath: "server/agent",
+  files: [],
+});

package/registry/frameworks/vite/.env.example

@@ -0,0 +1,20 @@
+# Required: OpenAI API key used by the agent and its subagents (server-side only).
+OPENAI_API_KEY=sk-...
+
+# LangSmith API key — used for deploy (langgraph deploy / langgraph dev) AND, when
+# talking to a remote deployment, by the browser client. Vite exposes it to the
+# client via `envPrefix` (see vite.config.ts), so there's only one key to manage.
+LANGSMITH_API_KEY=lsv2-...
+
+# Optional: name for the deployment (defaults to the directory name).
+# LANGSMITH_DEPLOYMENT_NAME=deployment-cookbook-agent
+
+# Optional: enable LangSmith tracing.
+# LANGSMITH_TRACING=true
+
+# --- Client (Vite) ---
+
+# LangSmith deployment root URL (no path suffix).
+# Local dev: leave unset — Vite proxies /api/langgraph → http://localhost:2025.
+# Production: https://your-app.us.langgraph.app
+VITE_AGENT_API_URL=

package/registry/frameworks/vite/README.md

@@ -0,0 +1,149 @@
+# Deploying a LangChain Agent with LangSmith + Vite
+
+A self-contained Vite + React chat demo with a LangChain **deep agent** backend deployed to [LangSmith Deployment](https://docs.langchain.com/langsmith/deployment). The agent graph lives in `agent/` and is served by the LangGraph Agent Server; the UI in `src/` provides streaming chat, thread history, and subagent/tool-call rendering.
+
+One package — `pnpm install`, `pnpm dev` starts LangGraph and Vite together.
+
+The frontend talks to LangSmith's built-in [Agent Server](https://docs.langchain.com/langsmith/agent-server) API (`/threads`, `/runs`, …) through `@langchain/react`'s `StreamProvider` and the LangGraph SDK.
+
+> [!NOTE]
+> **Two ways to ship this agent on LangSmith.** This example uses a **LangSmith Deployment**: you define the agent graph in code (`agent/`), deploy it to the LangGraph Agent Server, and the server exposes the `/threads` + `/runs` API your frontend streams from. For a **fully-managed** alternative — where LangChain hosts the agent and you deploy a declarative project (`agent.json` + `AGENTS.md` + subagents) instead of a graph — see [`../js-langsmith-managed`](../js-langsmith-managed).
+>
+> | Use this example (LangSmith Deployment) when…           | Use [`js-langsmith-managed`](../js-langsmith-managed) (Managed Deep Agent) when… |
+> | ------------------------------------------------------- | -------------------------------------------------------------------------------- |
+> | You want full control over the graph, runtime, and middleware. | You want the least infrastructure — LangChain runs the agent for you.    |
+> | You ship custom code tools and bespoke graph logic.     | Your tools are MCP servers and behavior fits instructions + skills + subagents.  |
+> | You're already on LangGraph and want the standard Agent Server API. | You're in the Managed Deep Agents private preview and want a hosted agent fast. |
+
+## Architecture
+
+```mermaid
+flowchart TB
+  subgraph vercel["Vercel (Vite build)"]
+    SPA["React SPA"]
+    SP["StreamProvider + useStreamContext"]
+    SPA --- SP
+  end
+
+  subgraph langsmith["LangSmith Deployment (agent/)"]
+    LG["Agent Server /threads /runs"]
+    AGT["createDeepAgent graph"]
+    LG --> AGT
+  end
+
+  SP -->|"LangGraph SDK"| LG
+```
+
+| Piece            | Location | Deploy target                   |
+| ---------------- | -------- | ------------------------------- |
+| Deep agent graph | `agent/` | LangSmith (`pnpm deploy`)       |
+| Chat UI          | `src/`   | Vercel (`pnpm build` → `dist/`) |
+
+## Deploy the agent to LangSmith
+
+```bash
+cd js-langsmith
+cp .env.example .env   # set OPENAI_API_KEY and LANGSMITH_API_KEY
+pnpm install
+pnpm run deploy
+```
+
+This runs [`langgraphjs deploy`](https://docs.langchain.com/langsmith/cli#deploy). Set `LANGSMITH_DEPLOYMENT_NAME` in `.env` to control the deployment name (defaults to the directory name).
+
+Copy the deployment **API URL** from the LangSmith UI (e.g. `https://your-app.us.langgraph.app`).
+
+LangSmith Deployment provides durable checkpoint storage in production. The in-memory `MemorySaver` in `agent/index.ts` is only used for local `langgraph dev`.
+
+## Deploy the frontend to Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flangchain-ai%2Fdeployment-cookbook&root-directory=js-langsmith&env=VITE_AGENT_API_URL,LANGSMITH_API_KEY&envDescription=LangSmith%20deployment%20URL%20and%20API%20key)
+
+1. Connect the repo in Vercel with **Root Directory** `js-langsmith`.
+2. Vercel auto-detects Vite — build output is `dist/`.
+3. Set environment variables:
+   - `VITE_AGENT_API_URL` — LangSmith deployment root URL, e.g. `https://your-app.us.langgraph.app`
+   - `LANGSMITH_API_KEY` — LangSmith API key (exposed to the build via `envPrefix`; preferably proxy through a backend instead)
+
+## CI/CD
+
+The agent deploys via GitHub Actions on pushes to `js-langsmith/agent/` (and root config files):
+
+| Workflow                                                                                          | Triggers on                 | Action                            |
+| ------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------------- |
+| [`.github/workflows/deploy-langsmith-agent.yml`](../.github/workflows/deploy-langsmith-agent.yml) | Agent + root config changes | `langgraphjs deploy` to LangSmith |
+
+| Name                                            | Description                              |
+| ----------------------------------------------- | ---------------------------------------- |
+| `LANGSMITH_API_KEY`                             | LangSmith API key with deployment access |
+| `LANGSMITH_DEPLOYMENT_NAME` (optional variable) | Deployment name override                 |
+
+The frontend deploys through Vercel's Git integration.
+
+## Agent Server API
+
+| SDK call                                  | Purpose                               |
+| ----------------------------------------- | ------------------------------------- |
+| `client.threads.search()`                 | Thread sidebar                        |
+| `client.threads.create()` / `delete()`    | New / delete conversation             |
+| `StreamProvider` + `assistantId: "agent"` | Streaming chat, subagents, tool calls |
+
+See the [Agent Server API reference](https://docs.langchain.com/langsmith/server-api-ref).
+
+## Local development
+
+```bash
+cd js-langsmith
+cp .env.example .env   # OPENAI_API_KEY (+ LANGSMITH_API_KEY for deploy)
+pnpm install
+pnpm dev
+```
+
+`pnpm dev` starts both:
+
+- **LangGraph dev server** on [http://localhost:2025](http://localhost:2025)
+- **Vite** on [http://localhost:5173](http://localhost:5173)
+
+Open the Vite URL for the UI. Leave `VITE_AGENT_API_URL` unset — the client uses the Vite dev proxy at `/api/langgraph` (forwards to LangGraph on port 2025, avoiding CORS).
+
+Individual processes:
+
+```bash
+pnpm dev:agent   # LangGraph only
+pnpm dev:web     # Vite only
+```
+
+To test against a remote LangSmith deployment, point the client at it in `.env`
+(it reuses the same `LANGSMITH_API_KEY` you deploy with — Vite exposes `LANGSMITH_`
+vars to the client via `envPrefix`):
+
+```bash
+VITE_AGENT_API_URL=https://your-app.us.langgraph.app
+# LANGSMITH_API_KEY is already set above and is reused by the client.
+```
+
+> [!WARNING]
+> **API key in the browser.** Exposing `LANGSMITH_API_KEY` to the client ships your key in the built bundle — fine for a local demo, not for production. In a real app, proxy requests through your own backend with a custom `fetch` and never expose the key.
+
+## Project layout
+
+```
+js-langsmith/
+├── package.json
+├── langgraph.json
+├── vite.config.ts
+├── index.html
+├── tsconfig.json          # project references
+├── tsconfig.app.json      # src/ (React)
+├── tsconfig.node.json     # vite.config.ts + agent/
+├── agent/                 # deep agent graph (LangSmith backend)
+├── src/                   # Vite + React SPA
+└── .env.example
+```
+
+## References
+
+- [`js-langsmith-managed`](../js-langsmith-managed) — the same agent deployed as a fully-managed Managed Deep Agent
+- [LangSmith Deployment](https://docs.langchain.com/langsmith/deployment)
+- [LangGraph CLI](https://docs.langchain.com/langsmith/cli)
+- [Deep Agents going to production](https://docs.langchain.com/oss/javascript/deepagents/going-to-production)
+- [Agent Server API reference](https://docs.langchain.com/langsmith/server-api-ref)

package/registry/frameworks/vite/agent/index.ts

@@ -0,0 +1,59 @@
+import { MemorySaver } from "@langchain/langgraph";
+import { ChatOpenAI } from "@langchain/openai";
+import { createDeepAgent } from "deepagents";
+
+import { stripReasoningReplay } from "./middleware.js";
+import { calculator, searchWeb } from "./tools.js";
+
+const coordinatorModel = new ChatOpenAI({
+  model: "gpt-5.4-mini",
+  reasoning: { effort: "low", summary: "auto" },
+});
+
+const subagentModel = new ChatOpenAI({ model: "gpt-5.4-mini" });
+
+/**
+ * In-memory checkpointer for local `langgraph dev`.
+ *
+ * LangSmith Deployment replaces this with durable Postgres-backed storage
+ * in production — no code changes required.
+ */
+export const checkpointer = new MemorySaver();
+
+export const agent = createDeepAgent({
+  model: coordinatorModel,
+  middleware: [stripReasoningReplay],
+  checkpointer,
+  subagents: [
+    {
+      name: "researcher",
+      description:
+        "Researches a topic using the search_web tool and reports concise findings.",
+      tools: [searchWeb],
+      model: subagentModel,
+      systemPrompt:
+        "You are the researcher subagent. Use the search_web tool to look up " +
+        "the requested topic, then summarize the findings in two or three " +
+        "sentences. Always call search_web at least once before answering.",
+    },
+    {
+      name: "math-whiz",
+      description:
+        "Performs calculations using the calculator tool and explains the result.",
+      tools: [calculator],
+      model: subagentModel,
+      systemPrompt:
+        "You are the math-whiz subagent. Use the calculator tool to evaluate " +
+        "the requested expression, then state the result clearly. Always call " +
+        "the calculator tool before answering.",
+    },
+  ],
+  systemPrompt:
+    "You are a helpful coordinator. When a request involves looking something " +
+    "up, delegate it to the `researcher` subagent. When it involves math, " +
+    "delegate it to the `math-whiz` subagent. You may run both subagents for a " +
+    "single request. After the subagents respond, combine their results into a " +
+    "short, clearly labeled final answer.",
+});
+
+export type Agent = typeof agent;

package/registry/frameworks/vite/agent/middleware.ts

@@ -0,0 +1,24 @@
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+import { createMiddleware } from "langchain";
+
+/**
+ * Rebuild prior assistant messages so the Responses API doesn't replay stale
+ * item ids.
+ */
+function sanitizeForReplay(message: BaseMessage): BaseMessage {
+  if (!AIMessage.isInstance(message)) return message;
+
+  return new AIMessage({
+    id: message.id,
+    content: message.content,
+    tool_calls: message.tool_calls,
+    invalid_tool_calls: message.invalid_tool_calls,
+    usage_metadata: message.usage_metadata,
+  });
+}
+
+export const stripReasoningReplay = createMiddleware({
+  name: "StripReasoningReplay",
+  wrapModelCall: async (request, handler) =>
+    handler({ ...request, messages: request.messages.map(sanitizeForReplay) }),
+});