@kitn.ai/ui 0.15.0 → 0.16.0

package/llms-full.txt

@@ -3,7 +3,7 @@
 
 # @kitn.ai/ui
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 44 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 44 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 

package/llms.txt

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
 # @kitn.ai/ui
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 44 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 44 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitn.ai/ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "description": "Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.",
   "keywords": [
@@ -30,20 +30,30 @@
   "bugs": {
     "url": "https://github.com/kitn-ai/ui/issues"
   },
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "unpkg": "./dist/kitn-chat.es.js",
   "jsdelivr": "./dist/kitn-chat.es.js",
   "customElements": "dist/custom-elements.json",
+  "bin": {
+    "kai-mcp": "./bin/mcp.js"
+  },
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./elements": {
-      "types": "./src/elements/element-types.d.ts",
+      "types": "./dist/elements.d.ts",
       "default": "./dist/kitn-chat.es.js"
     },
     "./theme.css": "./theme.css",
     "./theme.tokens.css": "./dist/theme.tokens.css",
-    "./react": "./frameworks/react/index.tsx",
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react.js"
+    },
     "./provider": {
       "types": "./dist/kitn-chat-provider.d.ts",
       "default": "./dist/kitn-chat-provider.es.js"
@@ -52,6 +62,12 @@
   "files": [
     "dist",
     "src",
+    "bin",
+    "!src/**/*.stories.tsx",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.mdx",
+    "!src/stories",
     "frameworks",
     "theme.css",
     "llms.txt",
@@ -60,7 +76,7 @@
   "scripts": {
     "prepublishOnly": "npm run build",
     "prebuild": "npm run build:css",
-    "build": "vite build --config vite.config.ts && vite build --config vite.config.provider.ts",
+    "build": "vite build --config vite.config.ts && vite build --config vite.config.provider.ts && vite build --config vite.config.react.ts && vite build --config vite.config.barrel.ts && vite build --config vite.config.mcp.ts",
     "postbuild": "npm run build:theme && npm run build:api && npm run build:schemas",
     "build:theme": "node scripts/build-theme-tokens.mjs",
     "build:api": "node scripts/gen-element-api.mjs",
@@ -69,7 +85,7 @@
     "test:react": "vitest run --config vitest.react.config.ts",
     "test:storybook": "vitest run --project=storybook",
     "test:watch": "vitest",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.react.json && tsc --noEmit -p tsconfig.react.test.json",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.react.json && tsc --noEmit -p tsconfig.react.test.json && tsc --noEmit -p tsconfig.mcp.json",
     "examples": "echo 'Serving repo root on http://localhost:8000 — open http://localhost:8000/examples/composable/index.html' && python3 -m http.server 8000",
     "dev": "npm run build:css && storybook dev -p 6006",
     "storybook": "npm run build:css && storybook dev -p 6006",
@@ -82,6 +98,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@shikijs/langs": "^4.2.0",
     "@shikijs/themes": "^4.2.0",
     "class-variance-authority": "^0.7.0",
@@ -91,7 +108,8 @@
     "shiki": "^4.0.2",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.0",
-    "tailwind-merge": "^2.5.0"
+    "tailwind-merge": "^2.5.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
@@ -105,6 +123,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.3.2",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
@@ -130,8 +149,7 @@
     "vitest": "^4.1.0"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "solid-js": "^1.9.0"
+    "react": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {

package/src/agent-tooling/archetypes.ts

@@ -0,0 +1,46 @@
+import type { Archetype } from './types';
+
+export const archetypes: Archetype[] = [
+  {
+    id: 'drop-in-chat',
+    title: 'Drop-in chat',
+    components: ['kai-chat'],
+    defaultPlacement: 'full-page',
+    docsSlug: 'examples/drop-in-chat',
+  },
+  {
+    id: 'support-widget',
+    title: 'Support widget',
+    components: ['kai-chat'],
+    defaultPlacement: 'docked-widget',
+    docsSlug: 'examples/support-widget',
+  },
+  {
+    id: 'knowledge-base',
+    title: 'Knowledge base / RAG',
+    components: ['kai-chat', 'kai-sources'],
+    defaultPlacement: 'full-page',
+    docsSlug: 'examples/knowledge-base',
+  },
+  {
+    id: 'agentic',
+    title: 'Agentic assistant',
+    components: ['kai-chat', 'kai-tool', 'kai-reasoning'],
+    defaultPlacement: 'side',
+    docsSlug: 'examples/agentic-assistant',
+  },
+  {
+    id: 'workspace',
+    title: 'Agentic workspace',
+    components: ['kai-chat', 'kai-artifact', 'kai-resizable'],
+    defaultPlacement: 'side',
+    docsSlug: 'examples/workspace',
+  },
+  {
+    id: 'voice',
+    title: 'Voice assistant',
+    components: ['kai-chat', 'kai-voice-input'],
+    defaultPlacement: 'full-page',
+    docsSlug: 'examples/voice-assistant',
+  },
+];

package/src/agent-tooling/integrations/cloudflare.ts

@@ -0,0 +1,88 @@
+import type { Integration } from '../types';
+
+const cloudflare: Integration = {
+  id: 'cloudflare',
+  title: 'Cloudflare AI',
+  category: 'provider',
+  language: 'ts',
+  streamFormat: 'openai-sse',
+  envVars: ['CF_ACCOUNT_ID', 'CF_API_TOKEN'],
+  routeTemplates: {
+    next: `// app/api/chat/route.ts — proxy Workers AI, keep the token server-side
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const upstream = await fetch(
+    \`https://api.cloudflare.com/client/v4/accounts/\${process.env.CF_ACCOUNT_ID}/ai/v1/chat/completions\`,
+    {
+      method: 'POST',
+      headers: {
+        Authorization: \`Bearer \${process.env.CF_API_TOKEN}\`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        model: '@cf/meta/llama-3.1-8b-instruct',
+        messages,
+        stream: true,
+      }),
+    },
+  );
+
+  // Workers AI returns OpenAI-format SSE — pass it straight through.
+  return new Response(upstream.body, { headers: { 'Content-Type': 'text/event-stream' } });
+}`,
+    worker: `// Worker handler — env.AI is bound in wrangler.toml
+// env.AI.run emits Cloudflare-native SSE (data: {"response":"<token>"}).
+// The TransformStream below re-frames each chunk to OpenAI-format SSE so
+// kai-chat's reader works without any client-side changes.
+export default {
+  async fetch(req: Request, env: Env): Promise<Response> {
+    const { messages } = await req.json();
+
+    const nativeStream = await env.AI.run('@cf/meta/llama-3.1-8b-instruct', {
+      messages,
+      stream: true,
+    });
+
+    // Re-frame Cloudflare-native SSE → OpenAI-format SSE
+    const { readable, writable } = new TransformStream();
+    const writer = writable.getWriter();
+    const encoder = new TextEncoder();
+    const decoder = new TextDecoder();
+
+    (async () => {
+      const reader = (nativeStream as ReadableStream<Uint8Array>).getReader();
+      let buffer = '';
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\\n');
+        buffer = lines.pop() ?? '';
+        for (const line of lines) {
+          const s = line.trim();
+          if (!s.startsWith('data:')) continue;
+          const payload = s.slice(5).trim();
+          if (payload === '[DONE]') continue;
+          try {
+            const { response } = JSON.parse(payload) as { response?: string };
+            if (response == null) continue;
+            const openaiChunk = JSON.stringify({ choices: [{ delta: { content: response } }] });
+            await writer.write(encoder.encode(\`data: \${openaiChunk}\\n\\n\`));
+          } catch { /* skip malformed lines */ }
+        }
+      }
+      await writer.write(encoder.encode('data: [DONE]\\n\\n'));
+      await writer.close();
+    })();
+
+    return new Response(readable, { headers: { 'Content-Type': 'text/event-stream' } });
+  },
+};`,
+  },
+  streamMapping: "Workers AI via the OpenAI-compatible HTTP endpoint returns OpenAI-format SSE — pipe upstream.body straight to the browser; kai-chat's reader handles it. The native env.AI binding streams Cloudflare's own format (data: {\"response\":\"...token...\"}); the worker route template re-frames these chunks to OpenAI-format SSE via a TransformStream before returning.",
+  runNote: 'Set CF_ACCOUNT_ID and CF_API_TOKEN. Model ids are prefixed with @cf/, e.g. @cf/meta/llama-3.1-8b-instruct. For the AI binding (worker key), add an [ai] block with binding = "AI" in wrangler.toml.',
+  docsSlug: 'integrations/cloudflare-ai',
+};
+
+export default cloudflare;

package/src/agent-tooling/integrations/langgraph.ts

@@ -0,0 +1,60 @@
+import type { Integration } from '../types';
+
+const langgraph: Integration = {
+  id: 'langgraph',
+  title: 'LangGraph',
+  category: 'framework',
+  language: 'ts',
+  streamFormat: 'openai-sse',
+  envVars: ['OPENAI_API_KEY'],
+  routeTemplates: {
+    next: `// POST /api/chat — stream a compiled LangGraph agent to the browser
+import { createReactAgent } from '@langchain/langgraph/prebuilt';
+import { ChatOpenAI } from '@langchain/openai';
+import { tool } from '@langchain/core/tools';
+import { z } from 'zod';
+
+const getWeather = tool(
+  async ({ city }) => \`It's 18°C and clear in \${city}.\`,
+  {
+    name: 'get_weather',
+    description: 'Get the current weather for a city.',
+    schema: z.object({ city: z.string() }),
+  },
+);
+
+const agent = createReactAgent({
+  llm: new ChatOpenAI({ model: 'gpt-4o' }),
+  tools: [getWeather],
+});
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const stream = await agent.stream({ messages }, { streamMode: 'messages' });
+
+  const encoder = new TextEncoder();
+  const body = new ReadableStream({
+    async start(controller) {
+      const send = (obj: unknown) =>
+        controller.enqueue(encoder.encode(\`data: \${JSON.stringify(obj)}\\n\\n\`));
+
+      for await (const [chunk] of stream) {
+        if (typeof chunk.content === 'string' && chunk.content) {
+          send({ choices: [{ delta: { content: chunk.content } }] });
+        }
+      }
+      controller.enqueue(encoder.encode('data: [DONE]\\n\\n'));
+      controller.close();
+    },
+  });
+
+  return new Response(body, { headers: { 'Content-Type': 'text/event-stream' } });
+}`,
+  },
+  streamMapping: "Use graph.stream(input, { streamMode: 'messages' }) to get [messageChunk, metadata] tuples. Extract chunk.content (string) and forward as OpenAI-format SSE frames: data: {choices:[{delta:{content}}]}. Close with data: [DONE]. The kai-chat reader handles it.",
+  runNote: 'Set OPENAI_API_KEY (or the key for your chosen model provider). Install @langchain/langgraph, @langchain/openai, @langchain/core.',
+  docsSlug: 'integrations/langgraph',
+};
+
+export default langgraph;

package/src/agent-tooling/integrations/mastra.ts

@@ -0,0 +1,27 @@
+import type { Integration } from '../types';
+
+const mastra: Integration = {
+  id: 'mastra',
+  title: 'Mastra',
+  category: 'harness',
+  language: 'ts',
+  streamFormat: 'openai-sse',
+  envVars: ['MASTRA_URL'],
+  routeTemplates: {
+    express: `// POST /api/chat — your server proxies a Mastra agent to the browser
+import { MastraClient } from '@mastra/client-js';
+
+const mastra = new MastraClient({ baseUrl: process.env.MASTRA_URL });
+
+const stream = await mastra.getAgent('supportAgent').stream({ messages });
+for await (const delta of stream.textStream) {
+  res.write(\`data: \${JSON.stringify({ choices: [{ delta: { content: delta } }] })}\\n\\n\`);
+}
+res.write('data: [DONE]\\n\\n');`,
+  },
+  streamMapping: "Mastra agents speak Vercel AI SDK v5 and expose stream.textStream (async iterable of string deltas). Iterate textStream and emit data: {choices:[{delta:{content}}]} frames; close with data: [DONE]. kai-chat's SSE reader handles it. For tool calls and reasoning, convert the agent to a UI message stream with @mastra/ai-sdk.",
+  runNote: 'Set MASTRA_URL to your Mastra server base URL (mastra dev exposes POST /api/agents/:agentId/stream on port 4111). Install @mastra/client-js.',
+  docsSlug: 'integrations/harnesses',
+};
+
+export default mastra;

package/src/agent-tooling/integrations/mock.ts

@@ -0,0 +1,34 @@
+import type { Integration } from '../types';
+
+/**
+ * mock — the zero-config first-win.
+ *
+ * Not a real backend: there's no provider, no API key, no `/api` route. The
+ * scaffolder special-cases `integration === 'mock'` and emits a front-end whose
+ * `onSubmit` SIMULATES a streamed assistant reply CLIENT-SIDE (token-by-token,
+ * a new array/object reference per chunk — honouring the messages contract).
+ *
+ * This lets `scaffold(useCase, integration: 'mock', framework: 'react')` run with
+ * zero config so a developer sees a live, streaming chat before wiring a model.
+ * Swap `integration` for a real provider (openrouter, ollama, …) when ready.
+ *
+ * It carries an empty `routeTemplates` on purpose: there is no server route to
+ * emit. `category: 'mock'` keeps it out of the real provider/gateway/framework/
+ * harness catalogs.
+ */
+const mock: Integration = {
+  id: 'mock',
+  title: 'Mock (local preview)',
+  category: 'mock',
+  language: 'ts',
+  streamFormat: 'native',
+  envVars: [],
+  routeTemplates: {},
+  streamMapping:
+    'No backend. onSubmit streams a canned assistant reply client-side, one token at a time, reassigning messages (new array/object reference) per chunk so kai-chat re-renders. Swap integration for a real provider when ready.',
+  runNote:
+    'No backend or API key needed — replies stream locally for preview. Run the front-end as-is; swap `integration` for a real provider (e.g. openrouter, ollama) when ready.',
+  docsSlug: 'integrations/mock',
+};
+
+export default mock;

package/src/agent-tooling/integrations/ollama.ts

@@ -0,0 +1,47 @@
+import type { Integration } from '../types';
+
+const ollama: Integration = {
+  id: 'ollama',
+  title: 'Ollama',
+  category: 'provider',
+  language: 'ts',
+  streamFormat: 'openai-sse',
+  envVars: [],
+  routeTemplates: {
+    next: `// app/api/chat/route.ts — proxy the browser to local Ollama
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const upstream = await fetch('http://localhost:11434/v1/chat/completions', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ model: 'llama3.2', messages, stream: true }),
+  });
+
+  // Ollama returns OpenAI-format SSE — stream it straight to the browser.
+  return new Response(upstream.body, { headers: { 'Content-Type': 'text/event-stream' } });
+}`,
+    html: `<kai-chat id="chat"></kai-chat>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';
+  const chat = document.getElementById('chat');
+
+  chat.addEventListener('kai-submit', async (e) => {
+    const history = [...chat.messages, { id: crypto.randomUUID(), role: 'user', content: e.detail.value }];
+    chat.messages = [...history, { id: crypto.randomUUID(), role: 'assistant', content: '' }];
+    await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages: history }),
+    });
+    // stream the reply into the last message — see the Streaming recipe
+  });
+</script>`,
+  },
+  streamMapping: "Ollama's OpenAI-compatible endpoint (http://localhost:11434/v1/chat/completions) returns OpenAI-format SSE — pipe upstream.body straight to the browser; kai-chat's reader handles it. No API key needed; pass any string if a client requires one (Ollama ignores it).",
+  runNote: 'No API key required. Run: ollama serve (starts on 127.0.0.1:11434), then ollama pull <model>. For browser-direct access, set OLLAMA_ORIGINS to allow the page origin; restart Ollama after any env change.',
+  docsSlug: 'integrations/ollama',
+};
+
+export default ollama;

package/src/agent-tooling/integrations/openrouter.ts

@@ -0,0 +1,26 @@
+import type { Integration } from '../types';
+
+const openrouter: Integration = {
+  id: 'openrouter',
+  title: 'OpenRouter',
+  category: 'gateway',
+  language: 'ts',
+  streamFormat: 'openai-sse',
+  envVars: ['OPENROUTER_API_KEY'],
+  routeTemplates: {
+    next: `export async function POST(req: Request) {
+  const { model, messages } = await req.json();
+  const upstream = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+    method: 'POST',
+    headers: { Authorization: \`Bearer \${process.env.OPENROUTER_API_KEY}\`, 'Content-Type': 'application/json' },
+    body: JSON.stringify({ model, messages, stream: true }),
+  });
+  return new Response(upstream.body, { headers: { 'Content-Type': 'text/event-stream' } });
+}`,
+  },
+  streamMapping: 'OpenRouter returns OpenAI-format SSE — pipe upstream.body straight to the browser; the Streaming-recipe reader handles it.',
+  runNote: 'Set OPENROUTER_API_KEY. Model ids are vendor/model, e.g. openai/gpt-4o.',
+  docsSlug: 'integrations/connect-any-model',
+};
+
+export default openrouter;

package/src/agent-tooling/integrations/pi.ts

@@ -0,0 +1,40 @@
+import type { Integration } from '../types';
+
+const pi: Integration = {
+  id: 'pi',
+  title: 'Pi',
+  category: 'harness',
+  language: 'ts',
+  streamFormat: 'native',
+  envVars: [],
+  routeTemplates: {
+    express: `import { spawn } from 'node:child_process';
+
+// POST /api/chat — bridge a Pi RPC session to the browser as SSE
+const pi = spawn('pi', ['--mode', 'rpc', '--no-session']);
+
+// Send the user's turn. Pi commands are { type, message }.
+pi.stdin.write(JSON.stringify({ type: 'prompt', message: prompt }) + '\\n');
+
+let buffer = '';
+pi.stdout.on('data', (chunk) => {
+  buffer += chunk.toString();
+  const lines = buffer.split('\\n');
+  buffer = lines.pop(); // hold the partial line for the next chunk
+  for (const line of lines) {
+    if (!line) continue;
+    const event = JSON.parse(line);
+    const part = event.assistantMessageEvent;
+    if (event.type === 'message_update' && part?.type === 'text_delta') {
+      res.write(\`data: \${JSON.stringify({ choices: [{ delta: { content: part.delta } }] })}\\n\\n\`);
+    }
+  }
+});
+pi.on('close', () => { res.write('data: [DONE]\\n\\n'); res.end(); });`,
+  },
+  streamMapping: "Pi runs as a local stdio process in RPC mode (pi --mode rpc --no-session). It emits newline-delimited JSON events on stdout. Map message_update events where assistantMessageEvent.type === 'text_delta' to data: {choices:[{delta:{content:part.delta}}]} SSE frames; send data: [DONE] on close. Split stdout on \\n (not readline, which breaks on Unicode separators U+2028/U+2029). Pi also emits thinking_delta (map to reasoning) and toolcall_* events (map to tool calls).",
+  runNote: "Pi must be installed locally and available on PATH as 'pi'. No API key is required by the bridge itself; Pi uses its own credentials. Pi runs with full user permissions — sandbox before exposing to a public endpoint. See the RPC reference: https://github.com/earendil-works/pi/blob/main/packages/coding-agent/docs/rpc.md",
+  docsSlug: 'integrations/harnesses',
+};
+
+export default pi;

package/src/agent-tooling/integrations/pydantic-ai.ts

@@ -0,0 +1,52 @@
+import type { Integration } from '../types';
+
+const pydanticAi: Integration = {
+  id: 'pydantic-ai',
+  title: 'Pydantic AI',
+  category: 'framework',
+  language: 'python',
+  streamFormat: 'openai-sse',
+  envVars: ['OPENAI_API_KEY'],
+  routeTemplates: {
+    fastapi: `# main.py
+import json
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+from pydantic_ai import Agent
+
+agent = Agent('openai:gpt-4o')
+
+app = FastAPI()
+app.add_middleware(
+    CORSMiddleware, allow_origins=['*'], allow_methods=['*'], allow_headers=['*']
+)
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    messages: list[Message]
+
+async def openai_sse(messages: list[Message]):
+    prompt = messages[-1].content if messages else ''
+    async with agent.run_stream(prompt) as result:
+        async for delta in result.stream_text(delta=True):
+            chunk = {'choices': [{'delta': {'content': delta}}]}
+            yield f'data: {json.dumps(chunk)}\\n\\n'
+    yield 'data: [DONE]\\n\\n'
+
+@app.post('/api/chat')
+async def chat(req: ChatRequest):
+    return StreamingResponse(openai_sse(req.messages), media_type='text/event-stream')`,
+  },
+  streamMapping:
+    "Pydantic AI's agent.run_stream() yields text deltas via result.stream_text(delta=True). Each delta is re-framed as a data: {choices:[{delta:{content}}]} SSE line and the stream closes with data: [DONE]. The kai-chat reader is unchanged — it sees standard OpenAI-format SSE.",
+  runNote:
+    'Install: pip install pydantic-ai fastapi uvicorn. Set OPENAI_API_KEY. Run: uvicorn main:app --reload (default port 8000). Point kai-chat at http://localhost:8000/api/chat.',
+  docsSlug: 'integrations/pydantic-ai',
+};
+
+export default pydanticAi;

package/src/agent-tooling/integrations/vercel-ai-sdk.ts

@@ -0,0 +1,44 @@
+import type { Integration } from '../types';
+
+const vercelAiSdk: Integration = {
+  id: 'vercel-ai-sdk',
+  title: 'Vercel AI SDK',
+  category: 'framework',
+  language: 'ts',
+  streamFormat: 'ai-sdk',
+  envVars: ['AI_GATEWAY_API_KEY'],
+  routeTemplates: {
+    next: `// app/api/chat/route.ts
+import { streamText } from 'ai';
+
+export const maxDuration = 30; // allow long streaming responses
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: 'openai/gpt-4o', // AI Gateway id; needs AI_GATEWAY_API_KEY
+    messages,
+  });
+
+  const encoder = new TextEncoder();
+  const sse = new ReadableStream({
+    async start(controller) {
+      for await (const delta of result.textStream) {
+        const chunk = { choices: [{ delta: { content: delta } }] };
+        controller.enqueue(encoder.encode(\`data: \${JSON.stringify(chunk)}\\n\\n\`));
+      }
+      controller.enqueue(encoder.encode('data: [DONE]\\n\\n'));
+      controller.close();
+    },
+  });
+
+  return new Response(sse, { headers: { 'Content-Type': 'text/event-stream' } });
+}`,
+  },
+  streamMapping: "The Vercel AI SDK's toUIMessageStreamResponse() and toTextStreamResponse() don't emit OpenAI-format SSE. Wrap result.textStream manually: iterate text deltas and emit data: {choices:[{delta:{content}}]} frames, closing with data: [DONE]. The kai-chat SSE reader handles it.",
+  runNote: 'Set AI_GATEWAY_API_KEY for the AI Gateway (string model id form: creator/model-name). For direct provider access, import its provider package (e.g. @ai-sdk/openai) and set the corresponding key (e.g. OPENAI_API_KEY).',
+  docsSlug: 'integrations/vercel-ai-sdk',
+};
+
+export default vercelAiSdk;