@surf-kit/ai 0.1.1

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2026 surf-kit contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# @surf-kit/ai
+
+Adapter package bridging [surf-kit](https://github.com/barney-w/surf-kit) agent components with [Vercel AI SDK v6](https://sdk.vercel.ai/).
+
+## Installation
+
+```bash
+pnpm add @surf-kit/ai ai @ai-sdk/react
+```
+
+## Usage
+
+### useAIChat
+
+Wraps `useChat` from `@ai-sdk/react` and maps to surf-kit types (`ChatMessage`, `StreamState`).
+
+```tsx
+import { useAIChat } from '@surf-kit/ai'
+
+function Chat() {
+  const { messages, streamState, sendMessage, input, setInput, handleSubmit } =
+    useAIChat({ api: '/api/chat' })
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input value={input} onChange={(e) => setInput(e.target.value)} />
+      <button type="submit">Send</button>
+    </form>
+  )
+}
+```
+
+### useAIStream
+
+Wraps `useCompletion` from `@ai-sdk/react` for simple text streaming without chat history.
+
+```tsx
+import { useAIStream } from '@surf-kit/ai'
+
+function Completion() {
+  const { streamState, complete } = useAIStream({ api: '/api/complete' })
+  // ...
+}
+```
+
+### AIChat
+
+Drop-in chat component powered by surf-kit agent UI and the AI SDK.
+
+```tsx
+import { AIChat } from '@surf-kit/ai'
+
+function App() {
+  return <AIChat api="/api/chat" title="Assistant" />
+}
+```
+
+## When to Use This vs `@surf-kit/agent`
+
+| | `@surf-kit/agent` | `@surf-kit/ai` |
+|---|---|---|
+| **Backend** | Custom SSE with surf-kit's bespoke protocol | Vercel AI SDK v6 (`/api/chat`) |
+| **Entry point** | `<AgentChat>` | `<AIChat>` |
+| **UI components** | surf-kit agent UI | Same surf-kit agent UI |
+| **Best for** | Full control over streaming protocol | Standard AI SDK backends (OpenAI, Anthropic, etc.) |
+
+Both packages render the same surf-kit UI components — the difference is how they connect to your backend.
+
+## License
+
+0BSD

package/dist/index.cjs

@@ -0,0 +1,164 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AIChat: () => AIChat,
+  useAIChat: () => useAIChat,
+  useAIStream: () => useAIStream
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/useAIChat.ts
+var import_react = require("@ai-sdk/react");
+var import_ai = require("ai");
+function getTextContent(message) {
+  return message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+}
+function useAIChat(options = {}) {
+  const chat = (0, import_react.useChat)({
+    transport: new import_ai.DefaultChatTransport({
+      api: options.api,
+      headers: options.headers,
+      body: options.body
+    }),
+    onError: options.onError,
+    onFinish: options.onFinish
+  });
+  const messages = chat.messages.map((m) => ({
+    id: m.id,
+    role: m.role,
+    content: getTextContent(m),
+    timestamp: /* @__PURE__ */ new Date()
+  }));
+  const isStreaming = chat.status === "streaming";
+  const lastMessageContent = chat.messages.length > 0 ? getTextContent(chat.messages[chat.messages.length - 1]) : "";
+  const streamState = {
+    active: isStreaming,
+    phase: isStreaming ? "generating" : "idle",
+    content: isStreaming ? lastMessageContent : "",
+    sources: [],
+    agent: null,
+    agentLabel: null
+  };
+  return {
+    messages,
+    streamState,
+    sendMessage: (content) => {
+      void chat.sendMessage({ text: content });
+    },
+    isLoading: isStreaming || chat.status === "submitted",
+    error: chat.error,
+    stop: chat.stop,
+    regenerate: () => {
+      void chat.regenerate();
+    }
+  };
+}
+
+// src/hooks/useAIStream.ts
+var import_react2 = require("@ai-sdk/react");
+function useAIStream(options = {}) {
+  const completion = (0, import_react2.useCompletion)({
+    api: options.api,
+    onFinish: options.onFinish,
+    onError: options.onError,
+    headers: options.headers,
+    body: options.body
+  });
+  const streamState = {
+    active: completion.isLoading,
+    phase: completion.isLoading ? "generating" : "idle",
+    content: completion.completion,
+    sources: [],
+    agent: null,
+    agentLabel: null
+  };
+  return {
+    streamState,
+    completion: completion.completion,
+    complete: (prompt) => {
+      void completion.complete(prompt);
+    },
+    isLoading: completion.isLoading,
+    error: completion.error,
+    stop: completion.stop,
+    input: completion.input,
+    setInput: completion.setInput,
+    handleSubmit: completion.handleSubmit
+  };
+}
+
+// src/components/AIChat.tsx
+var import_agent = require("@surf-kit/agent");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AIChat({
+  title = "Chat",
+  welcomeMessage = "How can I help you today?",
+  suggestedQuestions = [],
+  showHeader = true,
+  showSources,
+  showConfidence,
+  className,
+  ...chatOptions
+}) {
+  const { messages, streamState, sendMessage, isLoading } = useAIChat(chatOptions);
+  const hasMessages = messages.length > 0;
+  const handleQuestionSelect = (question) => {
+    sendMessage(question);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: [
+        "flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-between border-b border-border px-4 py-3 bg-surface-raised shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-base font-semibold text-text-primary", children: title }) }),
+        hasMessages ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_agent.MessageThread,
+          {
+            messages,
+            streamingSlot: streamState.active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_agent.StreamingMessage, { stream: streamState }) : void 0,
+            showSources,
+            showConfidence
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_agent.WelcomeScreen,
+          {
+            title,
+            message: welcomeMessage,
+            suggestedQuestions,
+            onQuestionSelect: handleQuestionSelect
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_agent.MessageComposer, { onSend: sendMessage, isLoading })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AIChat,
+  useAIChat,
+  useAIStream
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/useAIChat.ts","../src/hooks/useAIStream.ts","../src/components/AIChat.tsx"],"sourcesContent":["// Types\nexport type {\n  UseAIChatOptions,\n  UseAIChatReturn,\n  UseAIStreamOptions,\n  UseAIStreamReturn,\n} from './types'\n\n// Re-exported surf-kit types for convenience\nexport type { ChatMessage, StreamState } from './types'\n\n// Hooks\nexport { useAIChat } from './hooks/useAIChat'\nexport { useAIStream } from './hooks/useAIStream'\n\n// Components\nexport { AIChat } from './components/AIChat'\nexport type { AIChatProps } from './components/AIChat'\n","import { useChat } from '@ai-sdk/react'\nimport { DefaultChatTransport } from 'ai'\nimport type { UIMessage } from 'ai'\nimport type { ChatMessage, StreamState } from '@surf-kit/agent'\nimport type { UseAIChatOptions, UseAIChatReturn } from '../types'\n\n/**\n * Extract the text content from a UIMessage by concatenating all text parts.\n */\nfunction getTextContent(message: UIMessage): string {\n  return message.parts\n    .filter((part): part is { type: 'text'; text: string } => part.type === 'text')\n    .map((part) => part.text)\n    .join('')\n}\n\n/**\n * Adapter hook that wraps Vercel AI SDK v6's `useChat` and maps\n * its state to surf-kit `ChatMessage` and `StreamState` types.\n */\nexport function useAIChat(options: UseAIChatOptions = {}): UseAIChatReturn {\n  const chat = useChat({\n    transport: new DefaultChatTransport({\n      api: options.api,\n      headers: options.headers,\n      body: options.body,\n    }),\n    onError: options.onError,\n    onFinish: options.onFinish,\n  })\n\n  // Convert AI SDK v6 UIMessage (parts-based) to surf-kit ChatMessage format\n  const messages: ChatMessage[] = chat.messages.map((m) => ({\n    id: m.id,\n    role: m.role as 'user' | 'assistant',\n    content: getTextContent(m),\n    timestamp: new Date(),\n  }))\n\n  const isStreaming = chat.status === 'streaming'\n  const lastMessageContent = chat.messages.length > 0\n    ? getTextContent(chat.messages[chat.messages.length - 1])\n    : ''\n\n  const streamState: StreamState = {\n    active: isStreaming,\n    phase: isStreaming ? 'generating' : 'idle',\n    content: isStreaming ? lastMessageContent : '',\n    sources: [],\n    agent: null,\n    agentLabel: null,\n  }\n\n  return {\n    messages,\n    streamState,\n    sendMessage: (content: string) => {\n      void chat.sendMessage({ text: content })\n    },\n    isLoading: isStreaming || chat.status === 'submitted',\n    error: chat.error,\n    stop: chat.stop,\n    regenerate: () => {\n      void chat.regenerate()\n    },\n  }\n}\n","import { useCompletion } from '@ai-sdk/react'\nimport type { StreamState } from '@surf-kit/agent'\nimport type { UseAIStreamOptions, UseAIStreamReturn } from '../types'\n\n/**\n * Adapter hook that wraps Vercel AI SDK v6's `useCompletion` for simple\n * text streaming (no chat history). Maps state to surf-kit `StreamState`.\n */\nexport function useAIStream(options: UseAIStreamOptions = {}): UseAIStreamReturn {\n  const completion = useCompletion({\n    api: options.api,\n    onFinish: options.onFinish,\n    onError: options.onError,\n    headers: options.headers,\n    body: options.body,\n  })\n\n  const streamState: StreamState = {\n    active: completion.isLoading,\n    phase: completion.isLoading ? 'generating' : 'idle',\n    content: completion.completion,\n    sources: [],\n    agent: null,\n    agentLabel: null,\n  }\n\n  return {\n    streamState,\n    completion: completion.completion,\n    complete: (prompt: string) => {\n      void completion.complete(prompt)\n    },\n    isLoading: completion.isLoading,\n    error: completion.error,\n    stop: completion.stop,\n    input: completion.input,\n    setInput: completion.setInput,\n    handleSubmit: completion.handleSubmit,\n  }\n}\n","import React from 'react'\nimport { MessageThread, MessageComposer, WelcomeScreen, StreamingMessage } from '@surf-kit/agent'\nimport { useAIChat } from '../hooks/useAIChat'\nimport type { UseAIChatOptions } from '../types'\n\nexport interface AIChatProps extends UseAIChatOptions {\n  /** Title shown in the header */\n  title?: string\n  /** Message displayed on the welcome screen */\n  welcomeMessage?: string\n  /** Suggested questions shown on the welcome screen */\n  suggestedQuestions?: string[]\n  /** Whether to show the header bar */\n  showHeader?: boolean\n  /** Whether to show source citations */\n  showSources?: boolean\n  /** Whether to show confidence indicators */\n  showConfidence?: boolean\n  /** Additional CSS class names */\n  className?: string\n}\n\n/**\n * Drop-in chat component powered by Vercel AI SDK v6 and surf-kit agent UI.\n * Composes `MessageThread`, `MessageComposer`, `StreamingMessage`, and\n * `WelcomeScreen` from `@surf-kit/agent`.\n */\nexport function AIChat({\n  title = 'Chat',\n  welcomeMessage = 'How can I help you today?',\n  suggestedQuestions = [],\n  showHeader = true,\n  showSources,\n  showConfidence,\n  className,\n  ...chatOptions\n}: AIChatProps) {\n  const { messages, streamState, sendMessage, isLoading } = useAIChat(chatOptions)\n\n  const hasMessages = messages.length > 0\n\n  const handleQuestionSelect = (question: string) => {\n    sendMessage(question)\n  }\n\n  return (\n    <div\n      className={[\n        'flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {showHeader && (\n        <div className=\"flex items-center justify-between border-b border-border px-4 py-3 bg-surface-raised shrink-0\">\n          <h1 className=\"text-base font-semibold text-text-primary\">{title}</h1>\n        </div>\n      )}\n\n      {hasMessages ? (\n        <MessageThread\n          messages={messages}\n          streamingSlot={\n            streamState.active ? <StreamingMessage stream={streamState} /> : undefined\n          }\n          showSources={showSources}\n          showConfidence={showConfidence}\n        />\n      ) : (\n        <WelcomeScreen\n          title={title}\n          message={welcomeMessage}\n          suggestedQuestions={suggestedQuestions}\n          onQuestionSelect={handleQuestionSelect}\n        />\n      )}\n\n      <MessageComposer onSend={sendMessage} isLoading={isLoading} />\n    </div>\n  )\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,109 @@
+import { ChatMessage, StreamState } from '@surf-kit/agent';
+export { ChatMessage, StreamState } from '@surf-kit/agent';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Options for the useAIChat hook */
+interface UseAIChatOptions {
+    /** API endpoint for chat completions. Defaults to '/api/chat'. */
+    api?: string;
+    /** Callback when a response finishes streaming */
+    onFinish?: (params: {
+        messages: unknown[];
+    }) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Additional headers to send with requests */
+    headers?: Record<string, string>;
+    /** Additional body fields to send with requests */
+    body?: Record<string, unknown>;
+}
+/** Return type for the useAIChat hook */
+interface UseAIChatReturn {
+    /** Messages converted to surf-kit ChatMessage format */
+    messages: ChatMessage[];
+    /** Current streaming state in surf-kit StreamState format */
+    streamState: StreamState;
+    /** Send a new user message */
+    sendMessage: (content: string) => void;
+    /** Whether a response is currently streaming */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Stop the current stream */
+    stop: () => void;
+    /** Regenerate the last assistant message */
+    regenerate: () => void;
+}
+/** Options for the useAIStream hook */
+interface UseAIStreamOptions {
+    /** API endpoint for completions */
+    api?: string;
+    /** Callback when a completion finishes */
+    onFinish?: (prompt: string, completion: string) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Additional headers to send with requests */
+    headers?: Record<string, string>;
+    /** Additional body fields to send with requests */
+    body?: Record<string, unknown>;
+}
+/** Return type for the useAIStream hook */
+interface UseAIStreamReturn {
+    /** Current streaming state in surf-kit StreamState format */
+    streamState: StreamState;
+    /** The completed text */
+    completion: string;
+    /** Trigger a completion */
+    complete: (prompt: string) => void;
+    /** Whether a completion is currently streaming */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Stop the current stream */
+    stop: () => void;
+    /** Controlled input value */
+    input: string;
+    /** Set the controlled input value */
+    setInput: (input: string) => void;
+    /** Form submit handler */
+    handleSubmit: (e?: {
+        preventDefault?: () => void;
+    }) => void;
+}
+
+/**
+ * Adapter hook that wraps Vercel AI SDK v6's `useChat` and maps
+ * its state to surf-kit `ChatMessage` and `StreamState` types.
+ */
+declare function useAIChat(options?: UseAIChatOptions): UseAIChatReturn;
+
+/**
+ * Adapter hook that wraps Vercel AI SDK v6's `useCompletion` for simple
+ * text streaming (no chat history). Maps state to surf-kit `StreamState`.
+ */
+declare function useAIStream(options?: UseAIStreamOptions): UseAIStreamReturn;
+
+interface AIChatProps extends UseAIChatOptions {
+    /** Title shown in the header */
+    title?: string;
+    /** Message displayed on the welcome screen */
+    welcomeMessage?: string;
+    /** Suggested questions shown on the welcome screen */
+    suggestedQuestions?: string[];
+    /** Whether to show the header bar */
+    showHeader?: boolean;
+    /** Whether to show source citations */
+    showSources?: boolean;
+    /** Whether to show confidence indicators */
+    showConfidence?: boolean;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * Drop-in chat component powered by Vercel AI SDK v6 and surf-kit agent UI.
+ * Composes `MessageThread`, `MessageComposer`, `StreamingMessage`, and
+ * `WelcomeScreen` from `@surf-kit/agent`.
+ */
+declare function AIChat({ title, welcomeMessage, suggestedQuestions, showHeader, showSources, showConfidence, className, ...chatOptions }: AIChatProps): react_jsx_runtime.JSX.Element;
+
+export { AIChat, type AIChatProps, type UseAIChatOptions, type UseAIChatReturn, type UseAIStreamOptions, type UseAIStreamReturn, useAIChat, useAIStream };

package/dist/index.d.ts

@@ -0,0 +1,109 @@
+import { ChatMessage, StreamState } from '@surf-kit/agent';
+export { ChatMessage, StreamState } from '@surf-kit/agent';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Options for the useAIChat hook */
+interface UseAIChatOptions {
+    /** API endpoint for chat completions. Defaults to '/api/chat'. */
+    api?: string;
+    /** Callback when a response finishes streaming */
+    onFinish?: (params: {
+        messages: unknown[];
+    }) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Additional headers to send with requests */
+    headers?: Record<string, string>;
+    /** Additional body fields to send with requests */
+    body?: Record<string, unknown>;
+}
+/** Return type for the useAIChat hook */
+interface UseAIChatReturn {
+    /** Messages converted to surf-kit ChatMessage format */
+    messages: ChatMessage[];
+    /** Current streaming state in surf-kit StreamState format */
+    streamState: StreamState;
+    /** Send a new user message */
+    sendMessage: (content: string) => void;
+    /** Whether a response is currently streaming */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Stop the current stream */
+    stop: () => void;
+    /** Regenerate the last assistant message */
+    regenerate: () => void;
+}
+/** Options for the useAIStream hook */
+interface UseAIStreamOptions {
+    /** API endpoint for completions */
+    api?: string;
+    /** Callback when a completion finishes */
+    onFinish?: (prompt: string, completion: string) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Additional headers to send with requests */
+    headers?: Record<string, string>;
+    /** Additional body fields to send with requests */
+    body?: Record<string, unknown>;
+}
+/** Return type for the useAIStream hook */
+interface UseAIStreamReturn {
+    /** Current streaming state in surf-kit StreamState format */
+    streamState: StreamState;
+    /** The completed text */
+    completion: string;
+    /** Trigger a completion */
+    complete: (prompt: string) => void;
+    /** Whether a completion is currently streaming */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | undefined;
+    /** Stop the current stream */
+    stop: () => void;
+    /** Controlled input value */
+    input: string;
+    /** Set the controlled input value */
+    setInput: (input: string) => void;
+    /** Form submit handler */
+    handleSubmit: (e?: {
+        preventDefault?: () => void;
+    }) => void;
+}
+
+/**
+ * Adapter hook that wraps Vercel AI SDK v6's `useChat` and maps
+ * its state to surf-kit `ChatMessage` and `StreamState` types.
+ */
+declare function useAIChat(options?: UseAIChatOptions): UseAIChatReturn;
+
+/**
+ * Adapter hook that wraps Vercel AI SDK v6's `useCompletion` for simple
+ * text streaming (no chat history). Maps state to surf-kit `StreamState`.
+ */
+declare function useAIStream(options?: UseAIStreamOptions): UseAIStreamReturn;
+
+interface AIChatProps extends UseAIChatOptions {
+    /** Title shown in the header */
+    title?: string;
+    /** Message displayed on the welcome screen */
+    welcomeMessage?: string;
+    /** Suggested questions shown on the welcome screen */
+    suggestedQuestions?: string[];
+    /** Whether to show the header bar */
+    showHeader?: boolean;
+    /** Whether to show source citations */
+    showSources?: boolean;
+    /** Whether to show confidence indicators */
+    showConfidence?: boolean;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * Drop-in chat component powered by Vercel AI SDK v6 and surf-kit agent UI.
+ * Composes `MessageThread`, `MessageComposer`, `StreamingMessage`, and
+ * `WelcomeScreen` from `@surf-kit/agent`.
+ */
+declare function AIChat({ title, welcomeMessage, suggestedQuestions, showHeader, showSources, showConfidence, className, ...chatOptions }: AIChatProps): react_jsx_runtime.JSX.Element;
+
+export { AIChat, type AIChatProps, type UseAIChatOptions, type UseAIChatReturn, type UseAIStreamOptions, type UseAIStreamReturn, useAIChat, useAIStream };

package/dist/index.js

@@ -0,0 +1,135 @@
+// src/hooks/useAIChat.ts
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+function getTextContent(message) {
+  return message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+}
+function useAIChat(options = {}) {
+  const chat = useChat({
+    transport: new DefaultChatTransport({
+      api: options.api,
+      headers: options.headers,
+      body: options.body
+    }),
+    onError: options.onError,
+    onFinish: options.onFinish
+  });
+  const messages = chat.messages.map((m) => ({
+    id: m.id,
+    role: m.role,
+    content: getTextContent(m),
+    timestamp: /* @__PURE__ */ new Date()
+  }));
+  const isStreaming = chat.status === "streaming";
+  const lastMessageContent = chat.messages.length > 0 ? getTextContent(chat.messages[chat.messages.length - 1]) : "";
+  const streamState = {
+    active: isStreaming,
+    phase: isStreaming ? "generating" : "idle",
+    content: isStreaming ? lastMessageContent : "",
+    sources: [],
+    agent: null,
+    agentLabel: null
+  };
+  return {
+    messages,
+    streamState,
+    sendMessage: (content) => {
+      void chat.sendMessage({ text: content });
+    },
+    isLoading: isStreaming || chat.status === "submitted",
+    error: chat.error,
+    stop: chat.stop,
+    regenerate: () => {
+      void chat.regenerate();
+    }
+  };
+}
+
+// src/hooks/useAIStream.ts
+import { useCompletion } from "@ai-sdk/react";
+function useAIStream(options = {}) {
+  const completion = useCompletion({
+    api: options.api,
+    onFinish: options.onFinish,
+    onError: options.onError,
+    headers: options.headers,
+    body: options.body
+  });
+  const streamState = {
+    active: completion.isLoading,
+    phase: completion.isLoading ? "generating" : "idle",
+    content: completion.completion,
+    sources: [],
+    agent: null,
+    agentLabel: null
+  };
+  return {
+    streamState,
+    completion: completion.completion,
+    complete: (prompt) => {
+      void completion.complete(prompt);
+    },
+    isLoading: completion.isLoading,
+    error: completion.error,
+    stop: completion.stop,
+    input: completion.input,
+    setInput: completion.setInput,
+    handleSubmit: completion.handleSubmit
+  };
+}
+
+// src/components/AIChat.tsx
+import { MessageThread, MessageComposer, WelcomeScreen, StreamingMessage } from "@surf-kit/agent";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AIChat({
+  title = "Chat",
+  welcomeMessage = "How can I help you today?",
+  suggestedQuestions = [],
+  showHeader = true,
+  showSources,
+  showConfidence,
+  className,
+  ...chatOptions
+}) {
+  const { messages, streamState, sendMessage, isLoading } = useAIChat(chatOptions);
+  const hasMessages = messages.length > 0;
+  const handleQuestionSelect = (question) => {
+    sendMessage(question);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        showHeader && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border px-4 py-3 bg-surface-raised shrink-0", children: /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-text-primary", children: title }) }),
+        hasMessages ? /* @__PURE__ */ jsx(
+          MessageThread,
+          {
+            messages,
+            streamingSlot: streamState.active ? /* @__PURE__ */ jsx(StreamingMessage, { stream: streamState }) : void 0,
+            showSources,
+            showConfidence
+          }
+        ) : /* @__PURE__ */ jsx(
+          WelcomeScreen,
+          {
+            title,
+            message: welcomeMessage,
+            suggestedQuestions,
+            onQuestionSelect: handleQuestionSelect
+          }
+        ),
+        /* @__PURE__ */ jsx(MessageComposer, { onSend: sendMessage, isLoading })
+      ]
+    }
+  );
+}
+export {
+  AIChat,
+  useAIChat,
+  useAIStream
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useAIChat.ts","../src/hooks/useAIStream.ts","../src/components/AIChat.tsx"],"sourcesContent":["import { useChat } from '@ai-sdk/react'\nimport { DefaultChatTransport } from 'ai'\nimport type { UIMessage } from 'ai'\nimport type { ChatMessage, StreamState } from '@surf-kit/agent'\nimport type { UseAIChatOptions, UseAIChatReturn } from '../types'\n\n/**\n * Extract the text content from a UIMessage by concatenating all text parts.\n */\nfunction getTextContent(message: UIMessage): string {\n  return message.parts\n    .filter((part): part is { type: 'text'; text: string } => part.type === 'text')\n    .map((part) => part.text)\n    .join('')\n}\n\n/**\n * Adapter hook that wraps Vercel AI SDK v6's `useChat` and maps\n * its state to surf-kit `ChatMessage` and `StreamState` types.\n */\nexport function useAIChat(options: UseAIChatOptions = {}): UseAIChatReturn {\n  const chat = useChat({\n    transport: new DefaultChatTransport({\n      api: options.api,\n      headers: options.headers,\n      body: options.body,\n    }),\n    onError: options.onError,\n    onFinish: options.onFinish,\n  })\n\n  // Convert AI SDK v6 UIMessage (parts-based) to surf-kit ChatMessage format\n  const messages: ChatMessage[] = chat.messages.map((m) => ({\n    id: m.id,\n    role: m.role as 'user' | 'assistant',\n    content: getTextContent(m),\n    timestamp: new Date(),\n  }))\n\n  const isStreaming = chat.status === 'streaming'\n  const lastMessageContent = chat.messages.length > 0\n    ? getTextContent(chat.messages[chat.messages.length - 1])\n    : ''\n\n  const streamState: StreamState = {\n    active: isStreaming,\n    phase: isStreaming ? 'generating' : 'idle',\n    content: isStreaming ? lastMessageContent : '',\n    sources: [],\n    agent: null,\n    agentLabel: null,\n  }\n\n  return {\n    messages,\n    streamState,\n    sendMessage: (content: string) => {\n      void chat.sendMessage({ text: content })\n    },\n    isLoading: isStreaming || chat.status === 'submitted',\n    error: chat.error,\n    stop: chat.stop,\n    regenerate: () => {\n      void chat.regenerate()\n    },\n  }\n}\n","import { useCompletion } from '@ai-sdk/react'\nimport type { StreamState } from '@surf-kit/agent'\nimport type { UseAIStreamOptions, UseAIStreamReturn } from '../types'\n\n/**\n * Adapter hook that wraps Vercel AI SDK v6's `useCompletion` for simple\n * text streaming (no chat history). Maps state to surf-kit `StreamState`.\n */\nexport function useAIStream(options: UseAIStreamOptions = {}): UseAIStreamReturn {\n  const completion = useCompletion({\n    api: options.api,\n    onFinish: options.onFinish,\n    onError: options.onError,\n    headers: options.headers,\n    body: options.body,\n  })\n\n  const streamState: StreamState = {\n    active: completion.isLoading,\n    phase: completion.isLoading ? 'generating' : 'idle',\n    content: completion.completion,\n    sources: [],\n    agent: null,\n    agentLabel: null,\n  }\n\n  return {\n    streamState,\n    completion: completion.completion,\n    complete: (prompt: string) => {\n      void completion.complete(prompt)\n    },\n    isLoading: completion.isLoading,\n    error: completion.error,\n    stop: completion.stop,\n    input: completion.input,\n    setInput: completion.setInput,\n    handleSubmit: completion.handleSubmit,\n  }\n}\n","import React from 'react'\nimport { MessageThread, MessageComposer, WelcomeScreen, StreamingMessage } from '@surf-kit/agent'\nimport { useAIChat } from '../hooks/useAIChat'\nimport type { UseAIChatOptions } from '../types'\n\nexport interface AIChatProps extends UseAIChatOptions {\n  /** Title shown in the header */\n  title?: string\n  /** Message displayed on the welcome screen */\n  welcomeMessage?: string\n  /** Suggested questions shown on the welcome screen */\n  suggestedQuestions?: string[]\n  /** Whether to show the header bar */\n  showHeader?: boolean\n  /** Whether to show source citations */\n  showSources?: boolean\n  /** Whether to show confidence indicators */\n  showConfidence?: boolean\n  /** Additional CSS class names */\n  className?: string\n}\n\n/**\n * Drop-in chat component powered by Vercel AI SDK v6 and surf-kit agent UI.\n * Composes `MessageThread`, `MessageComposer`, `StreamingMessage`, and\n * `WelcomeScreen` from `@surf-kit/agent`.\n */\nexport function AIChat({\n  title = 'Chat',\n  welcomeMessage = 'How can I help you today?',\n  suggestedQuestions = [],\n  showHeader = true,\n  showSources,\n  showConfidence,\n  className,\n  ...chatOptions\n}: AIChatProps) {\n  const { messages, streamState, sendMessage, isLoading } = useAIChat(chatOptions)\n\n  const hasMessages = messages.length > 0\n\n  const handleQuestionSelect = (question: string) => {\n    sendMessage(question)\n  }\n\n  return (\n    <div\n      className={[\n        'flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {showHeader && (\n        <div className=\"flex items-center justify-between border-b border-border px-4 py-3 bg-surface-raised shrink-0\">\n          <h1 className=\"text-base font-semibold text-text-primary\">{title}</h1>\n        </div>\n      )}\n\n      {hasMessages ? (\n        <MessageThread\n          messages={messages}\n          streamingSlot={\n            streamState.active ? <StreamingMessage stream={streamState} /> : undefined\n          }\n          showSources={showSources}\n          showConfidence={showConfidence}\n        />\n      ) : (\n        <WelcomeScreen\n          title={title}\n          message={welcomeMessage}\n          suggestedQuestions={suggestedQuestions}\n          onQuestionSelect={handleQuestionSelect}\n        />\n      )}\n\n      <MessageComposer onSend={sendMessage} isLoading={isLoading} />\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@surf-kit/ai",
+  "version": "0.1.1",
+  "description": "Adapter bridging surf-kit agent components with Vercel AI SDK v6",
+  "keywords": [
+    "react",
+    "ai",
+    "vercel-ai-sdk",
+    "adapter",
+    "chat",
+    "streaming",
+    "design-system"
+  ],
+  "license": "0BSD",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/barney-w/surf-kit.git",
+    "directory": "packages/ai"
+  },
+  "homepage": "https://github.com/barney-w/surf-kit#readme",
+  "bugs": {
+    "url": "https://github.com/barney-w/surf-kit/issues"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "dependencies": {
+    "ai": "^6.0.0",
+    "@ai-sdk/react": "^3.0.0",
+    "@surf-kit/agent": "0.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.0",
+    "vitest": "^4.0.0",
+    "@surf-kit/tsconfig": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}