@chat-js/cli 0.3.0 → 0.6.0

package/templates/chat-app/lib/ai/tools/code-execution.ts

@@ -1,373 +1,25 @@
-import { Sandbox } from "@vercel/sandbox";
+import type { Sandbox } from "@vercel/sandbox";
 import { tool } from "ai";
 import z from "zod";
 import type { CostAccumulator } from "@/lib/credits/cost-accumulator";
-import { env } from "@/lib/env";
 import { createModuleLogger } from "@/lib/logger";
+import { executeJavaScriptInSandbox } from "./code-execution.javascript";
+import { executePythonInSandbox } from "./code-execution.python";
+import {
+  cleanupSandbox,
+  createSandbox,
+  getErrorMessage,
+  getSandboxRuntime,
+} from "./code-execution.shared";
+import {
+  type SupportedExecutionLanguage,
+  supportedExecutionLanguages,
+} from "./code-execution.types";
 import { toolsDefinitions } from "./tools-definitions";
 
-const WHITESPACE_REGEX = /\s+/;
-const PACKAGE_SPEC_SPLIT_RE = /[=<>![\s]/;
+const languageSchema = z.enum(supportedExecutionLanguages);
 
-async function installBasePackages(
-  sandbox: Sandbox,
-  basePackages: readonly string[],
-  log: ReturnType<typeof createModuleLogger>,
-  requestId: string
-): Promise<{
-  success: boolean;
-  result?: { message: string; chart: string };
-}> {
-  const installStep = await sandbox.runCommand({
-    cmd: "pip",
-    args: ["install", ...basePackages],
-  });
-  if (installStep.exitCode !== 0) {
-    const installStderr = await installStep.stderr();
-    log.error(
-      { requestId, stderr: installStderr },
-      "base package installation failed"
-    );
-    return {
-      success: false,
-      result: {
-        message: `Failed to install base packages: ${installStderr}`,
-        chart: "",
-      },
-    };
-  }
-  log.info({ requestId }, "base packages installed");
-  return { success: true };
-}
-
-function packageName(spec: string): string {
-  return spec.split(PACKAGE_SPEC_SPLIT_RE)[0].toLowerCase();
-}
-
-async function processExtraPackages(
-  code: string,
-  basePackages: readonly string[],
-  sandbox: Sandbox,
-  log: ReturnType<typeof createModuleLogger>,
-  requestId: string
-): Promise<{
-  codeToRun: string;
-  installResult: {
-    success: boolean;
-    result?: { message: string; chart: string };
-  };
-}> {
-  const basePackageNames = new Set(basePackages.map((p) => p.toLowerCase()));
-  const lines = code.split("\n");
-  const pipLines = lines.filter((l) => l.trim().startsWith("!pip install "));
-  const extraPackages = pipLines
-    .flatMap((l) =>
-      l
-        .trim()
-        .slice("!pip install ".length)
-        .split(WHITESPACE_REGEX)
-        .filter(Boolean)
-    )
-    .filter((spec) => !basePackageNames.has(packageName(spec)));
-
-  const codeWithoutPipLines = lines
-    .filter((l) => !l.trim().startsWith("!pip install "))
-    .join("\n");
-
-  if (extraPackages.length === 0) {
-    return { codeToRun: codeWithoutPipLines, installResult: { success: true } };
-  }
-
-  log.info({ requestId, extraPackages }, "installing extra packages");
-  const dynamicInstall = await sandbox.runCommand({
-    cmd: "pip",
-    args: ["install", ...extraPackages],
-  });
-  if (dynamicInstall.exitCode !== 0) {
-    const stderr = await dynamicInstall.stderr();
-    log.error({ requestId, stderr }, "dynamic package installation failed");
-    return {
-      codeToRun: code,
-      installResult: {
-        success: false,
-        result: {
-          message: `Failed to install packages: ${stderr}`,
-          chart: "",
-        },
-      },
-    };
-  }
-
-  return {
-    codeToRun: codeWithoutPipLines,
-    installResult: { success: true },
-  };
-}
-
-function createWrappedCode(codeToRun: string, chartPath: string): string {
-  return `
-import sys
-import json
-import traceback
-
-try:
-    import matplotlib.pyplot as _plt_module
-    _orig_savefig = _plt_module.savefig
-    def _intercepted_savefig(*args, **kwargs):
-        _orig_savefig('${chartPath}', format='png', bbox_inches='tight', dpi=100)
-        if args or kwargs.get('fname') not in (None, '${chartPath}'):
-            return _orig_savefig(*args, **kwargs)
-    _plt_module.savefig = _intercepted_savefig
-except ImportError:
-    pass
-
-try:
-    exec(${JSON.stringify(codeToRun)})
-    try:
-        _locals = locals()
-        _globals = globals()
-        _chart_var = _locals.get("chart") or _globals.get("chart")
-        if (isinstance(_chart_var, dict)
-                and isinstance(_chart_var.get("type"), str)
-                and isinstance(_chart_var.get("elements"), list)):
-            print("__CHART_JSON__:" + json.dumps(_chart_var))
-        else:
-            if "result" in _locals:
-                print(_locals["result"])
-            elif "result" in _globals:
-                print(_globals["result"])
-            elif "results" in _locals:
-                print(_locals["results"])
-            elif "results" in _globals:
-                print(_globals["results"])
-    except Exception:
-        pass
-    try:
-        import matplotlib.pyplot as plt
-        if plt.get_fignums():
-            plt.savefig('${chartPath}', format='png', bbox_inches='tight', dpi=100)
-            plt.close('all')
-    except ImportError:
-        pass
-    print(json.dumps({"success": True}))
-except Exception as e:
-    error_info = {"success": False, "error": {"name": type(e).__name__, "value": str(e), "traceback": traceback.format_exc()}}
-    print(json.dumps(error_info))
-    sys.exit(1)
-`;
-}
-
-const CHART_JSON_PREFIX = "__CHART_JSON__:";
-
-async function parseExecutionOutput(execResult: {
-  stdout: () => Promise<string>;
-  exitCode: number;
-}): Promise<{
-  outputText: string;
-  chartData: Record<string, unknown> | null;
-  execInfo: {
-    success: boolean;
-    error?: { name: string; value: string; traceback: string };
-  };
-}> {
-  const stdout = await execResult.stdout();
-  let execInfo: {
-    success: boolean;
-    error?: { name: string; value: string; traceback: string };
-  } = { success: true };
-  let outputText = "";
-  let chartData: Record<string, unknown> | null = null;
-
-  try {
-    const outLines = (stdout ?? "").trim().split("\n");
-    const lastLine = outLines.at(-1);
-    execInfo = JSON.parse(lastLine ?? "{}");
-    outLines.pop();
-
-    const chartLineIdx = outLines.findIndex((l) =>
-      l.startsWith(CHART_JSON_PREFIX)
-    );
-    if (chartLineIdx !== -1) {
-      const raw = outLines[chartLineIdx].slice(CHART_JSON_PREFIX.length);
-      try {
-        chartData = JSON.parse(raw) as Record<string, unknown>;
-      } catch {
-        // ignore malformed chart JSON
-      }
-      outLines.splice(chartLineIdx, 1);
-    }
-
-    outputText = outLines.join("\n");
-  } catch {
-    outputText = stdout ?? "";
-  }
-
-  return { outputText, chartData, execInfo };
-}
-
-async function checkForChart(
-  sandbox: Sandbox,
-  chartPath: string,
-  log: ReturnType<typeof createModuleLogger>,
-  requestId: string
-): Promise<{ base64: string; format: string } | undefined> {
-  const chartCheck = await sandbox.runCommand({
-    cmd: "test",
-    args: ["-f", chartPath],
-  });
-  if (chartCheck.exitCode === 0) {
-    const b64 = await (
-      await sandbox.runCommand({
-        cmd: "base64",
-        args: ["-w", "0", chartPath],
-      })
-    ).stdout();
-    log.info({ requestId }, "chart generated");
-    return { base64: (b64 ?? "").trim(), format: "png" };
-  }
-  return;
-}
-
-function buildResponseMessage({
-  outputText,
-  stderr,
-  execInfo,
-  log,
-  requestId,
-}: {
-  outputText: string;
-  stderr: string;
-  execInfo: {
-    success: boolean;
-    error?: { name: string; value: string; traceback: string };
-  };
-  log: ReturnType<typeof createModuleLogger>;
-  requestId: string;
-}): string {
-  let message = "";
-
-  if (outputText) {
-    message += `${outputText}\n`;
-  }
-  if (stderr && stderr.trim().length > 0) {
-    message += `${stderr}\n`;
-  }
-  if (execInfo.error) {
-    message += `Error: ${execInfo.error.name}: ${execInfo.error.value}\n`;
-    log.error({ requestId, error: execInfo.error }, "python execution error");
-  }
-
-  return message;
-}
-
-function getTokenAuth(): Record<string, string> {
-  const { VERCEL_TEAM_ID, VERCEL_PROJECT_ID, VERCEL_TOKEN } = env;
-  if (VERCEL_TEAM_ID && VERCEL_PROJECT_ID && VERCEL_TOKEN) {
-    return {
-      teamId: VERCEL_TEAM_ID,
-      projectId: VERCEL_PROJECT_ID,
-      token: VERCEL_TOKEN,
-    };
-  }
-  return {};
-}
-
-function createSandbox(runtime: string): Promise<Sandbox> {
-  return Sandbox.create({
-    runtime,
-    timeout: 5 * 60 * 1000,
-    resources: { vcpus: 2 },
-    ...getTokenAuth(),
-  });
-}
-
-async function executeInSandbox({
-  sandbox,
-  code,
-  basePackages,
-  chartPath,
-  log,
-  requestId,
-}: {
-  sandbox: Sandbox;
-  code: string;
-  basePackages: readonly string[];
-  chartPath: string;
-  log: ReturnType<typeof createModuleLogger>;
-  requestId: string;
-}): Promise<{
-  message: string;
-  chart: string | { base64: string; format: string } | Record<string, unknown>;
-}> {
-  const baseInstallResult = await installBasePackages(
-    sandbox,
-    basePackages,
-    log,
-    requestId
-  );
-  if (!baseInstallResult.success) {
-    return baseInstallResult.result ?? { message: "Unknown error", chart: "" };
-  }
-
-  const { codeToRun, installResult } = await processExtraPackages(
-    code,
-    basePackages,
-    sandbox,
-    log,
-    requestId
-  );
-  if (!installResult.success) {
-    return installResult.result ?? { message: "Unknown error", chart: "" };
-  }
-
-  const wrappedCode = createWrappedCode(codeToRun, chartPath);
-  const execResult = await sandbox.runCommand({
-    cmd: "python3",
-    args: ["-c", wrappedCode],
-  });
-
-  const { outputText, chartData, execInfo } =
-    await parseExecutionOutput(execResult);
-
-  const message = buildResponseMessage({
-    outputText,
-    stderr: await execResult.stderr(),
-    execInfo,
-    log,
-    requestId,
-  });
-
-  if (chartData) {
-    log.info({ requestId }, "interactive chart data returned");
-    return { message: message.trim(), chart: chartData };
-  }
-
-  const chartOut = await checkForChart(sandbox, chartPath, log, requestId);
-  return {
-    message: message.trim(),
-    chart: chartOut ?? "",
-  };
-}
-
-async function cleanupSandbox(
-  sandbox: Sandbox | undefined,
-  log: ReturnType<typeof createModuleLogger>,
-  requestId: string
-): Promise<void> {
-  if (!sandbox) {
-    return;
-  }
-  try {
-    await sandbox.stop();
-    log.info({ requestId }, "sandbox closed");
-  } catch (closeErr) {
-    log.warn({ requestId, closeErr }, "failed to close sandbox");
-  }
-}
-
-function getErrorMessage(err: unknown): string {
-  return err instanceof Error ? err.message : "Unknown error";
-}
+const defaultExecutionLanguage: SupportedExecutionLanguage = "python";
 
 export const codeExecution = ({
   costAccumulator,
@@ -375,14 +27,23 @@ export const codeExecution = ({
   costAccumulator?: CostAccumulator;
 }) =>
   tool({
-    description: `Python-only sandbox for calculations, data analysis & visualisations.
+    description: `Sandboxed code execution for Python and JavaScript.
 
 Use for:
-- Execute Python (matplotlib, pandas, numpy, sympy, yfinance pre-installed — do NOT reinstall them)
+- Execute Python for calculations, data analysis, and visualisations
+- Execute JavaScript for scripting, transformations, async fetches, and general runtime checks
+
+Python support:
+- matplotlib, pandas, numpy, sympy, yfinance pre-installed — do NOT reinstall them
 - Produce interactive line / scatter / bar charts OR matplotlib PNG charts
 - Install extra libs by adding lines like: '!pip install <pkg> [<pkg2> ...]' (we auto-install and strip these lines; pre-installed packages are ignored)
 
-Chart output — choose ONE:
+JavaScript support:
+- Runs in a sandboxed Node.js runtime, never in the browser thread
+- Use console.log(...) to print output
+- You can also assign 'result' or 'results', or return a value from the snippet
+
+Chart output — Python only:
 1. Interactive chart (preferred for line/scatter/bar): assign a 'chart' variable matching this schema:
    chart = {
      "type": "line" | "scatter" | "bar",
@@ -402,47 +63,57 @@ Restrictions:
 - Interactive chart: only line / scatter / bar types
 
 Output rules:
-- Assign 'chart' dict for interactive charts (takes priority over matplotlib PNG)
-- Assign 'result' or 'results' for other computed values (auto-printed)
-- Or print explicitly: print(answer)
+- Set language to 'python' or 'javascript'
+- Python charts: assign 'chart' dict for interactive charts (takes priority over matplotlib PNG)
+- Python values: assign 'result' or 'results', or print explicitly
+- JavaScript values: assign 'result' or 'results', return a value, or print explicitly
 - Don't rely on implicit REPL last-expression output`,
     inputSchema: z.object({
       title: z.string().describe("The title of the code snippet."),
+      language: languageSchema
+        .default(defaultExecutionLanguage)
+        .describe("The language to execute: 'python' or 'javascript'."),
       code: z
         .string()
         .describe(
-          "The Python code to execute. Print anything you want to return. Optionally assign to 'result' or 'results' to auto-print."
+          "The code to execute in the selected sandbox language. Print anything you want to return, or assign to 'result'/'results'."
         ),
     }),
-    execute: async ({ code, title }: { code: string; title: string }) => {
+    execute: async ({
+      code,
+      title,
+      language,
+    }: {
+      code: string;
+      title: string;
+      language: SupportedExecutionLanguage;
+    }) => {
       const log = createModuleLogger("code-execution");
       const requestId = `ci-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-      const runtime = env.VERCEL_SANDBOX_RUNTIME ?? "python3.13";
-      const basePackages = [
-        "matplotlib",
-        "pandas",
-        "numpy",
-        "sympy",
-        "yfinance",
-      ] as const;
-      const chartPath = "/tmp/chart.png";
+      const runtime = getSandboxRuntime(language);
 
       let sandbox: Sandbox | undefined;
 
       try {
-        log.info({ requestId, title, runtime }, "creating sandbox");
+        log.info({ requestId, title, runtime, language }, "creating sandbox");
         sandbox = await createSandbox(runtime);
         log.debug({ requestId }, "sandbox created");
 
-        log.info({ requestId, title }, "executing python code");
-        const result = await executeInSandbox({
-          sandbox,
-          code,
-          basePackages,
-          chartPath,
-          log,
-          requestId,
-        });
+        log.info({ requestId, title, language }, "executing code");
+        const result =
+          language === "javascript"
+            ? await executeJavaScriptInSandbox({
+                sandbox,
+                code,
+                log,
+                requestId,
+              })
+            : await executePythonInSandbox({
+                sandbox,
+                code,
+                log,
+                requestId,
+              });
 
         costAccumulator?.addAPICost(
           "codeExecution",
@@ -451,7 +122,7 @@ Output rules:
 
         return result;
       } catch (err) {
-        log.error({ err, requestId }, "code execution failed");
+        log.error({ err, requestId, language }, "code execution failed");
         return {
           message: `Sandbox execution failed: ${getErrorMessage(err)}`,
           chart: "",

package/templates/chat-app/lib/ai/tools/code-execution.types.ts

@@ -0,0 +1,24 @@
+import type { Sandbox } from "@vercel/sandbox";
+import type { createModuleLogger } from "@/lib/logger";
+
+export const supportedExecutionLanguages = ["python", "javascript"] as const;
+
+export type SupportedExecutionLanguage =
+  (typeof supportedExecutionLanguages)[number];
+
+export type CodeExecutionChart =
+  | string
+  | { base64: string; format: string }
+  | Record<string, unknown>;
+
+export interface CodeExecutionResult {
+  chart: CodeExecutionChart;
+  message: string;
+}
+
+export interface CodeExecutionContext {
+  code: string;
+  log: ReturnType<typeof createModuleLogger>;
+  requestId: string;
+  sandbox: Sandbox;
+}

package/templates/chat-app/lib/ai/tools/steps/multi-query-web-search.ts

@@ -118,8 +118,9 @@ export async function multiQueryWebSearchStep({
     return {
       searches: searchResults,
     };
-  } catch (error: any) {
-    const errorMessage = error?.message || "Unknown error occurred";
+  } catch (error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
 
     // Send error annotation
     dataStream.write({

package/templates/chat-app/lib/ai/types.ts

@@ -59,10 +59,83 @@ const frontendToolsSchema = z.enum([
 const __ = frontendToolsSchema.options satisfies ToolNameInternal[];
 
 export type UiToolName = z.infer<typeof frontendToolsSchema>;
+
+export type SelectedModelCounts = Partial<Record<AppModelId, number>>;
+export type SelectedModelValue = AppModelId | SelectedModelCounts;
+
+export function isSelectedModelCounts(
+  value: unknown
+): value is SelectedModelCounts {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+
+  if (Object.keys(value).length === 0) {
+    return false;
+  }
+
+  return Object.entries(value).every(
+    ([modelId, count]) =>
+      typeof modelId === "string" &&
+      typeof count === "number" &&
+      Number.isInteger(count) &&
+      count > 0
+  );
+}
+
+export function isSelectedModelValue(
+  value: unknown
+): value is SelectedModelValue {
+  return typeof value === "string" || isSelectedModelCounts(value);
+}
+
+export function getPrimarySelectedModelId(
+  selectedModel: SelectedModelValue | null | undefined
+): AppModelId | null {
+  if (!selectedModel) {
+    return null;
+  }
+
+  if (typeof selectedModel === "string") {
+    return selectedModel;
+  }
+
+  const [firstSelectedModelId] = Object.entries(selectedModel).find(
+    ([, count]) => typeof count === "number" && count > 0
+  ) ?? [null];
+
+  return firstSelectedModelId as AppModelId | null;
+}
+
+export function expandSelectedModelValue(
+  selectedModel: SelectedModelValue
+): AppModelId[] {
+  if (typeof selectedModel === "string") {
+    return [selectedModel];
+  }
+
+  const expanded: AppModelId[] = [];
+
+  for (const [modelId, count] of Object.entries(selectedModel)) {
+    if (!(typeof count === "number" && Number.isInteger(count) && count > 0)) {
+      continue;
+    }
+
+    for (let index = 0; index < count; index += 1) {
+      expanded.push(modelId as AppModelId);
+    }
+  }
+
+  return expanded;
+}
+
 const messageMetadataSchema = z.object({
   createdAt: z.date(),
   parentMessageId: z.string().nullable(),
-  selectedModel: z.custom<AppModelId>((val) => typeof val === "string"),
+  parallelGroupId: z.string().nullable().optional(),
+  parallelIndex: z.number().int().nullable().optional(),
+  isPrimaryParallel: z.boolean().nullable().optional(),
+  selectedModel: z.custom<SelectedModelValue>(isSelectedModelValue),
   activeStreamId: z.string().nullable(),
   selectedTool: frontendToolsSchema.optional(),
   usage: z.custom<LanguageModelUsage | undefined>((_val) => true).optional(),
@@ -101,7 +174,6 @@ type webSearchTool = InferUITool<ReturnType<typeof tavilyWebSearch>>;
 type codeExecutionTool = InferUITool<ReturnType<typeof codeExecution>>;
 type retrieveUrlTool = InferUITool<typeof retrieveUrl>;
 
-// biome-ignore lint/style/useConsistentTypeDefinitions: using type for mapped type compatibility
 export type ChatTools = {
   codeExecution: codeExecutionTool;
   createCodeDocument: createCodeDocumentToolType;
@@ -123,7 +195,6 @@ interface FollowupSuggestions {
   suggestions: string[];
 }
 
-// biome-ignore lint/style/useConsistentTypeDefinitions: using type for mapped type compatibility
 export type CustomUIDataTypes = {
   appendMessage: string;
   chatConfirmed: {

package/templates/chat-app/lib/anonymous-session-client.ts

@@ -26,7 +26,6 @@ function setCookie(name: string, value: string, maxAge: number): void {
   const secure = window.location.protocol === "https:" ? "; Secure" : "";
   const encodedValue = encodeURIComponent(value);
   if ("cookieStore" in window) {
-    // @ts-expect-error cookieStore is not yet in TS lib.dom
     window.cookieStore
       .set({
         name,
@@ -34,7 +33,6 @@ function setCookie(name: string, value: string, maxAge: number): void {
         path: "/",
         expires: Date.now() + maxAge * 1000,
         sameSite: "lax",
-        secure: window.location.protocol === "https:",
       })
       .catch(() => {
         // Fail silently if Cookie Store API fails
@@ -50,7 +48,6 @@ function deleteCookie(name: string): void {
     return;
   }
   if ("cookieStore" in window) {
-    // @ts-expect-error cookieStore is not yet in TS lib.dom
     window.cookieStore.delete(name).catch(() => {
       // Fail silently if Cookie Store API fails
     });