@alexanderolsen/create-deepagent 0.1.0

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { HumanMessage } from "@langchain/core/messages";
+import { useStreamContext } from "@langchain/vue";
+
+import MessageList from "./MessageList.vue";
+import SubagentDetail from "./SubagentDetail.vue";
+
+const EXAMPLE_PROMPT =
+  "Research LangGraph streaming, and separately calculate 42 * 17.";
+
+const emit = defineEmits<{ runSettled: [] }>();
+
+const stream = useStreamContext();
+
+// Refresh the sidebar whenever a run finishes (titles derive from the first
+// message; order from the latest checkpoint, both owned by the server).
+watch(
+  () => stream.isLoading.value,
+  (loading) => {
+    if (!loading) emit("runSettled");
+  },
+);
+
+const content = ref(EXAMPLE_PROMPT);
+const openSubagentId = ref<string | null>(null);
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+const subagents = computed(() => [...stream.subagents.value.values()]);
+const openSubagent = computed(() =>
+  openSubagentId.value
+    ? subagents.value.find((snapshot) => snapshot.id === openSubagentId.value)
+    : undefined,
+);
+
+function autoGrow() {
+  const node = textareaRef.value;
+  if (!node) return;
+  node.style.height = "auto";
+  node.style.height = `${Math.min(node.scrollHeight, 200)}px`;
+}
+
+function handleSubmit() {
+  const nextContent = content.value.trim();
+  if (nextContent.length === 0 || stream.isLoading.value) return;
+
+  content.value = "";
+  if (textareaRef.value) textareaRef.value.style.height = "auto";
+  void stream.submit({ messages: [new HumanMessage(nextContent)] });
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault();
+    handleSubmit();
+  }
+}
+</script>
+
+<template>
+  <!-- Subagent detail view: breadcrumb + that subagent's chat (no composer). -->
+  <main v-if="openSubagent" class="chat-main">
+    <nav aria-label="Breadcrumb" class="breadcrumb">
+      <button class="crumb-link" type="button" @click="openSubagentId = null">
+        Main chat
+      </button>
+      <span class="crumb-sep">/</span>
+      <span class="crumb-current">{{ openSubagent.name }}</span>
+    </nav>
+    <div class="conversation">
+      <div class="conversation-inner">
+        <SubagentDetail :snapshot="openSubagent" />
+      </div>
+    </div>
+  </main>
+
+  <!-- Main view: messages + subagent chips, composer pinned at the bottom. -->
+  <main v-else class="chat-main">
+    <div class="conversation">
+      <div class="conversation-inner">
+        <MessageList @open-subagent="openSubagentId = $event" />
+      </div>
+    </div>
+
+    <div class="composer-bar">
+      <form class="composer" @submit.prevent="handleSubmit">
+        <textarea
+          ref="textareaRef"
+          v-model="content"
+          aria-label="Message"
+          placeholder="Ask for research, a calculation, or both..."
+          rows="1"
+          @input="autoGrow"
+          @keydown="handleKeydown"
+        />
+        <button
+          :disabled="content.trim() === '' || stream.isLoading.value"
+          type="submit"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  </main>
+</template>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import { useTheme } from "~/composables/useTheme";
+import {
+  type ThreadSummary,
+  createThread,
+  deleteThread,
+  fetchThreads,
+} from "~/utils/threads";
+import ChatThread from "./ChatThread.vue";
+import ThemeToggle from "./ThemeToggle.vue";
+import ThreadHistory from "./ThreadHistory.vue";
+
+const { theme } = useTheme();
+
+const mounted = ref(false);
+const threads = ref<ThreadSummary[]>([]);
+const threadId = ref("");
+
+async function refreshThreads() {
+  threads.value = await fetchThreads();
+}
+
+// On mount, load threads from the server (single source of truth). If none
+// exist yet, create one.
+onMounted(async () => {
+  const list = await fetchThreads();
+  if (list.length > 0) {
+    threads.value = list;
+    threadId.value = list[0]!.id;
+  } else {
+    const id = await createThread();
+    threads.value = await fetchThreads();
+    threadId.value = id;
+  }
+  mounted.value = true;
+});
+
+function handleSelect(id: string) {
+  if (id !== threadId.value) threadId.value = id;
+}
+
+async function handleCreate() {
+  const id = await createThread();
+  await refreshThreads();
+  threadId.value = id;
+}
+
+async function handleDelete(id: string) {
+  await deleteThread(id);
+  const list = await fetchThreads();
+  threads.value = list;
+  if (id !== threadId.value) return;
+  if (list.length > 0) {
+    threadId.value = list[0]!.id;
+  } else {
+    const freshId = await createThread();
+    threads.value = await fetchThreads();
+    threadId.value = freshId;
+  }
+}
+</script>
+
+<template>
+  <div :class="['app-shell', { light: theme === 'light' }]">
+    <template v-if="!mounted || !threadId">
+      <div class="empty-state center">Preparing chat…</div>
+    </template>
+
+    <template v-else>
+      <ThemeToggle />
+
+      <ThreadHistory
+        :active-thread-id="threadId"
+        :threads="threads"
+        @create="handleCreate"
+        @delete="handleDelete"
+        @select="handleSelect"
+      />
+
+      <ChatThread
+        :key="threadId"
+        :thread-id="threadId"
+        @run-settled="refreshThreads"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { HttpAgentServerAdapter, provideStream } from "@langchain/vue";
+
+import { getApiUrl } from "~/utils/threads";
+import Chat from "./Chat.vue";
+
+const props = defineProps<{ threadId: string }>();
+const emit = defineEmits<{ runSettled: [] }>();
+
+// The component is keyed by `threadId` in the parent, so the transport is built
+// once per thread. Provide the stream so every descendant reads it via
+// `useStreamContext()`.
+const transport = new HttpAgentServerAdapter({
+  apiUrl: getApiUrl(),
+  threadId: props.threadId,
+  paths: {
+    commands: `/threads/${props.threadId}/commands`,
+    stream: `/threads/${props.threadId}/stream`,
+  },
+});
+
+provideStream({ transport, threadId: props.threadId });
+</script>
+
+<template>
+  <Chat @run-settled="emit('runSettled')" />
+</template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+
+type ToolCallLike = {
+  name: string;
+  args?: Record<string, unknown>;
+  id?: string;
+};
+
+const props = defineProps<{
+  message: BaseMessage;
+  /** Override which tool calls are shown (e.g. to hide `task` calls). */
+  toolCalls?: ToolCallLike[];
+}>();
+
+const calls = computed<ToolCallLike[]>(() => {
+  if (props.toolCalls) return props.toolCalls;
+  return AIMessage.isInstance(props.message)
+    ? (props.message.tool_calls ?? [])
+    : [];
+});
+
+function messageLabel(message: BaseMessage) {
+  if (message.type === "human") return "You";
+  if (message.type === "tool") return `Tool · ${message.name ?? "result"}`;
+  if (message.type === "ai") return "Assistant";
+  return message.type;
+}
+
+function formatToolArgs(args: Record<string, unknown>) {
+  const entries = Object.entries(args);
+  if (entries.length === 0) return "";
+  if (entries.length === 1) return String(entries[0]?.[1] ?? "");
+  return JSON.stringify(args);
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'message',
+      { user: message.type === 'human', tool: message.type === 'tool' },
+    ]"
+  >
+    <span>{{ messageLabel(message) }}</span>
+    <ul v-if="calls.length > 0" class="tool-call-list">
+      <li
+        v-for="(toolCall, toolIndex) in calls"
+        :key="toolCall.id ?? toolIndex"
+      >
+        <strong>{{ toolCall.name }}</strong>
+        <template v-if="formatToolArgs(toolCall.args ?? {})">
+          ({{ formatToolArgs(toolCall.args ?? {}) }})
+        </template>
+      </li>
+    </ul>
+    <p v-if="message.text">{{ message.text }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+import type { SubagentDiscoverySnapshot } from "@langchain/vue";
+
+import { getReasoningText } from "~/utils/streaming";
+import MessageBubble from "./MessageBubble.vue";
+import MessageReasoning from "./MessageReasoning.vue";
+import SubagentList, { type SubagentCard } from "./SubagentList.vue";
+import ToolCall, { type ToolCallView } from "./ToolCall.vue";
+
+type ToolCallLike = {
+  name: string;
+  args?: Record<string, unknown>;
+  id?: string;
+};
+
+/** Deep agents delegate to subagents through the built-in `task` tool. */
+const TASK_TOOL = "task";
+
+const EMPTY_TOOL_CALL: ToolCallView = {
+  id: "",
+  name: "",
+  args: {},
+  status: "complete",
+};
+
+const props = defineProps<{
+  messages: BaseMessage[];
+  /** Whether the surrounding run is streaming — drives reasoning/tool-call state. */
+  isLoading?: boolean;
+  /**
+   * Root-stream subagent snapshots. When provided ("root mode"), `task` tool
+   * calls render as inline subagent cards at the point of delegation instead of
+   * tool-call chips. In both modes, regular tool calls render as collapsible
+   * {@link ToolCall} chips with their result folded in, and standalone tool
+   * result messages are hidden.
+   */
+  subagents?: SubagentDiscoverySnapshot[];
+}>();
+
+const emit = defineEmits<{ openSubagent: [id: string] }>();
+
+const rootMode = computed(() => props.subagents != null);
+
+const subagentsById = computed(() => {
+  const map = new Map<string, SubagentDiscoverySnapshot>();
+  for (const snapshot of props.subagents ?? []) map.set(snapshot.id, snapshot);
+  return map;
+});
+
+type Item = {
+  key: string;
+  kind: "reasoning" | "bubble" | "subagents" | "toolcall";
+  message: BaseMessage;
+  reasoning: string;
+  active: boolean;
+  cards: SubagentCard[];
+  toolCall: ToolCallView;
+};
+
+function hasToolCalls(message: BaseMessage): boolean {
+  return AIMessage.isInstance(message) && (message.tool_calls?.length ?? 0) > 0;
+}
+
+function buildCards(tasks: ToolCallLike[]): SubagentCard[] {
+  return tasks.map((call, index) => {
+    const snapshot = call.id ? subagentsById.value.get(call.id) : undefined;
+    const args = (call.args ?? {}) as Record<string, unknown>;
+    return {
+      id: call.id ?? `task-${index}`,
+      name: snapshot?.name ?? String(args.subagent_type ?? "subagent"),
+      task:
+        snapshot?.taskInput ??
+        (typeof args.description === "string" ? args.description : undefined),
+      status: snapshot?.status ?? "running",
+      openable: snapshot != null,
+    };
+  });
+}
+
+// Each tool call is folded together with its result message (matched by
+// `tool_call_id`) into a single collapsible chip; reasoning renders standalone
+// before the answer; and `task` delegations render as subagent cards (root
+// mode). Standalone tool result messages are hidden.
+const items = computed<Item[]>(() => {
+  const result: Item[] = [];
+
+  const resultsByCallId = new Map<string, BaseMessage>();
+  for (const message of props.messages) {
+    if (message.type !== "tool") continue;
+    const id = (message as { tool_call_id?: unknown }).tool_call_id;
+    if (typeof id === "string") resultsByCallId.set(id, message);
+  }
+
+  props.messages.forEach((message, index) => {
+    if (message.type === "tool") return; // folded into its tool-call chip
+
+    if (AIMessage.isInstance(message)) {
+      const calls = (message.tool_calls ?? []) as ToolCallLike[];
+      const tasks = rootMode.value
+        ? calls.filter((call) => call.name === TASK_TOOL)
+        : [];
+      const chipCalls = rootMode.value
+        ? calls.filter((call) => call.name !== TASK_TOOL)
+        : calls;
+
+      const reasoning = getReasoningText(message);
+      if (reasoning) {
+        const active =
+          Boolean(props.isLoading) &&
+          index === props.messages.length - 1 &&
+          !message.text?.trim() &&
+          !hasToolCalls(message);
+        result.push({
+          key: `reason-${message.id ?? index}`,
+          kind: "reasoning",
+          message,
+          reasoning,
+          active,
+          cards: [],
+          toolCall: EMPTY_TOOL_CALL,
+        });
+      }
+
+      if (message.text?.trim()) {
+        result.push({
+          key: message.id ?? `m-${index}`,
+          kind: "bubble",
+          message,
+          reasoning: "",
+          active: false,
+          cards: [],
+          toolCall: EMPTY_TOOL_CALL,
+        });
+      }
+
+      if (tasks.length > 0) {
+        result.push({
+          key: `task-${message.id ?? index}`,
+          kind: "subagents",
+          message,
+          reasoning: "",
+          active: false,
+          cards: buildCards(tasks),
+          toolCall: EMPTY_TOOL_CALL,
+        });
+      }
+
+      chipCalls.forEach((call, callIndex) => {
+        const resultMessage = call.id
+          ? resultsByCallId.get(call.id)
+          : undefined;
+        const errored =
+          (resultMessage as { status?: string } | undefined)?.status ===
+          "error";
+        const view: ToolCallView = {
+          id: call.id ?? `${index}-${callIndex}`,
+          name: call.name,
+          args: call.args ?? {},
+          output: resultMessage?.text,
+          status: resultMessage
+            ? errored
+              ? "error"
+              : "complete"
+            : props.isLoading
+              ? "running"
+              : "complete",
+        };
+        result.push({
+          key: `tc-${view.id}`,
+          kind: "toolcall",
+          message,
+          reasoning: "",
+          active: false,
+          cards: [],
+          toolCall: view,
+        });
+      });
+      return;
+    }
+
+    result.push({
+      key: message.id ?? `m-${index}`,
+      kind: "bubble",
+      message,
+      reasoning: "",
+      active: false,
+      cards: [],
+      toolCall: EMPTY_TOOL_CALL,
+    });
+  });
+
+  return result;
+});
+</script>
+
+<template>
+  <template v-for="item in items" :key="item.key">
+    <MessageReasoning
+      v-if="item.kind === 'reasoning'"
+      :active="item.active"
+      :reasoning="item.reasoning"
+    />
+    <SubagentList
+      v-else-if="item.kind === 'subagents'"
+      :cards="item.cards"
+      @open="emit('openSubagent', $event)"
+    />
+    <ToolCall v-else-if="item.kind === 'toolcall'" :call="item.toolCall" />
+    <MessageBubble v-else :message="item.message" :tool-calls="[]" />
+  </template>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { BaseMessage } from "@langchain/core/messages";
+import { useStreamContext } from "@langchain/vue";
+
+import { shouldShowTypingIndicator } from "~/utils/streaming";
+import MessageBubbles from "./MessageBubbles.vue";
+import StreamingIndicator from "./StreamingIndicator.vue";
+
+const emit = defineEmits<{ openSubagent: [id: string] }>();
+
+const stream = useStreamContext();
+
+const messages = computed(() =>
+  stream.messages.value.filter(
+    (message): message is BaseMessage => message != null,
+  ),
+);
+
+const subagents = computed(() => [...stream.subagents.value.values()]);
+
+const showTypingIndicator = computed(() =>
+  shouldShowTypingIndicator(messages.value, stream.isLoading.value),
+);
+</script>
+
+<template>
+  <div v-if="messages.length === 0 && !stream.error.value" class="empty-state">
+    Ask a question below. The coordinator will delegate to its subagents and
+    stream tokens, tool calls, and results.
+  </div>
+
+  <MessageBubbles
+    :is-loading="stream.isLoading.value"
+    :messages="messages"
+    :subagents="subagents"
+    @open-subagent="emit('openSubagent', $event)"
+  />
+
+  <StreamingIndicator v-if="showTypingIndicator" />
+
+  <div
+    v-if="
+      messages.length === 0 && !stream.isLoading.value && stream.error.value
+    "
+    class="error"
+  >
+    Could not reach the agent API. Make sure the dev server is running and
+    <code>OPENAI_API_KEY</code> is set, then try again.
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import TypingDots from "./TypingDots.vue";
+
+const props = defineProps<{ reasoning: string; active: boolean }>();
+
+// Follow the streaming state: expand on start, collapse on finish. A manual
+// toggle in between is preserved until `active` flips again.
+const open = ref(props.active);
+watch(
+  () => props.active,
+  (value) => {
+    open.value = value;
+  },
+);
+</script>
+
+<template>
+  <div :class="['reasoning', { open }]">
+    <button
+      :aria-expanded="open"
+      class="reasoning-toggle"
+      type="button"
+      @click="open = !open"
+    >
+      <span aria-hidden class="reasoning-caret">▸</span>
+      <span aria-hidden class="reasoning-icon">
+        <svg
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.6"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"
+          />
+          <path
+            d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"
+          />
+          <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+          <path d="M6 18a4 4 0 0 1-1.967-.516" />
+          <path d="M19.967 17.484A4 4 0 0 1 18 18" />
+        </svg>
+      </span>
+      <span class="reasoning-label">Thinking</span>
+      <TypingDots v-if="active" variant="inline" class="reasoning-dots" />
+    </button>
+    <p v-if="open" class="reasoning-text">{{ reasoning }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import TypingDots from "./TypingDots.vue";
+</script>
+
+<template>
+  <div aria-label="Loading response" class="streaming-indicator" role="status">
+    <TypingDots />
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, toRef } from "vue";
+import type { BaseMessage } from "@langchain/core/messages";
+import {
+  useMessages,
+  useStreamContext,
+  type SubagentDiscoverySnapshot,
+} from "@langchain/vue";
+
+import MessageBubbles from "./MessageBubbles.vue";
+import StreamingIndicator from "./StreamingIndicator.vue";
+
+const props = defineProps<{ snapshot: SubagentDiscoverySnapshot }>();
+
+const stream = useStreamContext();
+
+// `useMessages` is scoped to the subagent's namespace, so its tokens, tool
+// calls, and results stream independently from the root conversation.
+const messages = useMessages(stream, toRef(props, "snapshot"));
+
+function omitTaskHumanMessage(
+  thread: BaseMessage[],
+  taskInput?: string,
+): BaseMessage[] {
+  const task = taskInput?.trim();
+  if (!task) return thread;
+  return thread.filter(
+    (message) => message.type !== "human" || message.text?.trim() !== task,
+  );
+}
+
+const visibleMessages = computed(() =>
+  omitTaskHumanMessage(messages.value, props.snapshot.taskInput),
+);
+</script>
+
+<template>
+  <div v-if="snapshot.taskInput" class="subagent-prompt">
+    <span>Task</span>
+    <p>{{ snapshot.taskInput }}</p>
+  </div>
+
+  <MessageBubbles
+    :is-loading="snapshot.status === 'running'"
+    :messages="visibleMessages"
+  />
+
+  <StreamingIndicator
+    v-if="snapshot.status === 'running' && visibleMessages.length === 0"
+  />
+</template>