@alexanderolsen/create-deepagent 0.1.0

package/registry/frameworks/nuxt/app/components/SubagentList.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import type { SubagentDiscoverySnapshot } from "@langchain/vue";
+
+export type SubagentStatus = SubagentDiscoverySnapshot["status"];
+
+/** Lightweight model for a subagent card, derived from a `task` tool call. */
+export type SubagentCard = {
+  /** The `task` tool-call id — also the subagent discovery key. */
+  id: string;
+  name: string;
+  task?: string;
+  status: SubagentStatus;
+  /** Whether a discovery snapshot exists yet (i.e. the card can be opened). */
+  openable: boolean;
+};
+</script>
+
+<script setup lang="ts">
+defineProps<{ cards: SubagentCard[] }>();
+
+const emit = defineEmits<{ open: [id: string] }>();
+
+function statusLabel(status: SubagentStatus) {
+  if (status === "running") return "Running";
+  if (status === "complete") return "Complete";
+  return "Error";
+}
+</script>
+
+<template>
+  <div v-if="cards.length > 0" aria-label="Subagents" class="subagent-list">
+    <button
+      v-for="card in cards"
+      :key="card.id"
+      :disabled="!card.openable"
+      class="subagent-chip"
+      type="button"
+      @click="card.openable && emit('open', card.id)"
+    >
+      <span class="subagent-chip-head">
+        <span class="subagent-chip-name">{{ card.name }}</span>
+        <span :class="['subagent-status', `status-${card.status}`]">
+          {{ statusLabel(card.status) }}
+        </span>
+      </span>
+      <span v-if="card.task" class="subagent-chip-task">{{ card.task }}</span>
+    </button>
+  </div>
+</template>

package/registry/frameworks/nuxt/app/components/ThemeToggle.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useTheme } from "~/composables/useTheme";
+
+const { theme, toggle } = useTheme();
+</script>
+
+<template>
+  <button
+    :aria-label="
+      theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'
+    "
+    class="theme-toggle"
+    type="button"
+    @click="toggle"
+  >
+    <svg
+      v-if="theme === 'dark'"
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-width="1.5"
+      viewBox="0 0 24 24"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path
+        d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+      />
+    </svg>
+    <svg
+      v-else
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      viewBox="0 0 24 24"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  </button>
+</template>

package/registry/frameworks/nuxt/app/components/ThreadHistory.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { ThreadSummary } from "~/utils/threads";
+
+defineProps<{
+  threads: ThreadSummary[];
+  activeThreadId: string;
+}>();
+
+const emit = defineEmits<{
+  select: [threadId: string];
+  create: [];
+  delete: [threadId: string];
+}>();
+
+function formatTime(updatedAt: string | null) {
+  if (!updatedAt) return "";
+  const date = new Date(updatedAt);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+</script>
+
+<template>
+  <aside aria-label="Thread history" class="sidebar">
+    <div class="sidebar-head">
+      <span class="eyebrow">History</span>
+      <button class="new-thread" type="button" @click="emit('create')">
+        + New
+      </button>
+    </div>
+
+    <ul class="thread-list">
+      <li v-if="threads.length === 0" class="thread-empty">
+        No conversations yet.
+      </li>
+      <li
+        v-for="thread in threads"
+        :key="thread.id"
+        :class="['thread-item', { active: thread.id === activeThreadId }]"
+      >
+        <button
+          class="thread-open"
+          type="button"
+          @click="emit('select', thread.id)"
+        >
+          <span class="thread-title">{{ thread.title }}</span>
+          <span class="thread-time">{{ formatTime(thread.updatedAt) }}</span>
+        </button>
+        <button
+          aria-label="Delete conversation"
+          class="thread-delete"
+          type="button"
+          @click="emit('delete', thread.id)"
+        >
+          ×
+        </button>
+      </li>
+    </ul>
+  </aside>
+</template>

package/registry/frameworks/nuxt/app/components/ToolCall.vue

@@ -0,0 +1,81 @@
+<script lang="ts">
+export type ToolCallStatus = "running" | "complete" | "error";
+
+export type ToolCallView = {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  output?: string;
+  status: ToolCallStatus;
+};
+</script>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineProps<{ call: ToolCallView }>();
+
+const open = ref(false);
+
+function stringifyArgs(args: Record<string, unknown>) {
+  try {
+    return JSON.stringify(args, null, 2);
+  } catch {
+    return String(args);
+  }
+}
+
+function statusLabel(status: ToolCallStatus) {
+  if (status === "running") return "Running";
+  if (status === "error") return "Error";
+  return "Done";
+}
+</script>
+
+<template>
+  <div :class="['toolcall', `status-${call.status}`]">
+    <button
+      :aria-expanded="open"
+      class="toolcall-head"
+      type="button"
+      @click="open = !open"
+    >
+      <span class="toolcall-icon">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.6"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 1 5.4-5.4l-2.7 2.7-1.4-1.4 2.7-2.7a4 4 0 0 0-1.6.4z"
+          />
+        </svg>
+      </span>
+      <span class="toolcall-name">{{ call.name }}</span>
+      <span :class="['subagent-status', `status-${call.status}`]">
+        {{ statusLabel(call.status) }}
+      </span>
+      <span aria-hidden="true" class="toolcall-chevron">{{
+        open ? "▾" : "▸"
+      }}</span>
+    </button>
+
+    <div v-if="open" class="toolcall-body">
+      <div class="toolcall-section">
+        <span>Input</span>
+        <pre>{{ stringifyArgs(call.args) }}</pre>
+      </div>
+      <div
+        v-if="call.output != null && call.output !== ''"
+        class="toolcall-section"
+      >
+        <span>Output</span>
+        <pre>{{ call.output }}</pre>
+      </div>
+    </div>
+  </div>
+</template>

package/registry/frameworks/nuxt/app/components/TypingDots.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ variant?: "block" | "inline" }>();
+</script>
+
+<template>
+  <span
+    aria-hidden
+    :class="variant === 'inline' ? 'inline-dots' : 'typing-dots'"
+  >
+    <span />
+    <span />
+    <span />
+  </span>
+</template>

package/registry/frameworks/nuxt/app/composables/useTheme.ts

@@ -0,0 +1,14 @@
+import { ref } from "vue";
+
+export type Theme = "dark" | "light";
+
+// Module-scoped so the toggle and the chat shell share one source of truth
+// across remounts (e.g. when starting a new thread).
+const theme = ref<Theme>("dark");
+
+export function useTheme() {
+  function toggle() {
+    theme.value = theme.value === "dark" ? "light" : "dark";
+  }
+  return { theme, toggle };
+}

package/registry/frameworks/nuxt/app/utils/streaming.ts

@@ -0,0 +1,44 @@
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+
+/**
+ * Extract reasoning-summary text from a message.
+ *
+ * Reasoning models surface their summaries as `{ type: "reasoning" }` standard
+ * content blocks (see `@langchain/openai`'s Responses API converter). Only AI
+ * messages carry reasoning; everything else returns an empty string.
+ */
+export function getReasoningText(message: BaseMessage): string {
+  if (!AIMessage.isInstance(message)) return "";
+  try {
+    return message.contentBlocks
+      .filter(
+        (block): block is { type: "reasoning"; reasoning: string } =>
+          block?.type === "reasoning",
+      )
+      .map((block) => block.reasoning)
+      .join("")
+      .trim();
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Whether to show the "assistant is thinking" indicator.
+ *
+ * Mirrors the reference example: show it while a run is loading and the latest
+ * message is a human turn, a tool result, or an assistant turn that has not
+ * produced any text yet.
+ */
+export function shouldShowTypingIndicator(
+  messages: BaseMessage[],
+  isLoading: boolean,
+): boolean {
+  if (!isLoading) return false;
+
+  const last = messages.at(-1);
+  if (!last) return true;
+  if (last.type === "human" || last.type === "tool") return true;
+  if (last.type === "ai" && !last.text?.trim()) return true;
+  return false;
+}

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

@@ -0,0 +1,57 @@
+/**
+ * Browser-side thread helpers.
+ *
+ * The server (the agent's in-memory `MemorySaver` checkpointer) is the single
+ * source of truth for threads. There is no client-side cache: the sidebar is
+ * always fetched from the API, and restarting the server clears every thread.
+ */
+
+import { Client } from "@langchain/langgraph-sdk/client";
+
+/** LangGraph SDK base URL. Nitro serves the protocol routes under `/api`. */
+export function getApiUrl(): string {
+  return `${window.location.origin}/api`;
+}
+
+/** Summary of a thread for the history sidebar (mirrors the server type). */
+export type ThreadSummary = {
+  id: string;
+  title: string;
+  updatedAt: string | null;
+};
+
+/** Fetch every thread from the server, newest first. */
+export async function fetchThreads(): Promise<ThreadSummary[]> {
+  const response = await fetch(`${getApiUrl()}/threads`, { cache: "no-store" });
+  if (!response.ok) return [];
+  return (await response.json()) as ThreadSummary[];
+}
+
+/**
+ * Create the thread row server-side so hydration does not 404.
+ *
+ * Calls `GET /threads/:id/state` and, on 404, bootstraps with
+ * `POST /threads/:id/state` and empty `messages`.
+ */
+async function ensureThreadExists(threadId: string) {
+  const client = new Client({ apiUrl: getApiUrl() });
+  try {
+    await client.threads.getState(threadId);
+  } catch (error) {
+    const status = (error as { status?: number })?.status;
+    if (status !== 404) throw error;
+    await client.threads.updateState(threadId, { values: { messages: [] } });
+  }
+}
+
+/** Mint a new thread and bootstrap its checkpoint on the server. */
+export async function createThread(): Promise<string> {
+  const id = crypto.randomUUID();
+  await ensureThreadExists(id);
+  return id;
+}
+
+/** Delete a thread (session + checkpointed state) on the server. */
+export async function deleteThread(threadId: string): Promise<void> {
+  await fetch(`${getApiUrl()}/threads/${threadId}`, { method: "DELETE" });
+}

package/registry/frameworks/nuxt/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: "2025-07-15",
+  devtools: { enabled: true },
+  css: ["~/assets/css/main.css"],
+});

package/registry/frameworks/nuxt/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "js-nuxt",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "typecheck": "nuxt typecheck",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@langchain/core": "^1.2.1",
+    "@langchain/langgraph": "^1.3.7",
+    "@langchain/langgraph-sdk": "^1.9.20",
+    "@langchain/openai": "^1.4.7",
+    "@langchain/protocol": "^0.0.16",
+    "@langchain/vue": "^1.0.23",
+    "deepagents": "^1.10.2",
+    "langchain": "^1.4.4",
+    "nuxt": "^4.4.8",
+    "vue": "^3.5.35",
+    "vue-router": "^5.1.0",
+    "zod": "^4.4.3"
+  },
+  "packageManager": "pnpm@10.29.2"
+}

package/registry/frameworks/nuxt/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

package/registry/frameworks/nuxt/server/agent/index.ts

@@ -0,0 +1,89 @@
+/**
+ * Deep agent with delegating subagents.
+ *
+ * The Vue layer (`@langchain/vue`) discovers subagents from the `task` tool
+ * lifecycle events that `deepagents` emits. By giving the coordinator no direct
+ * tools and pushing the real capabilities into named subagents (`researcher`,
+ * `math-whiz`), every lookup or calculation is delegated through the `task`
+ * tool — which is exactly what surfaces as a subagent card in the UI.
+ *
+ * Reasoning summaries are enabled on the coordinator: over the Responses API,
+ * OpenAI returns reasoning *summaries* (not raw chain-of-thought) as
+ * `{ type: "reasoning" }` standard content blocks. These stream through the
+ * `messages` channel and the UI renders them in a collapsible "Thinking"
+ * section.
+ *
+ * The tool-using subagents deliberately use a plain (non-Responses) model. The
+ * Responses API replays prior reasoning items by id on each tool-loop step, and
+ * deep-agent subagent history can surface those items with empty ids
+ * (`400 Invalid 'input[..].id': ''`). Keeping subagents on standard
+ * chat-completions tool calling avoids that, while the coordinator — which only
+ * delegates via the `task` tool — keeps its reasoning summaries.
+ *
+ * The agent is compiled with an in-memory `MemorySaver` checkpointer so the
+ * Nitro backend can persist and rehydrate per-thread conversation state. The
+ * checkpointer is the single source of truth for the thread list — see the
+ * note in `server/utils/runtime.ts`.
+ */
+
+import { MemorySaver } from "@langchain/langgraph";
+import { ChatOpenAI } from "@langchain/openai";
+import { createDeepAgent } from "deepagents";
+
+import { stripReasoningReplay } from "./middleware";
+import { calculator, searchWeb } from "./tools";
+
+const coordinatorModel = new ChatOpenAI({
+  model: "gpt-5.4-mini",
+  useResponsesApi: true,
+  reasoning: { effort: "low", summary: "auto" },
+});
+
+const subagentModel = new ChatOpenAI({ model: "gpt-5.4-mini" });
+
+/**
+ * In-memory checkpointer — the single source of truth for threads.
+ *
+ * Exported so the server can enumerate threads (via `checkpointer.storage`) and
+ * delete them (`checkpointer.deleteThread`). It is process-local and volatile:
+ * restarting the server clears every thread.
+ */
+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/nuxt/server/agent/middleware.ts

@@ -0,0 +1,38 @@
+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.
+ *
+ * Over the Responses API, `@langchain/openai` replays an assistant turn either
+ * from `response_metadata.output` (the raw response items) or by reconstructing
+ * items from `additional_kwargs` — both of which carry ids (reasoning items,
+ * function-call items). After a round-trip through the checkpointer those ids
+ * can come back empty, and OpenAI rejects the next call with
+ * `400 Invalid 'input[..].id': ''`.
+ *
+ * We rebuild each prior assistant message from just its `content` and
+ * `tool_calls`. Tool calls keep their `call_id` (the valid pairing key), the
+ * converter emits clean items with no stale ids, and reasoning items are
+ * dropped from the model *input*. State is untouched, so the UI still renders
+ * each turn's reasoning; the model simply produces fresh reasoning per turn and
+ * never receives the old items back.
+ */
+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) }),
+});

package/registry/frameworks/nuxt/server/agent/tools.ts

@@ -0,0 +1,66 @@
+/**
+ * Mock tools for the deep agent's subagents.
+ *
+ * Ported from the streaming-cookbook `react-custom-backend` example. Both tools
+ * are intentionally fake so the example runs offline; what matters is that the
+ * subagents emit real tool-call deltas on the `messages` channel and tool
+ * results as `ToolMessage`s, all namespaced under their subagent run.
+ */
+
+import { tool } from "langchain";
+import { z } from "zod";
+
+export const searchWeb = tool(
+  async ({ query }) => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    return JSON.stringify({
+      results: [
+        {
+          title: `Result for: ${query}`,
+          snippet:
+            "LangGraph streaming sends token deltas on the messages channel " +
+            "and tool lifecycle events on tools. Subagent runs carry their own " +
+            "namespace so the UI can render them in dedicated cards.",
+        },
+      ],
+    });
+  },
+  {
+    name: "search_web",
+    description: "Search the web for information.",
+    schema: z.object({ query: z.string().describe("Search query.") }),
+  },
+);
+
+/** Demo-only arithmetic evaluator restricted to numbers and basic operators. */
+function evaluateExpression(expression: string): number {
+  if (!/^[\d+\-*/().\s]+$/.test(expression)) {
+    throw new Error("Only basic arithmetic is supported.");
+  }
+  const compute = new Function(
+    `"use strict"; return (${expression});`,
+  ) as () => unknown;
+  const result = compute();
+  if (typeof result !== "number" || !Number.isFinite(result)) {
+    throw new Error("Expression did not evaluate to a finite number.");
+  }
+  return result;
+}
+
+export const calculator = tool(
+  async ({ expression }) => {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    try {
+      return String(evaluateExpression(expression));
+    } catch (error) {
+      return `Error evaluating: ${expression} (${String(error)})`;
+    }
+  },
+  {
+    name: "calculator",
+    description: "Evaluate a math expression.",
+    schema: z.object({
+      expression: z.string().describe("Math expression to evaluate."),
+    }),
+  },
+);

package/registry/frameworks/nuxt/server/api/threads/[threadId]/commands.post.ts

@@ -0,0 +1,16 @@
+/**
+ * `POST /api/threads/:threadId/commands`.
+ *
+ * The request body is an Agent Protocol `Command`. The response is the command
+ * result emitted by the owning {@link LocalThreadSession}.
+ */
+
+import type { Command } from "@langchain/protocol";
+
+import { getSession } from "../../../utils/runtime";
+
+export default defineEventHandler(async (event) => {
+  const threadId = getRouterParam(event, "threadId") ?? "local";
+  const command = await readBody<Command>(event);
+  return getSession(threadId).handleCommand(command);
+});

package/registry/frameworks/nuxt/server/api/threads/[threadId]/history.post.ts

@@ -0,0 +1,37 @@
+/**
+ * `POST /api/threads/:threadId/history`.
+ *
+ * Lists past thread states (newest-first) from the graph checkpointer, powering
+ * the SDK's history/replay reads.
+ */
+
+import { getAgent } from "../../../utils/runtime";
+import { ThreadNotFoundError, getThreadHistory } from "../../../utils/threads";
+
+type HistoryBody = {
+  limit?: number;
+  before?: unknown;
+  metadata?: Record<string, unknown>;
+  checkpoint?: Record<string, unknown>;
+};
+
+export default defineEventHandler(async (event) => {
+  const threadId = getRouterParam(event, "threadId") ?? "local";
+  const body = await readBody<HistoryBody>(event).catch(
+    () => ({}) as HistoryBody,
+  );
+  try {
+    return await getThreadHistory(getAgent().graph, threadId, {
+      limit: typeof body.limit === "number" ? body.limit : 10,
+      before: body.before,
+      metadata: body.metadata,
+      checkpoint: body.checkpoint,
+    });
+  } catch (error) {
+    if (error instanceof ThreadNotFoundError) {
+      setResponseStatus(event, 404);
+      return { error: "not_found", message: error.message };
+    }
+    throw error;
+  }
+});

package/registry/frameworks/nuxt/server/api/threads/[threadId]/index.delete.ts

@@ -0,0 +1,12 @@
+/**
+ * `DELETE /api/threads/:threadId` — drop a thread's session and checkpoints.
+ */
+
+import { deleteThread } from "../../../utils/runtime";
+
+export default defineEventHandler(async (event) => {
+  const threadId = getRouterParam(event, "threadId") ?? "local";
+  await deleteThread(threadId);
+  setResponseStatus(event, 204);
+  return null;
+});