@chai-ui/core 0.8.0 → 0.10.0

package/dist/voice-input.js

@@ -0,0 +1,207 @@
+/**
+ * Voice input for the Composer: record from the microphone, send the clip
+ * to a speech-to-text model, and hand back the transcript. Framework-free,
+ * so React and Vue each add only the button.
+ */
+import { abortError, isAbortError } from "./engine.js";
+import { createFalTranscriber } from "./engines/fal.js";
+/** How many level readings a waveform shows. */
+export const VOICE_LEVEL_COUNT = 48;
+export const DEFAULT_VOICE_MAX_SECONDS = 60;
+/** Recording formats, best first. Chrome and Firefox record WebM, Safari MP4. */
+const MIME_TYPES = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4", "audio/ogg;codecs=opus"];
+/** The `Transcribe` a config describes: its own, or a Fal transcriber for its model. */
+export function voiceTranscriber(config) {
+    return config.transcribe ?? createFalTranscriber({ model: config.model, endpoint: config.endpoint });
+}
+/** "0:05", "1:00": how long a recording has run. */
+export function formatVoiceElapsed(ms) {
+    const s = Math.floor(ms / 1000);
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+/** Why the microphone couldn't start, in words for the person. */
+export function describeMicError(err) {
+    const { name, message } = err ?? {};
+    // Chrome's wording when the computer, not the site, blocks the browser
+    // (macOS Privacy & Security, Windows microphone privacy).
+    if (name === "NotAllowedError" && /system/i.test(message ?? "")) {
+        return "Your computer is blocking this browser from the microphone. Allow it in your system's privacy settings, then reload.";
+    }
+    if (name === "NotAllowedError" || name === "SecurityError") {
+        return "Microphone access is blocked. Allow it in your browser's site settings to use voice input.";
+    }
+    if (name === "NotFoundError" || name === "OverconstrainedError")
+        return "No microphone found.";
+    if (name === "NotReadableError")
+        return "The microphone is in use by another app.";
+    return "The microphone couldn't start.";
+}
+/**
+ * The recorder behind the mic button. `start` asks for the microphone and
+ * records; `stop` ends the recording and transcribes it; `cancel` stops
+ * either without a transcript. `onTranscript` gets the text: it never
+ * submits, so the person can fix it first.
+ */
+export function createVoiceInput(getConfig, onTranscript, deps = {}) {
+    let state = { status: "idle", elapsedMs: 0, error: null, levels: [] };
+    const listeners = new Set();
+    const set = (next) => {
+        state = { ...state, ...next };
+        listeners.forEach((l) => l());
+    };
+    let recorder = null;
+    let stream = null;
+    let timer = null;
+    let controller = null;
+    let discard = false;
+    let audio = null;
+    let readLevel = null;
+    function release() {
+        if (timer)
+            clearInterval(timer);
+        timer = null;
+        void audio?.close().catch(() => { });
+        audio = null;
+        readLevel = null;
+        stream?.getTracks().forEach((t) => t.stop());
+        stream = null;
+        recorder = null;
+    }
+    async function start() {
+        if (state.status === "recording" || state.status === "transcribing")
+            return;
+        const Recorder = deps.MediaRecorder ?? (typeof MediaRecorder === "undefined" ? undefined : MediaRecorder);
+        const getUserMedia = deps.getUserMedia ?? (typeof navigator !== "undefined" ? navigator.mediaDevices?.getUserMedia?.bind(navigator.mediaDevices) : undefined);
+        if (!Recorder || !getUserMedia)
+            return set({ status: "error", error: "Voice input isn't supported in this browser." });
+        try {
+            stream = await getUserMedia({ audio: true });
+        }
+        catch (err) {
+            return set({ status: "error", error: describeMicError(err) });
+        }
+        const mimeType = MIME_TYPES.find((t) => Recorder.isTypeSupported?.(t));
+        const chunks = [];
+        discard = false;
+        recorder = new Recorder(stream, mimeType ? { mimeType } : undefined);
+        recorder.ondataavailable = (e) => {
+            if (e.data.size > 0)
+                chunks.push(e.data);
+        };
+        recorder.onstop = () => {
+            const type = recorder?.mimeType || mimeType || "audio/webm";
+            release();
+            if (discard)
+                return set({ status: "idle", elapsedMs: 0, levels: [] });
+            void transcribe(new Blob(chunks, { type }), type);
+        };
+        recorder.start();
+        readLevel = listen(stream);
+        const startedAt = Date.now();
+        const maxMs = (getConfig().maxSeconds ?? DEFAULT_VOICE_MAX_SECONDS) * 1000;
+        set({ status: "recording", elapsedMs: 0, error: null, levels: [] });
+        timer = setInterval(() => {
+            const elapsedMs = Date.now() - startedAt;
+            const levels = readLevel ? [...state.levels, readLevel()].slice(-VOICE_LEVEL_COUNT) : state.levels;
+            set({ elapsedMs, levels });
+            if (elapsedMs >= maxMs)
+                stop();
+        }, 80);
+    }
+    /** Reads the stream's loudness, 0–1, through Web Audio. Null without it. */
+    function listen(source) {
+        const Context = deps.AudioContext ?? (typeof AudioContext === "undefined" ? undefined : AudioContext);
+        if (!Context)
+            return null;
+        try {
+            audio = new Context();
+            const analyser = audio.createAnalyser();
+            analyser.fftSize = 256;
+            audio.createMediaStreamSource(source).connect(analyser);
+            const samples = new Uint8Array(analyser.fftSize);
+            return () => {
+                analyser.getByteTimeDomainData(samples);
+                let sum = 0;
+                for (const v of samples)
+                    sum += ((v - 128) / 128) ** 2;
+                // Speech sits low on this scale: lift it so a normal voice fills the bars.
+                return Math.min(1, Math.sqrt(sum / samples.length) * 4);
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    async function transcribe(blob, mimeType) {
+        if (blob.size === 0)
+            return set({ status: "error", error: "Nothing was recorded. Try again." });
+        set({ status: "transcribing", levels: [] });
+        controller = new AbortController();
+        try {
+            const src = await readAsDataUrl(blob);
+            if (controller.signal.aborted)
+                throw abortError();
+            const text = (await voiceTranscriber(getConfig())({ src, kind: "audio", mimeType }, { signal: controller.signal })).trim();
+            if (!text)
+                return set({ status: "error", error: "Didn't catch that. Try again." });
+            onTranscript(text);
+            set({ status: "idle", elapsedMs: 0, levels: [] });
+        }
+        catch (err) {
+            if (isAbortError(err))
+                return set({ status: "idle", elapsedMs: 0, levels: [] });
+            set({ status: "error", error: "Transcription failed. Try again." });
+        }
+        finally {
+            controller = null;
+        }
+    }
+    /** Ends the recording and transcribes it. */
+    function stop() {
+        if (recorder && recorder.state !== "inactive")
+            recorder.stop();
+    }
+    /** Stops recording or transcribing, with no transcript. */
+    function cancel() {
+        if (state.status === "recording") {
+            discard = true;
+            stop();
+        }
+        else if (state.status === "transcribing")
+            controller?.abort();
+    }
+    /** Clears an error, back to the idle mic. */
+    function dismiss() {
+        if (state.status === "error")
+            set({ status: "idle", error: null, elapsedMs: 0, levels: [] });
+    }
+    return {
+        getState: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        start,
+        stop,
+        cancel,
+        dismiss,
+        /** Stops everything, for when the Composer goes away. */
+        dispose() {
+            discard = true;
+            controller?.abort();
+            if (recorder && recorder.state !== "inactive")
+                recorder.stop();
+            release();
+        },
+    };
+}
+/** A clip's data URL, for the model's `audio_url`. */
+function readAsDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+    });
+}
+//# sourceMappingURL=voice-input.js.map

package/dist/voice-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-input.js","sourceRoot":"","sources":["../src/voice-input.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chai-ui/core",
-  "version": "0.8.0",
-  "description": "CHAI UI headless core — the Request/Run/Result data model and pluggable generation engines (Fal.ai, OpenRouter, mock). No framework, no rendering.",
+  "version": "0.10.0",
+  "description": "CHAI UI headless core — the Request/Run/Result data model and pluggable generation engines (Fal.ai, OpenRouter, Vercel AI Gateway, mock). No framework, no rendering.",
   "license": "MIT",
   "author": "kazarazat",
   "homepage": "https://chai-ui.com",
@@ -21,7 +21,8 @@
     "headless",
     "ai-engine",
     "fal",
-    "openrouter"
+    "openrouter",
+    "vercel-ai-gateway"
   ],
   "type": "module",
   "sideEffects": false,

package/src/composer-view.ts

@@ -220,6 +220,12 @@ export function composerView(props: ComposerViewInput) {
     offeredAspect,
     selectedAspect,
     world,
+    /**
+     * What an Enhance click rewrites for: the active use case, derived like
+     * a submit's `mode` ("text-to-text" with no use case picked, "vision"
+     * with media attached, "image-edit" while editing). Undefined for a world.
+     */
+    enhanceMode: editing ? ("image-edit" as const) : deriveGenerationUseCase(activeUseCases[0], attachments),
     /**
      * Why submit can't go yet, shown under the environment: there's
      * something to send (a character or an attachment) but no environment.

package/src/composer.ts

@@ -485,13 +485,17 @@ export function createComposerStore(getOptions: () => ComposerOptions, getProvid
     set((s) => ({ routing: false, runs: cancelAll(s.runs), editRuns: cancelAll(s.editRuns) }));
   }
 
-  /** Rewrites a prompt with the reasoning model, worded for its `field`. Only offer it when `reasoning()` is set. */
-  async function enhance(value: string, field?: ComposerPromptField): Promise<string> {
+  /**
+   * Rewrites a prompt with the reasoning model, worded for its `field` and
+   * `mode` (the Composer passes both to `onEnhance`, so `onEnhance={enhance}`
+   * rewrites for the use case on screen). Only offer it when `reasoning()` is set.
+   */
+  async function enhance(value: string, field?: ComposerPromptField, mode?: GenerationUseCase): Promise<string> {
     const r = reasoning();
     if (!r) throw new Error("[chai-ui] Enhance needs a reasoning engine and model.");
     set(() => ({ enhancing: true }));
     try {
-      const prompt = (getOptions().enhancePrompt ?? defaultEnhancePrompt)(value, state.runs[0]?.request.mode, field);
+      const prompt = (getOptions().enhancePrompt ?? defaultEnhancePrompt)(value, mode ?? state.runs[0]?.request.mode, field);
       const { src } = await r.engine.generate({ modelId: r.model, prompt, attachments: [] });
       return src;
     } finally {

package/src/engine.ts

@@ -1,6 +1,6 @@
 /**
  * A pluggable generation engine — the one interface every model provider
- * (`createFalEngine`, `createOpenRouterEngine`, `mockEngine`, or your own)
+ * (`createFalEngine`, `createOpenRouterEngine`, `createVercelEngine`, `mockEngine`, or your own)
  * implements, and the one `useComposer` calls. One call = one model run:
  * a prompt plus any attached media in, one piece of output back.
  *

package/src/engines/fal.ts

@@ -24,6 +24,7 @@
 import { abortError, abortableSleep, isAbortError, readEvaluations, type GenerationEngine } from "../engine.js";
 import type { DroppedMedia, MediaKind } from "../types.js";
 import { SUGGESTED_FAL_MODELS } from "../suggested-models.js";
+import type { Transcribe } from "../voice-input.js";
 
 /** Output kinds this engine can produce — text goes through a reasoning engine instead (see file doc comment). */
 type FalOutputKind = Exclude<MediaKind, "text">;
@@ -77,6 +78,9 @@ interface FalResultResponse {
   video?: { url: string };
   audio?: { url: string };
   audio_url?: string;
+  /** Speech-to-text models answer with the transcript in `text` or `output`. */
+  text?: string;
+  output?: string;
   error?: unknown;
   detail?: unknown;
 }
@@ -205,6 +209,12 @@ async function awaitFalJob(args: {
   return json;
 }
 
+/** The transcript in a Fal speech-to-text result: `text` (Wizper, Scribe, Cohere) or `output` (Fal's own, Nemotron). */
+export function extractFalTranscript(json: { text?: unknown; output?: unknown }): string | undefined {
+  const text = typeof json.text === "string" ? json.text : typeof json.output === "string" ? json.output : undefined;
+  return text?.trim();
+}
+
 /**
  * Asks Fal to drop a job (`PUT …/requests/<id>/cancel`). A queued job is
  * removed and never runs; a running one gets a cancel signal and may still
@@ -318,3 +328,48 @@ export async function pingFal(
     return { ok: false, error: err instanceof Error ? err.message : String(err) };
   }
 }
+
+export interface FalTranscriberOptions {
+  /** A Fal speech-to-text model id, e.g. `"fal-ai/wizper"`. Required: Chai doesn't pick one for you. */
+  model: string;
+  /** Same proxy route `createFalEngine` uses. Defaults to `/api/chai/fal`. */
+  endpoint?: string;
+  fetchImpl?: typeof fetch;
+  pollIntervalMs?: number;
+  timeoutMs?: number;
+}
+
+/**
+ * A `Transcribe` function on a Fal speech-to-text model, through the same
+ * server route as `createFalEngine`, so the key stays on the server. The
+ * recording goes to the model as `audio_url`, a data URL, like images do.
+ * With `allowedModels` on the handler, list the transcription model too.
+ */
+export function createFalTranscriber(options: FalTranscriberOptions): Transcribe {
+  const endpoint = options.endpoint ?? "/api/chai/fal";
+  // Called through a wrapper: browsers throw "Illegal invocation" when fetch runs with an object as `this`.
+  const fetchImpl: typeof fetch = (input, init) => (options.fetchImpl ?? fetch)(input, init);
+  const { model } = options;
+  return async (audio, { signal } = {}) => {
+    if (signal?.aborted) throw abortError();
+    const { requestId, status } = await submitFalJob({ endpoint, model, body: { audio_url: audio.src }, fetchImpl });
+    if (signal?.aborted) {
+      await cancelFalJob({ endpoint, model, requestId, fetchImpl });
+      throw abortError();
+    }
+    const result = await awaitFalJob({
+      endpoint,
+      model,
+      requestId,
+      status,
+      fetchImpl,
+      pollIntervalMs: options.pollIntervalMs ?? DEFAULT_POLL_INTERVAL_MS,
+      timeoutMs: options.timeoutMs ?? DEFAULT_TIMEOUT_MS,
+      signal,
+    }).catch(async (err) => {
+      if (isAbortError(err)) await cancelFalJob({ endpoint, model, requestId, fetchImpl });
+      throw err;
+    });
+    return extractFalTranscript(result) ?? "";
+  };
+}

package/src/engines/openrouter.ts

@@ -55,7 +55,7 @@ type ChatContentPart =
   | { type: "video_url"; video_url: { url: string } }
   | { type: "input_audio"; input_audio: { data: string; format: string } };
 
-interface ChatCompletionResponse {
+export interface ChatCompletionResponse {
   choices?: { message?: { content?: string } }[];
   // OpenAI-compatible shape OpenRouter itself uses; absent on some
   // providers routed through it, hence all-optional.
@@ -69,7 +69,7 @@ interface ChatCompletionResponse {
 }
 
 /** Converts OpenRouter's raw `usage` into `Usage`, computing `costUsd` only when a real rate was supplied. */
-function toUsage(
+export function toUsage(
   usage: ChatCompletionResponse["usage"],
   pricePerMillionTokens?: { input: number; output: number }
 ): Usage | undefined {
@@ -90,7 +90,7 @@ function toUsage(
 }
 
 /** Prefers the upstream provider's own error message over OpenRouter's generic wrapper, when both are present. */
-function describeError(json: ChatCompletionResponse, fallback: string): string {
+export function describeError(json: ChatCompletionResponse, fallback: string): string {
   const base = json.error?.message ?? fallback;
   const raw = json.error?.metadata?.raw;
   if (!raw) return base;

package/src/engines/vercel.ts

@@ -0,0 +1,198 @@
+/**
+ * A `GenerationEngine` backed by Vercel's AI Gateway (vercel.com/docs/ai-gateway)
+ * — one OpenAI-compatible endpoint in front of 200+ models from many labs.
+ * Covers text/reasoning (chat completions, the same wire format as
+ * OpenRouter) and image generation (the OpenAI-style images endpoint).
+ *
+ * Video isn't offered: the gateway's OpenAI-compatible surface has no
+ * confirmed video-generation endpoint, so `outputKind: "video"` doesn't
+ * exist here. Use `createFalEngine` for video.
+ *
+ * Security: this engine never sees an API key and never calls
+ * `ai-gateway.vercel.sh` directly. It POSTs to a same-origin `endpoint`
+ * (default `/api/chai/vercel`, served by `createChaiHandler`), which adds
+ * `AI_GATEWAY_API_KEY` (or `VERCEL_OIDC_TOKEN` on Vercel) server-side.
+ * Passing a key into this file would put it in the browser bundle; don't
+ * add one.
+ */
+
+import { readEvaluations, type GenerationEngine } from "../engine.js";
+import type { DroppedMedia, Evaluation, Usage } from "../types.js";
+import {
+  buildChatRequest,
+  describeError,
+  readChatStream,
+  toUsage,
+  type ChatCompletionResponse,
+} from "./openrouter.js";
+
+/** Output kinds the gateway can produce. Video is excluded: see the file doc comment. */
+export type VercelOutputKind = "text" | "image";
+
+export interface VercelEngineOptions {
+  /** Same-origin proxy base path; the engine appends `/chat` or `/images`. */
+  endpoint?: string;
+  /**
+   * Gateway model id (e.g. `"anthropic/claude-opus-5"`), used when the
+   * caller passes no `modelId` and no `modelByKind` entry matches. There is
+   * no built-in default: the gateway catalog changes often, so name the
+   * model you want.
+   */
+  model?: string;
+  /** Per-output-kind model override, e.g. a text model and an image model. */
+  modelByKind?: Partial<Record<VercelOutputKind, string>>;
+  /** Which kind of output this engine instance produces. Defaults to "text". */
+  outputKind?: VercelOutputKind;
+  /** Cap on a text response's length, as in `createOpenRouterEngine`. */
+  maxTokens?: number;
+  /** USD per million tokens, if you want `usage.costUsd` populated. Not defaulted, for the same reason as OpenRouter's. */
+  pricePerMillionTokens?: { input: number; output: number };
+  /** Injectable for tests; defaults to the global `fetch`. */
+  fetchImpl?: typeof fetch;
+}
+
+interface ImagesResponse extends ChatCompletionResponse {
+  data?: { url?: string; b64_json?: string }[];
+}
+
+export function createVercelEngine(options: VercelEngineOptions = {}): GenerationEngine {
+  const endpoint = (options.endpoint ?? "/api/chai/vercel").replace(/\/$/, "");
+  const fetchImpl = options.fetchImpl ?? fetch;
+  const outputKind = options.outputKind ?? "text";
+
+  return {
+    async generate({ modelId, prompt, attachments, onText, signal }) {
+      const model = modelId ?? options.modelByKind?.[outputKind] ?? options.model;
+      if (!model) {
+        throw new Error(
+          `vercelEngine: no model configured for outputKind "${outputKind}" — pass \`model\` or \`modelByKind.${outputKind}\`.`
+        );
+      }
+
+      if (outputKind === "image") {
+        if (attachments.length > 0) {
+          throw new Error("vercelEngine: image generation takes a prompt only; attachments aren't supported here.");
+        }
+        return generateImage({ endpoint, fetchImpl, model, prompt, signal });
+      }
+
+      return generateText({
+        endpoint,
+        fetchImpl,
+        model,
+        prompt,
+        attachments,
+        onText,
+        signal,
+        maxTokens: options.maxTokens,
+        pricePerMillionTokens: options.pricePerMillionTokens,
+      });
+    },
+  };
+}
+
+async function generateText(args: {
+  endpoint: string;
+  fetchImpl: typeof fetch;
+  model: string;
+  prompt: string;
+  attachments: DroppedMedia[];
+  onText?: (textSoFar: string) => void;
+  signal?: AbortSignal;
+  maxTokens?: number;
+  pricePerMillionTokens?: { input: number; output: number };
+}): Promise<{ src: string; kind: "text"; usage?: Usage; evaluations?: Evaluation[] }> {
+  const body = buildChatRequest({
+    model: args.model,
+    prompt: args.prompt,
+    media: args.attachments,
+    maxTokens: args.maxTokens,
+  });
+  const res = await args.fetchImpl(`${args.endpoint}/chat`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(args.onText ? { ...body, stream: true } : body),
+    signal: args.signal,
+  });
+
+  // A rejected request comes back as plain JSON even when streaming was asked for.
+  if (args.onText && res.ok) {
+    const { text, usage, evaluations } = await readChatStream(res, args.onText);
+    if (!text) throw new Error("vercelEngine: empty response from the AI Gateway");
+    return { src: text, kind: "text", usage: toUsage(usage, args.pricePerMillionTokens), evaluations };
+  }
+
+  const json = (await res.json().catch(() => ({}))) as ChatCompletionResponse;
+  if (!res.ok || json.error) {
+    throw new Error(`vercelEngine: ${describeError(json, `${res.status} ${res.statusText}`)}`);
+  }
+  const text = json.choices?.[0]?.message?.content;
+  if (!text) throw new Error("vercelEngine: empty response from the AI Gateway");
+  return {
+    src: text,
+    kind: "text",
+    usage: toUsage(json.usage, args.pricePerMillionTokens),
+    evaluations: readEvaluations(json),
+  };
+}
+
+/**
+ * Image generation through `/v1/images/generations`. The OpenAI images
+ * shape returns either a hosted `url` or inline `b64_json`; both come back
+ * as a usable `src`. The gateway's image endpoint takes no aspect-ratio
+ * field here, so the engine doesn't send one — size is the model's default.
+ */
+async function generateImage(args: {
+  endpoint: string;
+  fetchImpl: typeof fetch;
+  model: string;
+  prompt: string;
+  signal?: AbortSignal;
+}): Promise<{ src: string; kind: "image" }> {
+  const res = await args.fetchImpl(`${args.endpoint}/images`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ model: args.model, prompt: args.prompt, n: 1 }),
+    signal: args.signal,
+  });
+  const json = (await res.json().catch(() => ({}))) as ImagesResponse;
+  if (!res.ok || json.error) {
+    throw new Error(`vercelEngine: ${describeError(json, `${res.status} ${res.statusText}`)}`);
+  }
+  const item = json.data?.[0];
+  const src = item?.url ?? (item?.b64_json ? `data:image/png;base64,${item.b64_json}` : undefined);
+  if (!src) throw new Error("vercelEngine: no image in the AI Gateway's response");
+  return { src, kind: "image" };
+}
+
+/**
+ * A minimal, cheap connectivity check through the same-origin route — the
+ * "use real inference sparingly" path. Like `pingOpenRouter` and `pingFal`,
+ * it's triggered once by a person from the Develop page's "Test connection"
+ * button, never by a test or on mount. It needs a `model` because the
+ * gateway has no default.
+ */
+export async function pingVercel(
+  options: { endpoint?: string; model: string; fetchImpl?: typeof fetch }
+): Promise<{ ok: true; reply: string } | { ok: false; error: string }> {
+  const endpoint = (options.endpoint ?? "/api/chai/vercel").replace(/\/$/, "");
+  const fetchImpl = options.fetchImpl ?? fetch;
+  try {
+    const res = await fetchImpl(`${endpoint}/chat`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: options.model,
+        messages: [{ role: "user", content: "Reply with exactly one word: OK." }],
+        max_tokens: 5,
+      }),
+    });
+    const json = (await res.json().catch(() => ({}))) as ChatCompletionResponse;
+    if (!res.ok || json.error) {
+      return { ok: false, error: describeError(json, `${res.status} ${res.statusText}`) };
+    }
+    return { ok: true, reply: json.choices?.[0]?.message?.content?.trim() ?? "" };
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}

package/src/index.ts

@@ -4,6 +4,7 @@ export * from "./run.js";
 export * from "./media-analysis-prompts.js";
 export * from "./engines/openrouter.js";
 export * from "./engines/fal.js";
+export * from "./engines/vercel.js";
 export * from "./model-routing.js";
 export * from "./region-edit.js";
 export * from "./suggested-models.js";
@@ -15,3 +16,4 @@ export * from "./media-actions.js";
 export * from "./result-format.js";
 export * from "./composer-view.js";
 export * from "./edit-card.js";
+export * from "./voice-input.js";