@alexanderolsen/create-deepagent 0.1.0

package/registry/frameworks/vite/src/components/MessageThread.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { Fragment, type ReactNode, useMemo } from "react";
+
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+
+import { getReasoningText, MessageBubble } from "./MessageBubbles";
+import { MessageReasoning } from "./MessageReasoning";
+import { ToolCall, type ToolCallView } from "./ToolCall";
+
+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";
+
+/**
+ * Renders a list of messages as a chat thread.
+ *
+ * Tool calls are not shown as raw rows. Each tool call is folded together with
+ * its result message (matched by `tool_call_id`) into a single collapsible
+ * {@link ToolCall} chip, and the standalone tool result messages are hidden.
+ *
+ * `taskRenderer`, when provided, receives the `task` tool calls of an assistant
+ * message and returns a node to render in their place (e.g. subagent cards);
+ * those calls are then excluded from the chip rendering.
+ */
+export function MessageThread({
+  messages,
+  isLoading,
+  taskRenderer,
+}: {
+  messages: BaseMessage[];
+  isLoading: boolean;
+  taskRenderer?: (
+    tasks: ToolCallLike[],
+    message: AIMessage,
+    index: number,
+  ) => ReactNode | null;
+}) {
+  const resultsByCallId = useMemo(() => {
+    const map = new Map<string, BaseMessage>();
+    for (const message of messages) {
+      if (message.type !== "tool") continue;
+      const id = (message as { tool_call_id?: unknown }).tool_call_id;
+      if (typeof id === "string") map.set(id, message);
+    }
+    return map;
+  }, [messages]);
+
+  const items: { key: string; node: ReactNode }[] = [];
+
+  messages.forEach((message, index) => {
+    // Tool results are folded into their tool-call chip.
+    if (message.type === "tool") return;
+
+    if (AIMessage.isInstance(message)) {
+      // Reasoning renders standalone (not inside the assistant bubble), before
+      // the answer. Reasoning summaries stream first, then the model produces
+      // either text or tool calls — so reasoning is only "active" (streaming)
+      // while the run is loading, this is the last message, and it has not yet
+      // produced any text or tool calls.
+      const reasoning = getReasoningText(message);
+      if (reasoning) {
+        const hasToolCalls = (message.tool_calls?.length ?? 0) > 0;
+        const reasoningActive =
+          isLoading &&
+          index === messages.length - 1 &&
+          !message.text?.trim() &&
+          !hasToolCalls;
+        items.push({
+          key: `reason-${message.id ?? index}`,
+          node: (
+            <MessageReasoning active={reasoningActive} reasoning={reasoning} />
+          ),
+        });
+      }
+
+      if (message.text?.trim()) {
+        items.push({
+          key: message.id ?? `m-${index}`,
+          node: <MessageBubble message={message} toolCalls={[]} />,
+        });
+      }
+
+      const calls = (message.tool_calls ?? []) as ToolCallLike[];
+      const tasks = calls.filter((call) => call.name === TASK_TOOL);
+      const chipCalls = taskRenderer
+        ? calls.filter((call) => call.name !== TASK_TOOL)
+        : calls;
+
+      if (taskRenderer && tasks.length > 0) {
+        const node = taskRenderer(tasks, message, index);
+        if (node) items.push({ key: `task-${message.id ?? index}`, node });
+      }
+
+      chipCalls.forEach((call, callIndex) => {
+        const result = call.id ? resultsByCallId.get(call.id) : undefined;
+        const errored =
+          (result as { status?: string } | undefined)?.status === "error";
+        const view: ToolCallView = {
+          id: call.id ?? `${index}-${callIndex}`,
+          name: call.name,
+          args: call.args ?? {},
+          output: result?.text,
+          status: result
+            ? errored
+              ? "error"
+              : "complete"
+            : isLoading
+              ? "running"
+              : "complete",
+        };
+        items.push({ key: `tc-${view.id}`, node: <ToolCall call={view} /> });
+      });
+      return;
+    }
+
+    items.push({
+      key: message.id ?? `m-${index}`,
+      node: <MessageBubble message={message} />,
+    });
+  });
+
+  return (
+    <>
+      {items.map((item) => (
+        <Fragment key={item.key}>{item.node}</Fragment>
+      ))}
+    </>
+  );
+}

package/registry/frameworks/vite/src/components/StreamingIndicator.tsx

@@ -0,0 +1,36 @@
+import type { BaseMessage } from "@langchain/core/messages";
+
+export function shouldShowTypingIndicator(
+  messages: BaseMessage[],
+  isLoading: 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;
+}
+
+export function TypingDots({ className }: { className?: string }) {
+  return (
+    <span aria-hidden className={className ?? "typing-dots"}>
+      <span />
+      <span />
+      <span />
+    </span>
+  );
+}
+
+export function StreamingIndicator() {
+  return (
+    <div
+      aria-label="Loading response"
+      className="streaming-indicator"
+      role="status"
+    >
+      <TypingDots />
+    </div>
+  );
+}

package/registry/frameworks/vite/src/components/Subagents.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useMemo } from "react";
+
+import type { BaseMessage } from "@langchain/core/messages";
+import type { SubagentDiscoverySnapshot } from "@langchain/langgraph-sdk/stream";
+import { useMessages, useStreamContext } from "@langchain/react";
+
+import type { Agent } from "@/lib/agent-type";
+import { MessageThread } from "./MessageThread";
+import { StreamingIndicator } from "./StreamingIndicator";
+
+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;
+};
+
+function statusLabel(status: SubagentStatus) {
+  if (status === "running") return "Running";
+  if (status === "complete") return "Complete";
+  return "Error";
+}
+
+/** The task prompt is shown separately; skip the matching human message. */
+function omitTaskHumanMessage(
+  messages: BaseMessage[],
+  taskInput?: string,
+): BaseMessage[] {
+  const task = taskInput?.trim();
+  if (!task) return messages;
+  return messages.filter(
+    (message) => message.type !== "human" || message.text?.trim() !== task,
+  );
+}
+
+/**
+ * Compact, clickable subagent cards showing only the name and task prompt.
+ * Rendered inline where the coordinator spawned the subagents. Selecting one
+ * drills into its dedicated chat view.
+ */
+export function SubagentList({
+  cards,
+  onOpen,
+}: {
+  cards: SubagentCard[];
+  onOpen: (id: string) => void;
+}) {
+  if (cards.length === 0) return null;
+
+  return (
+    <div aria-label="Subagents" className="subagent-list">
+      {cards.map((card) => (
+        <button
+          className="subagent-chip"
+          disabled={!card.openable}
+          key={card.id}
+          onClick={() => card.openable && onOpen(card.id)}
+          type="button"
+        >
+          <span className="subagent-chip-head">
+            <span className="subagent-chip-name">{card.name}</span>
+            <span className={`subagent-status status-${card.status}`}>
+              {statusLabel(card.status)}
+            </span>
+          </span>
+          {card.task ? (
+            <span className="subagent-chip-task">{card.task}</span>
+          ) : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The chat interface for a single subagent.
+ *
+ * `useMessages` is scoped to the subagent's namespace, so its tokens, tool
+ * calls, and results stream independently from the root conversation.
+ */
+export function SubagentDetail({
+  snapshot,
+}: {
+  snapshot: SubagentDiscoverySnapshot;
+}) {
+  const stream = useStreamContext<Agent>();
+  const messages = useMessages(stream, snapshot);
+  const visibleMessages = useMemo(
+    () => omitTaskHumanMessage(messages, snapshot.taskInput),
+    [messages, snapshot.taskInput],
+  );
+
+  return (
+    <>
+      {snapshot.taskInput ? (
+        <div className="subagent-prompt">
+          <span>Task</span>
+          <p>{snapshot.taskInput}</p>
+        </div>
+      ) : null}
+
+      <MessageThread
+        isLoading={snapshot.status === "running"}
+        messages={visibleMessages}
+      />
+
+      {snapshot.status === "running" && visibleMessages.length === 0 ? (
+        <StreamingIndicator />
+      ) : null}
+    </>
+  );
+}

package/registry/frameworks/vite/src/components/ThemeIcons.tsx

@@ -0,0 +1,31 @@
+export function SunIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="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>
+  );
+}
+
+export function MoonIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="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>
+  );
+}

package/registry/frameworks/vite/src/components/ThreadHistory.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { ThreadSummary } from "@/lib/chat/threads-client";
+
+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",
+  });
+}
+
+export function ThreadHistory({
+  threads,
+  activeThreadId,
+  onSelect,
+  onCreate,
+  onDelete,
+}: {
+  threads: ThreadSummary[];
+  activeThreadId: string;
+  onSelect: (threadId: string) => void;
+  onCreate: () => void;
+  onDelete: (threadId: string) => void;
+}) {
+  return (
+    <aside aria-label="Thread history" className="sidebar">
+      <div className="sidebar-head">
+        <span className="eyebrow">History</span>
+        <button className="new-thread" onClick={onCreate} type="button">
+          + New
+        </button>
+      </div>
+
+      <ul className="thread-list">
+        {threads.length === 0 ? (
+          <li className="thread-empty">No conversations yet.</li>
+        ) : null}
+        {threads.map((thread) => (
+          <li
+            className={`thread-item ${
+              thread.id === activeThreadId ? "active" : ""
+            }`}
+            key={thread.id}
+          >
+            <button
+              className="thread-open"
+              onClick={() => onSelect(thread.id)}
+              type="button"
+            >
+              <span className="thread-title">{thread.title}</span>
+              <span className="thread-time">
+                {formatTime(thread.updatedAt)}
+              </span>
+            </button>
+            <button
+              aria-label="Delete conversation"
+              className="thread-delete"
+              onClick={() => onDelete(thread.id)}
+              type="button"
+            >
+              ×
+            </button>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  );
+}

package/registry/frameworks/vite/src/components/ToolCall.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+
+export type ToolCallStatus = "running" | "complete" | "error";
+
+export type ToolCallView = {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  output?: string;
+  status: ToolCallStatus;
+};
+
+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";
+}
+
+function ToolIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="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>
+  );
+}
+
+/**
+ * A subtle, collapsible representation of a single tool call: an icon, the
+ * tool name, and its status. Expanding reveals the stringified input (args)
+ * and output (the tool result).
+ */
+export function ToolCall({ call }: { call: ToolCallView }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={`toolcall status-${call.status}`}>
+      <button
+        aria-expanded={open}
+        className="toolcall-head"
+        onClick={() => setOpen((value) => !value)}
+        type="button"
+      >
+        <span className="toolcall-icon">
+          <ToolIcon />
+        </span>
+        <span className="toolcall-name">{call.name}</span>
+        <span className={`subagent-status status-${call.status}`}>
+          {statusLabel(call.status)}
+        </span>
+        <span aria-hidden className="toolcall-chevron">
+          {open ? "▾" : "▸"}
+        </span>
+      </button>
+
+      {open ? (
+        <div className="toolcall-body">
+          <div className="toolcall-section">
+            <span>Input</span>
+            <pre>{stringifyArgs(call.args)}</pre>
+          </div>
+          {call.output != null && call.output !== "" ? (
+            <div className="toolcall-section">
+              <span>Output</span>
+              <pre>{call.output}</pre>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/registry/frameworks/vite/src/lib/agent-type.ts

@@ -0,0 +1,4 @@
+import type { CompiledGraphType } from "@langchain/langgraph";
+
+/** Type shim for `useStreamContext` — mirrors the server deep agent graph. */
+export type Agent = CompiledGraphType;

package/registry/frameworks/vite/src/lib/chat/threads-client.ts

@@ -0,0 +1,114 @@
+/**
+ * Browser-side thread helpers for a LangSmith Deployment.
+ *
+ * Uses the LangGraph SDK against the Agent Server's built-in `/threads`
+ * API — no custom protocol routes required.
+ */
+
+import { Client } from "@langchain/langgraph-sdk/client";
+
+/** Graph id from `agent/langgraph.json`. */
+const ASSISTANT_ID = "agent";
+
+/** LangSmith deployment root URL (no path suffix). */
+export function getAgentApiUrl(): string {
+  const configured = import.meta.env.VITE_AGENT_API_URL?.trim();
+  if (configured) return configured.replace(/\/$/, "");
+  // Dev: same-origin Vite proxy avoids CORS (see scripts/vite-langgraph-proxy.ts).
+  if (import.meta.env.DEV) {
+    return `${window.location.origin}/api/langgraph`;
+  }
+  return "http://localhost:2025";
+}
+
+export function getApiKey(): string | undefined {
+  return import.meta.env.LANGSMITH_API_KEY?.trim() || undefined;
+}
+
+function getClient(): Client {
+  return new Client({
+    apiUrl: getAgentApiUrl(),
+    apiKey: getApiKey(),
+  });
+}
+
+/** Summary of a thread for the history sidebar. */
+export type ThreadSummary = {
+  id: string;
+  title: string;
+  updatedAt: string | null;
+};
+
+const UNTITLED = "New conversation";
+
+function deriveTitle(values: unknown): string {
+  if (typeof values !== "object" || values == null) return UNTITLED;
+  const messages = (values as { messages?: unknown }).messages;
+  if (!Array.isArray(messages)) return UNTITLED;
+  for (const message of messages) {
+    if (typeof message !== "object" || message == null) continue;
+    const record = message as { type?: string; content?: unknown };
+    if (record.type !== "human") continue;
+    const { content } = record;
+    const text =
+      typeof content === "string"
+        ? content
+        : Array.isArray(content)
+          ? content
+              .map((block) =>
+                typeof block === "object" &&
+                block != null &&
+                "text" in block &&
+                typeof (block as { text?: unknown }).text === "string"
+                  ? (block as { text: string }).text
+                  : "",
+              )
+              .join("")
+          : "";
+    const trimmed = text.trim();
+    if (trimmed) return trimmed.slice(0, 80);
+  }
+  return UNTITLED;
+}
+
+/** Fetch threads from the deployment, newest first. */
+export async function fetchThreads(): Promise<ThreadSummary[]> {
+  const client = getClient();
+  const threads = await client.threads.search({
+    metadata: { graph_id: ASSISTANT_ID },
+    limit: 100,
+    sortBy: "updated_at",
+    sortOrder: "desc",
+  });
+
+  const summaries: ThreadSummary[] = [];
+  for (const thread of threads) {
+    let title = UNTITLED;
+    try {
+      const state = await client.threads.getState(thread.thread_id);
+      title = deriveTitle(state.values);
+    } catch {
+      // Thread may have no checkpoint yet.
+    }
+    summaries.push({
+      id: thread.thread_id,
+      title,
+      updatedAt: thread.updated_at ?? null,
+    });
+  }
+  return summaries;
+}
+
+/** Create a thread on the deployment. */
+export async function createThread(): Promise<string> {
+  const client = getClient();
+  const thread = await client.threads.create({
+    metadata: { graph_id: ASSISTANT_ID },
+  });
+  return thread.thread_id;
+}
+
+/** Delete a thread on the deployment. */
+export async function deleteThread(threadId: string): Promise<void> {
+  await getClient().threads.delete(threadId);
+}

package/registry/frameworks/vite/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { ChatApp } from "./components/ChatApp";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ChatApp />
+  </StrictMode>,
+);