npm - @alexanderolsen/create-deepagent - Versions diffs - 0.1.0 - Mend

@alexanderolsen/create-deepagent 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (193) hide show

package/registry/frameworks/vite/agent/tools.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import { tool } from "langchain";
+import { z } from "zod";
+/**
+ * Mock tools used to demonstrate message and tool-call streaming.
+ *
+ * Both tools are intentionally fake so the example runs offline. What matters
+ * is that the agent (and its subagents) emit real tool-call deltas on the
+ * `messages` channel and tool results as `ToolMessage`s, which the UI renders.
+ */
+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 the tools channel.",
+        },
+      ],
+    });
+  },
+  {
+    name: "search_web",
+    description: "Search the web for information about a topic.",
+    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/vite/index.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Deploying a LangChain deep agent with LangSmith Deployment: streaming chat, subagents, and per-thread history."
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <title>LangChain Deep Agent · LangSmith</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/registry/frameworks/vite/langgraph.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://langgra.ph/schema.json",
+  "node_version": "22",
+  "dependencies": ["."],
+  "graphs": {
+    "agent": "./agent/index.ts:agent"
+  },
+  "env": ".env",
+  "http": {
+    "cors": {
+      "allow_origins": ["*"],
+      "allow_methods": ["GET", "POST", "DELETE", "OPTIONS"],
+      "allow_headers": ["Authorization", "Content-Type", "X-Api-Key"]
+    }
+  }
+}

package/registry/frameworks/vite/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "js-langsmith",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently -n agent,web -c blue,green \"pnpm dev:agent\" \"pnpm dev:web\"",
+    "dev:agent": "langgraphjs dev --no-browser --host 127.0.0.1 -p 2025",
+    "dev:web": "wait-on http-get://127.0.0.1:2025/ok && vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "deploy": "langgraphjs deploy",
+    "typecheck": "tsc --noEmit -p tsconfig.app.json && tsc --noEmit -p tsconfig.node.json"
+  },
+  "dependencies": {
+    "@langchain/core": "^1.2.1",
+    "@langchain/langgraph": "^1.3.7",
+    "@langchain/langgraph-sdk": "^1.9.20",
+    "@langchain/openai": "^1.4.7",
+    "@langchain/react": "^1.0.20",
+    "deepagents": "^1.10.2",
+    "langchain": "^1.4.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@langchain/langgraph-cli": "^1.0.0",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^4.4.1",
+    "concurrently": "^9.2.0",
+    "typescript": "^5",
+    "vite": "^6.3.5",
+    "wait-on": "^8.0.3"
+  },
+  "packageManager": "pnpm@10.29.2"
+}

package/registry/frameworks/vite/public/favicon.ico ADDED Viewed

Binary file

package/registry/frameworks/vite/scripts/vite-langgraph-proxy.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import type { ProxyOptions } from "vite";
+const LANGGRAPH_UPSTREAM =
+  process.env.LANGGRAPH_PROXY_TARGET ?? "http://127.0.0.1:2025";
+const UPSTREAM_PROXY: Omit<ProxyOptions, "rewrite"> = {
+  target: LANGGRAPH_UPSTREAM,
+  changeOrigin: true,
+  timeout: 600_000,
+  proxyTimeout: 600_000,
+};
+/**
+ * Vite dev-server proxy rules for LangGraph API traffic.
+ *
+ * Clients use `apiUrl = origin + "/api/langgraph"`. The LangGraph SDK may
+ * also resolve paths like `/threads/...` from the dev-server root, so mirror
+ * allowlisted upstream routes at both locations.
+ */
+export function createLangGraphViteProxy(): Record<string, ProxyOptions> {
+  return {
+    "/api/langgraph": {
+      ...UPSTREAM_PROXY,
+      rewrite: (path) => path.replace(/^\/api\/langgraph/, ""),
+    },
+    "/threads": UPSTREAM_PROXY,
+    "/runs": UPSTREAM_PROXY,
+    "/assistants": UPSTREAM_PROXY,
+    "/sandbox": UPSTREAM_PROXY,
+    "/download": UPSTREAM_PROXY,
+    "/ok": UPSTREAM_PROXY,
+    "/info": UPSTREAM_PROXY,
+  };
+}

package/registry/frameworks/vite/src/components/Chat.tsx ADDED Viewed

@@ -0,0 +1,124 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { HumanMessage } from "@langchain/core/messages";
+import { useStreamContext } from "@langchain/react";
+import type { Agent } from "@/lib/agent-type";
+import { Conversation } from "./Conversation";
+import { SubagentDetail } from "./Subagents";
+const EXAMPLE_PROMPT =
+  "Research LangGraph streaming, and separately calculate 42 * 17.";
+export function Chat({
+  onRunSettled,
+}: {
+  threadId: string;
+  /** Called when a run settles, so the sidebar can refresh titles/order. */
+  onRunSettled: () => void;
+}) {
+  const stream = useStreamContext<Agent>();
+  const [content, setContent] = useState(EXAMPLE_PROMPT);
+  const [openSubagentId, setOpenSubagentId] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // Refresh the sidebar whenever a run finishes (titles derive from the first
+  // message; order from the latest checkpoint, both owned by the server).
+  useEffect(() => {
+    if (!stream.isLoading) onRunSettled();
+  }, [stream.isLoading, onRunSettled]);
+  function autoGrow() {
+    const node = textareaRef.current;
+    if (!node) return;
+    node.style.height = "auto";
+    node.style.height = `${Math.min(node.scrollHeight, 200)}px`;
+  }
+  const subagents = [...stream.subagents.values()];
+  const openSubagent = openSubagentId
+    ? subagents.find((snapshot) => snapshot.id === openSubagentId)
+    : undefined;
+  function handleSubmit() {
+    const nextContent = content.trim();
+    if (nextContent.length === 0 || stream.isLoading) return;
+    setContent("");
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    void stream.submit({
+      messages: [new HumanMessage(nextContent)],
+    });
+  }
+  // Subagent detail view: breadcrumb + that subagent's chat (no composer).
+  if (openSubagent) {
+    return (
+      <main className="chat-main">
+        <nav aria-label="Breadcrumb" className="breadcrumb">
+          <button
+            className="crumb-link"
+            onClick={() => setOpenSubagentId(null)}
+            type="button"
+          >
+            Main chat
+          </button>
+          <span className="crumb-sep">/</span>
+          <span className="crumb-current">{openSubagent.name}</span>
+        </nav>
+        <div className="conversation">
+          <div className="conversation-inner">
+            <SubagentDetail snapshot={openSubagent} />
+          </div>
+        </div>
+      </main>
+    );
+  }
+  // Main view: messages + subagent chips, with the composer pinned at the bottom.
+  return (
+    <main className="chat-main">
+      <div className="conversation">
+        <div className="conversation-inner">
+          <Conversation onOpenSubagent={setOpenSubagentId} />
+        </div>
+      </div>
+      <div className="composer-bar">
+        <form
+          className="composer"
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <textarea
+            aria-label="Message"
+            onChange={(event) => {
+              setContent(event.target.value);
+              autoGrow();
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                handleSubmit();
+              }
+            }}
+            placeholder="Ask for research, a calculation, or both..."
+            ref={textareaRef}
+            rows={1}
+            value={content}
+          />
+          <button
+            disabled={content.trim() === "" || stream.isLoading}
+            type="submit"
+          >
+            Send
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}

package/registry/frameworks/vite/src/components/ChatApp.tsx ADDED Viewed

@@ -0,0 +1,122 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { StreamProvider } from "@langchain/react";
+import {
+  type ThreadSummary,
+  createThread,
+  deleteThread,
+  fetchThreads,
+  getAgentApiUrl,
+  getApiKey,
+} from "@/lib/chat/threads-client";
+import { Chat } from "./Chat";
+import { ThreadHistory } from "./ThreadHistory";
+import { MoonIcon, SunIcon } from "./ThemeIcons";
+/** Graph id from `agent/langgraph.json`. */
+const ASSISTANT_ID = "agent";
+export function ChatApp() {
+  const [mounted, setMounted] = useState(false);
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  const [threads, setThreads] = useState<ThreadSummary[]>([]);
+  const [threadId, setThreadId] = useState<string>("");
+  const initStarted = useRef(false);
+  const refreshThreads = useCallback(async () => {
+    setThreads(await fetchThreads());
+  }, []);
+  useEffect(() => {
+    if (initStarted.current) return;
+    initStarted.current = true;
+    void (async () => {
+      const list = await fetchThreads();
+      if (list.length > 0) {
+        setThreads(list);
+        setThreadId(list[0].id);
+      } else {
+        const id = await createThread();
+        setThreads(await fetchThreads());
+        setThreadId(id);
+      }
+      setMounted(true);
+    })();
+  }, []);
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (id !== threadId) setThreadId(id);
+    },
+    [threadId],
+  );
+  const handleCreate = useCallback(async () => {
+    const id = await createThread();
+    await refreshThreads();
+    setThreadId(id);
+  }, [refreshThreads]);
+  const handleDelete = useCallback(
+    async (id: string) => {
+      await deleteThread(id);
+      const list = await fetchThreads();
+      setThreads(list);
+      if (id !== threadId) return;
+      if (list.length > 0) {
+        setThreadId(list[0].id);
+      } else {
+        const freshId = await createThread();
+        setThreads(await fetchThreads());
+        setThreadId(freshId);
+      }
+    },
+    [threadId],
+  );
+  const shellClassName = `app-shell ${theme === "light" ? "light" : ""}`;
+  if (!mounted || !threadId) {
+    return (
+      <div className={shellClassName}>
+        <div className="empty-state center">Preparing chat…</div>
+      </div>
+    );
+  }
+  return (
+    <div className={shellClassName}>
+      <button
+        aria-label={
+          theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+        }
+        className="theme-toggle"
+        onClick={() => setTheme((cur) => (cur === "dark" ? "light" : "dark"))}
+        type="button"
+      >
+        {theme === "dark" ? <SunIcon /> : <MoonIcon />}
+      </button>
+      <ThreadHistory
+        activeThreadId={threadId}
+        onCreate={handleCreate}
+        onDelete={handleDelete}
+        onSelect={handleSelect}
+        threads={threads}
+      />
+      <StreamProvider
+        key={threadId}
+        assistantId={ASSISTANT_ID}
+        apiUrl={getAgentApiUrl()}
+        apiKey={getApiKey()}
+        threadId={threadId}
+      >
+        <Chat onRunSettled={refreshThreads} threadId={threadId} />
+      </StreamProvider>
+    </div>
+  );
+}

package/registry/frameworks/vite/src/components/Conversation.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+"use client";
+import { useMemo } from "react";
+import type { SubagentDiscoverySnapshot } from "@langchain/langgraph-sdk/stream";
+import { useStreamContext } from "@langchain/react";
+import type { Agent } from "@/lib/agent-type";
+import { MessageThread } from "./MessageThread";
+import {
+  shouldShowTypingIndicator,
+  StreamingIndicator,
+} from "./StreamingIndicator";
+import { SubagentList, type SubagentCard } from "./Subagents";
+/**
+ * The root conversation, rendered in message order.
+ *
+ * Subagent `task` delegations are rendered as cards (not raw tool rows) at the
+ * position they occur, and all other tool calls are folded into collapsible
+ * tool-call chips by {@link MessageThread}.
+ */
+export function Conversation({
+  onOpenSubagent,
+}: {
+  onOpenSubagent: (id: string) => void;
+}) {
+  const stream = useStreamContext<Agent>();
+  const messages = useMemo(
+    () => stream.messages.filter((message) => message != null),
+    [stream.messages],
+  );
+  const subagentsById = useMemo(() => {
+    const map = new Map<string, SubagentDiscoverySnapshot>();
+    for (const snapshot of stream.subagents.values()) {
+      map.set(snapshot.id, snapshot);
+    }
+    return map;
+  }, [stream.subagents]);
+  const showTypingIndicator = shouldShowTypingIndicator(
+    messages,
+    stream.isLoading,
+  );
+  return (
+    <>
+      {messages.length === 0 && !stream.error ? (
+        <div className="empty-state">
+          Ask a question below. The coordinator will delegate to its subagents
+          and stream tokens, tool calls, and results.
+        </div>
+      ) : null}
+      <MessageThread
+        isLoading={stream.isLoading}
+        messages={messages}
+        taskRenderer={(tasks) => {
+          const cards: SubagentCard[] = tasks.map((call, index) => {
+            const snapshot = call.id ? subagentsById.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,
+            };
+          });
+          return <SubagentList cards={cards} onOpen={onOpenSubagent} />;
+        }}
+      />
+      {showTypingIndicator ? <StreamingIndicator /> : null}
+      {messages.length === 0 && !stream.isLoading && stream.error ? (
+        <div className="error">
+          Could not reach the agent API. Make sure the Deno server is running
+          and
+          <code>OPENAI_API_KEY</code> is set, then try again.
+        </div>
+      ) : null}
+    </>
+  );
+}

package/registry/frameworks/vite/src/components/MessageBubbles.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+"use client";
+import { AIMessage, type BaseMessage } from "@langchain/core/messages";
+type ToolCallLike = {
+  name: string;
+  args?: Record<string, unknown>;
+  id?: string;
+};
+function messageLabel(message: { type: string; name?: string }) {
+  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);
+}
+/**
+ * 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 as { type?: string })?.type === "reasoning",
+      )
+      .map((block) => block.reasoning)
+      .join("")
+      .trim();
+  } catch {
+    return "";
+  }
+}
+/**
+ * Renders a single message as a chat bubble with its tool-call rows.
+ *
+ * `toolCalls` can be passed to override which tool calls are shown (e.g. to
+ * hide the `task` calls that are rendered as subagent cards instead).
+ */
+export function MessageBubble({
+  message,
+  toolCalls,
+}: {
+  message: BaseMessage;
+  toolCalls?: ToolCallLike[];
+}) {
+  const calls =
+    toolCalls ??
+    (AIMessage.isInstance(message) ? (message.tool_calls ?? []) : []);
+  return (
+    <div
+      className={`message ${message.type === "human" ? "user" : ""} ${
+        message.type === "tool" ? "tool" : ""
+      }`}
+    >
+      <span>{messageLabel(message)}</span>
+      {calls.length > 0 ? (
+        <ul className="tool-call-list">
+          {calls.map((toolCall, toolIndex) => {
+            const args = formatToolArgs(toolCall.args ?? {});
+            return (
+              <li key={toolCall.id ?? toolIndex}>
+                <strong>{toolCall.name}</strong>
+                {args ? `(${args})` : ""}
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+      {message.text ? <p>{message.text}</p> : null}
+    </div>
+  );
+}

package/registry/frameworks/vite/src/components/MessageReasoning.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+"use client";
+import { useEffect, useState } from "react";
+import { TypingDots } from "./StreamingIndicator";
+function BrainIcon() {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="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>
+  );
+}
+/**
+ * Minimalistic reasoning block: a `Thinking` toggle with a brain icon and a
+ * caret, rendered inline in the conversation (not inside a message bubble).
+ *
+ * While reasoning tokens stream (`active`), the block auto-expands so you can
+ * watch the model think; once the turn finishes it auto-collapses. The caret
+ * stays clickable so a finished block can be re-opened.
+ */
+export function MessageReasoning({
+  reasoning,
+  active,
+}: {
+  reasoning: string;
+  active: boolean;
+}) {
+  const [open, setOpen] = useState(active);
+  // Follow the streaming state: expand on start, collapse on finish. The effect
+  // only runs when `active` flips, so a manual toggle in between is preserved.
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setOpen(active);
+  }, [active]);
+  return (
+    <div className={`reasoning ${open ? "open" : ""}`}>
+      <button
+        aria-expanded={open}
+        className="reasoning-toggle"
+        onClick={() => setOpen((value) => !value)}
+        type="button"
+      >
+        <span aria-hidden className="reasoning-caret">
+          ▸
+        </span>
+        <span aria-hidden className="reasoning-icon">
+          <BrainIcon />
+        </span>
+        <span className="reasoning-label">Thinking</span>
+        {active ? <TypingDots className="inline-dots reasoning-dots" /> : null}
+      </button>
+      {open ? <p className="reasoning-text">{reasoning}</p> : null}
+    </div>
+  );
+}