\n Loading...\n

\n );\n }\n\n if (!authenticated) {\n return setAuthenticated(true)} />;\n }\n\n return setAuthenticated(false)} />;\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[172,419],"d4bf34d6-0ddd-11f1-af68-42dde27851f2","index.html","d4bf36c0-0ddd-11f1-af68-42dde27851f2",15,["D",1771538183337],"\n\n\n \n \n \n PromptCompare\n \n \n \n \n \n

\n \n \n\n",[],[172,427],"d4cc7ba0-0ddd-11f1-bb81-42dde27851f2","Sidebar.tsx","d4cc7dee-0ddd-11f1-bb81-42dde27851f2","d456d4c2-0ddd-11f1-affc-42dde27851f2",17,["D",1771538183419],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Sidebar.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation } from \"../../shared/types.ts\";\n\ninterface SidebarProps {\n conversations: Conversation[];\n activeId: string | null;\n onSelect: (id: string) => void;\n onNewChat: () => void;\n onDelete: (id: string) => void;\n onLogout: () => void;\n}\n\nexport function Sidebar(\n { conversations, activeId, onSelect, onNewChat, onDelete, onLogout }:\n SidebarProps,\n) {\n return (\n

\n \n + New Comparison\n \n

\n {conversations.map((conv) => (\n onSelect(conv.id)}\n >\n {conv.title}\n {\n e.stopPropagation();\n onDelete(conv.id);\n }}\n className=\"opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-400 ml-2\"\n >\n x\n \n

\n ))}\n

\n {\n await fetch(\"/api/auth/logout\", { method: \"POST\" });\n onLogout();\n }}\n className=\"text-sm text-gray-400 hover:text-white\"\n >\n Sign out\n \n

\n \n );\n}\n",[],[172,443,435],"components","d4bb0c3a-0ddd-11f1-af68-42dde27851f2","PromptInput.tsx","d4bb0d02-0ddd-11f1-af68-42dde27851f2",14,["D",1771538183310],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/PromptInput.tsx\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface PromptInputProps {\n onSend: (content: string) => void;\n disabled: boolean;\n}\n\nexport function PromptInput({ onSend, disabled }: PromptInputProps) {\n const [value, setValue] = useState(\"\");\n const textareaRef = useRef(null);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const trimmed = value.trim();\n if (!trimmed || disabled) return;\n onSend(trimmed);\n setValue(\"\");\n if (textareaRef.current) textareaRef.current.style.height = \"auto\";\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handleInput = () => {\n const el = textareaRef.current;\n if (el) {\n el.style.height = \"auto\";\n el.style.height = Math.min(el.scrollHeight, 200) + \"px\";\n }\n };\n\n return (\n \n );\n}\n",[],[172,443,445],"d4c4acf4-0ddd-11f1-a0cd-42dde27851f2","ModelPicker.tsx","d4c4adc6-0ddd-11f1-a0cd-42dde27851f2",16,["D",1771538183358],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ModelPicker.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ModelInfo } from \"../../shared/types.ts\";\n\ninterface ModelPickerProps {\n models: ModelInfo[];\n onConfirm: (modelIds: string[]) => void;\n onCancel: () => void;\n}\n\nexport function ModelPicker({ models, onConfirm, onCancel }: ModelPickerProps) {\n const [selected, setSelected] = useState>(new Set());\n\n const toggle = (id: string) => {\n setSelected((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else if (next.size < 4) {\n next.add(id);\n }\n return next;\n });\n };\n\n // Group by family\n const families = new Map();\n for (const m of models) {\n const fam = m.family;\n if (!families.has(fam)) families.set(fam, []);\n families.get(fam)!.push(m);\n }\n\n return (\n

Select Models

\n Choose up to 4 models to compare ({selected.size}/4)\n

\n\n {Array.from(families.entries()).map(([family, familyModels]) => (\n

\n {family}\n

\n {familyModels.map((model) => (\n = 4\n ? \"opacity-50 cursor-not-allowed\"\n : \"\"\n }`}\n >\n toggle(model.id)}\n disabled={!selected.has(model.id) && selected.size >= 4}\n className=\"rounded\"\n />\n

\n {model.name}\n

\n \n ${model.cost.input}/${model.cost.output} per 1M\n \n \n ))}\n

\n ))}\n\n

\n \n Cancel\n \n onConfirm(Array.from(selected))}\n disabled={selected.size === 0}\n className=\"px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50\"\n >\n Start Comparison\n \n

\n );\n}\n",[],[172,443,453],"d4d6f13e-0ddd-11f1-b72b-42dde27851f2","MessageRow.tsx","d4d6f210-0ddd-11f1-b72b-42dde27851f2",19,["D",1771538183476],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/MessageRow.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@15.0.6?deps=react@18.2.0,react-dom@18.2.0\";\n\ninterface MessageRowProps {\n userContent: string;\n responses: { model_id: string; content: string }[];\n modelNames: Record;\n streaming?: boolean;\n}\n\nexport function MessageRow(\n { userContent, responses, modelNames, streaming }: MessageRowProps,\n) {\n return (\n

\n {/* User message */}\n

\n {userContent}\n

\n\n {/* Model responses side by side */}\n \n {responses.map((resp) => (\n \n

\n {modelNames[resp.model_id] || resp.model_id}\n

\n ...'\n : 'No response',\n }}\n />\n

\n ))}\n \n \n );\n}\n",[],[172,443,461],"d5269e28-0ddd-11f1-8b80-42dde27851f2","Login.tsx","d5269f04-0ddd-11f1-8b80-42dde27851f2",33,["D",1771538183357],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Login.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Login({ onSuccess }: { onSuccess: () => void }) {\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n try {\n const res = await fetch(\"/api/auth\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ password }),\n });\n if (res.ok) {\n onSuccess();\n } else {\n setError(\"Invalid password\");\n }\n } catch {\n setError(\"Connection error\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n \n

\n PromptCompare\n

\n setPassword(e.target.value)}\n placeholder=\"Password\"\n className=\"w-full px-3 py-2 border rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n autoFocus\n />\n {error &&

{error}

}\n \n {loading ? \"...\" : \"Sign In\"}\n \n \n

\n );\n}\n",[],[172,443,469],"d4d24d82-0ddd-11f1-a6ad-42dde27851f2","ConversationView.tsx","d4d24e4a-0ddd-11f1-a6ad-42dde27851f2",18,["D",1771538183447],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ConversationView.tsx\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { ConversationDetail, ModelInfo } from \"../../shared/types.ts\";\nimport { MessageRow } from \"./MessageRow.tsx\";\nimport { PromptInput } from \"./PromptInput.tsx\";\n\ninterface ConversationViewProps {\n conversationId: string;\n models: ModelInfo[];\n onTitleUpdate: () => void;\n}\n\ninterface StreamingState {\n [modelId: string]: string;\n}\n\nexport function ConversationView(\n { conversationId, models, onTitleUpdate }: ConversationViewProps,\n) {\n const [conversation, setConversation] = useState(\n null,\n );\n const [streaming, setStreaming] = useState(false);\n const [streamingResponses, setStreamingResponses] = useState(\n {},\n );\n const [streamingMessageContent, setStreamingMessageContent] = useState<\n string | null\n >(null);\n const messagesEndRef = useRef(null);\n\n const modelNames = Object.fromEntries(models.map((m) => [m.id, m.name]));\n\n const loadConversation = useCallback(async () => {\n const res = await fetch(`/api/conversations/${conversationId}`);\n const data = await res.json();\n setConversation(data);\n }, [conversationId]);\n\n useEffect(() => {\n loadConversation();\n setStreamingResponses({});\n setStreamingMessageContent(null);\n }, [conversationId]);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [conversation, streamingResponses]);\n\n const handleSend = async (content: string) => {\n if (!conversation) return;\n\n setStreaming(true);\n setStreamingMessageContent(content);\n // Initialize streaming state for each model\n const initialState: StreamingState = {};\n for (const modelId of conversation.model_ids) {\n initialState[modelId] = \"\";\n }\n setStreamingResponses(initialState);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ conversation_id: conversationId, content }),\n });\n\n const reader = response.body?.getReader();\n if (!reader) return;\n\n const decoder = new TextDecoder();\n let buffer = \"\";\n let currentEvent = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\";\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n currentEvent = line.slice(7).trim();\n } else if (line.startsWith(\"data: \")) {\n try {\n const data = JSON.parse(line.slice(6));\n if (currentEvent === \"chunk\" && data.content && data.model_id) {\n setStreamingResponses((prev) => ({\n ...prev,\n [data.model_id]: (prev[data.model_id] || \"\") + data.content,\n }));\n }\n } catch {\n // Skip unparseable\n }\n currentEvent = \"\";\n } else if (line.trim() === \"\") {\n currentEvent = \"\";\n }\n }\n }\n } catch (err) {\n console.error(\"Stream error:\", err);\n } finally {\n setStreaming(false);\n setStreamingMessageContent(null);\n setStreamingResponses({});\n await loadConversation();\n onTitleUpdate();\n }\n };\n\n if (!conversation) {\n return (\n

\n Loading...\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

{conversation.title}

\n {conversation.model_ids.map((id) => (\n \n {modelNames[id] || id}\n \n ))}\n

\n\n {/* Messages */}\n

\n {conversation.messages.map((msg) => (\n {\n const resp = msg.responses.find((r) => r.model_id === modelId);\n return { model_id: modelId, content: resp?.content || \"\" };\n })}\n modelNames={modelNames}\n />\n ))}\n\n {/* Currently streaming message */}\n {streamingMessageContent && (\n ({\n model_id: modelId,\n content: streamingResponses[modelId] || \"\",\n }))}\n modelNames={modelNames}\n streaming\n />\n )}\n

\n\n \n

\n );\n}\n",[],[172,443,477],"d4db277c-0ddd-11f1-a6ad-42dde27851f2","ChatApp.tsx","d4db2830-0ddd-11f1-a6ad-42dde27851f2",20,["D",1771538183519],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ChatApp.tsx\nimport React, {\n useCallback,\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation, ModelInfo } from \"../../shared/types.ts\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { ModelPicker } from \"./ModelPicker.tsx\";\nimport { ConversationView } from \"./ConversationView.tsx\";\n\nexport function ChatApp({ onLogout }: { onLogout: () => void }) {\n const [conversations, setConversations] = useState([]);\n const [activeConvId, setActiveConvId] = useState(null);\n const [models, setModels] = useState([]);\n const [showModelPicker, setShowModelPicker] = useState(false);\n\n const loadConversations = useCallback(async () => {\n const res = await fetch(\"/api/conversations\");\n const data = await res.json();\n setConversations(data);\n }, []);\n\n useEffect(() => {\n loadConversations();\n fetch(\"/api/models\").then((r) => r.json()).then(setModels);\n }, []);\n\n const handleNewChat = () => {\n setShowModelPicker(true);\n setActiveConvId(null);\n };\n\n const handleCreateConversation = async (selectedModelIds: string[]) => {\n const res = await fetch(\"/api/conversations\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n title: \"New Conversation\",\n model_ids: selectedModelIds,\n }),\n });\n const { id } = await res.json();\n setShowModelPicker(false);\n setActiveConvId(id);\n await loadConversations();\n };\n\n const handleDeleteConversation = async (id: string) => {\n await fetch(`/api/conversations/${id}`, { method: \"DELETE\" });\n if (activeConvId === id) setActiveConvId(null);\n await loadConversations();\n };\n\n return (\n

\n \n

\n {showModelPicker\n ? (\n setShowModelPicker(false)}\n />\n )\n : activeConvId\n ? (\n \n )\n : (\n

\n Select a conversation or start a new one\n

\n )}\n

\n );\n}\n",[],[172,443,485],"d456d404-0ddd-11f1-affc-42dde27851f2",6,["D",1771538182654],[365,366,367,368,369,370,371],[172,443],["D",1771538182280],[364,372,373,374],[172],"d7a44916-0ddd-11f1-9f87-42dde27851f2","zen.md","d7a449de-0ddd-11f1-9f87-42dde27851f2",160,["D",1771538188159],"OpenCode Zen is a list of tested and verified models provided by the OpenCode\nteam.\n\n:::note OpenCode Zen is currently in beta. :::\n\nZen works like any other provider in OpenCode. You login to OpenCode Zen and get\nyour API key. It's **completely optional** and you don't need to use it to use\nOpenCode.\n\n---\n\n## Background\n\nThere are a large number of models out there but only a few of these models work\nwell as coding agents. Additionally, most providers are configured very\ndifferently; so you get very different performance and quality.\n\n:::tip We tested a select group of models and providers that work well with\nOpenCode. :::\n\nSo if you are using a model through something like OpenRouter, you can never be\nsure if you are getting the best version of the model you want.\n\nTo fix this, we did a couple of things:\n\n1. We tested a select group of models and talked to their teams about how to\n best run them.\n2. We then worked with a few providers to make sure these were being served\n correctly.\n3. Finally, we benchmarked the combination of the model/provider and came up\n with a list that we feel good recommending.\n\nOpenCode Zen is an AI gateway that gives you access to these models.\n\n---\n\n## How it works\n\nOpenCode Zen works like any other provider in OpenCode.\n\n1. You sign in to OpenCode Zen, add your billing details, and copy your API key.\n2. You run the `/connect` command in the TUI, select OpenCode Zen, and paste\n your API key.\n3. Run `/models` in the TUI to see the list of models we recommend.\n\nYou are charged per request and you can add credits to your account.\n\n---\n\n## Endpoints\n\nYou can also access our models through the following API endpoints.\n\n| Model | Model ID | Endpoint | AI SDK Package |\n| ------------------ | ------------------ | -------------------------------------------------- | --------------------------- |\n| GPT 5.2 | gpt-5.2 | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5.2 Codex | gpt-5.2-codex | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5.1 | gpt-5.1 | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5.1 Codex | gpt-5.1-codex | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5.1 Codex Max | gpt-5.1-codex-max | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5.1 Codex Mini | gpt-5.1-codex-mini | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5 | gpt-5 | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5 Codex | gpt-5-codex | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| GPT 5 Nano | gpt-5-nano | `https://opencode.ai/zen/v1/responses` | `@ai-sdk/openai` |\n| Claude Opus 4.6 | claude-opus-4-6 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Opus 4.5 | claude-opus-4-5 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Opus 4.1 | claude-opus-4-1 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Sonnet 4.6 | claude-sonnet-4-6 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Sonnet 4.5 | claude-sonnet-4-5 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Sonnet 4 | claude-sonnet-4 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Haiku 4.5 | claude-haiku-4-5 | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Claude Haiku 3.5 | claude-3-5-haiku | `https://opencode.ai/zen/v1/messages` | `@ai-sdk/anthropic` |\n| Gemini 3.1 Pro | gemini-3.1-pro | `https://opencode.ai/zen/v1/models/gemini-3.1-pro` | `@ai-sdk/google` |\n| Gemini 3 Pro | gemini-3-pro | `https://opencode.ai/zen/v1/models/gemini-3-pro` | `@ai-sdk/google` |\n| Gemini 3 Flash | gemini-3-flash | `https://opencode.ai/zen/v1/models/gemini-3-flash` | `@ai-sdk/google` |\n| MiniMax M2.5 | minimax-m2.5 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| MiniMax M2.5 Free | minimax-m2.5-free | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| MiniMax M2.1 | minimax-m2.1 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| GLM 5 | glm-5 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| GLM 5 Free | glm-5-free | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| GLM 4.7 | glm-4.7 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| GLM 4.6 | glm-4.6 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| Kimi K2.5 | kimi-k2.5 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| Kimi K2.5 Free | kimi-k2.5-free | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| Kimi K2 Thinking | kimi-k2-thinking | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| Kimi K2 | kimi-k2 | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| Qwen3 Coder 480B | qwen3-coder | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n| Big Pickle | big-pickle | `https://opencode.ai/zen/v1/chat/completions` | `@ai-sdk/openai-compatible` |\n\nThe [model id](/docs/config/#models) in your OpenCode config uses the format\n`opencode/`. For example, for GPT 5.2 Codex, you would use\n`opencode/gpt-5.2-codex` in your config.\n\n---\n\n### Models\n\nYou can fetch the full list of available models and their metadata from:\n\n```\nhttps://opencode.ai/zen/v1/models\n```\n\n---\n\n## Pricing\n\nWe support a pay-as-you-go model. Below are the prices **per 1M tokens**.\n\n| Model | Input | Output | Cached Read | Cached Write |\n| --------------------------------- | ------ | ------ | ----------- | ------------ |\n| Big Pickle | Free | Free | Free | - |\n| MiniMax M2.5 Free | Free | Free | Free | - |\n| MiniMax M2.5 | $0.30 | $1.20 | $0.06 | - |\n| MiniMax M2.1 | $0.30 | $1.20 | $0.10 | - |\n| GLM 5 Free | Free | Free | Free | - |\n| GLM 5 | $1.00 | $3.20 | $0.20 | - |\n| GLM 4.7 | $0.60 | $2.20 | $0.10 | - |\n| GLM 4.6 | $0.60 | $2.20 | $0.10 | - |\n| Kimi K2.5 Free | Free | Free | Free | - |\n| Kimi K2.5 | $0.60 | $3.00 | $0.08 | - |\n| Kimi K2 Thinking | $0.40 | $2.50 | - | - |\n| Kimi K2 | $0.40 | $2.50 | - | - |\n| Qwen3 Coder 480B | $0.45 | $1.50 | - | - |\n| Claude Opus 4.6 (≤ 200K tokens) | $5.00 | $25.00 | $0.50 | $6.25 |\n| Claude Opus 4.6 (> 200K tokens) | $10.00 | $37.50 | $1.00 | $12.50 |\n| Claude Opus 4.5 | $5.00 | $25.00 | $0.50 | $6.25 |\n| Claude Opus 4.1 | $15.00 | $75.00 | $1.50 | $18.75 |\n| Claude Sonnet 4.6 (≤ 200K tokens) | $3.00 | $15.00 | $0.30 | $3.75 |\n| Claude Sonnet 4.6 (> 200K tokens) | $6.00 | $22.50 | $0.60 | $7.50 |\n| Claude Sonnet 4.5 (≤ 200K tokens) | $3.00 | $15.00 | $0.30 | $3.75 |\n| Claude Sonnet 4.5 (> 200K tokens) | $6.00 | $22.50 | $0.60 | $7.50 |\n| Claude Sonnet 4 (≤ 200K tokens) | $3.00 | $15.00 | $0.30 | $3.75 |\n| Claude Sonnet 4 (> 200K tokens) | $6.00 | $22.50 | $0.60 | $7.50 |\n| Claude Haiku 4.5 | $1.00 | $5.00 | $0.10 | $1.25 |\n| Claude Haiku 3.5 | $0.80 | $4.00 | $0.08 | $1.00 |\n| Gemini 3.1 Pro (≤ 200K tokens) | $2.00 | $12.00 | $0.20 | - |\n| Gemini 3.1 Pro (> 200K tokens) | $4.00 | $18.00 | $0.40 | - |\n| Gemini 3 Pro (≤ 200K tokens) | $2.00 | $12.00 | $0.20 | - |\n| Gemini 3 Pro (> 200K tokens) | $4.00 | $18.00 | $0.40 | - |\n| Gemini 3 Flash | $0.50 | $3.00 | $0.05 | - |\n| GPT 5.2 | $1.75 | $14.00 | $0.175 | - |\n| GPT 5.2 Codex | $1.75 | $14.00 | $0.175 | - |\n| GPT 5.1 | $1.07 | $8.50 | $0.107 | - |\n| GPT 5.1 Codex | $1.07 | $8.50 | $0.107 | - |\n| GPT 5.1 Codex Max | $1.25 | $10.00 | $0.125 | - |\n| GPT 5.1 Codex Mini | $0.25 | $2.00 | $0.025 | - |\n| GPT 5 | $1.07 | $8.50 | $0.107 | - |\n| GPT 5 Codex | $1.07 | $8.50 | $0.107 | - |\n| GPT 5 Nano | Free | Free | Free | - |\n\nYou might notice _Claude Haiku 3.5_ in your usage history. This is a\n[low cost model](/docs/config/#models) that's used to generate the titles of\nyour sessions.\n\n:::note Credit card fees are passed along at cost (4.4% + $0.30 per\ntransaction); we don't charge anything beyond that. :::\n\nThe free models:\n\n- GLM 5 Free is available on OpenCode for a limited time. The team is using this\n time to collect feedback and improve the model.\n- Kimi K2.5 Free is available on OpenCode for a limited time. The team is using\n this time to collect feedback and improve the model.\n- MiniMax M2.5 Free is available on OpenCode for a limited time. The team is\n using this time to collect feedback and improve the model.\n- Big Pickle is a stealth model that's free on OpenCode for a limited time. The\n team is using this time to collect feedback and improve the model.\n\n---\n\n### Auto-reload\n\nIf your balance goes below $5, Zen will automatically reload $20.\n\nYou can change the auto-reload amount. You can also disable auto-reload\nentirely.\n\n---\n\n### Monthly limits\n\nYou can also set a monthly usage limit for the entire workspace and for each\nmember of your team.\n\nFor example, let's say you set a monthly usage limit to $20, Zen will not use\nmore than $20 in a month. But if you have auto-reload enabled, Zen might end up\ncharging you more than $20 if your balance goes below $5.\n\n---\n\n## Privacy\n\nAll our models are hosted in the US. Our providers follow a zero-retention\npolicy and do not use your data for model training, with the following\nexceptions:\n\n- Big Pickle: During its free period, collected data may be used to improve the\n model.\n- GLM 5 Free: During its free period, collected data may be used to improve the\n model.\n- Kimi K2.5 Free: During its free period, collected data may be used to improve\n the model.\n- MiniMax M2.5 Free: During its free period, collected data may be used to\n improve the model.\n- OpenAI APIs: Requests are retained for 30 days in accordance with\n [OpenAI's Data Policies](https://platform.openai.com/docs/guides/your-data).\n- Anthropic APIs: Requests are retained for 30 days in accordance with\n [Anthropic's Data Policies](https://docs.anthropic.com/en/docs/claude-code/data-usage).\n\n---\n\n## For Teams\n\nZen also works great for teams. You can invite teammates, assign roles, curate\nthe models your team uses, and more.\n\n:::note Workspaces are currently free for teams as a part of the beta. :::\n\nManaging your workspace is currently free for teams as a part of the beta. We'll\nbe sharing more details on the pricing soon.\n\n---\n\n### Roles\n\nYou can invite teammates to your workspace and assign roles:\n\n- **Admin**: Manage models, members, API keys, and billing\n- **Member**: Manage only their own API keys\n\nAdmins can also set monthly spending limits for each member to keep costs under\ncontrol.\n\n---\n\n### Model access\n\nAdmins can enable or disable specific models for the workspace. Requests made to\na disabled model will return an error.\n\nThis is useful for cases where you want to disable the use of a model that\ncollects data.\n\n---\n\n### Bring your own key\n\nYou can use your own OpenAI or Anthropic API keys while still accessing other\nmodels in Zen.\n\nWhen you use your own keys, tokens are billed directly by the provider, not by\nZen.\n\nFor example, your organization might already have a key for OpenAI or Anthropic\nand you want to use that instead of the one that Zen provides.\n\n---\n\n## Goals\n\nWe created OpenCode Zen to:\n\n1. **Benchmark** the best models/providers for coding agents.\n2. Have access to the **highest quality** options and not downgrade performance\n or route to cheaper providers.\n3. Pass along any **price drops** by selling at cost; so the only markup is to\n cover our processing fees.\n4. Have **no lock-in** by allowing you to use it with any other coding agent.\n And always let you use any other provider with OpenCode as well.\n",[],[177,501],"d7ba8bae-0ddd-11f1-bf1c-42dde27851f2","vt.md","d7ba8c8a-0ddd-11f1-bf1c-42dde27851f2",165,["D",1771538188324],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider\n refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure\n about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious\n operations)\n- Follow modern ES6+ conventions and functional programming practices if\n possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = \"todo_app_users_2\";\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} WHERE id = ?`,\n [1],\n);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add\n_2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({\n subject: \"Hi\",\n text: \"Hi\",\n html: \"

Hi

\",\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\"\nurls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's _extremely importing_ to note that `parseProject` and other\nStandard Library utilities ONLY RUN ON THE SERVER. If you need access to this\ndata on the client, run it in the server and pass it to the client by splicing\nit into the HTML page or by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use\n `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})`\n instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode\n symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use:\n `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys)\n unless otherwise specified\n- **View Source:** Add a view source link by importing & using\n `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the\n client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add\n `` to HTML to capture\n client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local\n resolution; Avoid catches that merely log or return 500s. Let errors bubble up\n with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but\n generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure\n compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer\n simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with\n `?deps=react@18.2.0,react-dom@18.2.0` and start the file with\n `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same\n version\n- **Styling:** Default to using TailwindCSS via\n `` unless otherwise\n specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project\n files:\n ```ts\n import {\n readFile,\n serveFile,\n } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to\n see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of\n React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with\n `export default app.fetch // This is the entry point for HTTP vals`\n",[],[177,509],"d7a9de76-0ddd-11f1-8592-42dde27851f2","vt-sqlite.md","d7a9df48-0ddd-11f1-8592-42dde27851f2",161,["D",1771538188195],"---\ntitle: Usage\ndescription: How to use Val Town SQLite, with examples.\n---\n\nThe Val Town [SQLite val](https://www.val.town/v/std/sqlite) has two methods:\n`execute` [↗](https://docs.turso.tech/sdk/ts/reference#simple-query) and `batch`\n[↗](https://docs.turso.tech/sdk/ts/reference#batch-transactions). Below are\nexamples of how to use them in Val Town.\n\nThe `sqlite` object is an initialized\n[@libsql/client](https://docs.turso.tech/sdk/ts/reference) instance, so it\nsupports the same methods and return types. The query language syntax is\n[SQLite's version of SQL](https://www.sqlite.org/lang.html).\n\n## Simple query\n\n```ts title=\"Simple query\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst data = await sqlite.execute(\"SELECT datetime();\");\nconsole.log(data.rows[0]);\n```\n\n:::note Omitting `main.ts` in your import path (i.e.\n`\"https://esm.town/v/std/sqlite\"`) will import the\n[account-scoped](#account-scoped-database) `sqlite` object. :::\n\n## Account-scoped database\n\nImporting from `sqlite/main.ts` connects you to a database specific to that val.\nYou can also connect with `sqlite/global.ts` to connect to your account-scoped\ndatabase:\n\n```ts title=\"Global sqlite\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/global.ts\";\n\nconst data = await sqlite.execute(\"SELECT datetime();\");\nconsole.log(data.rows[0]);\n```\n\nSee our [global](/reference/std/sqlite/global) sqlite docs for more information\non account-scoped databases.\n\n## Basic usage\n\n```ts title=\"Basic usage\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute(`create table if not exists kv(\n key text unique,\n value text\n)`);\n\nconst key = crypto.randomUUID();\nawait sqlite.execute({\n sql: `insert into kv(key, value) values(?, ?)`,\n args: [key, \"value1\"],\n});\nconst result = await sqlite.execute({\n sql: `select * from kv where key = ?`,\n args: [key],\n});\n\nconsole.log(result);\n// {\n// columns: [ \"key\", \"value\" ],\n// columnTypes: [ \"TEXT\", \"TEXT\" ],\n// rows: [ { key: \"d65991f8-6f03-4275-bcf1-1fdb1164e153\", value: \"value1\" } ],\n// rowsAffected: 0,\n// lastInsertRowid: null\n// }\n\nconst rows: { key: string; value: string }[] = result.rows as any;\n\nconsole.log(rows); // [ { key: \"d65991f8-6f03-4275-bcf1-1fdb1164e153\", value: \"value1\" } ]\n```\n\n## Create a table\n\n```ts title=\"Table creation\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute(`create table if not exists kv(\n key text unique,\n value text\n)`);\n```\n\n## Get data\n\n```ts title=\"Data query\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconsole.log(await sqlite.execute(`select key, value from kv`));\n```\n\n## Insert data\n\n```ts title=\"Data insertion\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute({\n sql: `insert into kv(key, value) values (:key, :value)`,\n args: { key: \"specialkey\", value: \"specialvalue\" },\n});\n```\n\n## Delete data\n\n```ts title=\"Data deletion\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute({\n sql: `delete from kv where key = :key`,\n args: { key: \"specialkey\" },\n});\n```\n\n## Batch queries\n\n```ts title=\"Batching queries\" val\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst charge = 10;\n\nexport const batchSqlite = await sqlite.batch([\n `create table if not exists accounts(person_id text unique, balance integer)`,\n {\n sql:\n `update accounts set balance = balance - :charge where person_id = 'Bob'`,\n args: { charge },\n },\n {\n sql:\n `update accounts set balance = balance + :charge where person_id = 'Alice'`,\n args: { charge },\n },\n]);\n```\n",[],[177,517],"d7acdb1c-0ddd-11f1-bf1c-42dde27851f2","models.json","d7acdbe4-0ddd-11f1-bf1c-42dde27851f2",162,["D",1771538188239],"{\n \"id\": \"opencode\",\n \"env\": [\"OPENCODE_API_KEY\"],\n \"npm\": \"@ai-sdk/openai-compatible\",\n \"api\": \"https://opencode.ai/zen/v1\",\n \"name\": \"OpenCode Zen\",\n \"doc\": \"https://opencode.ai/docs/zen\",\n \"models\": {\n \"glm-4.7\": {\n \"id\": \"glm-4.7\",\n \"name\": \"GLM-4.7\",\n \"family\": \"glm\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2025-04\",\n \"release_date\": \"2025-12-22\",\n \"last_updated\": \"2025-12-22\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.6,\n \"output\": 2.2,\n \"cache_read\": 0.1\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n }\n },\n \"glm-5\": {\n \"id\": \"glm-5\",\n \"name\": \"GLM-5\",\n \"family\": \"glm\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2025-04\",\n \"release_date\": \"2026-02-11\",\n \"last_updated\": \"2026-02-11\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 1,\n \"output\": 3.2,\n \"cache_read\": 0.2\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n }\n },\n \"qwen3-coder\": {\n \"id\": \"qwen3-coder\",\n \"name\": \"Qwen3 Coder\",\n \"family\": \"qwen\",\n \"attachment\": false,\n \"reasoning\": false,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-04\",\n \"release_date\": \"2025-07-23\",\n \"last_updated\": \"2025-07-23\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.45,\n \"output\": 1.8\n },\n \"limit\": {\n \"context\": 262144,\n \"output\": 65536\n },\n \"status\": \"deprecated\"\n },\n \"claude-opus-4-1\": {\n \"id\": \"claude-opus-4-1\",\n \"name\": \"Claude Opus 4.1\",\n \"family\": \"claude-opus\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-03-31\",\n \"release_date\": \"2025-08-05\",\n \"last_updated\": \"2025-08-05\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 15,\n \"output\": 75,\n \"cache_read\": 1.5,\n \"cache_write\": 18.75\n },\n \"limit\": {\n \"context\": 200000,\n \"output\": 32000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"kimi-k2\": {\n \"id\": \"kimi-k2\",\n \"name\": \"Kimi K2\",\n \"family\": \"kimi\",\n \"attachment\": false,\n \"reasoning\": false,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2024-10\",\n \"release_date\": \"2025-09-05\",\n \"last_updated\": \"2025-09-05\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.4,\n \"output\": 2.5,\n \"cache_read\": 0.4\n },\n \"limit\": {\n \"context\": 262144,\n \"output\": 262144\n }\n },\n \"gpt-5.2-codex\": {\n \"id\": \"gpt-5.2-codex\",\n \"name\": \"GPT-5.2 Codex\",\n \"family\": \"gpt-codex\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2025-08-31\",\n \"release_date\": \"2026-01-14\",\n \"last_updated\": \"2026-01-14\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.75,\n \"output\": 14,\n \"cache_read\": 0.175\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"gpt-5.1-codex\": {\n \"id\": \"gpt-5.1-codex\",\n \"name\": \"GPT-5.1 Codex\",\n \"family\": \"gpt-codex\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-09-30\",\n \"release_date\": \"2025-11-13\",\n \"last_updated\": \"2025-11-13\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.07,\n \"output\": 8.5,\n \"cache_read\": 0.107\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"claude-haiku-4-5\": {\n \"id\": \"claude-haiku-4-5\",\n \"name\": \"Claude Haiku 4.5\",\n \"family\": \"claude-haiku\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-02-28\",\n \"release_date\": \"2025-10-15\",\n \"last_updated\": \"2025-10-15\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1,\n \"output\": 5,\n \"cache_read\": 0.1,\n \"cache_write\": 1.25\n },\n \"limit\": {\n \"context\": 200000,\n \"output\": 64000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"claude-sonnet-4-6\": {\n \"id\": \"claude-sonnet-4-6\",\n \"name\": \"Claude Sonnet 4.6\",\n \"family\": \"claude-sonnet\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-07-31\",\n \"release_date\": \"2026-02-17\",\n \"last_updated\": \"2026-02-17\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 3,\n \"output\": 15,\n \"cache_read\": 0.3,\n \"cache_write\": 3.75,\n \"context_over_200k\": {\n \"input\": 6,\n \"output\": 22.5,\n \"cache_read\": 0.6,\n \"cache_write\": 7.5\n }\n },\n \"limit\": {\n \"context\": 1000000,\n \"output\": 64000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"claude-opus-4-6\": {\n \"id\": \"claude-opus-4-6\",\n \"name\": \"Claude Opus 4.6\",\n \"family\": \"claude-opus\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-08-31\",\n \"release_date\": \"2026-02-05\",\n \"last_updated\": \"2026-02-05\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 5,\n \"output\": 25,\n \"cache_read\": 0.5,\n \"cache_write\": 6.25,\n \"context_over_200k\": {\n \"input\": 10,\n \"output\": 37.5,\n \"cache_read\": 1,\n \"cache_write\": 12.5\n }\n },\n \"limit\": {\n \"context\": 1000000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"trinity-large-preview-free\": {\n \"id\": \"trinity-large-preview-free\",\n \"name\": \"Trinity Large Preview\",\n \"family\": \"trinity\",\n \"attachment\": false,\n \"reasoning\": false,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-06\",\n \"release_date\": \"2026-01-28\",\n \"last_updated\": \"2026-01-28\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0,\n \"output\": 0\n },\n \"limit\": {\n \"context\": 131072,\n \"output\": 131072\n }\n },\n \"claude-opus-4-5\": {\n \"id\": \"claude-opus-4-5\",\n \"name\": \"Claude Opus 4.5\",\n \"family\": \"claude-opus\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-03-31\",\n \"release_date\": \"2025-11-24\",\n \"last_updated\": \"2025-11-24\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 5,\n \"output\": 25,\n \"cache_read\": 0.5,\n \"cache_write\": 6.25\n },\n \"limit\": {\n \"context\": 200000,\n \"output\": 64000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"kimi-k2.5\": {\n \"id\": \"kimi-k2.5\",\n \"name\": \"Kimi K2.5\",\n \"family\": \"kimi\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2024-10\",\n \"release_date\": \"2026-01-27\",\n \"last_updated\": \"2026-01-27\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"video\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.6,\n \"output\": 3,\n \"cache_read\": 0.08\n },\n \"limit\": {\n \"context\": 262144,\n \"output\": 262144\n }\n },\n \"gemini-3-pro\": {\n \"id\": \"gemini-3-pro\",\n \"name\": \"Gemini 3 Pro\",\n \"family\": \"gemini-pro\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2025-11-18\",\n \"last_updated\": \"2025-11-18\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"video\", \"audio\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 2,\n \"output\": 12,\n \"cache_read\": 0.2,\n \"context_over_200k\": {\n \"input\": 4,\n \"output\": 18,\n \"cache_read\": 0.4\n }\n },\n \"limit\": {\n \"context\": 1048576,\n \"output\": 65536\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/google\"\n }\n },\n \"claude-sonnet-4-5\": {\n \"id\": \"claude-sonnet-4-5\",\n \"name\": \"Claude Sonnet 4.5\",\n \"family\": \"claude-sonnet\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-07-31\",\n \"release_date\": \"2025-09-29\",\n \"last_updated\": \"2025-09-29\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 3,\n \"output\": 15,\n \"cache_read\": 0.3,\n \"cache_write\": 3.75,\n \"context_over_200k\": {\n \"input\": 6,\n \"output\": 22.5,\n \"cache_read\": 0.6,\n \"cache_write\": 7.5\n }\n },\n \"limit\": {\n \"context\": 1000000,\n \"output\": 64000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"gpt-5.1-codex-mini\": {\n \"id\": \"gpt-5.1-codex-mini\",\n \"name\": \"GPT-5.1 Codex Mini\",\n \"family\": \"gpt-codex\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-09-30\",\n \"release_date\": \"2025-11-13\",\n \"last_updated\": \"2025-11-13\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 0.25,\n \"output\": 2,\n \"cache_read\": 0.025\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"kimi-k2-thinking\": {\n \"id\": \"kimi-k2-thinking\",\n \"name\": \"Kimi K2 Thinking\",\n \"family\": \"kimi-thinking\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2024-10\",\n \"release_date\": \"2025-09-05\",\n \"last_updated\": \"2025-09-05\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.4,\n \"output\": 2.5,\n \"cache_read\": 0.4\n },\n \"limit\": {\n \"context\": 262144,\n \"output\": 262144\n }\n },\n \"glm-5-free\": {\n \"id\": \"glm-5-free\",\n \"name\": \"GLM-5 Free\",\n \"family\": \"glm-free\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2025-04\",\n \"release_date\": \"2026-02-11\",\n \"last_updated\": \"2026-02-11\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n }\n },\n \"gemini-3.1-pro\": {\n \"id\": \"gemini-3.1-pro\",\n \"name\": \"Gemini 3.1 Pro Preview\",\n \"family\": \"gemini-pro\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2026-02-19\",\n \"last_updated\": \"2026-02-19\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"video\", \"audio\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 2,\n \"output\": 12,\n \"cache_read\": 0.2,\n \"context_over_200k\": {\n \"input\": 4,\n \"output\": 18,\n \"cache_read\": 0.4\n }\n },\n \"limit\": {\n \"context\": 1048576,\n \"output\": 65536\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/google\"\n }\n },\n \"gpt-5.1\": {\n \"id\": \"gpt-5.1\",\n \"name\": \"GPT-5.1\",\n \"family\": \"gpt\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-09-30\",\n \"release_date\": \"2025-11-13\",\n \"last_updated\": \"2025-11-13\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.07,\n \"output\": 8.5,\n \"cache_read\": 0.107\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"gpt-5-nano\": {\n \"id\": \"gpt-5-nano\",\n \"name\": \"GPT-5 Nano\",\n \"family\": \"gpt-nano\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-05-30\",\n \"release_date\": \"2025-08-07\",\n \"last_updated\": \"2025-08-07\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"gpt-5-codex\": {\n \"id\": \"gpt-5-codex\",\n \"name\": \"GPT-5 Codex\",\n \"family\": \"gpt-codex\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-09-30\",\n \"release_date\": \"2025-09-15\",\n \"last_updated\": \"2025-09-15\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.07,\n \"output\": 8.5,\n \"cache_read\": 0.107\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"big-pickle\": {\n \"id\": \"big-pickle\",\n \"name\": \"Big Pickle\",\n \"family\": \"big-pickle\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2025-10-17\",\n \"last_updated\": \"2025-10-17\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0,\n \"cache_write\": 0\n },\n \"limit\": {\n \"context\": 200000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"claude-3-5-haiku\": {\n \"id\": \"claude-3-5-haiku\",\n \"name\": \"Claude Haiku 3.5\",\n \"family\": \"claude-haiku\",\n \"attachment\": true,\n \"reasoning\": false,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2024-07-31\",\n \"release_date\": \"2024-10-22\",\n \"last_updated\": \"2024-10-22\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 0.8,\n \"output\": 4,\n \"cache_read\": 0.08,\n \"cache_write\": 1\n },\n \"limit\": {\n \"context\": 200000,\n \"output\": 8192\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"glm-4.6\": {\n \"id\": \"glm-4.6\",\n \"name\": \"GLM-4.6\",\n \"family\": \"glm\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-04\",\n \"release_date\": \"2025-09-30\",\n \"last_updated\": \"2025-09-30\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.6,\n \"output\": 2.2,\n \"cache_read\": 0.1\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n }\n },\n \"glm-4.7-free\": {\n \"id\": \"glm-4.7-free\",\n \"name\": \"GLM-4.7 Free\",\n \"family\": \"glm-free\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2025-04\",\n \"release_date\": \"2025-12-22\",\n \"last_updated\": \"2025-12-22\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n },\n \"status\": \"deprecated\"\n },\n \"grok-code\": {\n \"id\": \"grok-code\",\n \"name\": \"Grok Code Fast 1\",\n \"family\": \"grok\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"release_date\": \"2025-08-20\",\n \"last_updated\": \"2025-08-20\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0,\n \"cache_write\": 0\n },\n \"limit\": {\n \"context\": 256000,\n \"output\": 256000\n },\n \"status\": \"deprecated\"\n },\n \"gemini-3-flash\": {\n \"id\": \"gemini-3-flash\",\n \"name\": \"Gemini 3 Flash\",\n \"family\": \"gemini-flash\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2025-12-17\",\n \"last_updated\": \"2025-12-17\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"video\", \"audio\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 0.5,\n \"output\": 3,\n \"cache_read\": 0.05\n },\n \"limit\": {\n \"context\": 1048576,\n \"output\": 65536\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/google\"\n }\n },\n \"gpt-5.1-codex-max\": {\n \"id\": \"gpt-5.1-codex-max\",\n \"name\": \"GPT-5.1 Codex Max\",\n \"family\": \"gpt-codex\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-09-30\",\n \"release_date\": \"2025-11-13\",\n \"last_updated\": \"2025-11-13\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.25,\n \"output\": 10,\n \"cache_read\": 0.125\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"minimax-m2.1-free\": {\n \"id\": \"minimax-m2.1-free\",\n \"name\": \"MiniMax M2.1 Free\",\n \"family\": \"minimax-free\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2025-12-23\",\n \"last_updated\": \"2025-12-23\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n },\n \"status\": \"deprecated\",\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"kimi-k2.5-free\": {\n \"id\": \"kimi-k2.5-free\",\n \"name\": \"Kimi K2.5 Free\",\n \"family\": \"kimi-free\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2024-10\",\n \"release_date\": \"2026-01-27\",\n \"last_updated\": \"2026-01-27\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"video\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0\n },\n \"limit\": {\n \"context\": 262144,\n \"output\": 262144\n },\n \"status\": \"deprecated\"\n },\n \"claude-sonnet-4\": {\n \"id\": \"claude-sonnet-4\",\n \"name\": \"Claude Sonnet 4\",\n \"family\": \"claude-sonnet\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-03-31\",\n \"release_date\": \"2025-05-22\",\n \"last_updated\": \"2025-05-22\",\n \"modalities\": {\n \"input\": [\"text\", \"image\", \"pdf\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 3,\n \"output\": 15,\n \"cache_read\": 0.3,\n \"cache_write\": 3.75,\n \"context_over_200k\": {\n \"input\": 6,\n \"output\": 22.5,\n \"cache_read\": 0.6,\n \"cache_write\": 7.5\n }\n },\n \"limit\": {\n \"context\": 1000000,\n \"output\": 64000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"gpt-5\": {\n \"id\": \"gpt-5\",\n \"name\": \"GPT-5\",\n \"family\": \"gpt\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2024-09-30\",\n \"release_date\": \"2025-08-07\",\n \"last_updated\": \"2025-08-07\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.07,\n \"output\": 8.5,\n \"cache_read\": 0.107\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n },\n \"minimax-m2.1\": {\n \"id\": \"minimax-m2.1\",\n \"name\": \"MiniMax M2.1\",\n \"family\": \"minimax\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2025-12-23\",\n \"last_updated\": \"2025-12-23\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.3,\n \"output\": 1.2,\n \"cache_read\": 0.1\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n }\n },\n \"minimax-m2.5-free\": {\n \"id\": \"minimax-m2.5-free\",\n \"name\": \"MiniMax M2.5 Free\",\n \"family\": \"minimax-free\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2026-02-12\",\n \"last_updated\": \"2026-02-12\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0,\n \"output\": 0,\n \"cache_read\": 0\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/anthropic\"\n }\n },\n \"minimax-m2.5\": {\n \"id\": \"minimax-m2.5\",\n \"name\": \"MiniMax M2.5\",\n \"family\": \"minimax\",\n \"attachment\": false,\n \"reasoning\": true,\n \"tool_call\": true,\n \"interleaved\": {\n \"field\": \"reasoning_content\"\n },\n \"temperature\": true,\n \"knowledge\": \"2025-01\",\n \"release_date\": \"2026-02-12\",\n \"last_updated\": \"2026-02-12\",\n \"modalities\": {\n \"input\": [\"text\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": true,\n \"cost\": {\n \"input\": 0.3,\n \"output\": 1.2,\n \"cache_read\": 0.06\n },\n \"limit\": {\n \"context\": 204800,\n \"output\": 131072\n }\n },\n \"gpt-5.2\": {\n \"id\": \"gpt-5.2\",\n \"name\": \"GPT-5.2\",\n \"family\": \"gpt\",\n \"attachment\": true,\n \"reasoning\": true,\n \"tool_call\": true,\n \"structured_output\": true,\n \"temperature\": false,\n \"knowledge\": \"2025-08-31\",\n \"release_date\": \"2025-12-11\",\n \"last_updated\": \"2025-12-11\",\n \"modalities\": {\n \"input\": [\"text\", \"image\"],\n \"output\": [\"text\"]\n },\n \"open_weights\": false,\n \"cost\": {\n \"input\": 1.75,\n \"output\": 14,\n \"cache_read\": 0.175\n },\n \"limit\": {\n \"context\": 400000,\n \"input\": 272000,\n \"output\": 128000\n },\n \"provider\": {\n \"npm\": \"@ai-sdk/openai\"\n }\n }\n }\n}\n",[],[177,525],"cccaa1c0-0e00-11f1-af73-42dde27851f2","2026-02-19-vercel-ai-sdk-migration.md","359bde12-0de3-11f1-91e6-42dde27851f2","d4899416-0ddd-11f1-affc-42dde27851f2",190,["D",1771553202373],"# Vercel AI SDK Migration\n\n> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to\n> implement this plan task-by-task.\n\n**Goal:** Replace raw Anthropic/OpenAI SDKs with the Vercel AI SDK's unified\n`streamText` API, aligned with OpenCode Zen's recommended provider packages.\n\n**Architecture:** Create 4 provider instances (Anthropic, OpenAI, Google,\nOpenAI-compatible) each pointing at the Zen gateway. Replace 3 separate\nstreaming generator functions with a single `streamText` call that picks the\nright provider based on `model.provider.npm`. Keep the existing SSE protocol to\nthe frontend unchanged.\n\n**Tech Stack:** `ai@4`, `@ai-sdk/anthropic@1`, `@ai-sdk/openai@1`,\n`@ai-sdk/google@1`, Hono SSE streaming (note: `@ai-sdk/openai-compatible`\ndropped due to esm.sh/Deno zod 4 incompatibility — openai-compatible models use\n`createOpenAI` with `provider.chat()` instead)\n\n---\n\n### Task 1: Replace SDK imports and create provider instances\n\n**Files:**\n\n- Modify: `backend/routes/api.ts:1-10` (imports)\n- Modify: `backend/routes/api.ts:68-90` (client factories)\n\n**Step 1: Replace imports**\n\nRemove:\n\n```ts\nimport Anthropic from \"https://esm.sh/@anthropic-ai/sdk@0.39.0\";\nimport OpenAI from \"https://esm.sh/openai@4.96.0\";\n```\n\nAdd:\n\n```ts\nimport { streamText } from \"https://esm.sh/ai@4\";\nimport { createAnthropic } from \"https://esm.sh/@ai-sdk/anthropic@1\";\nimport { createOpenAI } from \"https://esm.sh/@ai-sdk/openai@1\";\nimport { createGoogleGenerativeAI } from \"https://esm.sh/@ai-sdk/google@1\";\nimport { createOpenAICompatible } from \"https://esm.sh/@ai-sdk/openai-compatible@1\";\n```\n\nNote: use major-version-only pins on esm.sh — it resolves to latest within that\nmajor.\n\n**Step 2: Replace client factories**\n\nRemove `getAnthropicClient()`, `getOpenAIClient()`, and their cached variables\n(lines 68-90).\n\nAdd a single `getProvider` function:\n\n```ts\nfunction getProviderModel(model: any) {\n const apiKey = Deno.env.get(\"OPENCODE_API_KEY\") || \"\";\n const npm = model.provider?.npm || \"\";\n\n if (npm === \"@ai-sdk/anthropic\") {\n const provider = createAnthropic({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider(model.id);\n }\n\n if (npm === \"@ai-sdk/openai\") {\n const provider = createOpenAI({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider(model.id);\n }\n\n if (npm === \"@ai-sdk/google\") {\n const provider = createGoogleGenerativeAI({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider(model.id);\n }\n\n // Default: openai-compatible (GLM, Qwen, Kimi, MiniMax, etc.)\n const provider = createOpenAICompatible({\n name: \"opencode\",\n baseURL: \"https://opencode.ai/zen/v1/chat/completions\",\n apiKey,\n });\n return provider.chatModel(model.id);\n}\n```\n\n**Step 3: Commit**\n\n```bash\ngit add backend/routes/api.ts\ngit commit -m \"refactor: replace raw SDKs with Vercel AI SDK provider instances\"\n```\n\n---\n\n### Task 2: Replace streaming functions with unified streamText\n\n**Files:**\n\n- Modify: `backend/routes/api.ts:92-208` (streaming functions)\n\n**Step 1: Remove old streaming functions**\n\nDelete `streamAnthropic`, `streamOpenAIResponses`, `streamChatCompletions`, and\n`streamModel` (lines 92-208).\n\n**Step 2: Write new unified streamModel**\n\n```ts\nasync function* streamModel(\n model: any,\n messages: { role: string; content: string }[],\n): AsyncGenerator {\n try {\n const result = streamText({\n model: getProviderModel(model),\n messages: messages.map((m) => ({\n role: m.role as \"user\" | \"assistant\" | \"system\",\n content: m.content,\n })),\n maxTokens: Math.min(4096, model.limit.output),\n });\n\n let fullContent = \"\";\n for await (const chunk of result.textStream) {\n fullContent += chunk;\n yield { type: \"chunk\", data: { model_id: model.id, content: chunk } };\n }\n\n yield {\n type: \"done\",\n data: { model_id: model.id, full_content: fullContent },\n };\n } catch (err: any) {\n console.error(`[streamModel] ${model.id} error:`, err);\n yield { type: \"error\", data: { model_id: model.id, error: err.message } };\n }\n}\n```\n\nThis preserves the exact same `StreamEvent` interface and SSE protocol — no\nfrontend changes needed.\n\n**Step 3: Commit**\n\n```bash\ngit add backend/routes/api.ts\ngit commit -m \"refactor: replace 3 streaming functions with unified streamText\"\n```\n\n---\n\n### Task 3: Verify end-to-end\n\n**Step 1: Push to Val Town and test**\n\nOpen the app, create a conversation selecting models from different providers:\n\n- A Claude model (Anthropic provider)\n- A GPT model (OpenAI provider)\n- A GLM or Kimi model (openai-compatible provider)\n\nSend a message and verify:\n\n- All models stream text chunks in real-time\n- SSE events parse correctly (no frontend errors in console)\n- Final messages are saved to the database\n- Conversation history works on follow-up messages\n\n**Step 2: Check for Google models if any are selected**\n\nIf Gemini models are in your model list, test one to verify the Google provider\npath works.\n\n**Step 3: Commit any fixes**\n",[],[177,541,533],"plans","d7b69ddc-0ddd-11f1-8592-42dde27851f2","2026-02-19-promptcompare-implementation.md","d7b69eb8-0ddd-11f1-8592-42dde27851f2",164,["D",1771538188280],"# PromptCompare Implementation Plan\n\n> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to\n> implement this plan task-by-task.\n\n**Goal:** Build a Val Town app that lets users compare LLM outputs side-by-side\nacross multiple models with multi-turn conversation support.\n\n**Architecture:** Hono backend serves a React 18 frontend as static files.\nSQLite stores conversations/messages/responses. Backend proxies chat requests to\nOpenCode Zen, multiplexing multiple model responses into a single SSE stream.\nSimple password auth with session cookies.\n\n**Tech Stack:** Deno (Val Town), Hono, React 18.2.0 (esm.sh), Tailwind (twind\nCDN), Val Town SQLite, OpenCode Zen API\n\n---\n\n### Task 1: Shared Types\n\n**Files:**\n\n- Create: `shared/types.ts`\n\n**Step 1: Create shared type definitions**\n\n```ts\n// shared/types.ts\n\nexport interface ModelInfo {\n id: string;\n name: string;\n family: string;\n reasoning: boolean;\n cost: { input: number; output: number };\n limit: { context: number; output: number };\n}\n\nexport interface Conversation {\n id: string;\n title: string;\n model_ids: string[];\n created_at: string;\n updated_at: string;\n}\n\nexport interface Message {\n id: string;\n conversation_id: string;\n role: \"user\";\n content: string;\n created_at: string;\n}\n\nexport interface Response {\n id: string;\n message_id: string;\n model_id: string;\n content: string;\n created_at: string;\n}\n\nexport interface ConversationDetail extends Conversation {\n messages: (Message & { responses: Response[] })[];\n}\n\nexport interface SSEChunk {\n model_id: string;\n content: string;\n}\n\nexport interface SSEDone {\n model_id: string;\n}\n\nexport interface SSEError {\n model_id: string;\n error: string;\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add shared/types.ts\ngit commit -m \"feat: add shared type definitions\"\n```\n\n---\n\n### Task 2: Database Schema & Migrations\n\n**Files:**\n\n- Create: `backend/database/migrations.ts`\n\n**Context:** Use `https://esm.town/v/std/sqlite/main.ts` for val-scoped SQLite.\nSee `docs/vt-sqlite.md` for API reference. The `sqlite` object is an initialized\n`@libsql/client` instance supporting `execute` and `batch`.\n\n**Step 1: Create migrations file**\n\n```ts\n// backend/database/migrations.ts\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS conversations (\n id TEXT PRIMARY KEY,\n title TEXT,\n model_ids TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS messages (\n id TEXT PRIMARY KEY,\n conversation_id TEXT NOT NULL,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (conversation_id) REFERENCES conversations(id) ON DELETE CASCADE\n )`,\n `CREATE TABLE IF NOT EXISTS responses (\n id TEXT PRIMARY KEY,\n message_id TEXT NOT NULL,\n model_id TEXT NOT NULL,\n content TEXT NOT NULL DEFAULT '',\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (message_id) REFERENCES messages(id) ON DELETE CASCADE\n )`,\n ]);\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add backend/database/migrations.ts\ngit commit -m \"feat: add database migrations\"\n```\n\n---\n\n### Task 3: Database Query Functions\n\n**Files:**\n\n- Create: `backend/database/queries.ts`\n\n**Step 1: Create typed query functions**\n\n```ts\n// backend/database/queries.ts\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type {\n Conversation,\n ConversationDetail,\n Message,\n Response,\n} from \"../../shared/types.ts\";\n\nexport async function listConversations(): Promise {\n const result = await sqlite.execute(\n \"SELECT id, title, model_ids, created_at, updated_at FROM conversations ORDER BY updated_at DESC\",\n );\n return (result.rows as any[]).map((r) => ({\n ...r,\n model_ids: JSON.parse(r.model_ids),\n }));\n}\n\nexport async function getConversation(\n id: string,\n): Promise {\n const convResult = await sqlite.execute({\n sql: \"SELECT * FROM conversations WHERE id = ?\",\n args: [id],\n });\n if (convResult.rows.length === 0) return null;\n\n const conv = convResult.rows[0] as any;\n\n const msgsResult = await sqlite.execute({\n sql:\n \"SELECT * FROM messages WHERE conversation_id = ? ORDER BY created_at ASC\",\n args: [id],\n });\n\n const messages = [];\n for (const msg of msgsResult.rows as any[]) {\n const respResult = await sqlite.execute({\n sql: \"SELECT * FROM responses WHERE message_id = ? ORDER BY model_id ASC\",\n args: [msg.id],\n });\n messages.push({\n ...msg,\n responses: respResult.rows as Response[],\n });\n }\n\n return {\n ...conv,\n model_ids: JSON.parse(conv.model_ids),\n messages,\n };\n}\n\nexport async function createConversation(\n id: string,\n title: string,\n modelIds: string[],\n): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO conversations (id, title, model_ids) VALUES (?, ?, ?)\",\n args: [id, title, JSON.stringify(modelIds)],\n });\n}\n\nexport async function deleteConversation(id: string): Promise {\n // Delete in order due to foreign keys (SQLite may not enforce CASCADE)\n await sqlite.batch([\n {\n sql:\n `DELETE FROM responses WHERE message_id IN (SELECT id FROM messages WHERE conversation_id = ?)`,\n args: [id],\n },\n { sql: \"DELETE FROM messages WHERE conversation_id = ?\", args: [id] },\n { sql: \"DELETE FROM conversations WHERE id = ?\", args: [id] },\n ]);\n}\n\nexport async function updateConversationTitle(\n id: string,\n title: string,\n): Promise {\n await sqlite.execute({\n sql:\n \"UPDATE conversations SET title = ?, updated_at = datetime('now') WHERE id = ?\",\n args: [title, id],\n });\n}\n\nexport async function createMessage(\n id: string,\n conversationId: string,\n content: string,\n): Promise {\n await sqlite.execute({\n sql:\n \"INSERT INTO messages (id, conversation_id, role, content) VALUES (?, ?, 'user', ?)\",\n args: [id, conversationId, content],\n });\n await sqlite.execute({\n sql: \"UPDATE conversations SET updated_at = datetime('now') WHERE id = ?\",\n args: [conversationId],\n });\n}\n\nexport async function createResponse(\n id: string,\n messageId: string,\n modelId: string,\n): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO responses (id, message_id, model_id) VALUES (?, ?, ?)\",\n args: [id, messageId, modelId],\n });\n}\n\nexport async function updateResponseContent(\n id: string,\n content: string,\n): Promise {\n await sqlite.execute({\n sql: \"UPDATE responses SET content = ? WHERE id = ?\",\n args: [content, id],\n });\n}\n\nexport async function getConversationHistory(\n conversationId: string,\n modelId: string,\n): Promise<{ role: string; content: string }[]> {\n const result = await sqlite.execute({\n sql:\n `SELECT m.role, m.content AS user_content, r.content AS assistant_content\n FROM messages m\n LEFT JOIN responses r ON r.message_id = m.id AND r.model_id = ?\n WHERE m.conversation_id = ?\n ORDER BY m.created_at ASC`,\n args: [modelId, conversationId],\n });\n\n const history: { role: string; content: string }[] = [];\n for (const row of result.rows as any[]) {\n history.push({ role: \"user\", content: row.user_content });\n if (row.assistant_content) {\n history.push({ role: \"assistant\", content: row.assistant_content });\n }\n }\n return history;\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add backend/database/queries.ts\ngit commit -m \"feat: add database query functions\"\n```\n\n---\n\n### Task 4: Auth Routes\n\n**Files:**\n\n- Create: `backend/routes/auth.ts`\n\n**Context:** Use `Deno.env.get(\"PROMPTCOMPARE_PASSWORD\")` for the secret. Simple\napproach: hash the password with a known salt using the Web Crypto API, store\nthe hash in a cookie. Middleware checks the cookie on protected routes.\n\n**Step 1: Create auth routes and middleware**\n\n```ts\n// backend/routes/auth.ts\nimport { Hono } from \"https://esm.sh/hono@4.7.4\";\nimport {\n deleteCookie,\n getCookie,\n setCookie,\n} from \"https://esm.sh/hono@4.7.4/cookie\";\n\nconst COOKIE_NAME = \"promptcompare_session\";\nconst SESSION_MAX_AGE = 60 * 60 * 24 * 7; // 7 days\n\nasync function hashPassword(password: string): Promise {\n const encoder = new TextEncoder();\n const data = encoder.encode(password + \"_promptcompare_salt\");\n const hash = await crypto.subtle.digest(\"SHA-256\", data);\n return Array.from(new Uint8Array(hash))\n .map((b) => b.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}\n\nexport const authRoutes = new Hono();\n\nauthRoutes.post(\"/\", async (c) => {\n const { password } = await c.req.json();\n const expected = Deno.env.get(\"PROMPTCOMPARE_PASSWORD\");\n if (!expected || password !== expected) {\n return c.json({ error: \"Invalid password\" }, 401);\n }\n const token = await hashPassword(expected);\n setCookie(c, COOKIE_NAME, token, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: SESSION_MAX_AGE,\n path: \"/\",\n });\n return c.json({ ok: true });\n});\n\nauthRoutes.get(\"/check\", async (c) => {\n const token = getCookie(c, COOKIE_NAME);\n const expected = Deno.env.get(\"PROMPTCOMPARE_PASSWORD\");\n if (!token || !expected) return c.json({ authenticated: false });\n const expectedToken = await hashPassword(expected);\n return c.json({ authenticated: token === expectedToken });\n});\n\nauthRoutes.post(\"/logout\", (c) => {\n deleteCookie(c, COOKIE_NAME, { path: \"/\" });\n return c.json({ ok: true });\n});\n\nexport async function requireAuth(c: any, next: any) {\n const token = getCookie(c, COOKIE_NAME);\n const expected = Deno.env.get(\"PROMPTCOMPARE_PASSWORD\");\n if (!token || !expected) return c.json({ error: \"Unauthorized\" }, 401);\n const expectedToken = await hashPassword(expected);\n if (token !== expectedToken) return c.json({ error: \"Unauthorized\" }, 401);\n await next();\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add backend/routes/auth.ts\ngit commit -m \"feat: add auth routes and middleware\"\n```\n\n---\n\n### Task 5: API Routes (Conversations + Models)\n\n**Files:**\n\n- Create: `backend/routes/api.ts`\n\n**Context:** The models list comes from `docs/models.json` but at runtime we\nneed to read it via Val Town's `readFile` utility. For the streaming chat\nendpoint, we need to proxy to OpenCode Zen endpoints. Each model has a different\nendpoint based on its provider — see the endpoint table in `docs/zen.md`.\n\n**Step 1: Create API routes**\n\n```ts\n// backend/routes/api.ts\nimport { Hono } from \"https://esm.sh/hono@4.7.4\";\nimport { streamSSE } from \"https://esm.sh/hono@4.7.4/streaming\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport * as db from \"../database/queries.ts\";\n\nconst api = new Hono();\n\n// --- Models ---\n\nlet cachedModels: any = null;\n\nasync function getModels() {\n if (cachedModels) return cachedModels;\n const raw = await readFile(\"/docs/models.json\", import.meta.url);\n const data = JSON.parse(raw);\n const models = Object.values(data.models).filter((m: any) =>\n m.status !== \"deprecated\"\n );\n cachedModels = models;\n return models;\n}\n\napi.get(\"/models\", async (c) => {\n const models = await getModels();\n return c.json(models);\n});\n\n// --- Conversations ---\n\napi.get(\"/conversations\", async (c) => {\n const conversations = await db.listConversations();\n return c.json(conversations);\n});\n\napi.get(\"/conversations/:id\", async (c) => {\n const conv = await db.getConversation(c.req.param(\"id\"));\n if (!conv) return c.json({ error: \"Not found\" }, 404);\n return c.json(conv);\n});\n\napi.post(\"/conversations\", async (c) => {\n const { title, model_ids } = await c.req.json();\n const id = crypto.randomUUID();\n await db.createConversation(id, title || \"New Conversation\", model_ids);\n return c.json({ id });\n});\n\napi.delete(\"/conversations/:id\", async (c) => {\n await db.deleteConversation(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// --- Chat (SSE streaming) ---\n\nfunction getZenEndpoint(model: any): string {\n const npm = model.provider?.npm || \"\";\n if (npm === \"@ai-sdk/anthropic\") return \"https://opencode.ai/zen/v1/messages\";\n if (npm === \"@ai-sdk/openai\") return \"https://opencode.ai/zen/v1/responses\";\n if (npm === \"@ai-sdk/google\") {\n return `https://opencode.ai/zen/v1/models/${model.id}`;\n }\n // Default: openai-compatible chat/completions\n return \"https://opencode.ai/zen/v1/chat/completions\";\n}\n\nfunction buildRequestBody(\n model: any,\n messages: { role: string; content: string }[],\n): { endpoint: string; body: any; headers: Record } {\n const apiKey = Deno.env.get(\"OPENCODE_API_KEY\") || \"\";\n const npm = model.provider?.npm || \"\";\n const endpoint = getZenEndpoint(model);\n\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${apiKey}`,\n };\n\n if (npm === \"@ai-sdk/anthropic\") {\n return {\n endpoint,\n headers: { ...headers, \"anthropic-version\": \"2023-06-01\" },\n body: {\n model: model.id,\n messages: messages.map((m) => ({ role: m.role, content: m.content })),\n max_tokens: Math.min(4096, model.limit.output),\n stream: true,\n },\n };\n }\n\n if (npm === \"@ai-sdk/openai\") {\n return {\n endpoint,\n headers,\n body: {\n model: model.id,\n input: messages.map((m) => ({ role: m.role, content: m.content })),\n stream: true,\n },\n };\n }\n\n // Default: OpenAI-compatible chat/completions (GLM, Kimi, MiniMax, etc.)\n return {\n endpoint,\n headers,\n body: {\n model: model.id,\n messages: messages.map((m) => ({ role: m.role, content: m.content })),\n max_tokens: Math.min(4096, model.limit.output),\n stream: true,\n },\n };\n}\n\nasync function* streamModel(\n model: any,\n messages: { role: string; content: string }[],\n): AsyncGenerator<{ type: \"chunk\" | \"done\" | \"error\"; data: any }> {\n const { endpoint, body, headers } = buildRequestBody(model, messages);\n const npm = model.provider?.npm || \"\";\n\n try {\n const resp = await fetch(endpoint, {\n method: \"POST\",\n headers,\n body: JSON.stringify(body),\n });\n\n if (!resp.ok) {\n const errText = await resp.text();\n yield {\n type: \"error\",\n data: { model_id: model.id, error: `${resp.status}: ${errText}` },\n };\n return;\n }\n\n const reader = resp.body?.getReader();\n if (!reader) {\n yield {\n type: \"error\",\n data: { model_id: model.id, error: \"No response body\" },\n };\n return;\n }\n\n const decoder = new TextDecoder();\n let buffer = \"\";\n let fullContent = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\";\n\n for (const line of lines) {\n if (!line.startsWith(\"data: \")) continue;\n const data = line.slice(6).trim();\n if (data === \"[DONE]\") continue;\n\n try {\n const parsed = JSON.parse(data);\n let text = \"\";\n\n if (npm === \"@ai-sdk/anthropic\") {\n // Anthropic streaming: content_block_delta\n if (parsed.type === \"content_block_delta\" && parsed.delta?.text) {\n text = parsed.delta.text;\n }\n } else if (npm === \"@ai-sdk/openai\") {\n // OpenAI Responses API streaming\n if (parsed.type === \"response.output_text.delta\" && parsed.delta) {\n text = parsed.delta;\n }\n } else {\n // OpenAI-compatible chat/completions\n text = parsed.choices?.[0]?.delta?.content || \"\";\n }\n\n if (text) {\n fullContent += text;\n yield {\n type: \"chunk\",\n data: { model_id: model.id, content: text },\n };\n }\n } catch {\n // Skip unparseable lines\n }\n }\n }\n\n yield {\n type: \"done\",\n data: { model_id: model.id, full_content: fullContent },\n };\n } catch (err: any) {\n yield { type: \"error\", data: { model_id: model.id, error: err.message } };\n }\n}\n\napi.post(\"/chat\", async (c) => {\n const { conversation_id, content } = await c.req.json();\n\n const conv = await db.getConversation(conversation_id);\n if (!conv) return c.json({ error: \"Conversation not found\" }, 404);\n\n // Create the user message\n const messageId = crypto.randomUUID();\n await db.createMessage(messageId, conversation_id, content);\n\n // Create response placeholders for each model\n const allModels = await getModels();\n const selectedModels = allModels.filter((m: any) =>\n conv.model_ids.includes(m.id)\n );\n\n const responseIds: Record = {};\n for (const model of selectedModels) {\n const responseId = crypto.randomUUID();\n responseIds[model.id] = responseId;\n await db.createResponse(responseId, messageId, model.id);\n }\n\n return streamSSE(c, async (stream) => {\n // Send message_id so frontend knows it\n await stream.writeSSE({\n event: \"message\",\n data: JSON.stringify({ message_id: messageId }),\n });\n\n // Build per-model conversation histories and stream in parallel\n const streamPromises = selectedModels.map(async (model: any) => {\n const history = await db.getConversationHistory(\n conversation_id,\n model.id,\n );\n // Add the current message\n history.push({ role: \"user\", content });\n\n let fullContent = \"\";\n for await (const event of streamModel(model, history)) {\n if (event.type === \"chunk\") {\n fullContent += event.data.content;\n await stream.writeSSE({\n event: \"chunk\",\n data: JSON.stringify(event.data),\n });\n } else if (event.type === \"done\") {\n await db.updateResponseContent(\n responseIds[model.id],\n event.data.full_content,\n );\n await stream.writeSSE({\n event: \"done\",\n data: JSON.stringify({ model_id: model.id }),\n });\n } else if (event.type === \"error\") {\n await stream.writeSSE({\n event: \"error\",\n data: JSON.stringify(event.data),\n });\n }\n }\n });\n\n await Promise.all(streamPromises);\n });\n});\n\nexport { api };\n```\n\n**Step 2: Commit**\n\n```bash\ngit add backend/routes/api.ts\ngit commit -m \"feat: add API routes for conversations, models, and streaming chat\"\n```\n\n---\n\n### Task 6: Backend Entry Point\n\n**Files:**\n\n- Create: `backend/index.ts`\n\n**Step 1: Create Hono app entry point**\n\n```ts\n// backend/index.ts\nimport { Hono } from \"https://esm.sh/hono@4.7.4\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { authRoutes, requireAuth } from \"./routes/auth.ts\";\nimport { api } from \"./routes/api.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Run migrations on startup\nawait runMigrations();\n\n// Auth routes (public)\napp.route(\"/api/auth\", authRoutes);\n\n// Protected API routes\napp.use(\"/api/*\", requireAuth);\napp.route(\"/api\", api);\n\n// Serve frontend static files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html for all other routes\napp.get(\"*\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;\n```\n\n**Step 2: Commit**\n\n```bash\ngit add backend/index.ts\ngit commit -m \"feat: add backend entry point\"\n```\n\n---\n\n### Task 7: Frontend HTML Shell\n\n**Files:**\n\n- Create: `frontend/index.html`\n- Create: `frontend/style.css`\n\n**Step 1: Create HTML shell with React and Tailwind CDN**\n\n```html\n\n\n\n \n \n \n PromptCompare\n \n \n \n \n \n

\n \n \n\n```\n\n```css\n/* frontend/style.css */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nhtml, body, #root {\n height: 100%;\n}\nbody {\n font-family:\n -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n/* Markdown rendered in responses */\n.prose pre {\n background: #1e1e1e;\n color: #d4d4d4;\n padding: 1rem;\n border-radius: 0.5rem;\n overflow-x: auto;\n}\n.prose code {\n font-size: 0.875rem;\n}\n.prose p {\n margin-bottom: 0.5rem;\n}\n.prose ul, .prose ol {\n margin-left: 1.5rem;\n margin-bottom: 0.5rem;\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add frontend/index.html frontend/style.css\ngit commit -m \"feat: add frontend HTML shell and base styles\"\n```\n\n---\n\n### Task 8: Frontend App Entry & Login\n\n**Files:**\n\n- Create: `frontend/index.tsx`\n- Create: `frontend/components/Login.tsx`\n\n**Step 1: Create app entry with auth state management**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/index.tsx\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Login } from \"./components/Login.tsx\";\nimport { ChatApp } from \"./components/ChatApp.tsx\";\n\nfunction App() {\n const [authenticated, setAuthenticated] = useState(null);\n\n useEffect(() => {\n fetch(\"/api/auth/check\")\n .then((r) => r.json())\n .then((d) => setAuthenticated(d.authenticated))\n .catch(() => setAuthenticated(false));\n }, []);\n\n if (authenticated === null) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (!authenticated) {\n return setAuthenticated(true)} />;\n }\n\n return setAuthenticated(false)} />;\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n```\n\n**Step 2: Create Login component**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Login.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Login({ onSuccess }: { onSuccess: () => void }) {\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n try {\n const res = await fetch(\"/api/auth\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ password }),\n });\n if (res.ok) {\n onSuccess();\n } else {\n setError(\"Invalid password\");\n }\n } catch {\n setError(\"Connection error\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n \n

\n PromptCompare\n

\n setPassword(e.target.value)}\n placeholder=\"Password\"\n className=\"w-full px-3 py-2 border rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n autoFocus\n />\n {error &&

{error}

}\n \n {loading ? \"...\" : \"Sign In\"}\n \n \n

\n );\n}\n```\n\n**Step 3: Commit**\n\n```bash\ngit add frontend/index.tsx frontend/components/Login.tsx\ngit commit -m \"feat: add frontend app entry and login component\"\n```\n\n---\n\n### Task 9: ChatApp Shell (Sidebar + Layout)\n\n**Files:**\n\n- Create: `frontend/components/ChatApp.tsx`\n- Create: `frontend/components/Sidebar.tsx`\n\n**Step 1: Create ChatApp layout component**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ChatApp.tsx\nimport React, {\n useCallback,\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation, ModelInfo } from \"../../shared/types.ts\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { ModelPicker } from \"./ModelPicker.tsx\";\nimport { ConversationView } from \"./ConversationView.tsx\";\n\nexport function ChatApp({ onLogout }: { onLogout: () => void }) {\n const [conversations, setConversations] = useState([]);\n const [activeConvId, setActiveConvId] = useState(null);\n const [models, setModels] = useState([]);\n const [showModelPicker, setShowModelPicker] = useState(false);\n\n const loadConversations = useCallback(async () => {\n const res = await fetch(\"/api/conversations\");\n const data = await res.json();\n setConversations(data);\n }, []);\n\n useEffect(() => {\n loadConversations();\n fetch(\"/api/models\").then((r) => r.json()).then(setModels);\n }, []);\n\n const handleNewChat = () => {\n setShowModelPicker(true);\n setActiveConvId(null);\n };\n\n const handleCreateConversation = async (selectedModelIds: string[]) => {\n const res = await fetch(\"/api/conversations\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n title: \"New Conversation\",\n model_ids: selectedModelIds,\n }),\n });\n const { id } = await res.json();\n setShowModelPicker(false);\n setActiveConvId(id);\n await loadConversations();\n };\n\n const handleDeleteConversation = async (id: string) => {\n await fetch(`/api/conversations/${id}`, { method: \"DELETE\" });\n if (activeConvId === id) setActiveConvId(null);\n await loadConversations();\n };\n\n return (\n

\n \n

\n {showModelPicker\n ? (\n setShowModelPicker(false)}\n />\n )\n : activeConvId\n ? (\n \n )\n : (\n

\n Select a conversation or start a new one\n

\n )}\n

\n );\n}\n```\n\n**Step 2: Create Sidebar component**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Sidebar.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation } from \"../../shared/types.ts\";\n\ninterface SidebarProps {\n conversations: Conversation[];\n activeId: string | null;\n onSelect: (id: string) => void;\n onNewChat: () => void;\n onDelete: (id: string) => void;\n onLogout: () => void;\n}\n\nexport function Sidebar(\n { conversations, activeId, onSelect, onNewChat, onDelete, onLogout }:\n SidebarProps,\n) {\n return (\n

\n \n + New Comparison\n \n

\n ))}\n

\n {\n await fetch(\"/api/auth/logout\", { method: \"POST\" });\n onLogout();\n }}\n className=\"text-sm text-gray-400 hover:text-white\"\n >\n Sign out\n \n

\n );\n}\n```\n\n**Step 3: Commit**\n\n```bash\ngit add frontend/components/ChatApp.tsx frontend/components/Sidebar.tsx\ngit commit -m \"feat: add ChatApp layout and Sidebar\"\n```\n\n---\n\n### Task 10: Model Picker Component\n\n**Files:**\n\n- Create: `frontend/components/ModelPicker.tsx`\n\n**Step 1: Create model picker with checkboxes**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ModelPicker.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ModelInfo } from \"../../shared/types.ts\";\n\ninterface ModelPickerProps {\n models: ModelInfo[];\n onConfirm: (modelIds: string[]) => void;\n onCancel: () => void;\n}\n\nexport function ModelPicker({ models, onConfirm, onCancel }: ModelPickerProps) {\n const [selected, setSelected] = useState>(new Set());\n\n const toggle = (id: string) => {\n setSelected((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else if (next.size < 4) {\n next.add(id);\n }\n return next;\n });\n };\n\n // Group by family\n const families = new Map();\n for (const m of models) {\n const fam = m.family;\n if (!families.has(fam)) families.set(fam, []);\n families.get(fam)!.push(m);\n }\n\n return (\n

Select Models

\n Choose up to 4 models to compare ({selected.size}/4)\n

\n\n {Array.from(families.entries()).map(([family, familyModels]) => (\n

\n {family}\n

\n {model.name}\n

\n \n ${model.cost.input}/{model.cost.output} per 1M\n \n \n ))}\n

\n ))}\n\n

\n );\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add frontend/components/ModelPicker.tsx\ngit commit -m \"feat: add ModelPicker component\"\n```\n\n---\n\n### Task 11: ConversationView (Messages + Streaming)\n\n**Files:**\n\n- Create: `frontend/components/ConversationView.tsx`\n- Create: `frontend/components/MessageRow.tsx`\n- Create: `frontend/components/PromptInput.tsx`\n\nThis is the core component. It loads conversation history, displays messages\nwith side-by-side model responses, handles streaming, and renders markdown.\n\n**Step 1: Create PromptInput component**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/PromptInput.tsx\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface PromptInputProps {\n onSend: (content: string) => void;\n disabled: boolean;\n}\n\nexport function PromptInput({ onSend, disabled }: PromptInputProps) {\n const [value, setValue] = useState(\"\");\n const textareaRef = useRef(null);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const trimmed = value.trim();\n if (!trimmed || disabled) return;\n onSend(trimmed);\n setValue(\"\");\n if (textareaRef.current) textareaRef.current.style.height = \"auto\";\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handleInput = () => {\n const el = textareaRef.current;\n if (el) {\n el.style.height = \"auto\";\n el.style.height = Math.min(el.scrollHeight, 200) + \"px\";\n }\n };\n\n return (\n \n );\n}\n```\n\n**Step 2: Create MessageRow component**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/MessageRow.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@15.0.6?deps=react@18.2.0,react-dom@18.2.0\";\n\ninterface MessageRowProps {\n userContent: string;\n responses: { model_id: string; content: string }[];\n modelNames: Record;\n streaming?: boolean;\n}\n\nexport function MessageRow(\n { userContent, responses, modelNames, streaming }: MessageRowProps,\n) {\n return (\n

\n {/* User message */}\n

\n {userContent}\n

\n\n {/* Model responses side by side */}\n \n {responses.map((resp) => (\n \n

\n {modelNames[resp.model_id] || resp.model_id}\n

\n ...'\n : 'No response',\n }}\n />\n

\n ))}\n \n \n );\n}\n```\n\n**Step 3: Create ConversationView component**\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ConversationView.tsx\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { ConversationDetail, ModelInfo } from \"../../shared/types.ts\";\nimport { MessageRow } from \"./MessageRow.tsx\";\nimport { PromptInput } from \"./PromptInput.tsx\";\n\ninterface ConversationViewProps {\n conversationId: string;\n models: ModelInfo[];\n onTitleUpdate: () => void;\n}\n\ninterface StreamingState {\n [modelId: string]: string;\n}\n\nexport function ConversationView(\n { conversationId, models, onTitleUpdate }: ConversationViewProps,\n) {\n const [conversation, setConversation] = useState(\n null,\n );\n const [streaming, setStreaming] = useState(false);\n const [streamingResponses, setStreamingResponses] = useState(\n {},\n );\n const [streamingMessageContent, setStreamingMessageContent] = useState<\n string | null\n >(null);\n const messagesEndRef = useRef(null);\n\n const modelNames = Object.fromEntries(models.map((m) => [m.id, m.name]));\n\n const loadConversation = useCallback(async () => {\n const res = await fetch(`/api/conversations/${conversationId}`);\n const data = await res.json();\n setConversation(data);\n }, [conversationId]);\n\n useEffect(() => {\n loadConversation();\n setStreamingResponses({});\n setStreamingMessageContent(null);\n }, [conversationId]);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [conversation, streamingResponses]);\n\n const handleSend = async (content: string) => {\n if (!conversation) return;\n\n setStreaming(true);\n setStreamingMessageContent(content);\n // Initialize streaming state for each model\n const initialState: StreamingState = {};\n for (const modelId of conversation.model_ids) {\n initialState[modelId] = \"\";\n }\n setStreamingResponses(initialState);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ conversation_id: conversationId, content }),\n });\n\n const reader = response.body?.getReader();\n if (!reader) return;\n\n const decoder = new TextDecoder();\n let buffer = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\";\n\n for (const line of lines) {\n if (line.startsWith(\"data: \")) {\n const eventLine = lines[lines.indexOf(line) - 1];\n const eventType = eventLine?.startsWith(\"event: \")\n ? eventLine.slice(7)\n : \"\";\n try {\n const data = JSON.parse(line.slice(6));\n if (eventType === \"chunk\" || (!eventType && data.content)) {\n setStreamingResponses((prev) => ({\n ...prev,\n [data.model_id]: (prev[data.model_id] || \"\") + data.content,\n }));\n }\n } catch {\n // Skip\n }\n }\n }\n }\n } catch (err) {\n console.error(\"Stream error:\", err);\n } finally {\n setStreaming(false);\n setStreamingMessageContent(null);\n setStreamingResponses({});\n await loadConversation();\n onTitleUpdate();\n }\n };\n\n if (!conversation) {\n return (\n

\n Loading...\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

{conversation.title}

\n {conversation.model_ids.map((id) => (\n \n {modelNames[id] || id}\n \n ))}\n

\n\n {/* Messages */}\n

\n\n \n

\n );\n}\n```\n\n**Step 4: Commit**\n\n```bash\ngit add frontend/components/ConversationView.tsx frontend/components/MessageRow.tsx frontend/components/PromptInput.tsx\ngit commit -m \"feat: add ConversationView, MessageRow, and PromptInput components\"\n```\n\n---\n\n### Task 12: SSE Parsing Fix & Manual Verification\n\n**Context:** The SSE parsing in ConversationView needs to handle the `event:` +\n`data:` line pairs correctly. The current implementation has a bug — it tries to\nlook up the event type by finding the previous line in the already-split array,\nwhich is fragile. Fix the parser to properly track event types.\n\n**Step 1: Update the SSE parser in ConversationView.tsx**\n\nReplace the reader while-loop body in `handleSend` with a proper SSE parser:\n\n```tsx\n// Replace the while(true) loop content in handleSend:\nlet currentEvent = \"\";\n\nwhile (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\";\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n currentEvent = line.slice(7).trim();\n } else if (line.startsWith(\"data: \")) {\n try {\n const data = JSON.parse(line.slice(6));\n if (currentEvent === \"chunk\" && data.content && data.model_id) {\n setStreamingResponses((prev) => ({\n ...prev,\n [data.model_id]: (prev[data.model_id] || \"\") + data.content,\n }));\n }\n } catch {\n // Skip unparseable\n }\n currentEvent = \"\";\n } else if (line.trim() === \"\") {\n currentEvent = \"\";\n }\n }\n}\n```\n\n**Step 2: Verify by deploying to Val Town and testing**\n\n- Deploy via `vt push`\n- Open the val URL in browser\n- Log in with password\n- Create a new comparison with 2 cheap/free models (e.g. `glm-5-free`,\n `gpt-5-nano`)\n- Send a simple prompt like \"Say hello in one sentence\"\n- Verify responses stream in side-by-side\n\n**Step 3: Commit**\n\n```bash\ngit add frontend/components/ConversationView.tsx\ngit commit -m \"fix: proper SSE event parsing in ConversationView\"\n```\n\n---\n\n### Task 13: Auto-title Conversations\n\n**Context:** After the first message, use the user's prompt to set a meaningful\nconversation title instead of \"New Conversation\".\n\n**Step 1: Update the chat endpoint in `backend/routes/api.ts`**\n\nAfter creating the message, check if this is the first message and auto-set the\ntitle:\n\n```ts\n// Add after createMessage call in the /chat handler:\nconst existingMessages = conv.messages || [];\nif (existingMessages.length === 0) {\n // First message — set title from content (truncated)\n const title = content.length > 60 ? content.slice(0, 57) + \"...\" : content;\n await db.updateConversationTitle(conversation_id, title);\n}\n```\n\n**Step 2: Commit**\n\n```bash\ngit add backend/routes/api.ts\ngit commit -m \"feat: auto-title conversations from first message\"\n```\n",[],[177,541,543],"d7b1c4ec-0ddd-11f1-9f87-42dde27851f2","2026-02-19-promptcompare-design.md","d7b1c5d2-0ddd-11f1-9f87-42dde27851f2",163,["D",1771538188281],"# PromptCompare Design\n\n## Overview\n\nA Val Town app for comparing LLM model outputs side-by-side. Users enter a\nprompt, select 1-4 models from the OpenCode Zen catalog, and see responses\nstream in parallel columns. Supports multi-turn conversations where each model\nmaintains its own conversation history.\n\n## Architecture\n\n### Backend (Hono on Val Town)\n\n- `backend/index.ts` — Hono app entry point, serves frontend, mounts route\n modules\n- `backend/routes/auth.ts` — Password auth via `PROMPTCOMPARE_PASSWORD` env var,\n sets HttpOnly session cookie\n- `backend/routes/api.ts` — REST endpoints for conversations + streaming chat\n proxy to OpenCode Zen\n- `backend/database/migrations.ts` — SQLite schema (val-scoped via\n `std/sqlite/main.ts`)\n- `backend/database/queries.ts` — Typed query functions\n\n### Frontend (React 18 + Tailwind, static files)\n\n- `frontend/index.html` — Shell with CDN imports (React 18.2.0 via esm.sh,\n Tailwind via twind)\n- `frontend/index.tsx` — App entry, routing (login vs main)\n- `frontend/components/` — Chat UI components inspired by ai-elements patterns\n\n### Shared\n\n- `shared/types.ts` — TypeScript interfaces shared between frontend and backend\n\n## Data Model\n\n```sql\nconversations (\n id TEXT PRIMARY KEY,\n title TEXT,\n model_ids TEXT NOT NULL, -- JSON array of model IDs\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n)\n\nmessages (\n id TEXT PRIMARY KEY,\n conversation_id TEXT NOT NULL,\n role TEXT NOT NULL, -- 'user'\n content TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (conversation_id) REFERENCES conversations(id)\n)\n\nresponses (\n id TEXT PRIMARY KEY,\n message_id TEXT NOT NULL,\n model_id TEXT NOT NULL,\n content TEXT NOT NULL DEFAULT '',\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (message_id) REFERENCES messages(id)\n)\n```\n\n## API Endpoints\n\n- `POST /api/auth` — Login with password, returns session cookie\n- `GET /api/auth/check` — Check if session is valid\n- `POST /api/auth/logout` — Clear session cookie\n- `GET /api/conversations` — List conversations\n- `GET /api/conversations/:id` — Get conversation with messages and responses\n- `POST /api/conversations` — Create new conversation (title, model_ids)\n- `DELETE /api/conversations/:id` — Delete conversation\n- `POST /api/chat` — Send a message, streams responses from selected models via\n SSE\n- `GET /api/models` — Return non-deprecated models from models.json\n\n## Streaming Strategy\n\nWhen a user sends a message:\n\n1. Backend creates a `message` row and a `response` row per model\n2. Backend opens parallel requests to OpenCode Zen for each model\n3. Backend multiplexes responses into a single SSE stream, tagging each chunk\n with its model_id\n4. Frontend demuxes the SSE stream and updates each column independently\n5. When all models finish, backend updates the response rows with final content\n\nSSE event format:\n\n```\nevent: chunk\ndata: {\"model_id\": \"claude-sonnet-4-6\", \"content\": \"Hello\"}\n\nevent: done\ndata: {\"model_id\": \"claude-sonnet-4-6\"}\n\nevent: error\ndata: {\"model_id\": \"claude-sonnet-4-6\", \"error\": \"...\"}\n```\n\n## Auth\n\n- Env var: `PROMPTCOMPARE_PASSWORD`\n- `POST /api/auth` with `{ password }` body\n- Backend validates, sets HttpOnly cookie with a signed token (or simple hash)\n- All `/api/*` routes (except auth) check cookie via middleware\n\n## UI Layout\n\n```\n+--sidebar--+------------------main-------------------+\n| [New Chat] | Model A | Model B | Model C |\n| | +-response--+ +-response-+ +-------+ |\n| Conv 1 | | streaming | | streaming| | ... | |\n| Conv 2 | | markdown | | markdown | | | |\n| Conv 3 | +-----------+ +----------+ +-------+ |\n| | |\n| | +--prompt input bar------------------+ |\n| | | Type a message... [Send] | |\n| | +------------------------------------+ |\n+------------+------------------------------------------+\n```\n\n## Model Selection\n\n- On new conversation, show a model picker (checkboxes, max 4)\n- Models sourced from `models.json`, filtered to exclude `status: \"deprecated\"`\n- Show model name, family, cost per 1M tokens\n- Selected models persist for the conversation\n\n## Key Decisions\n\n- Single SSE stream (multiplexed) rather than multiple parallel connections —\n simpler client code\n- Each model maintains its own response history for multi-turn context\n- Val-scoped SQLite (`std/sqlite/main.ts`) for persistence\n- No build step — all frontend served as raw files via Val Town utilities\n",[],[177,541,551],"d4899330-0ddd-11f1-affc-42dde27851f2",10,["D",1771538182987],[356,357,358],[177,541],["D",1771538182578],[355,359,360,361,362],[177],"21231e0a-0dde-11f1-bcd4-42dde27851f2","index.http.ts","d7968862-0ddd-11f1-8b80-42dde27851f2",173,["D",1771538311489],"http","// backend/index.ts\nimport { Hono } from \"https://esm.sh/hono@4.7.4\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { authRoutes, requireAuth } from \"./routes/auth.ts\";\nimport { api } from \"./routes/api.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Run migrations on startup\nawait runMigrations();\n\n// Auth routes (public)\napp.route(\"/api/auth\", authRoutes);\n\n// Protected API routes\napp.use(\"/api/*\", requireAuth);\napp.route(\"/api\", api);\n\n// Serve frontend static files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html for all other routes\napp.get(\"*\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;\n","dmcd-promptcompare",[],[183,567],"d79b4d0c-0ddd-11f1-971a-42dde27851f2","auth.ts","d79b4e06-0ddd-11f1-971a-42dde27851f2","d47e07f4-0ddd-11f1-affc-42dde27851f2",158,["D",1771538188123],"// backend/routes/auth.ts\nimport { Hono } from \"https://esm.sh/hono@4.7.4\";\nimport {\n deleteCookie,\n getCookie,\n setCookie,\n} from \"https://esm.sh/hono@4.7.4/cookie\";\n\nconst COOKIE_NAME = \"promptcompare_session\";\nconst SESSION_MAX_AGE = 60 * 60 * 24 * 7; // 7 days\n\nasync function hashPassword(password: string): Promise {\n const encoder = new TextEncoder();\n const data = encoder.encode(password + \"_promptcompare_salt\");\n const hash = await crypto.subtle.digest(\"SHA-256\", data);\n return Array.from(new Uint8Array(hash))\n .map((b) => b.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}\n\nexport const authRoutes = new Hono();\n\nauthRoutes.post(\"/\", async (c) => {\n const { password } = await c.req.json();\n const expected = Deno.env.get(\"PROMPTCOMPARE_PASSWORD\");\n if (!expected || password !== expected) {\n return c.json({ error: \"Invalid password\" }, 401);\n }\n const token = await hashPassword(expected);\n setCookie(c, COOKIE_NAME, token, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: SESSION_MAX_AGE,\n path: \"/\",\n });\n return c.json({ ok: true });\n});\n\nauthRoutes.get(\"/check\", async (c) => {\n const token = getCookie(c, COOKIE_NAME);\n const expected = Deno.env.get(\"PROMPTCOMPARE_PASSWORD\");\n if (!token || !expected) return c.json({ authenticated: false });\n const expectedToken = await hashPassword(expected);\n return c.json({ authenticated: token === expectedToken });\n});\n\nauthRoutes.post(\"/logout\", (c) => {\n deleteCookie(c, COOKIE_NAME, { path: \"/\" });\n return c.json({ ok: true });\n});\n\nexport async function requireAuth(c: any, next: any) {\n const token = getCookie(c, COOKIE_NAME);\n const expected = Deno.env.get(\"PROMPTCOMPARE_PASSWORD\");\n if (!token || !expected) return c.json({ error: \"Unauthorized\" }, 401);\n const expectedToken = await hashPassword(expected);\n if (token !== expectedToken) return c.json({ error: \"Unauthorized\" }, 401);\n await next();\n}\n",[],[183,585,577],"routes","b76672fc-0de5-11f1-b8c4-42dde27851f2","api.ts","d7924a5e-0ddd-11f1-9f87-42dde27851f2",189,["D",1771541570069],"// backend/routes/api.ts\nimport { Hono } from \"https://esm.sh/hono@4.7.4\";\nimport { streamSSE } from \"https://esm.sh/hono@4.7.4/streaming\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { streamText } from \"https://esm.sh/ai@4\";\nimport { createAnthropic } from \"https://esm.sh/@ai-sdk/anthropic@1\";\nimport { createOpenAI } from \"https://esm.sh/@ai-sdk/openai@1\";\nimport { createGoogleGenerativeAI } from \"https://esm.sh/@ai-sdk/google@1\";\nimport * as db from \"../database/queries.ts\";\n\nconst api = new Hono();\n\n// --- Models ---\n\nlet cachedModels: any = null;\n\nasync function getModels() {\n if (cachedModels) return cachedModels;\n const raw = await readFile(\"/docs/models.json\", import.meta.url);\n const data = JSON.parse(raw);\n const models = Object.values(data.models).filter(\n (m: any) => m.status !== \"deprecated\",\n );\n cachedModels = models;\n return models;\n}\n\napi.get(\"/models\", async (c) => {\n const models = await getModels();\n return c.json(models);\n});\n\n// --- Conversations ---\n\napi.get(\"/conversations\", async (c) => {\n const conversations = await db.listConversations();\n return c.json(conversations);\n});\n\napi.get(\"/conversations/:id\", async (c) => {\n const conv = await db.getConversation(c.req.param(\"id\"));\n if (!conv) return c.json({ error: \"Not found\" }, 404);\n return c.json(conv);\n});\n\napi.post(\"/conversations\", async (c) => {\n const { title, model_ids } = await c.req.json();\n const id = crypto.randomUUID();\n await db.createConversation(id, title || \"New Conversation\", model_ids);\n return c.json({ id });\n});\n\napi.delete(\"/conversations/:id\", async (c) => {\n await db.deleteConversation(c.req.param(\"id\"));\n return c.json({ ok: true });\n});\n\n// --- Chat (SSE streaming) ---\n\ntype StreamEvent = {\n type: \"chunk\" | \"done\" | \"error\";\n data: {\n model_id: string;\n content?: string;\n full_content?: string;\n error?: string;\n };\n};\n\nfunction getProviderModel(model: any) {\n const apiKey = Deno.env.get(\"OPENCODE_API_KEY\") || \"\";\n const npm = model.provider?.npm || \"\";\n\n if (npm === \"@ai-sdk/anthropic\") {\n const provider = createAnthropic({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider(model.id);\n }\n\n if (npm === \"@ai-sdk/openai\") {\n const provider = createOpenAI({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider(model.id);\n }\n\n if (npm === \"@ai-sdk/google\") {\n const provider = createGoogleGenerativeAI({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider(model.id);\n }\n\n // Default: openai-compatible (GLM, Qwen, Kimi, MiniMax, etc.)\n // Use createOpenAI since Zen serves these via OpenAI-compatible chat/completions\n const provider = createOpenAI({\n baseURL: \"https://opencode.ai/zen/v1\",\n apiKey,\n });\n return provider.chat(model.id);\n}\n\nasync function* streamModel(\n model: any,\n messages: { role: string; content: string }[],\n): AsyncGenerator {\n try {\n const result = streamText({\n model: getProviderModel(model),\n messages: messages.map((m) => ({\n role: m.role as \"user\" | \"assistant\" | \"system\",\n content: m.content,\n })),\n maxTokens: Math.min(4096, model.limit.output),\n });\n\n let fullContent = \"\";\n for await (const chunk of result.textStream) {\n fullContent += chunk;\n yield { type: \"chunk\", data: { model_id: model.id, content: chunk } };\n }\n\n yield {\n type: \"done\",\n data: { model_id: model.id, full_content: fullContent },\n };\n } catch (err: any) {\n console.error(`[streamModel] ${model.id} error:`, err);\n yield { type: \"error\", data: { model_id: model.id, error: err.message } };\n }\n}\n\napi.post(\"/chat\", async (c) => {\n const { conversation_id, content } = await c.req.json();\n\n const conv = await db.getConversation(conversation_id);\n if (!conv) return c.json({ error: \"Conversation not found\" }, 404);\n\n // Create the user message\n const messageId = crypto.randomUUID();\n await db.createMessage(messageId, conversation_id, content);\n\n // Auto-title from first message\n const existingMessages = conv.messages || [];\n if (existingMessages.length === 0) {\n const title = content.length > 60 ? content.slice(0, 57) + \"...\" : content;\n await db.updateConversationTitle(conversation_id, title);\n }\n\n // Create response placeholders for each model\n const allModels = await getModels();\n const selectedModels = allModels.filter((m: any) =>\n conv.model_ids.includes(m.id)\n );\n\n const responseIds: Record = {};\n for (const model of selectedModels) {\n const responseId = crypto.randomUUID();\n responseIds[model.id] = responseId;\n await db.createResponse(responseId, messageId, model.id);\n }\n\n return streamSSE(c, async (stream) => {\n // Send message_id so frontend knows it\n await stream.writeSSE({\n event: \"message\",\n data: JSON.stringify({ message_id: messageId }),\n });\n\n // Build per-model conversation histories and stream in parallel\n const streamPromises = selectedModels.map(async (model: any) => {\n const history = await db.getConversationHistory(\n conversation_id,\n model.id,\n );\n // Add the current message\n history.push({ role: \"user\", content });\n\n let fullContent = \"\";\n for await (const event of streamModel(model, history)) {\n if (event.type === \"chunk\") {\n fullContent += event.data.content;\n await stream.writeSSE({\n event: \"chunk\",\n data: JSON.stringify(event.data),\n });\n } else if (event.type === \"done\") {\n await db.updateResponseContent(\n responseIds[model.id],\n event.data.full_content ?? \"\",\n );\n await stream.writeSSE({\n event: \"done\",\n data: JSON.stringify({ model_id: model.id }),\n });\n } else if (event.type === \"error\") {\n await stream.writeSSE({\n event: \"error\",\n data: JSON.stringify(event.data),\n });\n }\n }\n });\n\n await Promise.all(streamPromises);\n });\n});\n\nexport { api };\n",[],[183,585,587],"d47e06f0-0ddd-11f1-affc-42dde27851f2",9,["D",1771538182911],[351,352],[183,585],"d78203e2-0ddd-11f1-9f87-42dde27851f2","queries.ts","d78204be-0ddd-11f1-9f87-42dde27851f2","d46f5632-0ddd-11f1-affc-42dde27851f2",153,["D",1771538187927],"// backend/database/queries.ts\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type {\n Conversation,\n ConversationDetail,\n Message,\n Response,\n} from \"../../shared/types.ts\";\n\nexport async function listConversations(): Promise {\n const result = await sqlite.execute(\n \"SELECT id, title, model_ids, created_at, updated_at FROM conversations ORDER BY updated_at DESC\",\n );\n return (result.rows as any[]).map((r) => ({\n ...r,\n model_ids: JSON.parse(r.model_ids),\n }));\n}\n\nexport async function getConversation(\n id: string,\n): Promise {\n const convResult = await sqlite.execute({\n sql: \"SELECT * FROM conversations WHERE id = ?\",\n args: [id],\n });\n if (convResult.rows.length === 0) return null;\n\n const conv = convResult.rows[0] as any;\n\n const msgsResult = await sqlite.execute({\n sql:\n \"SELECT * FROM messages WHERE conversation_id = ? ORDER BY created_at ASC\",\n args: [id],\n });\n\n const messages: any[] = [];\n for (const msg of msgsResult.rows as any[]) {\n const respResult = await sqlite.execute({\n sql: \"SELECT * FROM responses WHERE message_id = ? ORDER BY model_id ASC\",\n args: [msg.id],\n });\n messages.push({\n ...msg,\n responses: respResult.rows as unknown as Response[],\n });\n }\n\n return {\n ...conv,\n model_ids: JSON.parse(conv.model_ids),\n messages,\n };\n}\n\nexport async function createConversation(\n id: string,\n title: string,\n modelIds: string[],\n): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO conversations (id, title, model_ids) VALUES (?, ?, ?)\",\n args: [id, title, JSON.stringify(modelIds)],\n });\n}\n\nexport async function deleteConversation(id: string): Promise {\n // Delete in order due to foreign keys (SQLite may not enforce CASCADE)\n await sqlite.batch([\n {\n sql:\n `DELETE FROM responses WHERE message_id IN (SELECT id FROM messages WHERE conversation_id = ?)`,\n args: [id],\n },\n { sql: \"DELETE FROM messages WHERE conversation_id = ?\", args: [id] },\n { sql: \"DELETE FROM conversations WHERE id = ?\", args: [id] },\n ]);\n}\n\nexport async function updateConversationTitle(\n id: string,\n title: string,\n): Promise {\n await sqlite.execute({\n sql:\n \"UPDATE conversations SET title = ?, updated_at = datetime('now') WHERE id = ?\",\n args: [title, id],\n });\n}\n\nexport async function createMessage(\n id: string,\n conversationId: string,\n content: string,\n): Promise {\n await sqlite.execute({\n sql:\n \"INSERT INTO messages (id, conversation_id, role, content) VALUES (?, ?, 'user', ?)\",\n args: [id, conversationId, content],\n });\n await sqlite.execute({\n sql: \"UPDATE conversations SET updated_at = datetime('now') WHERE id = ?\",\n args: [conversationId],\n });\n}\n\nexport async function createResponse(\n id: string,\n messageId: string,\n modelId: string,\n): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO responses (id, message_id, model_id) VALUES (?, ?, ?)\",\n args: [id, messageId, modelId],\n });\n}\n\nexport async function updateResponseContent(\n id: string,\n content: string,\n): Promise {\n await sqlite.execute({\n sql: \"UPDATE responses SET content = ? WHERE id = ?\",\n args: [content, id],\n });\n}\n\nexport async function getConversationHistory(\n conversationId: string,\n modelId: string,\n): Promise<{ role: string; content: string }[]> {\n const result = await sqlite.execute({\n sql:\n `SELECT m.role, m.content AS user_content, r.content AS assistant_content\n FROM messages m\n LEFT JOIN responses r ON r.message_id = m.id AND r.model_id = ?\n WHERE m.conversation_id = ?\n ORDER BY m.created_at ASC`,\n args: [modelId, conversationId],\n });\n\n const history: { role: string; content: string }[] = [];\n for (const row of result.rows as any[]) {\n history.push({ role: \"user\", content: row.user_content });\n if (row.assistant_content) {\n history.push({ role: \"assistant\", content: row.assistant_content });\n }\n }\n return history;\n}\n",[],[183,608,600],"database","d789e1d4-0ddd-11f1-a928-42dde27851f2","migrations.ts","d789e288-0ddd-11f1-a928-42dde27851f2",154,["D",1771538187981],"// backend/database/migrations.ts\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS conversations (\n id TEXT PRIMARY KEY,\n title TEXT,\n model_ids TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n updated_at TEXT DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS messages (\n id TEXT PRIMARY KEY,\n conversation_id TEXT NOT NULL,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (conversation_id) REFERENCES conversations(id) ON DELETE CASCADE\n )`,\n `CREATE TABLE IF NOT EXISTS responses (\n id TEXT PRIMARY KEY,\n message_id TEXT NOT NULL,\n model_id TEXT NOT NULL,\n content TEXT NOT NULL DEFAULT '',\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (message_id) REFERENCES messages(id) ON DELETE CASCADE\n )`,\n ]);\n}\n",[],[183,608,610],"d46f556a-0ddd-11f1-affc-42dde27851f2",8,["D",1771538182814],[348,349],[183,608],["D",1771538182437],[347,350,353],[183],"b137b888-0de4-11f1-9dac-42dde27851f2","settings.json","b137b98c-0de4-11f1-9dac-42dde27851f2",184,["D",1771541130186],"{\n \"lsp\": {\n \"deno\": {\n \"settings\": {\n \"deno\": {\n \"enable\": true\n }\n }\n }\n },\n \"languages\": {\n \"JavaScript\": {\n \"language_servers\": [\n \"deno\",\n \"!typescript-language-server\",\n \"!vtsls\",\n \"!eslint\"\n ]\n },\n \"TypeScript\": {\n \"language_servers\": [\n \"deno\",\n \"!typescript-language-server\",\n \"!vtsls\",\n \"!eslint\"\n ]\n },\n \"TSX\": {\n \"language_servers\": [\n \"deno\",\n \"!typescript-language-server\",\n \"!vtsls\",\n \"!eslint\"\n ]\n }\n }\n}\n",[],[189,626],["D",1771541129972],[345],[189],"d4fbc73e-0ddd-11f1-af68-42dde27851f2","settings.local.json","d4fbc7f2-0ddd-11f1-af68-42dde27851f2",25,["D",1771538183724],"{\n \"env\": {\n \"ENABLE_TOOL_SEARCH\": \"true\",\n \"CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS\": \"1\",\n \"CLAUDE_CODE_DISABLE_AUTO_MEMORY\": \"0\"\n },\n \"permissions\": {\n \"allow\": [\n \"Bash(git status)\",\n \"Bash(git add:*)\",\n \"Bash(git commit:*)\",\n \"Bash(git push)\",\n \"Bash(git diff:*)\",\n \"Bash(git log:*)\",\n \"Bash(vt:*)\",\n \"Bash(find:*)\",\n \"Bash(tree:*)\",\n \"Bash(grep:*)\",\n \"Bash(deno check:*)\",\n \"mcp__playwright__*\",\n \"mcp__val-town__*\"\n ]\n },\n \"enabledMcpjsonServers\": [\"val-town\", \"playwright\"]\n}\n",[],[195,637],"d4eea0f4-0ddd-11f1-a6ad-42dde27851f2","d4eea1ee-0ddd-11f1-a6ad-42dde27851f2",22,["D",1771538183639],"{\n \"enabledPlugins\": {\n \"superpowers@claude-plugins-official\": true\n },\n \"hooks\": {\n \"PostToolUse\": [\n {\n \"matcher\": \"Write|Edit\",\n \"hooks\": [\n {\n \"type\": \"command\",\n \"command\": \"deno fmt \\\"$CLAUDE_FILE_PATH\\\" 2>/dev/null || true\"\n }\n ]\n }\n ]\n }\n}\n",[],[195,626],"d779cc9a-0ddd-11f1-a928-42dde27851f2","SKILL.md","d779cd76-0ddd-11f1-a928-42dde27851f2","d493db2e-0ddd-11f1-affc-42dde27851f2",152,["D",1771538187902],"---\nname: ai-elements\ndescription: Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements.\n---\n\n# AI Elements\n\n[AI Elements](https://www.npmjs.com/package/ai-elements) is a component library\nand custom registry built on top of [shadcn/ui](https://ui.shadcn.com/) to help\nyou build AI-native applications faster. It provides pre-built components like\nconversations, messages and more.\n\nInstalling AI Elements is straightforward and can be done in a couple of ways.\nYou can use the dedicated CLI command for the fastest setup, or integrate via\nthe standard shadcn/ui CLI if you've already adopted shadcn's workflow.\n\n## Quick Start\n\nHere are some basic examples of what you can achieve using components from AI\nElements.\n\n## Prerequisites\n\nBefore installing AI Elements, make sure your environment meets the following\nrequirements:\n\n- [Node.js](https://nodejs.org/en/download/), version 18 or later\n- A [Next.js](https://nextjs.org/) project with the\n [AI SDK](https://ai-sdk.dev/) installed.\n- [shadcn/ui](https://ui.shadcn.com/) installed in your project. If you don't\n have it installed, running any install command will automatically install it\n for you.\n- We also highly recommend using the\n [AI Gateway](https://vercel.com/docs/ai-gateway) and adding\n `AI_GATEWAY_API_KEY` to your `env.local` so you don't have to use an API key\n from every provider. AI Gateway also gives $5 in usage per month so you can\n experiment with models. You can obtain an API key\n [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key).\n\n## Installing Components\n\nYou can install AI Elements components using either the AI Elements CLI or the\nshadcn/ui CLI. Both achieve the same result: adding the selected component’s\ncode and any needed dependencies to your project.\n\nThe CLI will download the component’s code and integrate it into your project’s\ndirectory (usually under your components folder). By default, AI Elements\ncomponents are added to the `@/components/ai-elements/` directory (or whatever\nfolder you’ve configured in your shadcn components settings).\n\nAfter running the command, you should see a confirmation in your terminal that\nthe files were added. You can then proceed to use the component in your code.\n\n## Usage\n\nOnce an AI Elements component is installed, you can import it and use it in your\napplication like any other React component. The components are added as part of\nyour codebase (not hidden in a library), so the usage feels very natural.\n\n## Example\n\nAfter installing AI Elements components, you can use them in your application\nlike any other React component. For example:\n\n```tsx title=\"conversation.tsx\"\n\"use client\";\n\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { useChat } from \"@ai-sdk/react\";\n\nconst Example = () => {\n const { messages } = useChat();\n\n return (\n <>\n {messages.map(({ role, parts }, index) => (\n \n \n {parts.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n {part.text}\n \n );\n }\n })}\n \n \n ))}\n \n );\n};\n\nexport default Example;\n```\n\nIn the example above, we import the `Message` component from our AI Elements\ndirectory and include it in our JSX. Then, we compose the component with the\n`MessageContent` and `MessageResponse` subcomponents. You can style or configure\nthe component just as you would if you wrote it yourself – since the code lives\nin your project, you can even open the component file to see how it works or\nmake custom modifications.\n\n## Extensibility\n\nAll AI Elements components take as many primitive attributes as possible. For\nexample, the `Message` component extends `HTMLAttributes`, so\nyou can pass any props that a `div` supports. This makes it easy to extend the\ncomponent with your own styles or functionality.\n\n## Customization\n\nAfter installation, no additional setup is needed. The component’s styles\n(Tailwind CSS classes) and scripts are already integrated. You can start\ninteracting with the component in your app immediately.\n\nFor example, if you'd like to remove the rounding on `Message`, you can go to\n`components/ai-elements/message.tsx` and remove `rounded-lg` as follows:\n\n```tsx title=\"components/ai-elements/message.tsx\" highlight=\"8\"\nexport const MessageContent = ({\n children,\n className,\n ...props\n}: MessageContentProps) => (\n \n

{children}

\n);\n```\n\n## Troubleshooting\n\n## Why are my components not styled?\n\nMake sure your project is configured correctly for shadcn/ui in Tailwind 4 -\nthis means having a `globals.css` file that imports Tailwind and includes the\nshadcn/ui base styles.\n\n## I ran the AI Elements CLI but nothing was added to my project\n\nDouble-check that:\n\n- Your current working directory is the root of your project (where\n `package.json` lives).\n- Your components.json file (if using shadcn-style config) is set up correctly.\n- You’re using the latest version of the AI Elements CLI:\n\n```bash title=\"Terminal\"\nnpx ai-elements@latest\n```\n\nIf all else fails, feel free to open an\n[issue on GitHub](https://github.com/vercel/ai-elements/issues).\n\n## Theme switching doesn’t work — my app stays in light mode\n\nEnsure your app is using the same data-theme system that shadcn/ui and AI\nElements expect. The default implementation toggles a data-theme attribute on\nthe `` element. Make sure your tailwind.config.js is using class or data-\nselectors accordingly:\n\n## The component imports fail with “module not found”\n\nCheck the file exists. If it does, make sure your `tsconfig.json` has a proper\npaths alias for `@/` i.e.\n\n```json title=\"tsconfig.json\"\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./*\"]\n }\n }\n}\n```\n\n## My AI coding assistant can't access AI Elements components\n\n1. Verify your config file syntax is valid JSON.\n2. Check that the file path is correct for your AI tool.\n3. Restart your coding assistant after making changes.\n4. Ensure you have a stable internet connection.\n\n## Still stuck?\n\nIf none of these answers help, open an\n[issue on GitHub](https://github.com/vercel/ai-elements/issues) and someone will\nbe happy to assist.\n\n## Available Components\n\nSee the `references/` folder for detailed documentation on each component.\n",[],[195,660,661,652],"skills","ai-elements","d703d18e-0ddd-11f1-9539-42dde27851f2","web-preview.tsx","d703d242-0ddd-11f1-9539-42dde27851f2","d4abe890-0ddd-11f1-bb81-42dde27851f2",131,["D",1771538187142],"\"use client\";\n\nimport {\n WebPreview,\n WebPreviewBody,\n WebPreviewConsole,\n WebPreviewNavigation,\n WebPreviewNavigationButton,\n WebPreviewUrl,\n} from \"@/components/ai-elements/web-preview\";\nimport {\n ArrowLeftIcon,\n ArrowRightIcon,\n ExternalLinkIcon,\n Maximize2Icon,\n MousePointerClickIcon,\n RefreshCcwIcon,\n} from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\n\nconst handleUrlChange = (url: string) => {\n console.log(\"URL changed to:\", url);\n};\n\nconst handleGoBack = () => {\n console.log(\"Go back\");\n};\n\nconst handleGoForward = () => {\n console.log(\"Go forward\");\n};\n\nconst handleReload = () => {\n console.log(\"Reload\");\n};\n\nconst handleSelect = () => {\n console.log(\"Select\");\n};\n\nconst handleOpenInNewTab = () => {\n console.log(\"Open in new tab\");\n};\n\nconst exampleLogs = [\n {\n level: \"log\" as const,\n message: \"Page loaded successfully\",\n timestamp: new Date(Date.now() - 10_000),\n },\n {\n level: \"warn\" as const,\n message: \"Deprecated API usage detected\",\n timestamp: new Date(Date.now() - 5000),\n },\n {\n level: \"error\" as const,\n message: \"Failed to load resource\",\n timestamp: new Date(),\n },\n];\n\nconst Example = () => {\n const [_fullscreen, setFullscreen] = useState(false);\n\n const handleToggleFullscreen = useCallback(\n () => setFullscreen((prev) => !prev),\n [],\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,663],"scripts","d6b04852-0ddd-11f1-93ea-42dde27851f2","voice-selector.tsx","d6b048fc-0ddd-11f1-93ea-42dde27851f2",114,["D",1771538186596],"\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport {\n VoiceSelector,\n VoiceSelectorAccent,\n VoiceSelectorAge,\n VoiceSelectorBullet,\n VoiceSelectorContent,\n VoiceSelectorDescription,\n VoiceSelectorEmpty,\n VoiceSelectorGender,\n VoiceSelectorInput,\n VoiceSelectorItem,\n VoiceSelectorList,\n VoiceSelectorName,\n VoiceSelectorPreview,\n VoiceSelectorTrigger,\n} from \"@/components/ai-elements/voice-selector\";\nimport { Button } from \"@/components/ui/button\";\nimport { memo, useCallback, useRef, useState } from \"react\";\n\nconst voices: {\n id: string;\n name: string;\n description: string;\n gender: ComponentProps[\"value\"];\n accent: ComponentProps[\"value\"];\n age: string;\n previewUrl: string;\n}[] = [\n {\n accent: \"american\",\n age: \"20-30\",\n description: \"Energetic, Social Media Creator\",\n gender: \"male\",\n id: \"liam\",\n name: \"Liam\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_16_50_Liam%20-%20Energetic%2C%20Social%20Media%20Creator_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"american\",\n age: \"30-40\",\n description: \"Dominant, Firm\",\n gender: \"male\",\n id: \"adam\",\n name: \"Adam\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_00_Adam%20-%20Dominant%2C%20Firm_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"british\",\n age: \"30-40\",\n description: \"Clear, Engaging Educator\",\n gender: \"female\",\n id: \"alice\",\n name: \"Alice\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_09_Alice%20-%20Clear%2C%20Engaging%20Educator_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"american\",\n age: \"50-60\",\n description: \"Wise, Mature, Balanced\",\n gender: \"male\",\n id: \"bill\",\n name: \"Bill\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_25_Bill%20-%20Wise%2C%20Mature%2C%20Balanced_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"american\",\n age: \"20-30\",\n description: \"Playful, Bright, Warm\",\n gender: \"female\",\n id: \"jessica\",\n name: \"Jessica\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_17_50_Jessica%20-%20Playful%2C%20Bright%2C%20Warm_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n {\n accent: \"british\",\n age: \"30-40\",\n description: \"Velvety Actress\",\n gender: \"female\",\n id: \"lily\",\n name: \"Lily\",\n previewUrl:\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2026-01-16T21_18_03_Lily%20-%20Velvety%20Actress_pre_sp100_s50_sb75_se0_b_m2.mp3\",\n },\n];\n\ninterface VoiceItemProps {\n voice: (typeof voices)[0];\n playingVoice: string | null;\n loadingVoice: string | null;\n onSelect: (id: string) => void;\n onPreview: (id: string) => void;\n}\n\nconst VoiceItem = memo(\n ({\n voice,\n playingVoice,\n loadingVoice,\n onSelect,\n onPreview,\n }: VoiceItemProps) => {\n const handleSelect = useCallback(\n () => onSelect(voice.id),\n [onSelect, voice.id],\n );\n const handlePreview = useCallback(\n () => onPreview(voice.id),\n [onPreview, voice.id],\n );\n return (\n \n \n {voice.name}\n {voice.description}\n \n \n \n {voice.age}\n \n \n \n );\n },\n);\n\nVoiceItem.displayName = \"VoiceItem\";\n\nconst Example = () => {\n const [open, setOpen] = useState(false);\n const [selectedVoice, setSelectedVoice] = useState(null);\n const [playingVoice, setPlayingVoice] = useState(null);\n const [loadingVoice, setLoadingVoice] = useState(null);\n const audioRef = useRef(null);\n\n const handleSelect = useCallback((voiceId: string) => {\n setSelectedVoice(voiceId);\n setOpen(false);\n }, []);\n\n const handlePreview = useCallback(\n (voiceId: string) => {\n const voice = voices.find((v) => v.id === voiceId);\n if (!voice) {\n return;\n }\n\n // If clicking the same voice that's playing, pause it\n if (playingVoice === voiceId) {\n audioRef.current?.pause();\n setPlayingVoice(null);\n return;\n }\n\n // Stop any currently playing audio\n if (audioRef.current) {\n audioRef.current.pause();\n audioRef.current = null;\n }\n\n setLoadingVoice(voiceId);\n\n const audio = new Audio(voice.previewUrl);\n audioRef.current = audio;\n\n audio.addEventListener(\"canplaythrough\", () => {\n setLoadingVoice(null);\n setPlayingVoice(voiceId);\n audio.play();\n });\n\n audio.addEventListener(\"ended\", () => {\n setPlayingVoice(null);\n });\n\n audio.addEventListener(\"error\", () => {\n setLoadingVoice(null);\n setPlayingVoice(null);\n });\n\n audio.load();\n },\n [playingVoice],\n );\n\n const selectedVoiceData = voices.find((voice) => voice.id === selectedVoice);\n\n return (\n

\n \n \n \n \n \n \n \n No voices found.\n {voices.map((voice) => (\n \n ))}\n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,673],"d7352306-0ddd-11f1-8b80-42dde27851f2","transcription.tsx","d7352414-0ddd-11f1-8b80-42dde27851f2",140,["D",1771538187463],"\"use client\";\n\nimport type { Experimental_TranscriptionResult as TranscriptionResult } from \"ai\";\n\nimport {\n Transcription,\n TranscriptionSegment,\n} from \"@/components/ai-elements/transcription\";\nimport { useCallback, useRef, useState } from \"react\";\n\nconst segments: TranscriptionResult[\"segments\"] = [\n {\n endSecond: 0.219,\n startSecond: 0.119,\n text: \"You\",\n },\n {\n endSecond: 0.259,\n startSecond: 0.219,\n text: \" \",\n },\n {\n endSecond: 0.439,\n startSecond: 0.259,\n text: \"can\",\n },\n {\n endSecond: 0.459,\n startSecond: 0.439,\n text: \" \",\n },\n {\n endSecond: 0.699,\n startSecond: 0.459,\n text: \"build\",\n },\n {\n endSecond: 0.72,\n startSecond: 0.699,\n text: \" \",\n },\n {\n endSecond: 0.799,\n startSecond: 0.72,\n text: \"and\",\n },\n {\n endSecond: 0.879,\n startSecond: 0.799,\n text: \" \",\n },\n {\n endSecond: 1.339,\n startSecond: 0.879,\n text: \"host\",\n },\n {\n endSecond: 1.359,\n startSecond: 1.339,\n text: \" \",\n },\n {\n endSecond: 1.539,\n startSecond: 1.36,\n text: \"many\",\n },\n {\n endSecond: 1.6,\n startSecond: 1.539,\n text: \" \",\n },\n {\n endSecond: 1.86,\n startSecond: 1.6,\n text: \"different\",\n },\n {\n endSecond: 1.899,\n startSecond: 1.86,\n text: \" \",\n },\n {\n endSecond: 2.099,\n startSecond: 1.899,\n text: \"types\",\n },\n {\n endSecond: 2.119,\n startSecond: 2.099,\n text: \" \",\n },\n {\n endSecond: 2.2,\n startSecond: 2.119,\n text: \"of\",\n },\n {\n endSecond: 2.259,\n startSecond: 2.2,\n text: \" \",\n },\n {\n endSecond: 2.96,\n startSecond: 2.259,\n text: \"applications\",\n },\n {\n endSecond: 3.479,\n startSecond: 2.96,\n text: \" \",\n },\n {\n endSecond: 3.699,\n startSecond: 3.48,\n text: \"from\",\n },\n {\n endSecond: 3.779,\n startSecond: 3.699,\n text: \" \",\n },\n {\n endSecond: 4.099,\n startSecond: 3.779,\n text: \"static\",\n },\n {\n endSecond: 4.179,\n startSecond: 4.099,\n text: \" \",\n },\n {\n endSecond: 4.519,\n startSecond: 4.179,\n text: \"sites\",\n },\n {\n endSecond: 4.539,\n startSecond: 4.519,\n text: \" \",\n },\n {\n endSecond: 4.759,\n startSecond: 4.539,\n text: \"with\",\n },\n {\n endSecond: 4.799,\n startSecond: 4.759,\n text: \" \",\n },\n {\n endSecond: 4.939,\n startSecond: 4.799,\n text: \"your\",\n },\n {\n endSecond: 4.96,\n startSecond: 4.939,\n text: \" \",\n },\n {\n endSecond: 5.219,\n startSecond: 4.96,\n text: \"favorite\",\n },\n {\n endSecond: 5.319,\n startSecond: 5.219,\n text: \" \",\n },\n {\n endSecond: 5.939,\n startSecond: 5.319,\n text: \"framework,\",\n },\n {\n endSecond: 5.96,\n startSecond: 5.939,\n text: \" \",\n },\n {\n endSecond: 6.519,\n startSecond: 5.96,\n text: \"multi-tenant\",\n },\n {\n endSecond: 6.559,\n startSecond: 6.519,\n text: \" \",\n },\n {\n endSecond: 7.259,\n startSecond: 6.559,\n text: \"applications\",\n },\n {\n endSecond: 7.699,\n startSecond: 7.259,\n text: \" \",\n },\n {\n endSecond: 7.759,\n startSecond: 7.699,\n text: \"or\",\n },\n {\n endSecond: 7.859,\n startSecond: 7.759,\n text: \" \",\n },\n {\n endSecond: 8.739,\n startSecond: 7.859,\n text: \"micro-frontends\",\n },\n {\n endSecond: 8.78,\n startSecond: 8.739,\n text: \" \",\n },\n {\n endSecond: 8.96,\n startSecond: 8.78,\n text: \"to\",\n },\n {\n endSecond: 9.099,\n startSecond: 8.96,\n text: \" \",\n },\n {\n endSecond: 9.779,\n startSecond: 9.099,\n text: \"AI-powered\",\n },\n {\n endSecond: 9.82,\n startSecond: 9.779,\n text: \" \",\n },\n {\n endSecond: 10.439,\n startSecond: 9.82,\n text: \"agents.\",\n },\n];\n\nconst Example = () => {\n const audioRef = useRef(null);\n const [currentTime, setCurrentTime] = useState(0);\n\n const handleSeek = useCallback((time: number) => {\n if (audioRef.current) {\n audioRef.current.currentTime = time;\n }\n }, []);\n\n const handleTimeUpdate = useCallback(() => {\n if (audioRef.current) {\n setCurrentTime(audioRef.current.currentTime);\n }\n }, []);\n\n return (\n

\n {/* biome-ignore lint/a11y/useMediaCaption: \"No caption needed\" */}\n {/* oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) */}\n

\n\n \n {(segment, index) => (\n \n )}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,681],"d61f6166-0ddd-11f1-bf1c-42dde27851f2","tool.tsx","d61f63b4-0ddd-11f1-bf1c-42dde27851f2",85,["D",1771538185634],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationAction,\n ConfirmationActions,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst handleReject = () => {\n // In production, call addConfirmationResponse\n};\n\nconst handleAccept = () => {\n // In production, call addConfirmationResponse\n};\n\nconst toolCall: ToolUIPart = {\n errorText: undefined,\n input: {\n database: \"analytics\",\n params: [\"2024-01-01\"],\n query: \"SELECT COUNT(*) FROM users WHERE created_at >= ?\",\n },\n output: `| User ID | Name | Email | Created At |\n|---------|------|-------|------------|\n| 1 | John Doe | john@example.com | 2024-01-15 |\n| 2 | Jane Smith | jane@example.com | 2024-01-20 |\n| 3 | Bob Wilson | bob@example.com | 2024-02-01 |\n| 4 | Alice Brown | alice@example.com | 2024-02-10 |\n| 5 | Charlie Davis | charlie@example.com | 2024-02-15 |`,\n state: \"output-available\" as const,\n toolCallId: nanoid(),\n type: \"tool-database_query\" as const,\n};\n\nconst Example = () => (\n

\n {/* 1. input-streaming: Pending */}\n \n \n \n \n \n \n\n {/* 2. approval-requested: Awaiting Approval */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected\n \n \n \n \n Reject\n \n \n Accept\n \n \n \n \n \n\n {/* 3. approval-responded: Responded */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected\n \n \n \n \n \n\n {/* 4. input-available: Running */}\n \n \n \n \n \n \n\n {/* 5. output-available: Completed */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected\n \n \n \n {toolCall.state === \"output-available\" && (\n \n )}\n \n \n\n {/* 6. output-error: Error */}\n \n \n \n \n \n \n \n\n {/* 7. output-denied: Denied */}\n \n \n \n \n \n \n \n This tool will execute a query on the production database.\n \n \n \n Accepted\n \n \n \n Rejected: Query could impact production performance\n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,689],"d63435a0-0ddd-11f1-a7cf-42dde27851f2","tool-output-error.tsx","d6343672-0ddd-11f1-a7cf-42dde27851f2",90,["D",1771538185704],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\n\nconst toolCall: ToolUIPart = {\n errorText:\n \"Connection timeout: The request took longer than 5000ms to complete. Please check your network connection and try again.\",\n input: {\n headers: {\n Authorization: \"Bearer token123\",\n \"Content-Type\": \"application/json\",\n },\n method: \"GET\",\n timeout: 5000,\n url: \"https://api.example.com/data\",\n },\n output: undefined,\n state: \"output-error\" as const,\n toolCallId: \"api_request_1\",\n type: \"tool-api_request\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n {toolCall.state === \"output-error\" && (\n \n )}\n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,697],"d6d8857e-0ddd-11f1-bf00-42dde27851f2","tool-output-available.tsx","d6d8865a-0ddd-11f1-bf00-42dde27851f2",121,["D",1771538186858],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n ToolOutput,\n} from \"@/components/ai-elements/tool\";\nimport { nanoid } from \"nanoid\";\n\nconst toolCall: ToolUIPart = {\n errorText: undefined,\n input: {\n database: \"analytics\",\n params: [\"2024-01-01\"],\n query: \"SELECT COUNT(*) FROM users WHERE created_at >= ?\",\n },\n output: [\n {\n \"Created At\": \"2024-01-15\",\n Email: \"john@example.com\",\n Name: \"John Doe\",\n \"User ID\": 1,\n },\n {\n \"Created At\": \"2024-01-20\",\n Email: \"jane@example.com\",\n Name: \"Jane Smith\",\n \"User ID\": 2,\n },\n {\n \"Created At\": \"2024-02-01\",\n Email: \"bob@example.com\",\n Name: \"Bob Wilson\",\n \"User ID\": 3,\n },\n {\n \"Created At\": \"2024-02-10\",\n Email: \"alice@example.com\",\n Name: \"Alice Brown\",\n \"User ID\": 4,\n },\n {\n \"Created At\": \"2024-02-15\",\n Email: \"charlie@example.com\",\n Name: \"Charlie Davis\",\n \"User ID\": 5,\n },\n ],\n state: \"output-available\" as const,\n toolCallId: nanoid(),\n type: \"tool-database_query\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n {toolCall.state === \"output-available\" && (\n \n }\n />\n )}\n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,705],"d5fb4786-0ddd-11f1-83d9-42dde27851f2","tool-input-streaming.tsx","d5fb4830-0ddd-11f1-83d9-42dde27851f2",79,["D",1771538185407],"\"use client\";\n\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n} from \"@/components/ai-elements/tool\";\nimport { nanoid } from \"nanoid\";\n\nconst toolCall = {\n errorText: undefined,\n input: {\n include_snippets: true,\n max_results: 10,\n query: \"latest AI market trends 2024\",\n },\n output: undefined,\n state: \"input-streaming\" as const,\n toolCallId: nanoid(),\n type: \"tool-web_search\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,713],"d5ed243a-0ddd-11f1-9539-42dde27851f2","tool-input-available.tsx","d5ed24f8-0ddd-11f1-9539-42dde27851f2",76,["D",1771538185314],"\"use client\";\n\nimport {\n Tool,\n ToolContent,\n ToolHeader,\n ToolInput,\n} from \"@/components/ai-elements/tool\";\nimport { nanoid } from \"nanoid\";\n\nconst toolCall = {\n errorText: undefined,\n input: {\n prompt: \"A futuristic cityscape at sunset with flying cars\",\n quality: \"high\",\n resolution: \"1024x1024\",\n style: \"digital_art\",\n },\n output: undefined,\n state: \"input-available\" as const,\n toolCallId: nanoid(),\n type: \"tool-image_generation\" as const,\n};\n\nconst Example = () => (\n

\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,721],"d71d09ec-0ddd-11f1-91c8-42dde27851f2","test-results.tsx","d71d0a8c-0ddd-11f1-91c8-42dde27851f2",135,["D",1771538187293],"\"use client\";\n\nimport {\n Test,\n TestError,\n TestErrorMessage,\n TestErrorStack,\n TestResults,\n TestResultsContent,\n TestResultsDuration,\n TestResultsHeader,\n TestResultsProgress,\n TestResultsSummary,\n TestSuite,\n TestSuiteContent,\n TestSuiteName,\n} from \"@/components/ai-elements/test-results\";\n\nconst Example = () => (\n \n \n \n \n \n

\n \n

\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n Expected status 200 but received 500\n \n \n {` at Object. (src/user.test.ts:45:12)\n at Promise.then.completed (node_modules/jest-circus/build/utils.js:391:28)`}\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n Connection timed out after 5000ms\n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,729],"d5ffe53e-0ddd-11f1-9539-42dde27851f2","test-results-suites.tsx","d5ffe61a-0ddd-11f1-9539-42dde27851f2",80,["D",1771538185438],"\"use client\";\n\nimport {\n Test,\n TestResults,\n TestResultsContent,\n TestResultsHeader,\n TestResultsSummary,\n TestSuite,\n TestSuiteContent,\n TestSuiteName,\n} from \"@/components/ai-elements/test-results\";\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,737],"d6ca012a-0ddd-11f1-9f87-42dde27851f2","test-results-errors.tsx","d6ca01f2-0ddd-11f1-9f87-42dde27851f2",118,["D",1771538186762],"\"use client\";\n\nimport {\n Test,\n TestError,\n TestErrorMessage,\n TestErrorStack,\n TestResults,\n TestResultsContent,\n TestResultsHeader,\n TestResultsSummary,\n TestSuite,\n TestSuiteContent,\n TestSuiteName,\n} from \"@/components/ai-elements/test-results\";\n\nconst stackTrace = ` at Object. (/app/src/api.test.ts:45:12)\n at Module._compile (node:internal/modules/cjs/loader:1369:14)\n at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n Expected 200, got 500\n {stackTrace}\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,745],"d674cc6e-0ddd-11f1-93ea-42dde27851f2","test-results-basic.tsx","d674cd22-0ddd-11f1-93ea-42dde27851f2",103,["D",1771538185882],"\"use client\";\n\nimport {\n TestResults,\n TestResultsDuration,\n TestResultsHeader,\n TestResultsSummary,\n} from \"@/components/ai-elements/test-results\";\n\nconst Example = () => (\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,753],"d6b98dc2-0ddd-11f1-bf00-42dde27851f2","terminal.tsx","d6b98eb2-0ddd-11f1-bf00-42dde27851f2",116,["D",1771538186654],"\"use client\";\n\nimport {\n Terminal,\n TerminalActions,\n TerminalClearButton,\n TerminalContent,\n TerminalCopyButton,\n TerminalHeader,\n TerminalStatus,\n TerminalTitle,\n} from \"@/components/ai-elements/terminal\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst handleTerminalCopy = () => {\n console.log(\"Copied!\");\n};\n\nconst ansiOutput = `\\u001B[32m✓\\u001B[0m Compiled successfully in 1.2s\n\n\\u001B[1m\\u001B[34minfo\\u001B[0m - Collecting page data...\n\\u001B[1m\\u001B[34minfo\\u001B[0m - Generating static pages (0/3)\n\\u001B[32m✓\\u001B[0m Generated static pages (3/3)\n\n\\u001B[1m\\u001B[33mwarn\\u001B[0m - Using \\u001B[1mexperimental\\u001B[0m server actions\n\n\\u001B[36mRoute (app)\\u001B[0m \\u001B[36mSize\\u001B[0m \\u001B[36mFirst Load JS\\u001B[0m\n\\u001B[37m┌ ○ /\\u001B[0m \\u001B[32m5.2 kB\\u001B[0m \\u001B[32m87.3 kB\\u001B[0m\n\\u001B[37m├ ○ /about\\u001B[0m \\u001B[32m2.1 kB\\u001B[0m \\u001B[32m84.2 kB\\u001B[0m\n\\u001B[37m└ ○ /contact\\u001B[0m \\u001B[32m3.8 kB\\u001B[0m \\u001B[32m85.9 kB\\u001B[0m\n\n\\u001B[32m✓\\u001B[0m Build completed successfully!\n\\u001B[90mTotal time: 3.45s\\u001B[0m\n`;\n\nconst Example = () => {\n const [output, setOutput] = useState(\"\");\n const [isStreaming, setIsStreaming] = useState(true);\n\n useEffect(() => {\n let index = 0;\n const interval = setInterval(() => {\n if (index < ansiOutput.length) {\n setOutput(ansiOutput.slice(0, index + 10));\n index += 10;\n } else {\n setIsStreaming(false);\n clearInterval(interval);\n }\n }, 20);\n\n return () => clearInterval(interval);\n }, []);\n\n const handleClear = useCallback(() => {\n setOutput(\"\");\n setIsStreaming(false);\n }, []);\n\n return (\n \n \n Build Output\n

\n \n \n \n \n \n

\n \n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,761],"d6a99b60-0ddd-11f1-8ab1-42dde27851f2","terminal-streaming.tsx","d6a99c14-0ddd-11f1-8ab1-42dde27851f2",113,["D",1771538186538],"\"use client\";\n\nimport { Terminal } from \"@/components/ai-elements/terminal\";\nimport { useEffect, useState } from \"react\";\n\nconst lines = [\n \"\\u001B[36m$\\u001B[0m npm install\",\n \"Installing dependencies...\",\n \"\\u001B[32m✓\\u001B[0m react@19.0.0\",\n \"\\u001B[32m✓\\u001B[0m typescript@5.0.0\",\n \"\\u001B[32m✓\\u001B[0m vite@5.0.0\",\n \"\",\n \"\\u001B[32mDone!\\u001B[0m Installed 3 packages in 1.2s\",\n];\n\nconst Example = () => {\n const [output, setOutput] = useState(\"\");\n const [isStreaming, setIsStreaming] = useState(true);\n\n useEffect(() => {\n let lineIndex = 0;\n const interval = setInterval(() => {\n if (lineIndex < lines.length) {\n setOutput((prev) => prev + (prev ? \"\\n\" : \"\") + lines[lineIndex]);\n lineIndex += 1;\n } else {\n setIsStreaming(false);\n clearInterval(interval);\n }\n }, 500);\n\n return () => clearInterval(interval);\n }, []);\n\n return ;\n};\n\nexport default Example;\n",[],[195,660,661,671,769],"d78e604c-0ddd-11f1-8592-42dde27851f2","terminal-clear.tsx","d78e6132-0ddd-11f1-8592-42dde27851f2",155,["D",1771538186764],"\"use client\";\n\nimport { Terminal } from \"@/components/ai-elements/terminal\";\nimport { useCallback, useState } from \"react\";\n\nconst initialOutput = `\\u001B[36m$\\u001B[0m npm run build\nBuilding project...\n\\u001B[32m✓\\u001B[0m Compiled successfully\n\\u001B[32m✓\\u001B[0m Bundle size: 124kb`;\n\nconst Example = () => {\n const [output, setOutput] = useState(initialOutput);\n\n const handleClear = useCallback(() => setOutput(\"\"), []);\n\n return ;\n};\n\nexport default Example;\n",[],[195,660,661,671,777],"d75aa414-0ddd-11f1-a928-42dde27851f2","terminal-basic.tsx","d75aa4f0-0ddd-11f1-a928-42dde27851f2",147,["D",1771538187707],"\"use client\";\n\nimport { Terminal } from \"@/components/ai-elements/terminal\";\n\nconst Example = () => ;\n\nexport default Example;\n",[],[195,660,661,671,785],"d683476c-0ddd-11f1-b433-42dde27851f2","task.tsx","d6834884-0ddd-11f1-b433-42dde27851f2",106,["D",1771538186246],"\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { SiReact } from \"@icons-pack/react-simple-icons\";\nimport {\n Task,\n TaskContent,\n TaskItem,\n TaskItemFile,\n TaskTrigger,\n} from \"@/components/ai-elements/task\";\nimport { nanoid } from \"nanoid\";\n\nconst Example = () => {\n const tasks: { key: string; value: ReactNode }[] = [\n { key: nanoid(), value: 'Searching \"app/page.tsx, components structure\"' },\n {\n key: nanoid(),\n value: (\n \n Read\n \n \n page.tsx\n \n \n ),\n },\n { key: nanoid(), value: \"Scanning 52 files\" },\n { key: nanoid(), value: \"Scanning 2 files\" },\n {\n key: nanoid(),\n value: (\n \n Reading files\n \n \n layout.tsx\n \n \n ),\n },\n ];\n\n return (\n

\n \n \n \n {tasks.map((task) => {task.value}\n )}\n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,793],"d67ceee4-0ddd-11f1-a0cd-42dde27851f2","suggestion.tsx","d67cefb6-0ddd-11f1-a0cd-42dde27851f2",105,["D",1771538186245],"\"use client\";\n\nimport { Suggestion, Suggestions } from \"@/components/ai-elements/suggestion\";\n\nconst suggestions = [\n \"What are the latest trends in AI?\",\n \"How does machine learning work?\",\n \"Explain quantum computing\",\n \"Best practices for React development\",\n \"Tell me about TypeScript benefits\",\n \"How to optimize database queries?\",\n \"What is the difference between SQL and NoSQL?\",\n \"Explain cloud computing basics\",\n];\n\nconst handleSuggestionClick = (suggestion: string) => {\n console.log(\"Selected suggestion:\", suggestion);\n};\n\nconst Example = () => (\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n);\n\nexport default Example;\n",[],[195,660,661,671,801],"d753e9e4-0ddd-11f1-8b80-42dde27851f2","suggestion-input.tsx","d753ec46-0ddd-11f1-8b80-42dde27851f2",146,["D",1771538187653],"\"use client\";\n\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\n\nimport {\n PromptInput,\n PromptInputButton,\n PromptInputFooter,\n PromptInputSelect,\n PromptInputSelectContent,\n PromptInputSelectItem,\n PromptInputSelectTrigger,\n PromptInputSelectValue,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Suggestion, Suggestions } from \"@/components/ai-elements/suggestion\";\nimport { GlobeIcon, MicIcon, PlusIcon, SendIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst suggestions: { key: string; value: string }[] = [\n { key: nanoid(), value: \"What are the latest trends in AI?\" },\n { key: nanoid(), value: \"How does machine learning work?\" },\n { key: nanoid(), value: \"Explain quantum computing\" },\n { key: nanoid(), value: \"Best practices for React development\" },\n { key: nanoid(), value: \"Tell me about TypeScript benefits\" },\n { key: nanoid(), value: \"How to optimize database queries?\" },\n { key: nanoid(), value: \"What is the difference between SQL and NoSQL?\" },\n { key: nanoid(), value: \"Explain cloud computing basics\" },\n];\n\nconst models = [\n { id: \"gpt-4\", name: \"GPT-4\" },\n { id: \"gpt-3.5-turbo\", name: \"GPT-3.5 Turbo\" },\n { id: \"claude-2\", name: \"Claude 2\" },\n { id: \"claude-instant\", name: \"Claude Instant\" },\n { id: \"palm-2\", name: \"PaLM 2\" },\n { id: \"llama-2-70b\", name: \"Llama 2 70B\" },\n { id: \"llama-2-13b\", name: \"Llama 2 13B\" },\n { id: \"cohere-command\", name: \"Command\" },\n { id: \"mistral-7b\", name: \"Mistral 7B\" },\n];\n\nconst handleSubmit = (message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n console.log(\"Submitted message:\", message.text || \"Sent with attachments\");\n console.log(\"Attached files:\", message.files);\n};\n\ninterface SuggestionItemProps {\n suggestion: { key: string; value: string };\n onSuggestionClick: (value: string) => void;\n}\n\nconst SuggestionItem = memo(\n ({ suggestion, onSuggestionClick }: SuggestionItemProps) => {\n const handleClick = useCallback(\n () => onSuggestionClick(suggestion.value),\n [onSuggestionClick, suggestion.value],\n );\n return (\n \n );\n },\n);\n\nSuggestionItem.displayName = \"SuggestionItem\";\n\nconst Example = () => {\n const [model, setModel] = useState(models[0].id);\n const [text, setText] = useState(\"\");\n\n const handleSuggestionClick = useCallback((suggestion: string) => {\n setText(suggestion);\n }, []);\n\n const handleTextChange = useCallback(\n (e: React.ChangeEvent) => setText(e.target.value),\n [],\n );\n\n return (\n

\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n Search\n \n \n \n \n \n \n {models.map((model) => (\n \n {model.name}\n \n ))}\n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,809],"d6483d8e-0ddd-11f1-acc9-42dde27851f2","stack-trace.tsx","d6483e4c-0ddd-11f1-acc9-42dde27851f2",95,["D",1771538185913],"\"use client\";\n\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nconst handleFilePathClick = (path: string, line: number, col: number) => {\n console.log(`Open file: ${path}:${line}:${col}`);\n};\n\nconst handleCopy = () => {\n console.log(\"Stack trace copied\");\n};\n\nconst sampleStackTrace =\n `TypeError: Cannot read properties of undefined (reading 'map')\n at UserList (/app/components/UserList.tsx:15:23)\n at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)\n at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)\n at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)\n at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)\n at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)\n at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)\n at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)\n at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22776:12)\n at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,817],"d6e6bd06-0ddd-11f1-9f87-42dde27851f2","stack-trace-no-internal.tsx","d6e6bdd8-0ddd-11f1-9f87-42dde27851f2",124,["D",1771538186951],"\"use client\";\n\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nconst errorString =\n `TypeError: Cannot read properties of undefined (reading 'map')\n at UserList (/app/src/components/UserList.tsx:15:23)\n at App (/app/src/App.tsx:42:5)\n at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)\n at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)\n at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,825],"d61b215a-0ddd-11f1-9539-42dde27851f2","stack-trace-collapsed.tsx","d61b2222-0ddd-11f1-9539-42dde27851f2",84,["D",1771538185603],"\"use client\";\n\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nconst errorString =\n `TypeError: Cannot read properties of undefined (reading 'map')\n at UserList (/app/src/components/UserList.tsx:15:23)\n at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)\n at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)`;\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,833],"d6cebe36-0ddd-11f1-b230-42dde27851f2","speech-input.tsx","d6cebf58-0ddd-11f1-b230-42dde27851f2",119,["D",1771538186778],"\"use client\";\n\nimport { SpeechInput } from \"@/components/ai-elements/speech-input\";\nimport { useCallback, useState } from \"react\";\n\n/**\n * Fallback handler for browsers that don't support Web Speech API (Firefox, Safari).\n * This function receives recorded audio and should send it to a transcription service.\n * Example uses OpenAI Whisper API - replace with your preferred service.\n */\nconst handleAudioRecorded = async (audioBlob: Blob): Promise => {\n const formData = new FormData();\n formData.append(\"file\", audioBlob, \"audio.webm\");\n formData.append(\"model\", \"whisper-1\");\n\n const response = await fetch(\n \"https://api.openai.com/v1/audio/transcriptions\",\n {\n body: formData,\n headers: {\n Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,\n },\n method: \"POST\",\n },\n );\n\n if (!response.ok) {\n throw new Error(\"Transcription failed\");\n }\n\n const data = await response.json();\n return data.text;\n};\n\nconst Example = () => {\n const [transcript, setTranscript] = useState(\"\");\n\n const handleTranscriptionChange = useCallback((text: string) => {\n setTranscript((prev) => {\n const newText = prev ? `${prev} ${text}` : text;\n return newText;\n });\n }, []);\n\n const handleClear = useCallback(() => {\n setTranscript(\"\");\n }, []);\n\n return (\n

\n \n {transcript && (\n \n Clear\n \n )}\n

\n {transcript\n ? (\n

\n Transcript:\n

{transcript}

\n )\n : (\n

\n Click the microphone to start speaking\n

\n )}\n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,841],"d5f0075e-0ddd-11f1-83d9-42dde27851f2","sources.tsx","d5f00812-0ddd-11f1-83d9-42dde27851f2",77,["D",1771538185333],"\"use client\";\n\nimport {\n Source,\n Sources,\n SourcesContent,\n SourcesTrigger,\n} from \"@/components/ai-elements/sources\";\n\nconst sources = [\n { href: \"https://stripe.com/docs/api\", title: \"Stripe API Documentation\" },\n { href: \"https://docs.github.com/en/rest\", title: \"GitHub REST API\" },\n {\n href: \"https://docs.aws.amazon.com/sdk-for-javascript/\",\n title: \"AWS SDK for JavaScript\",\n },\n];\n\nconst Example = () => (\n

\n \n \n \n {sources.map((source) => (\n \n ))}\n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,849],"d699422e-0ddd-11f1-93ea-42dde27851f2","sources-custom.tsx","d6994332-0ddd-11f1-93ea-42dde27851f2",110,["D",1771538186446],"\"use client\";\n\nimport {\n Source,\n Sources,\n SourcesContent,\n SourcesTrigger,\n} from \"@/components/ai-elements/sources\";\nimport { ChevronDownIcon, ExternalLinkIcon } from \"lucide-react\";\n\nconst sources = [\n { href: \"https://stripe.com/docs/api\", title: \"Stripe API Documentation\" },\n { href: \"https://docs.github.com/en/rest\", title: \"GitHub REST API\" },\n {\n href: \"https://docs.aws.amazon.com/sdk-for-javascript/\",\n title: \"AWS SDK for JavaScript\",\n },\n];\n\nconst Example = () => (\n

\n \n \n

Using {sources.length} citations

\n \n \n \n {sources.map((source) => (\n \n {source.title}\n \n \n ))}\n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,857],"d73fafe2-0ddd-11f1-9f87-42dde27851f2","snippet.tsx","d73fb08c-0ddd-11f1-9f87-42dde27851f2",142,["D",1771538187501],"\"use client\";\n\nimport {\n Snippet,\n SnippetAddon,\n SnippetCopyButton,\n SnippetInput,\n SnippetText,\n} from \"@/components/ai-elements/snippet\";\n\nconst Example = () => (\n

\n \n \n $\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,865],"d5e65e2a-0ddd-11f1-9539-42dde27851f2","snippet-plain.tsx","d5e65f10-0ddd-11f1-9539-42dde27851f2",74,["D",1771538185259],"\"use client\";\n\nimport {\n Snippet,\n SnippetAddon,\n SnippetCopyButton,\n SnippetInput,\n} from \"@/components/ai-elements/snippet\";\n\nconst Example = () => (\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,873],"d6a18326-0ddd-11f1-bf00-42dde27851f2","shimmer.tsx","d6a1840c-0ddd-11f1-bf00-42dde27851f2",111,["D",1771538186320],"\"use client\";\n\nimport { Shimmer } from \"@/components/ai-elements/shimmer\";\n\nconst Example = () => (\n

\n This text has a shimmer effect\n \n Large Heading\n \n \n Slower shimmer with wider spread\n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,881],"d679767e-0ddd-11f1-bf00-42dde27851f2","shimmer-elements.tsx","d679775a-0ddd-11f1-bf00-42dde27851f2",104,["D",1771538186234],"\"use client\";\n\nimport { Shimmer } from \"@/components/ai-elements/shimmer\";\n\nconst Example = () => (\n

\n As paragraph (default)\n

\n This is rendered as a paragraph\n

\n\n

As heading

\n \n Large Heading with Shimmer\n \n

\n\n

As span (inline)

\n Processing your request{\" \"}\n \n with AI magic\n \n ...\n

\n\n

\n As div with custom styling\n

\n \n Custom styled shimmer text\n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,889],"d65e7d9c-0ddd-11f1-acc9-42dde27851f2","shimmer-duration.tsx","d65e7e96-0ddd-11f1-acc9-42dde27851f2",98,["D",1771538186026],"\"use client\";\n\nimport { Shimmer } from \"@/components/ai-elements/shimmer\";\n\nconst Example = () => (\n

Fast (1 second)

\n Loading quickly...\n

\n\n

Default (2 seconds)

\n Loading at normal speed...\n

\n\n

Slow (4 seconds)

\n Loading slowly...\n

\n\n

\n Very Slow (6 seconds)\n

\n Loading very slowly...\n

\n);\n\nexport default Example;\n",[],[195,660,661,671,897],"d6577de4-0ddd-11f1-8ab1-42dde27851f2","schema-display.tsx","d6577e8e-0ddd-11f1-8ab1-42dde27851f2",97,["D",1771538185973],"\"use client\";\n\nimport {\n SchemaDisplay,\n SchemaDisplayContent,\n SchemaDisplayDescription,\n SchemaDisplayHeader,\n SchemaDisplayMethod,\n SchemaDisplayParameters,\n SchemaDisplayPath,\n SchemaDisplayRequest,\n SchemaDisplayResponse,\n} from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n \n

\n \n \n

\n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,905],"d66c453a-0ddd-11f1-8ab1-42dde27851f2","schema-display-params.tsx","d66c45f8-0ddd-11f1-8ab1-42dde27851f2",101,["D",1771538186141],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[195,660,661,671,913],"d6618398-0ddd-11f1-a0cd-42dde27851f2","schema-display-nested.tsx","d66184ec-0ddd-11f1-a0cd-42dde27851f2",99,["D",1771538186065],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[195,660,661,671,921],"d6e1222e-0ddd-11f1-99d1-42dde27851f2","schema-display-body.tsx","d6e122e2-0ddd-11f1-99d1-42dde27851f2",123,["D",1771538186916],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[195,660,661,671,929],"d709808e-0ddd-11f1-99d1-42dde27851f2","schema-display-basic.tsx","d709816a-0ddd-11f1-99d1-42dde27851f2",132,["D",1771538187172],"\"use client\";\n\nimport { SchemaDisplay } from \"@/components/ai-elements/schema-display\";\n\nconst Example = () => (\n \n);\n\nexport default Example;\n",[],[195,660,661,671,937],"d722934e-0ddd-11f1-9539-42dde27851f2","sandbox.tsx","d722942a-0ddd-11f1-9539-42dde27851f2",136,["D",1771538187310],"\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\n\nimport {\n CodeBlock,\n CodeBlockCopyButton,\n} from \"@/components/ai-elements/code-block\";\nimport {\n Sandbox,\n SandboxContent,\n SandboxHeader,\n SandboxTabContent,\n SandboxTabs,\n SandboxTabsBar,\n SandboxTabsList,\n SandboxTabsTrigger,\n} from \"@/components/ai-elements/sandbox\";\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\nimport { Button } from \"@/components/ui/button\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst code = `import math\n\ndef calculate_primes(limit):\n \"\"\"Find all prime numbers up to a given limit using Sieve of Eratosthenes.\"\"\"\n sieve = [True] * (limit + 1)\n sieve[0] = sieve[1] = False\n \n for i in range(2, int(math.sqrt(limit)) + 1):\n if sieve[i]:\n for j in range(i * i, limit + 1, i):\n sieve[j] = False\n \n return [i for i, is_prime in enumerate(sieve) if is_prime]\n\nif __name__ == \"__main__\":\n primes = calculate_primes(50)\n print(f\"Found {len(primes)} prime numbers up to 50:\")\n print(primes)`;\n\nconst outputs: Record = {\n \"input-available\": undefined,\n \"input-streaming\": undefined,\n \"output-available\": `Found 15 prime numbers up to 50:\n[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47]`,\n \"output-error\":\n `TypeError: Cannot read properties of undefined (reading 'map')\n at calculatePrimes (/src/utils/primes.ts:15:23)\n at runCalculation (/src/components/Calculator.tsx:42:12)\n at onClick (/src/components/Button.tsx:18:5)\n at HTMLButtonElement.dispatch (node_modules/react-dom/cjs/react-dom.development.js:3456:9)\n at node_modules/react-dom/cjs/react-dom.development.js:4245:12`,\n};\n\nconst states: ToolUIPart[\"state\"][] = [\n \"input-streaming\",\n \"input-available\",\n \"output-available\",\n \"output-error\",\n];\n\ninterface StateButtonProps {\n s: ToolUIPart[\"state\"];\n currentState: ToolUIPart[\"state\"];\n onStateChange: (state: ToolUIPart[\"state\"]) => void;\n}\n\nconst StateButton = memo(\n ({ s, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(() => onStateChange(s), [onStateChange, s]);\n return (\n \n {s}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [state, setState] = useState(\"output-available\");\n\n const handleStateChange = useCallback((s: ToolUIPart[\"state\"]) => {\n setState(s);\n }, []);\n\n return (\n

\n {states.map((s) => (\n \n ))}\n

\n\n \n \n \n \n \n \n Code\n Output\n \n \n \n \n \n \n \n \n {state === \"output-error\"\n ? (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n : (\n \n \n \n )}\n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,945],"d60f005a-0ddd-11f1-83d9-42dde27851f2","reasoning.tsx","d60f012c-0ddd-11f1-83d9-42dde27851f2",82,["D",1771538185498],"\"use client\";\n\nimport {\n Reasoning,\n ReasoningContent,\n ReasoningTrigger,\n} from \"@/components/ai-elements/reasoning\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nconst reasoningSteps = [\n \"Let me think about this problem step by step.\",\n \"\\n\\nFirst, I need to understand what the user is asking for.\",\n \"\\n\\nThey want a reasoning component that opens automatically when streaming begins and closes when streaming finishes. The component should be composable and follow existing patterns in the codebase.\",\n \"\\n\\nThis seems like a collapsible component with state management would be the right approach.\",\n].join(\"\");\n\nconst Example = () => {\n const [content, setContent] = useState(\"\");\n const [isStreaming, setIsStreaming] = useState(false);\n const [currentTokenIndex, setCurrentTokenIndex] = useState(0);\n const [tokens, setTokens] = useState([]);\n\n // Function to chunk text into fake tokens of 3-4 characters\n const chunkIntoTokens = useCallback((text: string): string[] => {\n const tokens: string[] = [];\n let i = 0;\n while (i < text.length) {\n // Random size between 3-4\n const chunkSize = Math.floor(Math.random() * 2) + 3;\n tokens.push(text.slice(i, i + chunkSize));\n i += chunkSize;\n }\n return tokens;\n }, []);\n\n useEffect(() => {\n const tokenizedSteps = chunkIntoTokens(reasoningSteps);\n setTokens(tokenizedSteps);\n setContent(\"\");\n setCurrentTokenIndex(0);\n setIsStreaming(true);\n }, [chunkIntoTokens]);\n\n useEffect(() => {\n if (!isStreaming || currentTokenIndex >= tokens.length) {\n if (isStreaming) {\n setIsStreaming(false);\n }\n return;\n }\n\n // Faster interval since we're streaming smaller chunks\n const timer = setTimeout(() => {\n setContent((prev) => prev + tokens[currentTokenIndex]);\n setCurrentTokenIndex((prev) => prev + 1);\n }, 25);\n\n return () => clearTimeout(timer);\n }, [isStreaming, currentTokenIndex, tokens]);\n\n return (\n

\n \n \n {content}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,953],"d68a668c-0ddd-11f1-93ea-42dde27851f2","queue.tsx","d68a675e-0ddd-11f1-93ea-42dde27851f2",107,["D",1771538186298],"\"use client\";\n\nimport type { QueueMessage, QueueTodo } from \"@/components/ai-elements/queue\";\n\nimport {\n Queue,\n QueueItem,\n QueueItemAction,\n QueueItemActions,\n QueueItemAttachment,\n QueueItemContent,\n QueueItemDescription,\n QueueItemFile,\n QueueItemImage,\n QueueItemIndicator,\n QueueList,\n QueueSection,\n QueueSectionContent,\n QueueSectionLabel,\n QueueSectionTrigger,\n} from \"@/components/ai-elements/queue\";\nimport { ArrowUp, Trash2 } from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst sampleMessages: QueueMessage[] = [\n {\n id: \"msg-1\",\n parts: [{ text: \"How do I set up the project?\", type: \"text\" }],\n },\n {\n id: \"msg-2\",\n parts: [{ text: \"What is the roadmap for Q4?\", type: \"text\" }],\n },\n {\n id: \"msg-3\",\n parts: [\n { text: \"Update the default logo to this png.\", type: \"text\" },\n {\n filename: \"setup-guide.png\",\n mediaType: \"image/png\",\n type: \"file\",\n url: \"https://github.com/haydenbleasel.png\",\n },\n ],\n },\n {\n id: \"msg-4\",\n parts: [{ text: \"Please generate a changelog.\", type: \"text\" }],\n },\n {\n id: \"msg-5\",\n parts: [{ text: \"Add dark mode support.\", type: \"text\" }],\n },\n {\n id: \"msg-6\",\n parts: [{ text: \"Optimize database queries.\", type: \"text\" }],\n },\n {\n id: \"msg-7\",\n parts: [{ text: \"Set up CI/CD pipeline.\", type: \"text\" }],\n },\n];\n\nconst sampleTodos: QueueTodo[] = [\n {\n description: \"Complete the README and API docs\",\n id: \"todo-1\",\n status: \"completed\",\n title: \"Write project documentation\",\n },\n {\n id: \"todo-2\",\n status: \"pending\",\n title: \"Implement authentication\",\n },\n {\n description: \"Resolve crash on settings page\",\n id: \"todo-3\",\n status: \"pending\",\n title: \"Fix bug #42\",\n },\n {\n description: \"Unify queue and todo state management\",\n id: \"todo-4\",\n status: \"pending\",\n title: \"Refactor queue logic\",\n },\n {\n description: \"Increase test coverage for hooks\",\n id: \"todo-5\",\n status: \"pending\",\n title: \"Add unit tests\",\n },\n];\n\ninterface MessageActionsProps {\n messageId: string;\n onRemove: (e: React.MouseEvent, id: string) => void;\n onSend: (e: React.MouseEvent, id: string) => void;\n}\n\nconst MessageActions = memo(\n ({ messageId, onRemove, onSend }: MessageActionsProps) => {\n const handleRemove = useCallback(\n (e: React.MouseEvent) => onRemove(e, messageId),\n [onRemove, messageId],\n );\n const handleSend = useCallback(\n (e: React.MouseEvent) => onSend(e, messageId),\n [onSend, messageId],\n );\n return (\n \n \n \n \n \n \n \n \n );\n },\n);\n\nMessageActions.displayName = \"MessageActions\";\n\ninterface TodoItemProps {\n todo: QueueTodo;\n onRemove: (id: string) => void;\n}\n\nconst TodoItem = memo(({ todo, onRemove }: TodoItemProps) => {\n const isCompleted = todo.status === \"completed\";\n const handleRemove = useCallback(\n () => onRemove(todo.id),\n [onRemove, todo.id],\n );\n\n return (\n \n

\n \n \n {todo.title}\n \n \n \n \n \n \n

\n {todo.description && (\n \n {todo.description}\n \n )}\n \n );\n});\n\nTodoItem.displayName = \"TodoItem\";\n\nconst Example = () => {\n const [messages, setMessages] = useState(sampleMessages);\n const [todos, setTodos] = useState(sampleTodos);\n\n const handleRemoveMessage = useCallback((id: string) => {\n setMessages((prev) => prev.filter((msg) => msg.id !== id));\n }, []);\n\n const handleRemoveTodo = useCallback((id: string) => {\n setTodos((prev) => prev.filter((todo) => todo.id !== id));\n }, []);\n\n const handleSendNow = useCallback((id: string) => {\n console.log(\"Send now:\", id);\n setMessages((prev) => prev.filter((msg) => msg.id !== id));\n }, []);\n\n const handleMessageRemove = useCallback(\n (e: React.MouseEvent, id: string) => {\n e.preventDefault();\n e.stopPropagation();\n handleRemoveMessage(id);\n },\n [handleRemoveMessage],\n );\n\n const handleMessageSend = useCallback(\n (e: React.MouseEvent, id: string) => {\n e.preventDefault();\n e.stopPropagation();\n handleSendNow(id);\n },\n [handleSendNow],\n );\n\n if (messages.length === 0 && todos.length === 0) {\n return null;\n }\n\n return (\n \n {messages.length > 0 && (\n \n \n \n \n \n \n {messages.map((message) => {\n const summary = (() => {\n const textParts = message.parts.filter(\n (p) => p.type === \"text\",\n );\n const text = textParts\n .map((p) => p.text)\n .join(\" \")\n .trim();\n return text || \"(queued message)\";\n })();\n\n const hasFiles = message.parts.some(\n (p) => p.type === \"file\" && p.url,\n );\n\n return (\n \n

\n \n {summary}\n \n

\n {hasFiles && (\n \n {message.parts\n .filter((p) => p.type === \"file\" && p.url)\n .map((file) => {\n if (\n file.mediaType?.startsWith(\"image/\") &&\n file.url\n ) {\n return (\n \n );\n }\n return (\n \n {file.filename || \"file\"}\n \n );\n })}\n \n )}\n \n );\n })}\n \n \n \n )}\n {todos.length > 0 && (\n \n \n \n \n \n \n {todos.map((todo) => (\n \n ))}\n \n \n \n )}\n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,961],"d710d2b2-0ddd-11f1-9539-42dde27851f2","queue-prompt-input.tsx","d710d366-0ddd-11f1-9539-42dde27851f2",133,["D",1771538187226],"\"use client\";\n\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\nimport type { QueueTodo } from \"@/components/ai-elements/queue\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorEmpty,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorLogoGroup,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport {\n PromptInput,\n PromptInputActionAddAttachments,\n PromptInputActionMenu,\n PromptInputActionMenuContent,\n PromptInputActionMenuTrigger,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputHeader,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from \"@/components/ai-elements/prompt-input\";\nimport {\n Queue,\n QueueItem,\n QueueItemAction,\n QueueItemActions,\n QueueItemContent,\n QueueItemDescription,\n QueueItemIndicator,\n QueueSection,\n QueueSectionContent,\n} from \"@/components/ai-elements/queue\";\nimport { CheckIcon, GlobeIcon, Trash2 } from \"lucide-react\";\nimport { memo, useCallback, useRef, useState } from \"react\";\n\nconst models = [\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o\",\n name: \"GPT-4o\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o-mini\",\n name: \"GPT-4o Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-opus-4-20250514\",\n name: \"Claude 4 Opus\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-sonnet-4-20250514\",\n name: \"Claude 4 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-2.0-flash-exp\",\n name: \"Gemini 2.0 Flash\",\n providers: [\"google\"],\n },\n];\n\nconst SUBMITTING_TIMEOUT = 200;\nconst STREAMING_TIMEOUT = 2000;\n\ninterface AttachmentItemProps {\n attachment: {\n id: string;\n type: \"file\";\n filename?: string;\n mediaType?: string;\n url: string;\n };\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\ninterface TodoItemProps {\n todo: QueueTodo;\n onRemove: (id: string) => void;\n}\n\nconst TodoItem = memo(({ todo, onRemove }: TodoItemProps) => {\n const isCompleted = todo.status === \"completed\";\n const handleRemove = useCallback(\n () => onRemove(todo.id),\n [onRemove, todo.id],\n );\n\n return (\n \n

\n \n \n {todo.title}\n \n \n \n \n \n \n

\n {todo.description && (\n \n {todo.description}\n \n )}\n \n );\n});\n\nTodoItem.displayName = \"TodoItem\";\n\ninterface ModelItemProps {\n m: (typeof models)[0];\n selectedModel: string;\n onSelect: (id: string) => void;\n}\n\nconst ModelItem = memo(({ m, selectedModel, onSelect }: ModelItemProps) => {\n const handleSelect = useCallback(() => onSelect(m.id), [onSelect, m.id]);\n return (\n \n \n {m.name}\n \n {m.providers.map((provider) => (\n \n ))}\n \n {selectedModel === m.id\n ? \n :

}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\nconst sampleTodos: QueueTodo[] = [\n {\n description: \"Complete the README and API docs\",\n id: \"todo-1\",\n status: \"completed\",\n title: \"Write project documentation\",\n },\n {\n id: \"todo-2\",\n status: \"pending\",\n title: \"Implement authentication\",\n },\n {\n description: \"Resolve crash on settings page\",\n id: \"todo-3\",\n status: \"pending\",\n title: \"Fix bug #42\",\n },\n {\n description: \"Unify queue and todo state management\",\n id: \"todo-4\",\n status: \"pending\",\n title: \"Refactor queue logic\",\n },\n {\n description: \"Increase test coverage for hooks\",\n id: \"todo-5\",\n status: \"pending\",\n title: \"Add unit tests\",\n },\n];\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n const handleRemove = useCallback(\n (id: string) => attachments.remove(id),\n [attachments],\n );\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n \n ))}\n \n );\n};\n\nconst Example = () => {\n const [todos, setTodos] = useState(sampleTodos);\n\n const handleRemoveTodo = useCallback((id: string) => {\n setTodos((prev) => prev.filter((todo) => todo.id !== id));\n }, []);\n\n const [text, setText] = useState(\"\");\n const [model, setModel] = useState(models[0].id);\n const [modelSelectorOpen, setModelSelectorOpen] = useState(false);\n const [status, setStatus] = useState<\n \"submitted\" | \"streaming\" | \"ready\" | \"error\"\n >(\"ready\");\n const timeoutRef = useRef(null);\n\n const handleTextChange = useCallback(\n (e: React.ChangeEvent) => setText(e.target.value),\n [],\n );\n\n const handleModelSelect = useCallback((id: string) => {\n setModel(id);\n setModelSelectorOpen(false);\n }, []);\n\n const selectedModelData = models.find((m) => m.id === model);\n\n const stop = () => {\n console.log(\"Stopping request...\");\n\n // Clear any pending timeouts\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n\n setStatus(\"ready\");\n };\n\n const handleSubmit = useCallback(\n (message: PromptInputMessage) => {\n // If currently streaming or submitted, stop instead of submitting\n if (status === \"streaming\" || status === \"submitted\") {\n stop();\n return;\n }\n\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n setStatus(\"submitted\");\n\n console.log(\"Submitting message:\", message);\n\n setTimeout(() => {\n setStatus(\"streaming\");\n }, SUBMITTING_TIMEOUT);\n\n timeoutRef.current = setTimeout(() => {\n setStatus(\"ready\");\n timeoutRef.current = null;\n }, STREAMING_TIMEOUT);\n },\n [status],\n );\n\n return (\n

\n \n {todos.length > 0 && (\n \n \n

\n {todos.map((todo) => (\n \n ))}\n

\n \n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Search\n \n \n \n \n {selectedModelData?.chefSlug && (\n \n )}\n {selectedModelData?.name && (\n \n {selectedModelData.name}\n \n )}\n \n \n \n \n \n No models found.\n {[\"OpenAI\", \"Anthropic\", \"Google\"].map((chef) => (\n \n {models\n .filter((m) => m.chef === chef)\n .map((m) => (\n \n ))}\n \n ))}\n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,969],"d6dcd660-0ddd-11f1-acc9-42dde27851f2","prompt-input.tsx","d6dcd732-0ddd-11f1-acc9-42dde27851f2",122,["D",1771538186887],"\"use client\";\n\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorEmpty,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorLogoGroup,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport {\n PromptInput,\n PromptInputActionAddAttachments,\n PromptInputActionMenu,\n PromptInputActionMenuContent,\n PromptInputActionMenuTrigger,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputProvider,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from \"@/components/ai-elements/prompt-input\";\nimport { CheckIcon, GlobeIcon } from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst models = [\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o\",\n name: \"GPT-4o\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o-mini\",\n name: \"GPT-4o Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-opus-4-20250514\",\n name: \"Claude 4 Opus\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-sonnet-4-20250514\",\n name: \"Claude 4 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-2.0-flash-exp\",\n name: \"Gemini 2.0 Flash\",\n providers: [\"google\"],\n },\n];\n\nconst SUBMITTING_TIMEOUT = 200;\nconst STREAMING_TIMEOUT = 2000;\n\ninterface AttachmentItemProps {\n attachment: {\n id: string;\n type: \"file\";\n filename?: string;\n mediaType?: string;\n url: string;\n };\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\ninterface ModelItemProps {\n m: (typeof models)[0];\n selectedModel: string;\n onSelect: (id: string) => void;\n}\n\nconst ModelItem = memo(({ m, selectedModel, onSelect }: ModelItemProps) => {\n const handleSelect = useCallback(() => onSelect(m.id), [onSelect, m.id]);\n return (\n \n \n {m.name}\n \n {m.providers.map((provider) => (\n \n ))}\n \n {selectedModel === m.id\n ? \n :

}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n const handleRemove = useCallback(\n (id: string) => attachments.remove(id),\n [attachments],\n );\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n \n ))}\n \n );\n};\n\nconst Example = () => {\n const [model, setModel] = useState(models[0].id);\n const [modelSelectorOpen, setModelSelectorOpen] = useState(false);\n const [status, setStatus] = useState<\n \"submitted\" | \"streaming\" | \"ready\" | \"error\"\n >(\"ready\");\n\n const selectedModelData = models.find((m) => m.id === model);\n\n const handleModelSelect = useCallback((id: string) => {\n setModel(id);\n setModelSelectorOpen(false);\n }, []);\n\n const handleSubmit = useCallback((message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n setStatus(\"submitted\");\n\n // eslint-disable-next-line no-console\n console.log(\"Submitting message:\", message);\n\n setTimeout(() => {\n setStatus(\"streaming\");\n }, SUBMITTING_TIMEOUT);\n\n setTimeout(() => {\n setStatus(\"ready\");\n }, STREAMING_TIMEOUT);\n }, []);\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Search\n \n \n \n \n {selectedModelData?.chefSlug && (\n \n )}\n {selectedModelData?.name && (\n \n {selectedModelData.name}\n \n )}\n \n \n \n \n \n No models found.\n {[\"OpenAI\", \"Anthropic\", \"Google\"].map((chef) => (\n \n {models\n .filter((m) => m.chef === chef)\n .map((m) => (\n \n ))}\n \n ))}\n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,977],"d6ed5440-0ddd-11f1-acc9-42dde27851f2","prompt-input-tooltip.tsx","d6ed5526-0ddd-11f1-acc9-42dde27851f2",125,["D",1771538186984],"\"use client\";\n\nimport {\n PromptInput,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n} from \"@/components/ai-elements/prompt-input\";\nimport { GlobeIcon, MicIcon, PaperclipIcon } from \"lucide-react\";\n\nconst handleSubmit = () => {\n // Handle submit\n};\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,985],"d7014540-0ddd-11f1-99d1-42dde27851f2","prompt-input-cursor.tsx","d7014608-0ddd-11f1-99d1-42dde27851f2",130,["D",1771538187126],"\"use client\";\n\nimport type { AttachmentData } from \"@/components/ai-elements/attachments\";\nimport type { PromptInputMessage } from \"@/components/ai-elements/prompt-input\";\nimport type { SourceDocumentUIPart } from \"ai\";\n\nimport {\n Attachment,\n AttachmentInfo,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorEmpty,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorLogoGroup,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport {\n PromptInput,\n PromptInputBody,\n PromptInputButton,\n PromptInputCommand,\n PromptInputCommandEmpty,\n PromptInputCommandGroup,\n PromptInputCommandInput,\n PromptInputCommandItem,\n PromptInputCommandList,\n PromptInputCommandSeparator,\n PromptInputFooter,\n PromptInputHeader,\n PromptInputHoverCard,\n PromptInputHoverCardContent,\n PromptInputHoverCardTrigger,\n PromptInputProvider,\n PromptInputSubmit,\n PromptInputTab,\n PromptInputTabBody,\n PromptInputTabItem,\n PromptInputTabLabel,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n usePromptInputReferencedSources,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n AtSignIcon,\n CheckIcon,\n FilesIcon,\n GlobeIcon,\n ImageIcon,\n RulerIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst models = [\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o\",\n name: \"GPT-4o\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o-mini\",\n name: \"GPT-4o Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-opus-4-20250514\",\n name: \"Claude 4 Opus\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-sonnet-4-20250514\",\n name: \"Claude 4 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google\", \"amazon-bedrock\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-2.0-flash-exp\",\n name: \"Gemini 2.0 Flash\",\n providers: [\"google\"],\n },\n];\n\nconst SUBMITTING_TIMEOUT = 200;\nconst STREAMING_TIMEOUT = 2000;\n\ninterface AttachmentItemProps {\n attachment: AttachmentData;\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\ninterface SourceItemProps {\n source: AttachmentData;\n onRemove: (id: string) => void;\n}\n\nconst SourceItem = memo(({ source, onRemove }: SourceItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(source.id),\n [onRemove, source.id],\n );\n return (\n \n \n \n \n \n );\n});\n\nSourceItem.displayName = \"SourceItem\";\n\ninterface ModelItemProps {\n m: (typeof models)[0];\n selectedModel: string;\n onSelect: (id: string) => void;\n}\n\nconst ModelItem = memo(({ m, selectedModel, onSelect }: ModelItemProps) => {\n const handleSelect = useCallback(() => onSelect(m.id), [onSelect, m.id]);\n return (\n \n \n {m.name}\n \n {m.providers.map((provider) => (\n \n ))}\n \n {selectedModel === m.id\n ? \n :

}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\ninterface SourceCommandItemProps {\n source: SourceDocumentUIPart;\n index: number;\n onAdd: (source: SourceDocumentUIPart) => void;\n}\n\nconst SourceCommandItem = memo(\n ({ source, index, onAdd }: SourceCommandItemProps) => {\n const handleSelect = useCallback(() => onAdd(source), [onAdd, source]);\n return (\n \n \n

\n {source.title}\n \n {source.filename}\n \n

\n \n );\n },\n);\n\nSourceCommandItem.displayName = \"SourceCommandItem\";\n\nconst sampleSources: SourceDocumentUIPart[] = [\n {\n filename: \"packages/elements/src\",\n mediaType: \"text/plain\",\n sourceId: \"1\",\n title: \"prompt-input.tsx\",\n type: \"source-document\",\n },\n {\n filename: \"apps/test/app/examples\",\n mediaType: \"text/plain\",\n sourceId: \"2\",\n title: \"queue.tsx\",\n type: \"source-document\",\n },\n {\n filename: \"packages/elements/src\",\n mediaType: \"text/plain\",\n sourceId: \"3\",\n title: \"queue.tsx\",\n type: \"source-document\",\n },\n];\n\nconst sampleTabs = {\n active: [{ path: \"packages/elements/src/task-queue-panel.tsx\" }],\n recents: [\n { path: \"apps/test/app/examples/task-queue-panel.tsx\" },\n { path: \"apps/test/app/page.tsx\" },\n { path: \"packages/elements/src/task.tsx\" },\n { path: \"apps/test/app/examples/prompt-input.tsx\" },\n { path: \"packages/elements/src/queue.tsx\" },\n { path: \"apps/test/app/examples/queue.tsx\" },\n ],\n};\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n const handleRemove = useCallback(\n (id: string) => attachments.remove(id),\n [attachments],\n );\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n \n ))}\n \n );\n};\n\nconst PromptInputReferencedSourcesDisplay = () => {\n const refs = usePromptInputReferencedSources();\n\n const handleRemove = useCallback((id: string) => refs.remove(id), [refs]);\n\n if (refs.sources.length === 0) {\n return null;\n }\n\n return (\n \n {refs.sources.map((source) => (\n \n ))}\n \n );\n};\n\nconst Example = () => {\n const [model, setModel] = useState(models[0].id);\n const [modelSelectorOpen, setModelSelectorOpen] = useState(false);\n const [status, setStatus] = useState<\n \"submitted\" | \"streaming\" | \"ready\" | \"error\"\n >(\"ready\");\n\n const selectedModelData = models.find((m) => m.id === model);\n\n const handleModelSelect = useCallback((id: string) => {\n setModel(id);\n setModelSelectorOpen(false);\n }, []);\n\n const handleSubmit = useCallback((message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n setStatus(\"submitted\");\n\n setTimeout(() => {\n setStatus(\"streaming\");\n }, SUBMITTING_TIMEOUT);\n\n setTimeout(() => {\n setStatus(\"ready\");\n }, STREAMING_TIMEOUT);\n }, []);\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 1\n \n \n \n

\n Attached Project Rules\n

\n Always Apply:\n

ultracite.mdc

\n Click to manage\n

\n \n \n \n \n \n \n 1 Tab\n \n \n \n \n Active Tabs\n \n {sampleTabs.active.map((tab) => (\n \n \n \n {tab.path}\n \n \n ))}\n \n \n \n Recents\n \n {sampleTabs.recents.map((tab) => (\n \n \n \n {tab.path}\n \n \n ))}\n \n \n

\n Only file paths are included\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {selectedModelData?.chefSlug && (\n \n )}\n {selectedModelData?.name && (\n \n {selectedModelData.name}\n \n )}\n \n \n \n \n \n No models found.\n {[\"OpenAI\", \"Anthropic\", \"Google\"].map((chef) => (\n \n {models\n .filter((m) => m.chef === chef)\n .map((m) => (\n \n ))}\n \n ))}\n \n \n \n \n

\n \n \n

\n \n \n \n

\n );\n};\n\nexport default Example;\n\nconst SampleFilesMenu = () => {\n const refs = usePromptInputReferencedSources();\n\n const handleAdd = useCallback(\n (source: SourceDocumentUIPart) => refs.add(source),\n [refs],\n );\n\n return (\n \n \n \n \n No results found.\n \n \n \n \n Active Tabs\n ✓\n \n \n \n \n {sampleSources\n .filter(\n (source) =>\n !refs.sources.some(\n (s) =>\n s.title === source.title && s.filename === source.filename,\n ),\n )\n .map((source, index) => (\n \n ))}\n \n \n \n );\n};\n",[],[195,660,661,671,993],"d744223e-0ddd-11f1-91c8-42dde27851f2","plan.tsx","d74422fc-0ddd-11f1-91c8-42dde27851f2",143,["D",1771538187561],"\"use client\";\n\nimport {\n Plan,\n PlanAction,\n PlanContent,\n PlanDescription,\n PlanFooter,\n PlanHeader,\n PlanTitle,\n PlanTrigger,\n} from \"@/components/ai-elements/plan\";\nimport { Button } from \"@/components/ui/button\";\nimport { FileText } from \"lucide-react\";\n\nconst Example = () => (\n \n \n

\n \n Rewrite AI Elements to SolidJS\n

\n \n Rewrite the AI Elements component library from React to SolidJS while\n maintaining compatibility with existing React-based shadcn/ui\n components using solid-js/compat, updating all 29 components and their\n test suite.\n \n

\n \n \n \n

Overview

\n This plan outlines the migration strategy for converting the AI\n Elements library from React to SolidJS, ensuring compatibility and\n maintaining existing functionality.\n

Key Steps

Set up SolidJS project structure
Install solid-js/compat for React compatibility
Migrate components one by one
Update test suite for each component
Verify compatibility with shadcn/ui

\n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1001],"d606d3bc-0ddd-11f1-a7cf-42dde27851f2","persona-opal.tsx","d606d48e-0ddd-11f1-a7cf-42dde27851f2",81,["D",1771538185483],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\ninterface StateButtonProps {\n state: { state: PersonaState; icon: LucideIcon; label: string };\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1009],"d6c1afd4-0ddd-11f1-99d1-42dde27851f2","persona-obsidian.tsx","d6c1b092-0ddd-11f1-99d1-42dde27851f2",117,["D",1771538186709],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1017],"d76787ec-0ddd-11f1-a928-42dde27851f2","persona-mana.tsx","d76788e6-0ddd-11f1-a928-42dde27851f2",149,["D",1771538187789],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1025],"d63819a4-0ddd-11f1-93ea-42dde27851f2","persona-halo.tsx","d6381b66-0ddd-11f1-93ea-42dde27851f2",91,["D",1771538185809],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1033],"d7276d10-0ddd-11f1-91c8-42dde27851f2","persona-glint.tsx","d7276dce-0ddd-11f1-91c8-42dde27851f2",137,["D",1771538187373],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1041],"d6a5947a-0ddd-11f1-9b1e-42dde27851f2","persona-command.tsx","d6a59538-0ddd-11f1-9b1e-42dde27851f2",112,["D",1771538186523],"\"use client\";\n\nimport type { PersonaState } from \"@/components/ai-elements/persona\";\nimport type { LucideIcon } from \"lucide-react\";\n\nimport { Persona } from \"@/components/ai-elements/persona\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n BrainIcon,\n CircleIcon,\n EyeClosedIcon,\n MegaphoneIcon,\n MicIcon,\n} from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst states: {\n state: PersonaState;\n icon: LucideIcon;\n label: string;\n}[] = [\n {\n icon: CircleIcon,\n label: \"Idle\",\n state: \"idle\",\n },\n {\n icon: MicIcon,\n label: \"Listening\",\n state: \"listening\",\n },\n {\n icon: BrainIcon,\n label: \"Thinking\",\n state: \"thinking\",\n },\n {\n icon: MegaphoneIcon,\n label: \"Speaking\",\n state: \"speaking\",\n },\n {\n icon: EyeClosedIcon,\n label: \"Asleep\",\n state: \"asleep\",\n },\n];\n\ninterface StateButtonProps {\n state: (typeof states)[0];\n currentState: PersonaState;\n onStateChange: (state: PersonaState) => void;\n}\n\nconst StateButton = memo(\n ({ state, currentState, onStateChange }: StateButtonProps) => {\n const handleClick = useCallback(\n () => onStateChange(state.state),\n [onStateChange, state.state],\n );\n return (\n \n \n \n \n \n \n {state.label}\n \n );\n },\n);\n\nStateButton.displayName = \"StateButton\";\n\nconst Example = () => {\n const [currentState, setCurrentState] = useState(\"idle\");\n\n const handleStateChange = useCallback((state: PersonaState) => {\n setCurrentState(state);\n }, []);\n\n return (\n

\n \n\n \n {states.map((state) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1049],"d6f84486-0ddd-11f1-9539-42dde27851f2","package-info.tsx","d6f8454e-0ddd-11f1-9539-42dde27851f2",128,["D",1771538187054],"\"use client\";\n\nimport {\n PackageInfo,\n PackageInfoChangeType,\n PackageInfoContent,\n PackageInfoDependencies,\n PackageInfoDependency,\n PackageInfoDescription,\n PackageInfoHeader,\n PackageInfoName,\n PackageInfoVersion,\n} from \"@/components/ai-elements/package-info\";\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n A JavaScript library for building user interfaces.\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1057],"d72f825c-0ddd-11f1-9f87-42dde27851f2","open-in-chat.tsx","d72f82fc-0ddd-11f1-9f87-42dde27851f2",139,["D",1771538187427],"\"use client\";\n\nimport {\n OpenIn,\n OpenInChatGPT,\n OpenInClaude,\n OpenInContent,\n OpenInCursor,\n OpenInScira,\n OpenInT3,\n OpenInTrigger,\n OpenInv0,\n} from \"@/components/ai-elements/open-in-chat\";\n\nconst Example = () => {\n const sampleQuery = \"How can I implement authentication in Next.js?\";\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1065],"d64309d6-0ddd-11f1-a7cf-42dde27851f2","model-selector.tsx","d6430abc-0ddd-11f1-a7cf-42dde27851f2",94,["D",1771538185865],"\"use client\";\n\nimport {\n ModelSelector,\n ModelSelectorContent,\n ModelSelectorEmpty,\n ModelSelectorGroup,\n ModelSelectorInput,\n ModelSelectorItem,\n ModelSelectorList,\n ModelSelectorLogo,\n ModelSelectorLogoGroup,\n ModelSelectorName,\n ModelSelectorTrigger,\n} from \"@/components/ai-elements/model-selector\";\nimport { Button } from \"@/components/ui/button\";\nimport { CheckIcon } from \"lucide-react\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst models = [\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o\",\n name: \"GPT-4o\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"gpt-4o-mini\",\n name: \"GPT-4o Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"o1\",\n name: \"o1\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"OpenAI\",\n chefSlug: \"openai\",\n id: \"o1-mini\",\n name: \"o1 Mini\",\n providers: [\"openai\", \"azure\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-opus-4-20250514\",\n name: \"Claude 4 Opus\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-sonnet-4-20250514\",\n name: \"Claude 4 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-3.5-sonnet\",\n name: \"Claude 3.5 Sonnet\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Anthropic\",\n chefSlug: \"anthropic\",\n id: \"claude-3.5-haiku\",\n name: \"Claude 3.5 Haiku\",\n providers: [\"anthropic\", \"azure\", \"google-vertex\", \"amazon-bedrock\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-2.0-flash-exp\",\n name: \"Gemini 2.0 Flash\",\n providers: [\"google\", \"google-vertex\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-1.5-pro\",\n name: \"Gemini 1.5 Pro\",\n providers: [\"google\", \"google-vertex\"],\n },\n {\n chef: \"Google\",\n chefSlug: \"google\",\n id: \"gemini-1.5-flash\",\n name: \"Gemini 1.5 Flash\",\n providers: [\"google\", \"google-vertex\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.3-70b\",\n name: \"Llama 3.3 70B\",\n providers: [\"groq\", \"togetherai\", \"amazon-bedrock\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.1-405b\",\n name: \"Llama 3.1 405B\",\n providers: [\"togetherai\", \"amazon-bedrock\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.1-70b\",\n name: \"Llama 3.1 70B\",\n providers: [\"groq\", \"togetherai\", \"amazon-bedrock\"],\n },\n {\n chef: \"Meta\",\n chefSlug: \"llama\",\n id: \"llama-3.1-8b\",\n name: \"Llama 3.1 8B\",\n providers: [\"groq\", \"togetherai\"],\n },\n {\n chef: \"DeepSeek\",\n chefSlug: \"deepseek\",\n id: \"deepseek-r1\",\n name: \"DeepSeek R1\",\n providers: [\"deepseek\", \"openrouter\"],\n },\n {\n chef: \"DeepSeek\",\n chefSlug: \"deepseek\",\n id: \"deepseek-v3\",\n name: \"DeepSeek V3\",\n providers: [\"deepseek\", \"openrouter\"],\n },\n {\n chef: \"DeepSeek\",\n chefSlug: \"deepseek\",\n id: \"deepseek-coder-v2\",\n name: \"DeepSeek Coder V2\",\n providers: [\"deepseek\", \"openrouter\"],\n },\n {\n chef: \"Mistral AI\",\n chefSlug: \"mistral\",\n id: \"mistral-large\",\n name: \"Mistral Large\",\n providers: [\"mistral\", \"azure\"],\n },\n {\n chef: \"Mistral AI\",\n chefSlug: \"mistral\",\n id: \"mistral-small\",\n name: \"Mistral Small\",\n providers: [\"mistral\", \"azure\"],\n },\n {\n chef: \"Mistral AI\",\n chefSlug: \"mistral\",\n id: \"codestral\",\n name: \"Codestral\",\n providers: [\"mistral\"],\n },\n {\n chef: \"Alibaba\",\n chefSlug: \"alibaba\",\n id: \"qwen-2.5-72b\",\n name: \"Qwen 2.5 72B\",\n providers: [\"alibaba\", \"openrouter\"],\n },\n {\n chef: \"Alibaba\",\n chefSlug: \"alibaba\",\n id: \"qwen-2.5-coder-32b\",\n name: \"Qwen 2.5 Coder 32B\",\n providers: [\"alibaba\", \"openrouter\"],\n },\n {\n chef: \"Alibaba\",\n chefSlug: \"alibaba\",\n id: \"qwen-max\",\n name: \"Qwen Max\",\n providers: [\"alibaba\"],\n },\n {\n chef: \"Cohere\",\n chefSlug: \"cohere\",\n id: \"command-r-plus\",\n name: \"Command R+\",\n providers: [\"cohere\", \"azure\", \"amazon-bedrock\"],\n },\n {\n chef: \"Cohere\",\n chefSlug: \"cohere\",\n id: \"command-r\",\n name: \"Command R\",\n providers: [\"cohere\", \"azure\", \"amazon-bedrock\"],\n },\n {\n chef: \"xAI\",\n chefSlug: \"xai\",\n id: \"grok-3\",\n name: \"Grok 3\",\n providers: [\"xai\"],\n },\n {\n chef: \"xAI\",\n chefSlug: \"xai\",\n id: \"grok-2-1212\",\n name: \"Grok 2 1212\",\n providers: [\"xai\"],\n },\n {\n chef: \"xAI\",\n chefSlug: \"xai\",\n id: \"grok-vision\",\n name: \"Grok Vision\",\n providers: [\"xai\"],\n },\n {\n chef: \"Moonshot AI\",\n chefSlug: \"moonshotai\",\n id: \"moonshot-v1-128k\",\n name: \"Moonshot v1 128K\",\n providers: [\"moonshotai\"],\n },\n {\n chef: \"Moonshot AI\",\n chefSlug: \"moonshotai\",\n id: \"moonshot-v1-32k\",\n name: \"Moonshot v1 32K\",\n providers: [\"moonshotai\"],\n },\n {\n chef: \"Perplexity\",\n chefSlug: \"perplexity\",\n id: \"sonar-pro\",\n name: \"Sonar Pro\",\n providers: [\"perplexity\"],\n },\n {\n chef: \"Perplexity\",\n chefSlug: \"perplexity\",\n id: \"sonar\",\n name: \"Sonar\",\n providers: [\"perplexity\"],\n },\n {\n chef: \"Vercel\",\n chefSlug: \"v0\",\n id: \"v0-chat\",\n name: \"v0 Chat\",\n providers: [\"vercel\"],\n },\n {\n chef: \"Amazon\",\n chefSlug: \"amazon-bedrock\",\n id: \"nova-pro\",\n name: \"Nova Pro\",\n providers: [\"amazon-bedrock\"],\n },\n {\n chef: \"Amazon\",\n chefSlug: \"amazon-bedrock\",\n id: \"nova-lite\",\n name: \"Nova Lite\",\n providers: [\"amazon-bedrock\"],\n },\n {\n chef: \"Amazon\",\n chefSlug: \"amazon-bedrock\",\n id: \"nova-micro\",\n name: \"Nova Micro\",\n providers: [\"amazon-bedrock\"],\n },\n];\n\ninterface ModelItemProps {\n model: (typeof models)[0];\n selectedModel: string;\n onSelect: (id: string) => void;\n}\n\nconst ModelItem = memo(({ model, selectedModel, onSelect }: ModelItemProps) => {\n const handleSelect = useCallback(\n () => onSelect(model.id),\n [onSelect, model.id],\n );\n return (\n \n \n {model.name}\n \n {model.providers.map((provider) => (\n \n ))}\n \n {selectedModel === model.id\n ? \n :

}\n \n );\n});\n\nModelItem.displayName = \"ModelItem\";\n\nconst Example = () => {\n const [open, setOpen] = useState(false);\n const [selectedModel, setSelectedModel] = useState(\"gpt-4o\");\n\n const handleModelSelect = useCallback((id: string) => {\n setSelectedModel(id);\n setOpen(false);\n }, []);\n\n const selectedModelData = models.find((model) => model.id === selectedModel);\n\n // Get unique chefs in order of appearance\n const chefs = [...new Set(models.map((model) => model.chef))];\n\n return (\n

\n \n \n \n \n \n \n \n No models found.\n {chefs.map((chef) => (\n \n {models\n .filter((model) => model.chef === chef)\n .map((model) => (\n \n ))}\n \n ))}\n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1073],"d6b2d400-0ddd-11f1-8ab1-42dde27851f2","mic-selector.tsx","d6b2d4a0-0ddd-11f1-8ab1-42dde27851f2",115,["D",1771538186610],"\"use client\";\n\nimport {\n MicSelector,\n MicSelectorContent,\n MicSelectorEmpty,\n MicSelectorInput,\n MicSelectorItem,\n MicSelectorLabel,\n MicSelectorList,\n MicSelectorTrigger,\n MicSelectorValue,\n} from \"@/components/ai-elements/mic-selector\";\n\nconst handleOpenChange = (open: boolean) => {\n console.log(\"MicSelector is open?\", open);\n};\n\nconst handleValueChange = (newValue: string) => {\n console.log(\"MicSelector value:\", newValue);\n};\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n \n {(devices) =>\n devices.map((device) => (\n \n \n \n ))}\n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1081],"d74b49d8-0ddd-11f1-8b80-42dde27851f2","message.tsx","d74b4a8c-0ddd-11f1-8b80-42dde27851f2",144,["D",1771538187594],"\"use client\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n Message,\n MessageAction,\n MessageActions,\n MessageBranch,\n MessageBranchContent,\n MessageBranchNext,\n MessageBranchPage,\n MessageBranchPrevious,\n MessageBranchSelector,\n MessageContent,\n MessageResponse,\n MessageToolbar,\n} from \"@/components/ai-elements/message\";\nimport {\n CopyIcon,\n RefreshCcwIcon,\n ThumbsDownIcon,\n ThumbsUpIcon,\n} from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst messages: {\n key: string;\n from: \"user\" | \"assistant\";\n versions?: { id: string; content: string }[];\n content?: string;\n attachments?: {\n id: string;\n type: \"file\";\n url: string;\n mediaType?: string;\n filename?: string;\n }[];\n}[] = [\n {\n attachments: [\n {\n filename: \"palace-of-fine-arts.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\",\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"react-hooks-guide.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\",\n url: \"\",\n },\n ],\n content: \"How do React hooks work and when should I use them?\",\n from: \"user\",\n key: nanoid(),\n },\n {\n from: \"assistant\",\n key: nanoid(),\n versions: [\n {\n content: `# React Hooks Guide\n\nReact hooks are functions that let you \"hook into\" React state and lifecycle features from function components. Here's what you need to know:\n\n## Core Hooks\n\n### useState\nAdds state to functional components:\n\n\\`\\`\\`jsx\nconst [count, setCount] = useState(0);\n\nreturn (\n \n);\n\\`\\`\\`\n\n### useEffect\nHandles side effects (data fetching, subscriptions, DOM updates):\n\n\\`\\`\\`jsx\nuseEffect(() => {\n document.title = \\`You clicked \\${count} times\\`;\n\n // Cleanup function (optional)\n return () => {\n document.title = 'React App';\n };\n}, [count]); // Dependency array\n\\`\\`\\`\n\n## When to Use Hooks\n\n- ✅ **Function components** - Hooks only work in function components\n- ✅ **Replacing class components** - Modern React favors hooks over classes\n- ✅ **Sharing stateful logic** - Create custom hooks to reuse logic\n- ❌ **Class components** - Use lifecycle methods instead\n\n## Rules of Hooks\n\n1. Only call hooks at the **top level** (not inside loops, conditions, or nested functions)\n2. Only call hooks from **React functions** (components or custom hooks)\n\nWould you like to explore more advanced hooks like \\`useCallback\\` or \\`useMemo\\`?`,\n id: nanoid(),\n },\n {\n content:\n `React hooks are special functions that let you use React features in function components. The most common ones are:\n\n- **useState** - for managing component state\n- **useEffect** - for side effects like data fetching\n- **useContext** - for consuming context values\n- **useRef** - for accessing DOM elements\n\nHere's a simple example:\n\n\\`\\`\\`jsx\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n \n );\n}\n\\`\\`\\`\n\nWhich specific hook would you like to learn more about?`,\n id: nanoid(),\n },\n {\n content:\n `Absolutely! React hooks are a powerful feature introduced in React 16.8. They solve several problems:\n\n## Key Benefits\n\n1. **Simpler code** - No need for class components\n2. **Reusable logic** - Extract stateful logic into custom hooks\n3. **Better organization** - Group related code together\n\n## Most Popular Hooks\n\n| Hook | Purpose |\n|------|---------|\n| useState | Add state to components |\n| useEffect | Handle side effects |\n| useContext | Access context values |\n| useReducer | Complex state logic |\n| useCallback | Memoize functions |\n| useMemo | Memoize values |\n\nThe beauty of hooks is that they let you reuse stateful logic without changing your component hierarchy. Want to dive into a specific hook?`,\n id: nanoid(),\n },\n ],\n },\n];\n\nconst handleCopy = (content: string) => {\n navigator.clipboard.writeText(content);\n};\n\nconst handleRetry = () => {\n console.log(\"Retrying...\");\n};\n\ninterface LikeActionProps {\n messageKey: string;\n isLiked: boolean;\n onToggle: (key: string) => void;\n}\n\nconst LikeAction = memo(\n ({ messageKey, isLiked, onToggle }: LikeActionProps) => {\n const handleClick = useCallback(\n () => onToggle(messageKey),\n [messageKey, onToggle],\n );\n return (\n \n \n \n );\n },\n);\n\nLikeAction.displayName = \"LikeAction\";\n\ninterface DislikeActionProps {\n messageKey: string;\n isDisliked: boolean;\n onToggle: (key: string) => void;\n}\n\nconst DislikeAction = memo(\n ({ messageKey, isDisliked, onToggle }: DislikeActionProps) => {\n const handleClick = useCallback(\n () => onToggle(messageKey),\n [messageKey, onToggle],\n );\n return (\n \n \n \n );\n },\n);\n\nDislikeAction.displayName = \"DislikeAction\";\n\ninterface CopyActionProps {\n content: string;\n}\n\nconst CopyAction = memo(({ content }: CopyActionProps) => {\n const handleClick = useCallback(() => handleCopy(content), [content]);\n return (\n \n \n \n );\n});\n\nCopyAction.displayName = \"CopyAction\";\n\nconst Example = () => {\n const [liked, setLiked] = useState>({});\n const [disliked, setDisliked] = useState>({});\n\n const handleToggleLike = useCallback((key: string) => {\n setLiked((prev) => ({ ...prev, [key]: !prev[key] }));\n }, []);\n\n const handleToggleDislike = useCallback((key: string) => {\n setDisliked((prev) => ({ ...prev, [key]: !prev[key] }));\n }, []);\n\n return (\n

\n {/* biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Demo component with complex rendering logic */}\n {messages.map((message) => (\n \n {message.versions?.length && message.versions.length > 1\n ? (\n \n \n {message.versions?.map((version) => (\n \n {version.content}\n \n ))}\n \n {message.from === \"assistant\" && (\n \n \n \n \n \n \n \n \n \n \n \n \n v.id)?.content ||\n \"\"}\n />\n \n \n )}\n \n )\n : (\n

\n {message.attachments && message.attachments.length > 0 && (\n \n {message.attachments.map((attachment) => (\n \n \n \n \n ))}\n \n )}\n \n {message.from === \"assistant\"\n ? {message.content}\n : (\n message.content\n )}\n \n {message.from === \"assistant\" && message.versions && (\n \n \n \n \n \n \n \n \n )}\n

\n )}\n \n ))}\n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1089],"d6f0b284-0ddd-11f1-a928-42dde27851f2","jsx-preview.tsx","d6f0b34c-0ddd-11f1-a928-42dde27851f2",126,["D",1771538187003],"\"use client\";\n\nimport {\n JSXPreview,\n JSXPreviewContent,\n JSXPreviewError,\n} from \"@/components/ai-elements/jsx-preview\";\nimport { Button } from \"@/components/ui/button\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst handleError = (error: Error) => {\n console.log(\"JSX Parse Error:\", error);\n};\n\nconst fullJsx = `

\n AI\n

AI-Generated Component

Rendered from JSX string

This component was dynamically rendered from a JSX string. The JSXPreview component supports streaming mode, automatically closing unclosed tags as content arrives.

\n React\n Streaming\n Dynamic\n

\n Generated just now\n \n

`;\n\nconst Example = () => {\n const [streamedJsx, setStreamedJsx] = useState(fullJsx);\n const [isStreaming, setIsStreaming] = useState(false);\n const intervalRef = useRef | null>(null);\n\n const simulateStreaming = useCallback(() => {\n setIsStreaming(true);\n setStreamedJsx(\"\");\n let index = 0;\n\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n\n intervalRef.current = setInterval(() => {\n if (index < fullJsx.length) {\n setStreamedJsx(fullJsx.slice(0, index + 15));\n index += 15;\n } else {\n setIsStreaming(false);\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n }\n }, 30);\n }, []);\n\n useEffect(\n () => () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n },\n [],\n );\n\n return (\n

\n \n {isStreaming ? \"Streaming...\" : \"Simulate Streaming\"}\n \n\n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1097],"d62b0ad4-0ddd-11f1-93ea-42dde27851f2","inline-citation.tsx","d62b0b7e-0ddd-11f1-93ea-42dde27851f2",88,["D",1771538185723],"\"use client\";\n\nimport {\n InlineCitation,\n InlineCitationCard,\n InlineCitationCardBody,\n InlineCitationCardTrigger,\n InlineCitationCarousel,\n InlineCitationCarouselContent,\n InlineCitationCarouselHeader,\n InlineCitationCarouselIndex,\n InlineCitationCarouselItem,\n InlineCitationCarouselNext,\n InlineCitationCarouselPrev,\n InlineCitationSource,\n InlineCitationText,\n} from \"@/components/ai-elements/inline-citation\";\n\nconst citation = {\n sources: [\n {\n description:\n \"A comprehensive study on the recent developments in natural language processing technologies and their applications.\",\n title: \"Advances in Natural Language Processing\",\n url: \"https://example.com/nlp-advances\",\n },\n {\n description:\n \"An overview of the most significant machine learning breakthroughs in the past year.\",\n title: \"Breakthroughs in Machine Learning\",\n url: \"https://mlnews.org/breakthroughs\",\n },\n {\n description:\n \"A report on how artificial intelligence is transforming healthcare and diagnostics.\",\n title: \"AI in Healthcare: Current Trends\",\n url: \"https://healthai.com/trends\",\n },\n {\n description:\n \"A discussion on the ethical considerations and challenges in the development of AI.\",\n title: \"Ethics of Artificial Intelligence\",\n url: \"https://aiethics.org/overview\",\n },\n {\n description:\n \"Insights into the technical challenges and solutions for scaling deep learning architectures.\",\n title: \"Scaling Deep Learning Models\",\n url: \"https://deeplearninghub.com/scaling-models\",\n },\n {\n description:\n \"A summary of the latest benchmarks and evaluation metrics for natural language understanding systems.\",\n title: \"Natural Language Understanding Benchmarks\",\n url: \"https://nlubenchmarks.com/latest\",\n },\n ],\n text:\n \"The technology continues to evolve rapidly, with new breakthroughs being announced regularly\",\n};\n\nconst Example = () => (\n

\n According to recent studies, artificial intelligence has shown remarkable\n progress in natural language processing.{\" \"}\n \n {citation.text}\n \n source.url)}\n />\n \n \n \n \n \n \n \n \n {citation.sources.map((source) => (\n \n \n \n ))}\n \n \n \n \n \n .\n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1105],"d63fe620-0ddd-11f1-acc9-42dde27851f2","file-tree.tsx","d63fe706-0ddd-11f1-acc9-42dde27851f2",93,["D",1771538185782],"\"use client\";\n\nimport {\n FileTree,\n FileTreeFile,\n FileTreeFolder,\n} from \"@/components/ai-elements/file-tree\";\nimport { useState } from \"react\";\n\nconst Example = () => {\n const [selectedPath, setSelectedPath] = useState();\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1113],"d6f4d01c-0ddd-11f1-bf1c-42dde27851f2","file-tree-selection.tsx","d6f4d0c6-0ddd-11f1-bf1c-42dde27851f2",127,["D",1771538185742],"\"use client\";\n\nimport {\n FileTree,\n FileTreeFile,\n FileTreeFolder,\n} from \"@/components/ai-elements/file-tree\";\nimport { useState } from \"react\";\n\nconst Example = () => {\n const [selectedPath, setSelectedPath] = useState();\n\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1121],"d75f1c74-0ddd-11f1-a81b-42dde27851f2","file-tree-expanded.tsx","d75f1d5a-0ddd-11f1-a81b-42dde27851f2",148,["D",1771538187728],"\"use client\";\n\nimport {\n FileTree,\n FileTreeFile,\n FileTreeFolder,\n} from \"@/components/ai-elements/file-tree\";\n\nconst Example = () => (\n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1129],"d76e3402-0ddd-11f1-a81b-42dde27851f2","file-tree-basic.tsx","d76e34f2-0ddd-11f1-a81b-42dde27851f2",150,["D",1771538187825],"\"use client\";\n\nimport {\n FileTree,\n FileTreeFile,\n FileTreeFolder,\n} from \"@/components/ai-elements/file-tree\";\n\nconst Example = () => (\n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1137],"d7504c1c-0ddd-11f1-a81b-42dde27851f2","environment-variables.tsx","d7504cee-0ddd-11f1-a81b-42dde27851f2",145,["D",1771538187642],"\"use client\";\n\nimport {\n EnvironmentVariable,\n EnvironmentVariableCopyButton,\n EnvironmentVariableGroup,\n EnvironmentVariableName,\n EnvironmentVariableRequired,\n EnvironmentVariables,\n EnvironmentVariablesContent,\n EnvironmentVariablesHeader,\n EnvironmentVariablesTitle,\n EnvironmentVariablesToggle,\n EnvironmentVariableValue,\n} from \"@/components/ai-elements/environment-variables\";\n\nconst variables = [\n {\n name: \"DATABASE_URL\",\n required: true,\n value: \"postgresql://localhost:5432/mydb\",\n },\n { name: \"API_KEY\", required: true, value: \"sk-1234567890abcdef\" },\n { name: \"NODE_ENV\", required: false, value: \"production\" },\n { name: \"PORT\", required: false, value: \"3000\" },\n];\n\nconst handleCopy = () => {\n console.log(\"Copied!\");\n};\n\nconst Example = () => (\n \n \n \n \n \n \n {variables.map((variable) => (\n \n \n \n {variable.required && }\n \n \n \n \n \n \n ))}\n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1145],"d6fd483c-0ddd-11f1-99d1-42dde27851f2","conversation.tsx","d6fd4904-0ddd-11f1-99d1-42dde27851f2",129,["D",1771538187101],"\"use client\";\n\nimport {\n Conversation,\n ConversationContent,\n ConversationDownload,\n ConversationEmptyState,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport { Message, MessageContent } from \"@/components/ai-elements/message\";\nimport { MessageSquareIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\nimport { useEffect, useState } from \"react\";\n\nconst messages: {\n key: string;\n content: string;\n role: \"user\" | \"assistant\";\n}[] = [\n {\n content: \"Hello, how are you?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"I'm good, thank you! How can I assist you today?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"I'm looking for information about your services.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content:\n \"Sure! We offer a variety of AI solutions. What are you interested in?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"I'm interested in natural language processing tools.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Great choice! We have several NLP APIs. Would you like a demo?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Yes, a demo would be helpful.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Alright, I can show you a sentiment analysis example. Ready?\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Yes, please proceed.\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Here is a sample: 'I love this product!' → Positive sentiment.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Impressive! Can it handle multiple languages?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Absolutely, our models support over 20 languages.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"How do I get started with the API?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"You can sign up on our website and get an API key instantly.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Is there a free trial available?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"Yes, we offer a 14-day free trial with full access.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"What kind of support do you provide?\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"We provide 24/7 chat and email support for all users.\",\n key: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"Thank you for the information!\",\n key: nanoid(),\n role: \"user\",\n },\n {\n content: \"You're welcome! Let me know if you have any more questions.\",\n key: nanoid(),\n role: \"assistant\",\n },\n];\n\nconst Example = () => {\n const [visibleMessages, setVisibleMessages] = useState<\n {\n key: string;\n content: string;\n role: \"user\" | \"assistant\";\n }[]\n >([]);\n\n useEffect(() => {\n let currentIndex = 0;\n const interval = setInterval(() => {\n if (currentIndex < messages.length && messages[currentIndex]) {\n const currentMessage = messages[currentIndex];\n setVisibleMessages((prev) => [\n ...prev,\n {\n content: currentMessage.content,\n key: currentMessage.key,\n role: currentMessage.role,\n },\n ]);\n currentIndex += 1;\n } else {\n clearInterval(interval);\n }\n }, 500);\n\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n \n {visibleMessages.length === 0\n ? (\n }\n title=\"Start a conversation\"\n />\n )\n : (\n visibleMessages.map(({ key, content, role }) => (\n \n {content}\n \n ))\n )}\n \n \n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1153],"d72b949e-0ddd-11f1-8b80-42dde27851f2","context.tsx","d72b9534-0ddd-11f1-8b80-42dde27851f2",138,["D",1771538187400],"\"use client\";\n\nimport {\n Context,\n ContextCacheUsage,\n ContextContent,\n ContextContentBody,\n ContextContentFooter,\n ContextContentHeader,\n ContextInputUsage,\n ContextOutputUsage,\n ContextReasoningUsage,\n ContextTrigger,\n} from \"@/components/ai-elements/context\";\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1161],"d64ebb0a-0ddd-11f1-bf00-42dde27851f2","confirmation.tsx","d64ebbc8-0ddd-11f1-bf00-42dde27851f2",96,["D",1771538185945],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationAction,\n ConfirmationActions,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst handleReject = () => {\n // In production, call respondToConfirmationRequest with approved: false\n};\n\nconst handleApprove = () => {\n // In production, call respondToConfirmationRequest with approved: true\n};\n\nconst Example = () => (\n

\n \n \n \n This tool wants to delete the file{\" \"}\n \n /tmp/example.txt\n \n . Do you approve this action?\n \n \n \n You approved this tool execution\n \n \n \n You rejected this tool execution\n \n \n \n \n Reject\n \n \n Approve\n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1169],"d776c5a4-0ddd-11f1-971a-42dde27851f2","confirmation-request.tsx","d776c68a-0ddd-11f1-971a-42dde27851f2",151,["D",1771538187816],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationAction,\n ConfirmationActions,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst handleReject = () => {\n // In production, call respondToConfirmationRequest with approved: false\n};\n\nconst handleApprove = () => {\n // In production, call respondToConfirmationRequest with approved: true\n};\n\nconst Example = () => (\n

\n \n \n \n This tool wants to execute a query on the production database:\n \n SELECT * FROM users WHERE role = 'admin'\n \n \n \n \n You approved this tool execution\n \n \n \n You rejected this tool execution\n \n \n \n \n Reject\n \n \n Approve\n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1177],"d622399a-0ddd-11f1-a7cf-42dde27851f2","confirmation-rejected.tsx","d6223a62-0ddd-11f1-a7cf-42dde27851f2",86,["D",1771538185586],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst Example = () => (\n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1185],"d63a69c0-0ddd-11f1-a7cf-42dde27851f2","confirmation-accepted.tsx","d63a6a56-0ddd-11f1-a7cf-42dde27851f2",92,["D",1771538185822],"\"use client\";\n\nimport {\n Confirmation,\n ConfirmationAccepted,\n ConfirmationRejected,\n ConfirmationRequest,\n ConfirmationTitle,\n} from \"@/components/ai-elements/confirmation\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { nanoid } from \"nanoid\";\n\nconst Example = () => (\n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1193],"d66fc6f6-0ddd-11f1-acc9-42dde27851f2","commit.tsx","d66fc7dc-0ddd-11f1-acc9-42dde27851f2",102,["D",1771538186160],"\"use client\";\n\nimport {\n Commit,\n CommitActions,\n CommitAuthor,\n CommitAuthorAvatar,\n CommitContent,\n CommitCopyButton,\n CommitFile,\n CommitFileAdditions,\n CommitFileChanges,\n CommitFileDeletions,\n CommitFileIcon,\n CommitFileInfo,\n CommitFilePath,\n CommitFiles,\n CommitFileStatus,\n CommitHash,\n CommitHeader,\n CommitInfo,\n CommitMessage,\n CommitMetadata,\n CommitSeparator,\n CommitTimestamp,\n} from \"@/components/ai-elements/commit\";\n\nconst handleCopy = () => {\n console.log(\"Copied hash!\");\n};\n\nconst hash = \"a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0\";\nconst timestamp = new Date(Date.now() - 1000 * 60 * 60 * 2);\n\nconst files = [\n {\n additions: 150,\n deletions: 0,\n path: \"src/auth/login.tsx\",\n status: \"added\" as const,\n },\n {\n additions: 45,\n deletions: 0,\n path: \"src/auth/logout.tsx\",\n status: \"added\" as const,\n },\n {\n additions: 23,\n deletions: 8,\n path: \"src/lib/session.ts\",\n status: \"modified\" as const,\n },\n];\n\nconst Example = () => (\n \n \n \n \n \n \n feat: Add user authentication flow\n \n {hash.slice(0, 7)}\n \n \n \n \n \n \n \n \n \n \n {files.map((file) => (\n \n \n \n \n {file.path}\n \n \n \n \n \n \n ))}\n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1201],"d73a699c-0ddd-11f1-91c8-42dde27851f2","code-block.tsx","d73a6a5a-0ddd-11f1-91c8-42dde27851f2",141,["D",1771538187485],"\"use client\";\n\nimport type { BundledLanguage } from \"shiki\";\n\nimport {\n CodeBlock,\n CodeBlockActions,\n CodeBlockCopyButton,\n CodeBlockFilename,\n CodeBlockHeader,\n CodeBlockLanguageSelector,\n CodeBlockLanguageSelectorContent,\n CodeBlockLanguageSelectorItem,\n CodeBlockLanguageSelectorTrigger,\n CodeBlockLanguageSelectorValue,\n CodeBlockTitle,\n} from \"@/components/ai-elements/code-block\";\nimport { FileIcon } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\n\nconst codeExamples = {\n go: {\n code: `package main\n\nimport \"fmt\"\n\nfunc greet(name string) string {\n return fmt.Sprintf(\"Hello, %s!\", name)\n}\n\nfunc main() {\n fmt.Println(greet(\"World\"))\n}`,\n filename: \"greet.go\",\n },\n python: {\n code: `def greet(name: str) -> str:\n return f\"Hello, {name}!\"\n\nprint(greet(\"World\"))`,\n filename: \"greet.py\",\n },\n rust: {\n code: `fn greet(name: &str) -> String {\n format!(\"Hello, {}!\", name)\n}\n\nfn main() {\n println!(\"{}\", greet(\"World\"));\n}`,\n filename: \"greet.rs\",\n },\n typescript: {\n code: `function greet(name: string): string {\n return \\`Hello, \\${name}!\\`;\n}\n\nconsole.log(greet(\"World\"));`,\n filename: \"greet.ts\",\n },\n} as const;\n\ntype Language = keyof typeof codeExamples;\n\nconst languages: { value: Language; label: string }[] = [\n { label: \"TypeScript\", value: \"typescript\" },\n { label: \"Python\", value: \"python\" },\n { label: \"Rust\", value: \"rust\" },\n { label: \"Go\", value: \"go\" },\n];\n\nconst handleCopy = () => {\n console.log(\"Copied code to clipboard\");\n};\n\nconst handleCopyError = () => {\n console.error(\"Failed to copy code to clipboard\");\n};\n\nconst Example = () => {\n const [language, setLanguage] = useState(\"typescript\");\n const { code, filename } = codeExamples[language];\n\n const handleLanguageChange = useCallback((value: string) => {\n setLanguage(value as Language);\n }, []);\n\n return (\n \n \n \n \n {filename}\n \n \n \n \n \n \n \n {languages.map((lang) => (\n \n {lang.label}\n \n ))}\n \n \n \n \n \n \n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1209],"d667f782-0ddd-11f1-a0cd-42dde27851f2","code-block-dark.tsx","d667f868-0ddd-11f1-a0cd-42dde27851f2",100,["D",1771538186118],"\"use client\";\n\nimport {\n CodeBlock,\n CodeBlockActions,\n CodeBlockCopyButton,\n CodeBlockFilename,\n CodeBlockHeader,\n CodeBlockTitle,\n} from \"@/components/ai-elements/code-block\";\nimport { FileIcon } from \"lucide-react\";\n\nconst handleCopy = () => {\n console.log(\"Copied code to clipboard\");\n};\n\nconst handleCopyError = () => {\n console.error(\"Failed to copy code to clipboard\");\n};\n\nconst code = `function MyComponent(props) {\n return (\n

Hello, {props.name}!

This is an example React component.

\n );\n}`;\n\nconst Example = () => (\n

\n \n \n \n \n MyComponent.jsx\n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1217],"d6168672-0ddd-11f1-a7af-42dde27851f2","checkpoint.tsx","d616874e-0ddd-11f1-a7af-42dde27851f2",83,["D",1771538185426],"\"use client\";\n\nimport {\n Checkpoint,\n CheckpointIcon,\n CheckpointTrigger,\n} from \"@/components/ai-elements/checkpoint\";\nimport {\n Conversation,\n ConversationContent,\n} from \"@/components/ai-elements/conversation\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { nanoid } from \"nanoid\";\nimport { Fragment, memo, useCallback, useState } from \"react\";\n\ninterface MessageType {\n id: string;\n role: \"user\" | \"assistant\";\n content: string;\n}\n\nconst initialMessages: MessageType[] = [\n {\n content: \"What is React?\",\n id: nanoid(),\n role: \"user\",\n },\n {\n content:\n \"React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Meta and a community of developers.\",\n id: nanoid(),\n role: \"assistant\",\n },\n {\n content: \"How does component state work?\",\n id: nanoid(),\n role: \"user\",\n },\n];\n\ninterface CheckpointItemProps {\n checkpoint: { messageCount: number; timestamp: Date };\n onRestore: (messageCount: number) => void;\n}\n\nconst CheckpointItem = memo(\n ({ checkpoint, onRestore }: CheckpointItemProps) => {\n const handleClick = useCallback(\n () => onRestore(checkpoint.messageCount),\n [onRestore, checkpoint.messageCount],\n );\n return (\n \n \n \n Restore checkpoint\n \n \n );\n },\n);\n\nCheckpointItem.displayName = \"CheckpointItem\";\n\nconst Example = () => {\n const [messages, setMessages] = useState(initialMessages);\n const [checkpoints] = useState([\n { messageCount: 2, timestamp: new Date(Date.now() - 3_600_000) },\n ]);\n\n const handleRestore = useCallback((messageCount: number) => {\n setMessages(initialMessages.slice(0, messageCount));\n }, []);\n\n return (\n

\n \n \n {messages.map((message, index) => {\n const checkpoint = checkpoints.find(\n (cp) => cp.messageCount === index + 1,\n );\n\n return (\n \n \n \n {message.content}\n \n \n {checkpoint && (\n \n )}\n \n );\n })}\n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1225],"d69164b4-0ddd-11f1-8ab1-42dde27851f2","audio-player.tsx","d6916572-0ddd-11f1-8ab1-42dde27851f2",108,["D",1771538186354],"\"use client\";\n\nimport type { Experimental_SpeechResult as SpeechResult } from \"ai\";\n\nimport {\n AudioPlayer,\n AudioPlayerControlBar,\n AudioPlayerDurationDisplay,\n AudioPlayerElement,\n AudioPlayerMuteButton,\n AudioPlayerPlayButton,\n AudioPlayerSeekBackwardButton,\n AudioPlayerSeekForwardButton,\n AudioPlayerTimeDisplay,\n AudioPlayerTimeRange,\n AudioPlayerVolumeRange,\n} from \"@/components/ai-elements/audio-player\";\nimport { useEffect, useState } from \"react\";\n\nconst Example = () => {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n const fetchData = async () => {\n const response = await fetch(\n \"https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/ElevenLabs_2025-11-10T22_07_46_Hayden_pvc_sp108_s50_sb75_se0_b_m2.mp3\",\n );\n const arrayBuffer = await response.arrayBuffer();\n const base64 = Buffer.from(arrayBuffer).toString(\"base64\");\n\n const newData: SpeechResult[\"audio\"] = {\n base64,\n format: \"mp3\",\n mediaType: \"audio/mpeg\",\n uint8Array: new Uint8Array(arrayBuffer),\n };\n\n setData(newData);\n };\n\n if (!data) {\n fetchData();\n }\n }, [data]);\n\n if (!data) {\n return

;\n }\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1233],"d694cb54-0ddd-11f1-b433-42dde27851f2","audio-player-remote.tsx","d694cc30-0ddd-11f1-b433-42dde27851f2",109,["D",1771538186399],"\"use client\";\n\nimport {\n AudioPlayer,\n AudioPlayerControlBar,\n AudioPlayerDurationDisplay,\n AudioPlayerElement,\n AudioPlayerMuteButton,\n AudioPlayerPlayButton,\n AudioPlayerSeekBackwardButton,\n AudioPlayerSeekForwardButton,\n AudioPlayerTimeDisplay,\n AudioPlayerTimeRange,\n AudioPlayerVolumeRange,\n} from \"@/components/ai-elements/audio-player\";\n\nconst Example = () => (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n);\n\nexport default Example;\n",[],[195,660,661,671,1241],"d6d56d30-0ddd-11f1-99d1-42dde27851f2","attachments.tsx","d6d56e20-0ddd-11f1-99d1-42dde27851f2",120,["D",1771538186807],"\"use client\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst initialAttachments = [\n {\n filename: \"mountain-landscape.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"ocean-sunset.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=400&fit=crop\",\n },\n {\n filename: \"document.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n filename: \"video.mp4\",\n id: nanoid(),\n mediaType: \"video/mp4\",\n type: \"file\" as const,\n url: \"\",\n },\n];\n\ninterface AttachmentItemProps {\n attachment: (typeof initialAttachments)[0];\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\nconst Example = () => {\n const [attachments, setAttachments] = useState(initialAttachments);\n\n const handleRemove = useCallback((id: string) => {\n setAttachments((prev) => prev.filter((a) => a.id !== id));\n }, []);\n\n return (\n

\n \n {attachments.map((attachment) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1249],"d6286d42-0ddd-11f1-bf1c-42dde27851f2","attachments-list.tsx","d6286e00-0ddd-11f1-bf1c-42dde27851f2",87,["D",1771538185670],"\"use client\";\n\nimport {\n Attachment,\n AttachmentInfo,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst initialAttachments = [\n {\n filename: \"mountain-landscape.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"quarterly-report-2024.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n filename: \"product-demo.mp4\",\n id: nanoid(),\n mediaType: \"video/mp4\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n filename: \"api-reference\",\n id: nanoid(),\n mediaType: \"text/html\",\n title: \"API Documentation\",\n type: \"source-document\" as const,\n url: \"https://docs.example.com/api\",\n },\n {\n filename: \"meeting-recording.mp3\",\n id: nanoid(),\n mediaType: \"audio/mpeg\",\n type: \"file\" as const,\n url: \"\",\n },\n];\n\ninterface AttachmentItemProps {\n attachment: (typeof initialAttachments)[0];\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n return (\n \n \n \n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\nconst Example = () => {\n const [attachments, setAttachments] = useState(initialAttachments);\n\n const handleRemove = useCallback((id: string) => {\n setAttachments((prev) => prev.filter((a) => a.id !== id));\n }, []);\n\n return (\n

\n \n {attachments.map((attachment) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1257],"d8576032-0ddd-11f1-b230-42dde27851f2","attachments-inline.tsx","d857610e-0ddd-11f1-b230-42dde27851f2",169,["D",1771538187070],"\"use client\";\n\nimport {\n Attachment,\n AttachmentHoverCard,\n AttachmentHoverCardContent,\n AttachmentHoverCardTrigger,\n AttachmentInfo,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n getAttachmentLabel,\n getMediaCategory,\n} from \"@/components/ai-elements/attachments\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useCallback, useState } from \"react\";\n\nconst initialAttachments = [\n {\n filename: \"mountain-landscape.jpg\",\n id: nanoid(),\n mediaType: \"image/jpeg\",\n type: \"file\" as const,\n url:\n \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop\",\n },\n {\n filename: \"quarterly-report.pdf\",\n id: nanoid(),\n mediaType: \"application/pdf\",\n type: \"file\" as const,\n url: \"\",\n },\n {\n id: nanoid(),\n mediaType: \"text/html\",\n title: \"React Documentation\",\n type: \"source-document\" as const,\n url: \"https://react.dev\",\n },\n {\n filename: \"podcast-episode.mp3\",\n id: nanoid(),\n mediaType: \"audio/mp3\",\n type: \"file\" as const,\n url: \"\",\n },\n];\n\ninterface AttachmentItemProps {\n attachment: (typeof initialAttachments)[0];\n onRemove: (id: string) => void;\n}\n\nconst AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {\n const handleRemove = useCallback(\n () => onRemove(attachment.id),\n [onRemove, attachment.id],\n );\n const mediaCategory = getMediaCategory(attachment);\n const label = getAttachmentLabel(attachment);\n\n return (\n \n \n \n

\n \n

\n \n \n \n \n

\n {mediaCategory === \"image\" &&\n attachment.type === \"file\" &&\n attachment.url && (\n

\n \n

\n )}\n

{label}

\n {attachment.mediaType && (\n

\n {attachment.mediaType}\n

\n )}\n

\n \n \n );\n});\n\nAttachmentItem.displayName = \"AttachmentItem\";\n\nconst Example = () => {\n const [attachments, setAttachments] = useState(initialAttachments);\n\n const handleRemove = useCallback((id: string) => {\n setAttachments((prev) => prev.filter((a) => a.id !== id));\n }, []);\n\n return (\n

\n \n {attachments.map((attachment) => (\n \n ))}\n \n

\n );\n};\n\nexport default Example;\n",[],[195,660,661,671,1265],"d715c178-0ddd-11f1-8b80-42dde27851f2","artifact.tsx","d715c25e-0ddd-11f1-8b80-42dde27851f2",134,["D",1771538187236],"\"use client\";\n\nimport {\n Artifact,\n ArtifactAction,\n ArtifactActions,\n ArtifactContent,\n ArtifactDescription,\n ArtifactHeader,\n ArtifactTitle,\n} from \"@/components/ai-elements/artifact\";\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\nimport {\n CopyIcon,\n DownloadIcon,\n PlayIcon,\n RefreshCwIcon,\n ShareIcon,\n} from \"lucide-react\";\n\nconst handleRun = () => {\n console.log(\"Run\");\n};\n\nconst handleCopy = () => {\n console.log(\"Copy\");\n};\n\nconst handleRegenerate = () => {\n console.log(\"Regenerate\");\n};\n\nconst handleDownload = () => {\n console.log(\"Download\");\n};\n\nconst handleShare = () => {\n console.log(\"Share\");\n};\n\nconst code = `# Dijkstra's Algorithm implementation\nimport heapq\n\ndef dijkstra(graph, start):\n distances = {node: float('inf') for node in graph}\n distances[start] = 0\n heap = [(0, start)]\n visited = set()\n \n while heap:\n current_distance, current_node = heapq.heappop(heap)\n if current_node in visited:\n continue\n visited.add(current_node)\n \n for neighbor, weight in graph[current_node].items():\n distance = current_distance + weight\n if distance < distances[neighbor]:\n distances[neighbor] = distance\n heapq.heappush(heap, (distance, neighbor))\n \n return distances\n\n# Example graph\n graph = {\n 'A': {'B': 1, 'C': 4},\n 'B': {'A': 1, 'C': 2, 'D': 5},\n 'C': {'A': 4, 'B': 2, 'D': 1},\n 'D': {'B': 5, 'C': 1}\n}\n\nprint(dijkstra(graph, 'A'))`;\n\nconst Example = () => (\n \n \n

\n Dijkstra's Algorithm Implementation\n Updated 1 minute ago\n

\n \n \n \n \n \n \n \n

\n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1273],"d5f845fe-0ddd-11f1-9539-42dde27851f2","agent.tsx","d5f846b2-0ddd-11f1-9539-42dde27851f2",78,["D",1771538185384],"\"use client\";\n\nimport {\n Agent,\n AgentContent,\n AgentHeader,\n AgentInstructions,\n AgentOutput,\n AgentTool,\n AgentTools,\n} from \"@/components/ai-elements/agent\";\nimport { z } from \"zod\";\n\nconst webSearchTool = {\n description: \"Search the web for information\",\n inputSchema: z.object({\n query: z.string().describe(\"The search query\"),\n }),\n};\n\nconst readUrlTool = {\n description: \"Read and parse a URL\",\n inputSchema: z.object({\n url: z.string().url().describe(\"The URL to read\"),\n }),\n};\n\nconst summarizeTool = {\n description: \"Summarize text into key points\",\n inputSchema: z.object({\n maxPoints: z.number().optional().describe(\"Maximum number of key points\"),\n text: z.string().describe(\"The text to summarize\"),\n }),\n};\n\nconst outputSchema = `z.object({\n sentiment: z.enum(['positive', 'negative', 'neutral']),\n score: z.number(),\n summary: z.string(),\n})`;\n\nconst Example = () => (\n \n \n \n \n You are a helpful research assistant. Your job is to search the web for\n information and summarize findings for the user. Always cite your\n sources and provide accurate, up-to-date information.\n \n \n \n \n \n \n \n \n \n);\n\nexport default Example;\n",[],[195,660,661,671,1281],"d4abe7b4-0ddd-11f1-bb81-42dde27851f2",13,["D",1771538183208],[263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340],[195,660,661,671],"d59be052-0ddd-11f1-b72b-42dde27851f2","web-preview.md","d59be14c-0ddd-11f1-b72b-42dde27851f2","d49faa8a-0ddd-11f1-affc-42dde27851f2",56,["D",1771538184708],"# Web Preview\n\nA composable component for previewing the result of a generated UI, with support\nfor live examples and code display.\n\nThe `WebPreview` component provides a flexible way to showcase the result of a\ngenerated UI component, along with its source code. It is designed for\ndocumentation and demo purposes, allowing users to interact with live examples\nand view the underlying implementation.\n\nSee `scripts/web-preview.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add web-preview\n```\n\n## Usage with AI SDK\n\nBuild a simple v0 clone using the\n[v0 Platform API](https://v0.dev/docs/api/platform).\n\nInstall the `v0-sdk` package:\n\n```package-install\nnpm i v0-sdk\n```\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n WebPreview,\n WebPreviewBody,\n WebPreviewNavigation,\n WebPreviewUrl,\n} from \"@/components/ai-elements/web-preview\";\nimport { useState } from \"react\";\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Spinner } from \"@/components/ui/spinner\";\n\nconst WebPreviewDemo = () => {\n const [previewUrl, setPreviewUrl] = useState(\"\");\n const [prompt, setPrompt] = useState(\"\");\n const [isGenerating, setIsGenerating] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!prompt.trim()) return;\n setPrompt(\"\");\n\n setIsGenerating(true);\n try {\n const response = await fetch(\"/api/v0\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt }),\n });\n\n const data = await response.json();\n setPreviewUrl(data.demo || \"/\");\n console.log(\"Generation finished:\", data);\n } catch (error) {\n console.error(\"Generation failed:\", error);\n } finally {\n setIsGenerating(false);\n }\n };\n\n return (\n

\n {isGenerating\n ? (\n

\n \n

\n Generating app, this may take a few seconds...\n

\n )\n : previewUrl\n ? (\n \n \n \n \n \n \n )\n : (\n

\n Your generated app will appear here\n

\n )}\n

\n\n \n setPrompt(e.currentTarget.value)}\n className=\"pr-12 min-h-[60px]\"\n />\n \n \n

\n );\n};\n\nexport default WebPreviewDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/v0/route.ts\"\nimport { v0 } from \"v0-sdk\";\n\nexport async function POST(req: Request) {\n const { prompt }: { prompt: string } = await req.json();\n\n const result = await v0.chats.create({\n system: \"You are an expert coder\",\n message: prompt,\n modelConfiguration: {\n modelId: \"v0-1.5-sm\",\n imageGenerations: false,\n thinking: false,\n },\n });\n\n return Response.json({\n demo: result.demo,\n webUrl: result.webUrl,\n });\n}\n```\n\n## Features\n\n- Live preview of UI components\n- Composable architecture with dedicated sub-components\n- Responsive design modes (Desktop, Tablet, Mobile)\n- Navigation controls with back/forward functionality\n- URL input and example selector\n- Full screen mode support\n- Console logging with timestamps\n- Context-based state management\n- Consistent styling with the design system\n- Easy integration into documentation pages\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `defaultUrl` | `string` | - | The initial URL to load in the preview. |\n| `onUrlChange` | `(url: string) => void` | - | Callback fired when the URL changes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the navigation container. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `tooltip` | `string` | - | Tooltip text to display on hover. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------ | ------- | ----------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Input component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------- |\n| `loading` | `React.ReactNode` | - | Optional loading indicator to display over the preview. |\n| `...props` | `React.IframeHTMLAttributes` | - | Any other props are spread to the underlying iframe. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `logs` | `Array<{ level:` | - | Console log entries to display in the console panel. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n",[],[195,660,661,1302,1294],"references","d5981f6c-0ddd-11f1-845e-42dde27851f2","voice-selector.md","d5982016-0ddd-11f1-845e-42dde27851f2",55,["D",1771538184750],"# Voice Selector\n\nA composable dialog component for selecting AI voices with metadata display and\nsearch functionality.\n\nThe `VoiceSelector` component provides a flexible and composable interface for\nselecting AI voices. Built on shadcn/ui's Dialog and Command components, it\nfeatures a searchable voice list with support for metadata display (gender,\naccent, age), grouping, and customizable layouts. The component includes a\ncontext provider for accessing voice selection state from any nested component.\n\nSee `scripts/voice-selector.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add voice-selector\n```\n\n## Features\n\n- Fully composable architecture with granular control components\n- Built on shadcn/ui Dialog and Command components\n- React Context API for accessing state in nested components\n- Searchable voice list with real-time filtering\n- Support for voice metadata with icons and emojis (gender icons, accent flags,\n age)\n- Voice preview button with play/pause/loading states\n- Voice grouping with separators and bullet dividers\n- Keyboard navigation support\n- Controlled and uncontrolled component patterns\n- Full TypeScript support with proper types for all components\n\n## Props\n\n### ``\n\nRoot Dialog component that provides context for all child components. Manages\nboth voice selection and dialog open states.\n\n| Prop | Type | Default | Description |\n| --------------- | ------------------------------------- | ------------------- | --------------------------------------------------------------------------- |\n| `value` | `string` | - | The selected voice ID (controlled). |\n| `defaultValue` | `string` | - | The default selected voice ID (uncontrolled). |\n| `onValueChange` | `(value: string | undefined) => void` | - |\n| `defaultOpen` | `boolean` | `false` | The default open state (uncontrolled). |\n| `open` | `boolean` | - | The open state (controlled). |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. |\n| `modal` | `boolean` | `true` | Whether the dialog is modal (blocks interaction with the rest of the page). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Dialog component. |\n\n### ``\n\nButton or element that opens the voice selector dialog.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |\n| `asChild` | `boolean` | `false` | Change the default rendered element for the one passed as a child, merging their props and behavior. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the DialogTrigger component. |\n\n### ``\n\nContainer for the Command component and voice list, rendered inside the dialog.\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |\n| `title` | `ReactNode` | - | The title for screen readers. Hidden visually but accessible to assistive technologies. |\n| `className` | `string` | - | Additional CSS classes to apply to the dialog content. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the DialogContent component. |\n\n### ``\n\nAlternative dialog implementation using CommandDialog for a full-screen command\npalette style.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | ---------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandDialog component. |\n\n### ``\n\nSearch input for filtering voices.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `placeholder` | `string` | - | Placeholder text for the search input. |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandInput component. |\n\n### ``\n\nScrollable container for voice items and groups.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandList component. |\n\n### ``\n\nMessage shown when no voices match the search query.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `children` | `ReactNode` | - | The message to display. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. |\n\n### ``\n\nGroups related voices together with an optional heading.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `heading` | `string` | - | The heading text for the group. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandGroup component. |\n\n### ``\n\nSelectable item representing a voice.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ---------------------------------------------------------------- |\n| `value` | `string` | - | The unique identifier for this voice. Used for search filtering. |\n| `onSelect` | `(value: string) => void` | - | Callback fired when the voice is selected. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandItem component. |\n\n### ``\n\nVisual separator between voice groups.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandSeparator component. |\n\n### ``\n\nDisplays the voice name with proper styling.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays the voice gender metadata with icons from Lucide. Supports multiple\ngender identities with corresponding icons.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------------------- |\n| `value` | `unknown` | - | The gender value that determines which icon to display. Supported values: |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `children` | `ReactNode` | - | Override the icon with custom content. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays the voice accent metadata with emoji flags representing different\ncountries/regions.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------ |\n| `value` | `unknown` | - | The accent value that determines which flag emoji to display. Supports 27 different accents including: |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `children` | `ReactNode` | - | Override the flag emoji with custom content. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays the voice age metadata with muted styling and tabular numbers for\nconsistent alignment.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays a description for the voice with muted styling.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nContainer for grouping voice attributes (gender, accent, age) together. Use with\n`VoiceSelectorBullet` for separation.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ---------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\nDisplays a bullet separator (•) between voice attributes. Hidden from screen\nreaders via `aria-hidden`.\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nDisplays keyboard shortcuts for voice items.\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandShortcut component. |\n\n### ``\n\nA button that allows users to preview/play a voice sample before selecting it.\nShows play, pause, or loading icons based on state.\n\n| Prop | Type | Default | Description |\n| ----------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------ |\n| `playing` | `boolean` | - | Whether the voice is currently playing. Shows pause icon when true. |\n| `loading` | `boolean` | - | Whether the voice preview is loading. Shows loading spinner and disables the button. |\n| `onPlay` | `() => void` | - | Callback fired when the preview button is clicked. |\n| `className` | `string` | - | Additional CSS classes to apply. |\n| `...props` | `Omit\n

Selected voice: {value ?? \"None\"}

\n \n

\n );\n}\n```\n\n#### Return Value\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------- | ------------------- | ------------------------------------------ |\n| `value` | `string | undefined` | - |\n| `setValue` | `(value: string | undefined) => void` | - |\n| `open` | `boolean` | - | Whether the dialog is currently open. |\n| `setOpen` | `(open: boolean) => void` | - | Function to control the dialog open state. |\n",[],[195,660,661,1302,1304],"d5a1e4fc-0ddd-11f1-acc9-42dde27851f2","transcription.md","d5a1e5c4-0ddd-11f1-acc9-42dde27851f2",58,["D",1771538184813],"# Transcription\n\nA composable component for displaying interactive, synchronized transcripts from\nAI SDK transcribe() results with click-to-seek functionality.\n\nThe `Transcription` component provides a flexible render props interface for\ndisplaying audio transcripts with synchronized playback. It automatically\nhighlights the current segment based on playback time and supports click-to-seek\nfunctionality for interactive navigation.\n\nSee `scripts/transcription.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add transcription\n```\n\n## Features\n\n- Render props pattern for maximum flexibility\n- Automatic segment highlighting based on current time\n- Click-to-seek functionality for interactive navigation\n- Controlled and uncontrolled component patterns\n- Automatic filtering of empty segments\n- Visual state indicators (active, past, future)\n- Built on Radix UI's `useControllableState` for flexible state management\n- Full TypeScript support with AI SDK transcription types\n\n## Props\n\n### ``\n\nRoot component that provides context and manages transcript state. Uses render\nprops pattern for rendering segments.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `segments` | `TranscriptionSegment[]` | - | Array of transcription segments from AI SDK transcribe() function. |\n| `currentTime` | `number` | `0` | Current playback time in seconds (controlled). |\n| `onSeek` | `(time: number) => void` | - | Callback fired when a segment is clicked or when currentTime changes. |\n| `children` | `(segment: TranscriptionSegment, index: number) => ReactNode` | - | Render function that receives each segment and its index. |\n| `...props` | `Omit`\n\nIndividual segment button with automatic state styling and click-to-seek\nfunctionality.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `segment` | `TranscriptionSegment` | - | The transcription segment data. |\n| `index` | `number` | - | The segment index. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the button element. |\n\n## Behavior\n\n### Render Props Pattern\n\nThe component uses a render props pattern where the `children` prop is a\nfunction that receives each segment and its index. This provides maximum\nflexibility for custom rendering while still benefiting from automatic state\nmanagement and context.\n\n### Segment Highlighting\n\nSegments are automatically styled based on their relationship to the current\nplayback time:\n\n- **Active** (`isActive`): When `currentTime` is within the segment's time\n range. Styled with primary color.\n- **Past** (`isPast`): When `currentTime` is after the segment's end time.\n Styled with muted foreground.\n- **Future**: When `currentTime` is before the segment's start time. Styled with\n dimmed muted foreground.\n\n### Click-to-Seek\n\nWhen `onSeek` is provided, segments become interactive buttons. Clicking a\nsegment calls `onSeek` with the segment's start time, allowing your audio/video\nplayer to seek to that position.\n\n### Empty Segment Filtering\n\nThe component automatically filters out segments with empty or whitespace-only\ntext to avoid rendering unnecessary elements.\n\n### State Management\n\nUses Radix UI's `useControllableState` hook to support both controlled and\nuncontrolled patterns. When `currentTime` is provided, the component operates in\ncontrolled mode. Otherwise, it maintains its own internal state.\n\n## Data Format\n\nThe component expects segments from the AI SDK `transcribe()` function:\n\n```ts\ntype TranscriptionSegment = {\n text: string;\n startSecond: number;\n endSecond: number;\n};\n```\n\n## Styling\n\nThe component uses data attributes for custom styling:\n\n- `data-slot=\"transcription\"`: Root container\n- `data-slot=\"transcription-segment\"`: Individual segment button\n- `data-active`: Present on the currently playing segment\n- `data-index`: The segment's index in the array\n\nDefault segment appearance:\n\n- Active segment: `text-primary` (primary brand color)\n- Past segments: `text-muted-foreground`\n- Future segments: `text-muted-foreground/60` (dimmed)\n- Interactive segments: `cursor-pointer hover:text-foreground`\n- Non-interactive segments: `cursor-default`\n\n## Accessibility\n\n- Uses semantic `\n\n {weatherTool && (\n \n \n \n \n \n {formatWeatherResult(weatherTool.output)}\n \n }\n errorText={weatherTool.errorText}\n />\n \n \n )}\n

\n );\n};\n\nfunction formatWeatherResult(result: WeatherToolOutput): string {\n return `**Weather for ${result.location}**\n\n**Temperature:** ${result.temperature} \n**Conditions:** ${result.conditions} \n**Humidity:** ${result.humidity} \n**Wind Speed:** ${result.windSpeed} \n\n*Last updated: ${result.lastUpdated}*`;\n}\n\nexport default Example;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/weather/route.tsx\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\nimport { z } from \"zod\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { messages }: { messages: UIMessage[] } = await req.json();\n\n const result = streamText({\n model: \"openai/gpt-4o\",\n messages: await convertToModelMessages(messages),\n tools: {\n fetch_weather_data: {\n description: \"Fetch weather information for a specific location\",\n parameters: z.object({\n location: z\n .string()\n .describe(\"The city or location to get weather for\"),\n units: z\n .enum([\"celsius\", \"fahrenheit\"])\n .default(\"celsius\")\n .describe(\"Temperature units\"),\n }),\n inputSchema: z.object({\n location: z.string(),\n units: z.enum([\"celsius\", \"fahrenheit\"]).default(\"celsius\"),\n }),\n execute: async ({ location, units }) => {\n await new Promise((resolve) => setTimeout(resolve, 1500));\n\n const temp = units === \"celsius\"\n ? Math.floor(Math.random() * 35) + 5\n : Math.floor(Math.random() * 63) + 41;\n\n return {\n location,\n temperature: `${temp}°${units === \"celsius\" ? \"C\" : \"F\"}`,\n conditions: \"Sunny\",\n humidity: `12%`,\n windSpeed: `35 ${units === \"celsius\" ? \"km/h\" : \"mph\"}`,\n lastUpdated: new Date().toLocaleString(),\n };\n },\n },\n },\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n## Features\n\n- Collapsible interface for showing/hiding tool details\n- Visual status indicators with icons and badges\n- Support for multiple tool execution states (pending, running, completed,\n error)\n- Formatted parameter display with JSON syntax highlighting\n- Result and error handling with appropriate styling\n- Composable structure for flexible layouts\n- Accessible keyboard navigation and screen reader support\n- Consistent styling that matches your design system\n- Auto-opens completed tools by default for better UX\n\n## Examples\n\n### Input Streaming (Pending)\n\nShows a tool in its initial state while parameters are being processed.\n\nSee `scripts/tool-input-streaming.tsx` for this example.\n\n### Input Available (Running)\n\nShows a tool that's actively executing with its parameters.\n\nSee `scripts/tool-input-available.tsx` for this example.\n\n### Output Available (Completed)\n\nShows a completed tool with successful results. Opens by default to show the\nresults. In this instance, the output is a JSON object, so we can use the\n`CodeBlock` component to display it.\n\nSee `scripts/tool-output-available.tsx` for this example.\n\n### Output Error\n\nShows a tool that encountered an error during execution. Opens by default to\ndisplay the error.\n\nSee `scripts/tool-output-error.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the root Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |\n| `title` | `string` | - | Custom title to display instead of the derived tool name. |\n| `type` | `ToolUIPart[` | Required | The type/name of the tool. |\n| `state` | `ToolUIPart[` | Required | The current state of the tool (input-streaming, input-available, output-available, or output-error). |\n| `toolName` | `string` | - | Required when type is |\n| `className` | `string` | - | Additional CSS classes to apply to the header. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | --------------------------------------------------------------------- |\n| `input` | `ToolUIPart[` | - | The input parameters passed to the tool, displayed as formatted JSON. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------- |\n| `output` | `React.ReactNode` | - | The output/result of the tool execution. |\n| `errorText` | `ToolUIPart[` | - | An error message if the tool execution failed. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n\n## Type Exports\n\n### `ToolPart`\n\nUnion type representing both static and dynamic tool UI parts.\n\n```tsx\ntype ToolPart = ToolUIPart | DynamicToolUIPart;\n```\n\n## Utilities\n\n### `getStatusBadge`\n\nReturns a Badge component with icon and label based on tool state.\n\n```tsx\nimport { getStatusBadge } from \"@/components/ai-elements/tool\";\n\n// Returns a Badge with appropriate icon and label\nconst badge = getStatusBadge(\"output-available\");\n```\n\nSupported states:\n\n- `input-streaming` - \"Pending\"\n- `input-available` - \"Running\"\n- `approval-requested` - \"Awaiting Approval\"\n- `approval-responded` - \"Responded\"\n- `output-available` - \"Completed\"\n- `output-error` - \"Error\"\n- `output-denied` - \"Denied\"\n",[],[195,660,661,1302,1328],"d5a5199c-0ddd-11f1-b67a-42dde27851f2","test-results.md","d5a51a64-0ddd-11f1-b67a-42dde27851f2",59,["D",1771538184840],"# Test Results\n\nDisplay test suite results with pass/fail/skip status and error details.\n\nThe `TestResults` component displays test suite results including summary\nstatistics, progress, individual tests, and error details.\n\nSee `scripts/test-results.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add test-results\n```\n\n## Features\n\n- Summary statistics (passed/failed/skipped)\n- Progress bar visualization\n- Collapsible test suites\n- Individual test status and duration\n- Error messages with stack traces\n- Color-coded status indicators\n\n## Status Colors\n\n| Status | Color | Use Case |\n| --------- | --------------- | ---------------- |\n| `passed` | Green | Test succeeded |\n| `failed` | Red | Test failed |\n| `skipped` | Yellow | Test skipped |\n| `running` | Blue (animated) | Test in progress |\n\n## Examples\n\n### Basic Usage\n\nSee `scripts/test-results-basic.tsx` for this example.\n\n### With Test Suites\n\nSee `scripts/test-results-suites.tsx` for this example.\n\n### With Error Details\n\nSee `scripts/test-results-errors.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | --------- | ------- | ----------------------- |\n| `summary` | `unknown` | - | Test results summary. |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | --------- | ------- | --------------------- |\n| `name` | `string` | - | Suite name. |\n| `status` | `unknown` | - | Overall suite status. |\n| `defaultOpen` | `boolean` | - | Initially expanded. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------- | ------- | -------------------- |\n| `name` | `string` | - | Test name. |\n| `status` | `unknown` | - | Test status. |\n| `duration` | `number` | - | Test duration in ms. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `passed` | `number` | `0` | Number of passed tests. |\n| `failed` | `number` | `0` | Number of failed tests. |\n| `skipped` | `number` | `0` | Number of skipped tests. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | -------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the p element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the pre element. |\n",[],[195,660,661,1302,1336],"d5b215e8-0ddd-11f1-8b80-42dde27851f2","terminal.md","d5b216a6-0ddd-11f1-8b80-42dde27851f2",62,["D",1771538184603],"# Terminal\n\nDisplay streaming console output with full ANSI color support.\n\nThe `Terminal` component displays console output with ANSI color support,\nstreaming indicators, and auto-scroll functionality.\n\nSee `scripts/terminal.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add terminal\n```\n\n## Features\n\n- Full ANSI color support (256 colors, bold, italic, underline)\n- Streaming mode with cursor animation\n- Auto-scroll to latest output\n- Copy output to clipboard\n- Clear button support\n- Dark terminal theme\n\n## ANSI Support\n\nThe Terminal uses `ansi-to-react` to parse ANSI escape codes:\n\n```bash\n\\x1b[32m✓\\x1b[0m Success # Green checkmark\n\\x1b[31m✗\\x1b[0m Error # Red X\n\\x1b[33mwarn\\x1b[0m Warning # Yellow text\n\\x1b[1mBold\\x1b[0m # Bold text\n```\n\n## Examples\n\n### Basic Usage\n\nSee `scripts/terminal-basic.tsx` for this example.\n\n### Streaming Mode\n\nSee `scripts/terminal-streaming.tsx` for this example.\n\n### With Clear Button\n\nSee `scripts/terminal-clear.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------ | ------- | ------------------------------------------------ |\n| `output` | `string` | - | Terminal output text (supports ANSI codes). |\n| `isStreaming` | `boolean` | `false` | Show streaming indicator. |\n| `autoScroll` | `boolean` | `true` | Auto-scroll to bottom on new output. |\n| `onClear` | `() => void` | - | Callback to clear output (enables clear button). |\n| `className` | `string` | - | Additional CSS classes. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| --------- | ------------------------ | ------- | ----------------------------------- |\n| `onCopy` | `() => void` | - | Callback after successful copy. |\n| `onError` | `(error: Error) => void` | - | Callback if copying fails. |\n| `timeout` | `number` | `2000` | Duration to show copied state (ms). |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | --------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n",[],[195,660,661,1302,1344],"d5ab951a-0ddd-11f1-9539-42dde27851f2","task.md","d5ab95ec-0ddd-11f1-9539-42dde27851f2",60,["D",1771538184885],"# Task\n\nA collapsible task list component for displaying AI workflow progress, with\nstatus indicators and optional descriptions.\n\nThe `Task` component provides a structured way to display task lists or workflow\nprogress with collapsible details, status indicators, and progress tracking. It\nconsists of a main `Task` container with `TaskTrigger` for the clickable header\nand `TaskContent` for the collapsible content area.\n\nSee `scripts/task.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add task\n```\n\n## Usage with AI SDK\n\nBuild a mock async programming agent using\n[`experimental_generateObject`](/docs/reference/ai-sdk-ui/use-object).\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { experimental_useObject as useObject } from \"@ai-sdk/react\";\nimport {\n Task,\n TaskContent,\n TaskItem,\n TaskItemFile,\n TaskTrigger,\n} from \"@/components/ai-elements/task\";\nimport { Button } from \"@/components/ui/button\";\nimport { tasksSchema } from \"@/app/api/task/route\";\nimport {\n SiCss,\n SiHtml5,\n SiJavascript,\n SiJson,\n SiMarkdown,\n SiReact,\n SiTypescript,\n} from \"@icons-pack/react-simple-icons\";\n\nconst iconMap = {\n react: { component: SiReact, color: \"#149ECA\" },\n typescript: { component: SiTypescript, color: \"#3178C6\" },\n javascript: { component: SiJavascript, color: \"#F7DF1E\" },\n css: { component: SiCss, color: \"#1572B6\" },\n html: { component: SiHtml5, color: \"#E34F26\" },\n json: { component: SiJson, color: \"#000000\" },\n markdown: { component: SiMarkdown, color: \"#000000\" },\n};\n\nconst TaskDemo = () => {\n const { object, submit, isLoading } = useObject({\n api: \"/api/agent\",\n schema: tasksSchema,\n });\n\n const handleSubmit = (taskType: string) => {\n submit({ prompt: taskType });\n };\n\n const renderTaskItem = (item: any, index: number) => {\n if (item?.type === \"file\" && item.file) {\n const iconInfo = iconMap[item.file.icon as keyof typeof iconMap];\n if (iconInfo) {\n const IconComponent = iconInfo.component;\n return (\n \n {item.text}\n \n \n {item.file.name}\n \n \n );\n }\n }\n return item?.text || \"\";\n };\n\n return (\n

\n handleSubmit(\"React component development\")}\n disabled={isLoading}\n variant=\"outline\"\n >\n React Development\n \n

\n\n

\n {isLoading && !object && (\n

Generating tasks...

\n )}\n\n {object?.tasks?.map((task: any, taskIndex: number) => (\n \n \n \n {task.items?.map((item: any, itemIndex: number) => (\n \n {renderTaskItem(item, itemIndex)}\n \n ))}\n \n \n ))}\n

\n );\n};\n\nexport default TaskDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/agent.ts\"\nimport { streamObject } from \"ai\";\nimport { z } from \"zod\";\n\nexport const taskItemSchema = z.object({\n type: z.enum([\"text\", \"file\"]),\n text: z.string(),\n file: z\n .object({\n name: z.string(),\n icon: z.string(),\n color: z.string().optional(),\n })\n .optional(),\n});\n\nexport const taskSchema = z.object({\n title: z.string(),\n items: z.array(taskItemSchema),\n status: z.enum([\"pending\", \"in_progress\", \"completed\"]),\n});\n\nexport const tasksSchema = z.object({\n tasks: z.array(taskSchema),\n});\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { prompt } = await req.json();\n\n const result = streamObject({\n model: \"openai/gpt-4o\",\n schema: tasksSchema,\n prompt:\n `You are an AI assistant that generates realistic development task workflows. Generate a set of tasks that would occur during ${prompt}.\n\n Each task should have:\n - A descriptive title\n - Multiple task items showing the progression\n - Some items should be plain text, others should reference files\n - Use realistic file names and appropriate file types\n - Status should progress from pending to in_progress to completed\n\n For file items, use these icon types: 'react', 'typescript', 'javascript', 'css', 'html', 'json', 'markdown'\n\n Generate 3-4 tasks total, with 4-6 items each.`,\n });\n\n return result.toTextStreamResponse();\n}\n```\n\n## Features\n\n- Visual icons for pending, in-progress, completed, and error states\n- Expandable content for task descriptions and additional information\n- Built-in progress counter showing completed vs total tasks\n- Optional progressive reveal of tasks with customizable timing\n- Support for custom content within task items\n- Full type safety with proper TypeScript definitions\n- Keyboard navigation and screen reader support\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------ | ------- | ------------------------------------------------------------- |\n| `defaultOpen` | `boolean` | `true` | Whether the task is open by default. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the root Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |\n| `title` | `string` | Required | The title of the task that will be displayed in the trigger. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |\n",[],[195,660,661,1302,1352],"d58a3762-0ddd-11f1-adf3-42dde27851f2","suggestion.md","d58a3852-0ddd-11f1-adf3-42dde27851f2",52,["D",1771538184653],"# Suggestion\n\nA suggestion component that displays a horizontal row of clickable suggestions\nfor user interaction.\n\nThe `Suggestion` component displays a horizontal row of clickable suggestions\nfor user interaction.\n\nSee `scripts/suggestion.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add suggestion\n```\n\n## Usage with AI SDK\n\nBuild a simple input with suggestions users can click to send a message to the\nLLM.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Suggestion, Suggestions } from \"@/components/ai-elements/suggestion\";\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\n\nconst suggestions = [\n \"Can you explain how to play tennis?\",\n \"What is the weather in Tokyo?\",\n \"How do I make a really good fish taco?\",\n];\n\nconst SuggestionDemo = () => {\n const [input, setInput] = useState(\"\");\n const { sendMessage, status } = useChat();\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput(\"\");\n }\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n sendMessage({ text: suggestion });\n };\n\n return (\n

\n \n {suggestions.map((suggestion) => (\n \n ))}\n \n \n setInput(e.currentTarget.value)}\n className=\"pr-12\"\n />\n \n \n

\n );\n};\n\nexport default SuggestionDemo;\n```\n\n## Features\n\n- Horizontal row of clickable suggestion buttons\n- Customizable styling with variant and size options\n- Flexible layout that wraps suggestions on smaller screens\n- onClick callback that emits the selected suggestion string\n- Support for both individual suggestions and suggestion lists\n- Clean, modern styling with hover effects\n- Responsive design with mobile-friendly touch targets\n- TypeScript support with proper type definitions\n\n## Examples\n\n### Usage with AI Input\n\nSee `scripts/suggestion-input.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying ScrollArea component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------ | ------------------------------------------- | -------- | ------------------------------------------------------------------------ |\n| `suggestion` | `string` | Required | The suggestion string to display and emit on click. |\n| `onClick` | `(suggestion: string) => void` | - | Callback fired when the suggestion is clicked. |\n| `...props` | `Omit,` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n",[],[195,660,661,1302,1360],"d56a9c68-0ddd-11f1-a690-42dde27851f2","stack-trace.md","d56a9d44-0ddd-11f1-a690-42dde27851f2",46,["D",1771538184418],"# Stack Trace\n\nDisplays formatted JavaScript/Node.js error stack traces with syntax\nhighlighting and collapsible frames.\n\nThe `StackTrace` component displays formatted JavaScript/Node.js error stack\ntraces with clickable file paths, internal frame dimming, and collapsible\ncontent.\n\nSee `scripts/stack-trace.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add stack-trace\n```\n\n## Usage with AI SDK\n\nBuild an error display tool that shows stack traces from AI-generated code using\nthe [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n StackTrace,\n StackTraceActions,\n StackTraceContent,\n StackTraceCopyButton,\n StackTraceError,\n StackTraceErrorMessage,\n StackTraceErrorType,\n StackTraceExpandButton,\n StackTraceFrames,\n StackTraceHeader,\n} from \"@/components/ai-elements/stack-trace\";\n\nexport default function Page() {\n const { messages } = useChat({\n api: \"/api/run-code\",\n });\n\n return (\n

\n {messages.map((message) => {\n const toolInvocations = message.parts?.filter(\n (part) => part.type === \"tool-invocation\",\n );\n\n return toolInvocations?.map((tool) => {\n if (tool.toolName === \"runCode\" && tool.result?.error) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n return null;\n });\n })}\n

\n );\n}\n```\n\nAdd the following route to your backend:\n\n```tsx title=\"api/run-code/route.ts\"\nimport { streamText, tool } from \"ai\";\nimport { z } from \"zod\";\n\nexport async function POST(req: Request) {\n const { messages } = await req.json();\n\n const result = streamText({\n model: \"openai/gpt-4o\",\n messages,\n tools: {\n runCode: tool({\n description: \"Execute JavaScript code and return any errors\",\n parameters: z.object({\n code: z.string(),\n }),\n execute: async ({ code }) => {\n try {\n // Execute code in sandbox\n eval(code);\n return { success: true };\n } catch (error) {\n return { error: (error as Error).stack };\n }\n },\n }),\n },\n });\n\n return result.toDataStreamResponse();\n}\n```\n\n## Features\n\n- Parses standard JavaScript/Node.js stack trace format\n- Highlights error type in red\n- Dims internal frames (node_modules, node: paths)\n- Collapsible content with smooth animation\n- Copy full stack trace to clipboard\n- Clickable file paths with line/column numbers\n\n## Examples\n\n### Collapsed by Default\n\nSee `scripts/stack-trace-collapsed.tsx` for this example.\n\n### Hide Internal Frames\n\nSee `scripts/stack-trace-no-internal.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------------- | -------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------- |\n| `trace` | `string` | - | The raw stack trace string to parse and display. |\n| `open` | `boolean` | - | Controlled open state. |\n| `defaultOpen` | `boolean` | `false` | Whether the content is expanded by default. |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes. |\n| `onFilePathClick` | `(path: string, line?: number, column?: number) => void` | - | Callback when a file path is clicked. Receives the file path, line number, and column number. |\n| `children` | `React.ReactNode` | - | Child elements (StackTraceHeader, StackTraceContent, etc.). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Header content (typically StackTraceError and StackTraceActions). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------- | ------- | ------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Error content (typically StackTraceErrorType and StackTraceErrorMessage). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | --------------------------------------- | ------- | -------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom content. Defaults to the parsed error type (e.g., |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | --------------------------------------- | ------- | ----------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom content. Defaults to the parsed error message. |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Action buttons (typically StackTraceCopyButton and StackTraceExpandButton). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `onCopy` | `() => void` | - | Callback fired after a successful copy. |\n| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |\n| `timeout` | `number` | `2000` | How long to show the copied state (ms). |\n| `children` | `React.ReactNode` | - | Custom content for the button. Defaults to copy/check icons. |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------- | ------- | ------------------------------------------------ |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |\n| `maxHeight` | `number` | `400` | Maximum height of the content area. Enables scrolling when content exceeds this height. |\n| `children` | `React.ReactNode` | - | Content to display (typically StackTraceFrames). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------------- | -------------------------------------- | ------- | ------------------------------------------------------------ |\n| `showInternalFrames` | `boolean` | `true` | Whether to show internal frames (node_modules, node: paths). |\n| `className` | `string` | - | Additional CSS classes. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n",[],[195,660,661,1302,1368],"d5824d7c-0ddd-11f1-b72b-42dde27851f2","speech-input.md","d5824e62-0ddd-11f1-b72b-42dde27851f2",50,["D",1771538184603],"# Speech Input\n\nA button component that captures voice input and converts it to text, with\ncross-browser support.\n\nThe `SpeechInput` component provides an easy-to-use interface for capturing\nvoice input in your application. It uses the Web Speech API for real-time\ntranscription in supported browsers (Chrome, Edge), and falls back to\nMediaRecorder with an external transcription service for browsers that don't\nsupport Web Speech API (Firefox, Safari).\n\nSee `scripts/speech-input.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add speech-input\n```\n\n## Features\n\n- Built on Web Speech API (SpeechRecognition) with MediaRecorder fallback\n- Cross-browser support (Chrome, Edge, Firefox, Safari)\n- Continuous speech recognition with interim results\n- Visual feedback with pulse animation when listening\n- Loading state during transcription processing\n- Automatic browser compatibility detection\n- Final transcript extraction and callbacks\n- Error handling and automatic state management\n- Extends shadcn/ui Button component\n- Full TypeScript support\n\n## Props\n\n### ``\n\nThe component extends the shadcn/ui Button component, so all Button props are\navailable.\n\n| Prop | Type | Default | Description |\n| ----------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onTranscriptionChange` | `(text: string) => void` | - | Callback fired when final transcription text is available. Only fires for completed phrases, not interim results. |\n| `onAudioRecorded` | `(audioBlob: Blob) => Promise` | - | Callback for MediaRecorder fallback. Required for Firefox/Safari support. Receives recorded audio blob and should return transcribed text from an external service (e.g., OpenAI Whisper). |\n| `lang` | `string` | - | Language for speech recognition. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component, including variant, size, disabled, etc. |\n\n## Behavior\n\n### Speech Recognition Modes\n\nThe component automatically detects browser capabilities and uses the best\navailable method:\n\n| Browser | Mode | Behavior |\n| --------------- | -------------- | ------------------------------------------------------ |\n| Chrome, Edge | Web Speech API | Real-time transcription, no server required |\n| Firefox, Safari | MediaRecorder | Records audio, sends to external transcription service |\n| Unsupported | Disabled | Button is disabled |\n\n### Web Speech API Mode (Chrome, Edge)\n\nUses the Web Speech API with the following configuration:\n\n- **Continuous**: Set to `true` to keep recognition active until manually\n stopped\n- **Interim Results**: Set to `true` to receive partial results during speech\n- **Language**: Configurable via `lang` prop, defaults to `\"en-US\"`\n\n### MediaRecorder Mode (Firefox, Safari)\n\nWhen the Web Speech API is unavailable, the component falls back to recording\naudio:\n\n1. Records audio using `MediaRecorder` API\n2. On stop, creates an audio blob (`audio/webm`)\n3. Calls `onAudioRecorded` with the blob\n4. Waits for transcription result\n5. Passes result to `onTranscriptionChange`\n\n**Note**: The `onAudioRecorded` prop is required for this mode to work. Without\nit, the button will be disabled in Firefox/Safari.\n\n### Transcription Processing\n\nThe component only calls `onTranscriptionChange` with **final transcripts**.\nInterim results (Web Speech API) are ignored to prevent incomplete text from\nbeing processed.\n\n### Visual States\n\n- **Default State**: Standard button appearance with microphone icon\n- **Listening State**: Pulsing animation with accent colors to indicate active\n listening\n- **Processing State**: Loading spinner while waiting for transcription\n (MediaRecorder mode)\n- **Disabled State**: Button is disabled when no API is available or required\n props are missing\n\n### Lifecycle\n\n1. **Mount**: Detects available APIs and initializes appropriate mode\n2. **Click**: Toggles between listening/recording and stopped states\n3. **Stop (MediaRecorder)**: Processes audio and waits for transcription\n4. **Unmount**: Stops recognition/recording and releases microphone\n\n## Browser Support\n\nThe component provides cross-browser support through a two-tier system:\n\n| Browser | API Used | Requirements |\n| ------- | -------------- | ---------------------- |\n| Chrome | Web Speech API | None |\n| Edge | Web Speech API | None |\n| Firefox | MediaRecorder | `onAudioRecorded` prop |\n| Safari | MediaRecorder | `onAudioRecorded` prop |\n\nFor full cross-browser support, provide the `onAudioRecorded` callback that\nsends audio to a transcription service like OpenAI Whisper, Google Cloud\nSpeech-to-Text, or AssemblyAI.\n\n## Accessibility\n\n- Uses semantic button element via shadcn/ui Button\n- Visual feedback for listening state\n- Keyboard accessible (can be triggered with Space/Enter)\n- Screen reader friendly with proper button semantics\n\n## Usage with MediaRecorder Fallback\n\nTo support Firefox and Safari, provide an `onAudioRecorded` callback that sends\naudio to a transcription service:\n\n```tsx\nconst handleAudioRecorded = async (audioBlob: Blob): Promise => {\n const formData = new FormData();\n formData.append(\"file\", audioBlob, \"audio.webm\");\n formData.append(\"model\", \"whisper-1\");\n\n const response = await fetch(\n \"https://api.openai.com/v1/audio/transcriptions\",\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,\n },\n body: formData,\n },\n );\n\n const data = await response.json();\n return data.text;\n};\n\n console.log(text)}\n onAudioRecorded={handleAudioRecorded}\n/>;\n```\n\n## Notes\n\n- Requires a secure context (HTTPS or localhost)\n- Browser may prompt user for microphone permission\n- Only final transcripts trigger the `onTranscriptionChange` callback\n- Language is configurable via the `lang` prop\n- Continuous recognition continues until button is clicked again\n- Errors are logged to console and automatically stop recognition/recording\n- MediaRecorder fallback requires the `onAudioRecorded` prop to be provided\n- Audio is recorded in `audio/webm` format for the MediaRecorder fallback\n\n## TypeScript\n\nThe component includes full TypeScript definitions for the Web Speech API:\n\n- `SpeechRecognition`\n- `SpeechRecognitionEvent`\n- `SpeechRecognitionResult`\n- `SpeechRecognitionAlternative`\n- `SpeechRecognitionErrorEvent`\n\nThese types are properly declared for both standard and webkit-prefixed\nimplementations.\n",[],[195,660,661,1302,1376],"d5423d5e-0ddd-11f1-a0cd-42dde27851f2","sources.md","d5423e26-0ddd-11f1-a0cd-42dde27851f2",38,["D",1771538184181],"# Sources\n\nA component that allows a user to view the sources or citations used to generate\na response.\n\nThe `Sources` component allows a user to view the sources or citations used to\ngenerate a response.\n\nSee `scripts/sources.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add sources\n```\n\n## Usage with AI SDK\n\nBuild a simple web search agent with Perplexity Sonar.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n Source,\n Sources,\n SourcesContent,\n SourcesTrigger,\n} from \"@/components/ai-elements/sources\";\nimport {\n Input,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { useState } from \"react\";\nimport { DefaultChatTransport } from \"ai\";\n\nconst SourceDemo = () => {\n const [input, setInput] = useState(\"\");\n const { messages, sendMessage, status } = useChat({\n transport: new DefaultChatTransport({\n api: \"/api/sources\",\n }),\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim()) {\n sendMessage({ text: input });\n setInput(\"\");\n }\n };\n\n return (\n

\n \n \n {messages.map((message) => (\n

\n {message.role === \"assistant\" && (\n \n part.type === \"source-url\",\n ).length}\n />\n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"source-url\":\n return (\n \n \n \n );\n }\n })}\n \n )}\n \n \n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n {part.text}\n \n );\n default:\n return null;\n }\n })}\n \n \n

\n ))}\n \n \n \n

\n\n \n setInput(e.currentTarget.value)}\n className=\"pr-12\"\n />\n \n \n

\n );\n};\n\nexport default SourceDemo;\n```\n\nAdd the following route to your backend:\n\n```tsx title=\"api/chat/route.ts\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\nimport { perplexity } from \"@ai-sdk/perplexity\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { messages }: { messages: UIMessage[] } = await req.json();\n\n const result = streamText({\n model: \"perplexity/sonar\",\n system:\n \"You are a helpful assistant. Keep your responses short (< 100 words) unless you are asked for more details. ALWAYS USE SEARCH.\",\n messages: await convertToModelMessages(messages),\n });\n\n return result.toUIMessageStreamResponse({\n sendSources: true,\n });\n}\n```\n\n## Features\n\n- Collapsible component that allows a user to view the sources or citations used\n to generate a response\n- Customizable trigger and content components\n- Support for custom sources or citations\n- Responsive design with mobile-friendly controls\n- Clean, modern styling with customizable themes\n\n## Examples\n\n### Custom rendering\n\nSee `scripts/sources-custom.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |\n| `count` | `number` | Required | The number of sources to display in the trigger. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the content container. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.AnchorHTMLAttributes` | - | Any other props are spread to the anchor element. |\n",[],[195,660,661,1302,1384],"d5d38110-0ddd-11f1-9539-42dde27851f2","snippet.md","d5d381ec-0ddd-11f1-9539-42dde27851f2",70,["D",1771538185112],"# Snippet\n\nLightweight inline code display for terminal commands and short code references.\n\nThe `Snippet` component provides a lightweight way to display terminal commands\nand short code snippets with copy functionality. Built on top of InputGroup,\nit's designed for brief code references in text.\n\nSee `scripts/snippet.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add snippet\n```\n\n## Features\n\n- Composable architecture with InputGroup\n- Optional prefix text (e.g., `$` for terminal commands)\n- Built-in copy button\n- Compact design for chat/markdown\n\n## Examples\n\n### Without Prefix\n\nSee `scripts/snippet-plain.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | -------- | ---------------------------------------------------- |\n| `code` | `string` | Required | The code content to display. |\n| `children` | `React.ReactNode` | - | Child elements like SnippetAddon, SnippetInput, etc. |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroup component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ---------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroupAddon component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------------- | ------- | --------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroupText component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |\n| `...props` | `Omit,` | - | Spread to the InputGroupInput component. Value and readOnly are set automatically. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ----------------------------------------- |\n| `onCopy` | `() => void` | - | Callback fired after a successful copy. |\n| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |\n| `timeout` | `number` | `2000` | How long to show the copied state (ms). |\n| `children` | `React.ReactNode` | - | Custom button content. |\n| `...props` | `React.ComponentProps` | - | Spread to the InputGroupButton component. |\n",[],[195,660,661,1302,1392],"d50e0296-0ddd-11f1-affc-42dde27851f2","shimmer.md","d50e037c-0ddd-11f1-affc-42dde27851f2",29,["D",1771538183853],"# Shimmer\n\nAn animated text shimmer component for creating eye-catching loading states and\nprogressive reveal effects.\n\nThe `Shimmer` component provides an animated shimmer effect that sweeps across\ntext, perfect for indicating loading states, progressive reveals, or drawing\nattention to dynamic content in AI applications.\n\nSee `scripts/shimmer.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add shimmer\n```\n\n## Features\n\n- Smooth animated shimmer effect using CSS gradients and Framer Motion\n- Customizable animation duration and spread\n- Polymorphic component - render as any HTML element via the `as` prop\n- Automatic spread calculation based on text length\n- Theme-aware styling using CSS custom properties\n- Infinite looping animation with linear easing\n- TypeScript support with proper type definitions\n- Memoized for optimal performance\n- Responsive and accessible design\n- Uses `text-transparent` with background-clip for crisp text rendering\n\n## Examples\n\n### Different Durations\n\nSee `scripts/shimmer-duration.tsx` for this example.\n\n### Custom Elements\n\nSee `scripts/shimmer-elements.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------- | ------- | -------------------------------------------------------------------------- |\n| `children` | `string` | - | The text content to apply the shimmer effect to. |\n| `as` | `ElementType` | - | The HTML element or React component to render. |\n| `className` | `string` | - | Additional CSS classes to apply to the component. |\n| `duration` | `number` | `2` | The duration of the shimmer animation in seconds. |\n| `spread` | `number` | `2` | The spread multiplier for the shimmer gradient, multiplied by text length. |\n",[],[195,660,661,1302,1400],"d5ea7334-0ddd-11f1-bf1c-42dde27851f2","schema-display.md","d5ea73fc-0ddd-11f1-bf1c-42dde27851f2",75,["D",1771538185220],"# Schema Display\n\nDisplay REST API endpoint documentation with parameters, request/response\nbodies.\n\nThe `SchemaDisplay` component visualizes REST API endpoints with HTTP methods,\npaths, parameters, and request/response schemas.\n\nSee `scripts/schema-display.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add schema-display\n```\n\n## Features\n\n- Color-coded HTTP methods\n- Path parameter highlighting\n- Collapsible parameters section\n- Request/response body schemas\n- Nested object property display\n- Required field indicators\n\n## Method Colors\n\n| Method | Color |\n| -------- | ------ |\n| `GET` | Green |\n| `POST` | Blue |\n| `PUT` | Orange |\n| `PATCH` | Yellow |\n| `DELETE` | Red |\n\n## Examples\n\n### Basic Usage\n\nSee `scripts/schema-display-basic.tsx` for this example.\n\n### With Parameters\n\nSee `scripts/schema-display-params.tsx` for this example.\n\n### With Request/Response Bodies\n\nSee `scripts/schema-display-body.tsx` for this example.\n\n### Nested Properties\n\nSee `scripts/schema-display-nested.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ------------------- | ------- | ------------------------- |\n| `method` | `unknown` | - | HTTP method. |\n| `path` | `string` | - | API endpoint path. |\n| `description` | `string` | - | Endpoint description. |\n| `parameters` | `SchemaParameter[]` | - | URL/query parameters. |\n| `requestBody` | `SchemaProperty[]` | - | Request body properties. |\n| `responseBody` | `SchemaProperty[]` | - | Response body properties. |\n\n### `SchemaParameter`\n\n```tsx\ninterface SchemaParameter {\n name: string;\n type: string;\n required?: boolean;\n description?: string;\n location?: \"path\" | \"query\" | \"header\";\n}\n```\n\n### `SchemaProperty`\n\n```tsx\ninterface SchemaProperty {\n name: string;\n type: string;\n required?: boolean;\n description?: string;\n properties?: SchemaProperty[]; // For objects\n items?: SchemaProperty; // For arrays\n}\n```\n\n### Subcomponents\n\n- `SchemaDisplayHeader` - Header container\n- `SchemaDisplayMethod` - Color-coded method badge\n- `SchemaDisplayPath` - Path with highlighted parameters\n- `SchemaDisplayDescription` - Description text\n- `SchemaDisplayContent` - Content container\n- `SchemaDisplayParameters` - Collapsible parameters section\n- `SchemaDisplayParameter` - Individual parameter\n- `SchemaDisplayRequest` - Collapsible request body\n- `SchemaDisplayResponse` - Collapsible response body\n- `SchemaDisplayProperty` - Schema property (recursive)\n- `SchemaDisplayExample` - Code example block\n",[],[195,660,661,1302,1408],"d51bd290-0ddd-11f1-affc-42dde27851f2","sandbox.md","d51bd344-0ddd-11f1-affc-42dde27851f2",31,["D",1771538183944],"# Sandbox\n\nA collapsible container for displaying AI-generated code and output in chat\ninterfaces.\n\nThe `Sandbox` component provides a structured way to display AI-generated code\nalongside its execution output in chat conversations. It features a collapsible\ncontainer with status indicators and tabbed navigation between code and output\nviews. It's designed to be used with `CodeBlock` for displaying code and\n`StackTrace` for displaying errors.\n\nSee `scripts/sandbox.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add sandbox\n```\n\n## Features\n\n- Collapsible container with smooth animations\n- Status badges showing execution state (Pending, Running, Completed, Error)\n- Tabs for Code and Output views\n- Syntax-highlighted code display\n- Copy button for easy code sharing\n- Works with AI SDK tool state patterns\n\n## Usage with AI SDK\n\nThe Sandbox component integrates with the AI SDK's tool state to show code\ngeneration progress:\n\n```tsx title=\"components/code-sandbox.tsx\"\n\"use client\";\n\nimport type { ToolUIPart } from \"ai\";\nimport {\n Sandbox,\n SandboxContent,\n SandboxHeader,\n SandboxTabContent,\n SandboxTabs,\n SandboxTabsBar,\n SandboxTabsList,\n SandboxTabsTrigger,\n} from \"@/components/ai-elements/sandbox\";\nimport { CodeBlock } from \"@/components/ai-elements/code-block\";\n\ntype CodeSandboxProps = {\n toolPart: ToolUIPart;\n};\n\nexport const CodeSandbox = ({ toolPart }: CodeSandboxProps) => {\n const code = toolPart.input?.code ?? \"\";\n const output = toolPart.output?.logs ?? \"\";\n\n return (\n \n \n \n \n \n \n Code\n Output\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n```\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------- | ----------- | -------------------------------------------------------------------------- |\n| `title` | `string` | `undefined` | The title displayed in the header (e.g., filename). |\n| `state` | `ToolUIPart[` | Required | The current execution state, used to display the appropriate status badge. |\n| `className` | `string` | - | Additional CSS classes for the header. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Tabs component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------ |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying TabsList component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying TabsTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying TabsContent component. |\n",[],[195,660,661,1302,1416],"d5085c6a-0ddd-11f1-affc-42dde27851f2","reasoning.md","d5085d00-0ddd-11f1-affc-42dde27851f2",28,["D",1771538183806],"# Reasoning\n\nA collapsible component that displays AI reasoning content, automatically\nopening during streaming and closing when finished.\n\nThe `Reasoning` component displays AI reasoning content, automatically opening\nduring streaming and closing when finished.\n\nSee `scripts/reasoning.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add reasoning\n```\n\n## Usage with AI SDK\n\nBuild a chatbot with reasoning using Deepseek R1 or other reasoning models.\n\nSome models (like GPT with high reasoning effort) return multiple reasoning\nparts instead of a single streaming block. The example below consolidates all\nreasoning parts into a single component to avoid displaying multiple\n\"Thinking...\" indicators.\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n Reasoning,\n ReasoningContent,\n ReasoningTrigger,\n} from \"@/components/ai-elements/reasoning\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport {\n PromptInput,\n PromptInputSubmit,\n PromptInputTextarea,\n} from \"@/components/ai-elements/prompt-input\";\nimport { Spinner } from \"@/components/ui/spinner\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport type { UIMessage } from \"ai\";\n\nconst MessageParts = ({\n message,\n isLastMessage,\n isStreaming,\n}: {\n message: UIMessage;\n isLastMessage: boolean;\n isStreaming: boolean;\n}) => {\n // Consolidate all reasoning parts into one block\n const reasoningParts = message.parts.filter(\n (part) => part.type === \"reasoning\",\n );\n const reasoningText = reasoningParts.map((part) => part.text).join(\"\\n\\n\");\n const hasReasoning = reasoningParts.length > 0;\n\n // Check if reasoning is still streaming (last part is reasoning on last message)\n const lastPart = message.parts.at(-1);\n const isReasoningStreaming = isLastMessage && isStreaming &&\n lastPart?.type === \"reasoning\";\n\n return (\n <>\n {hasReasoning && (\n \n \n {reasoningText}\n \n )}\n {message.parts.map((part, i) => {\n if (part.type === \"text\") {\n return (\n \n {part.text}\n \n );\n }\n return null;\n })}\n \n );\n};\n\nconst ReasoningDemo = () => {\n const [input, setInput] = useState(\"\");\n\n const { messages, sendMessage, status } = useChat();\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n sendMessage({ text: input });\n setInput(\"\");\n };\n\n const isStreaming = status === \"streaming\";\n\n return (\n

\n \n \n {messages.map((message, index) => (\n \n \n \n \n \n ))}\n {status === \"submitted\" && }\n \n \n \n\n \n setInput(e.currentTarget.value)}\n className=\"pr-12\"\n />\n \n \n

\n );\n};\n\nexport default ReasoningDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/chat/route.ts\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const { model, messages }: { messages: UIMessage[]; model: string } =\n await req.json();\n\n const result = streamText({\n model: \"deepseek/deepseek-r1\",\n messages: await convertToModelMessages(messages),\n });\n\n return result.toUIMessageStreamResponse({\n sendReasoning: true,\n });\n}\n```\n\n## Reasoning vs Chain of Thought\n\nUse the `Reasoning` component when your model outputs thinking content as a\nsingle block or continuous stream (Deepseek R1, Claude with extended thinking,\netc.).\n\nIf your model outputs discrete, labeled steps (search queries, tool calls,\ndistinct thought stages), consider using the\n[Chain of Thought](/components/chain-of-thought) component instead for a more\nstructured visual representation.\n\n## Features\n\n- Automatically opens when streaming content and closes when finished\n- Manual toggle control for user interaction\n- Smooth animations and transitions powered by Radix UI\n- Visual streaming indicator with pulsing animation\n- Composable architecture with separate trigger and content components\n- Built with accessibility in mind including keyboard navigation\n- Responsive design that works across different screen sizes\n- Seamlessly integrates with both light and dark themes\n- Built on top of shadcn/ui Collapsible primitives\n- TypeScript support with proper type definitions\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ------------------------------------------ | ------- | ------------------------------------------------------------------------------- |\n| `isStreaming` | `boolean` | `false` | Whether the reasoning is currently streaming (auto-opens and closes the panel). |\n| `open` | `boolean` | - | Controlled open state. |\n| `defaultOpen` | `boolean` | `true` | Default open state when uncontrolled. |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback when open state changes. |\n| `duration` | `number` | - | Duration in seconds to display (can be controlled externally). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------------- | -------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------- |\n| `getThinkingMessage` | `(isStreaming: boolean, duration?: number) => ReactNode` | - | Optional function to customize the thinking message. Receives isStreaming and duration parameters. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CollapsibleTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------- |\n| `children` | `string` | Required | The reasoning text to display (rendered via Streamdown). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CollapsibleContent component. |\n\n## Hooks\n\n### `useReasoning`\n\nAccess the reasoning context from child components.\n\n```tsx\nconst { isStreaming, isOpen, setIsOpen, duration } = useReasoning();\n```\n\nReturns:\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------- | ---------- | ----------------------------------------- |\n| `isStreaming` | `boolean` | - | Whether reasoning is currently streaming. |\n| `isOpen` | `boolean` | - | Whether the reasoning panel is open. |\n| `setIsOpen` | `(open: boolean) => void` | - | Function to set the open state. |\n| `duration` | `number | undefined` | - |\n",[],[195,660,661,1302,1424],"d5946ed0-0ddd-11f1-adf3-42dde27851f2","queue.md","d5946f8e-0ddd-11f1-adf3-42dde27851f2",54,["D",1771538184731],"# Queue\n\nA comprehensive queue component system for displaying message lists, todos, and\ncollapsible task sections in AI applications.\n\nThe `Queue` component provides a flexible system for displaying lists of\nmessages, todos, attachments, and collapsible sections. Perfect for showing AI\nworkflow progress, pending tasks, message history, or any structured list of\nitems in your application.\n\nSee `scripts/queue.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add queue\n```\n\n## Features\n\n- Flexible component system with composable parts\n- Collapsible sections with smooth animations\n- Support for completed/pending state indicators\n- Built-in scroll area for long lists\n- Attachment display with images and file indicators\n- Hover-revealed action buttons for queue items\n- TypeScript support with comprehensive type definitions\n- Customizable styling with Tailwind CSS\n- Responsive design with mobile-friendly interactions\n- Keyboard navigation and accessibility support\n- Theme-aware with automatic dark mode support\n\n## Examples\n\n### With PromptInput\n\nSee `scripts/queue-prompt-input.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `defaultOpen` | `boolean` | `true` | Whether the section is open by default. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the button element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `label` | `string` | - | The label text to display. |\n| `count` | `number` | - | The count to display before the label. |\n| `icon` | `React.ReactNode` | - | An optional icon to display before the count. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the ScrollArea component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | --------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the li element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ------------------------------------------------------------- |\n| `completed` | `boolean` | `false` | Whether the item is completed. Affects the indicator styling. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ----------------------------------------------------------------------------------- |\n| `completed` | `boolean` | `false` | Whether the item is completed. Affects text styling with strikethrough and opacity. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------- | ------- | ---------------------------------------------------- |\n| `completed` | `boolean` | `false` | Whether the item is completed. Affects text styling. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | ----------------------------------------------------------------------------- |\n| `...props` | `Omit,` | - | Any other props (except variant and size) are spread to the Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the img element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n## Type Exports\n\n### `QueueMessagePart`\n\nInterface for message parts within queue messages.\n\n```tsx\ninterface QueueMessagePart {\n type: string;\n text?: string;\n url?: string;\n filename?: string;\n mediaType?: string;\n}\n```\n\n### `QueueMessage`\n\nInterface for queue message items.\n\n```tsx\ninterface QueueMessage {\n id: string;\n parts: QueueMessagePart[];\n}\n```\n\n### `QueueTodo`\n\nInterface for todo items in the queue.\n\n```tsx\ninterface QueueTodo {\n id: string;\n title: string;\n description?: string;\n status?: \"pending\" | \"completed\";\n}\n```\n",[],[195,660,661,1302,1432],"d59eb3f4-0ddd-11f1-adf3-42dde27851f2","prompt-input.md","d59eb4b2-0ddd-11f1-adf3-42dde27851f2",57,["D",1771538184788],"# Prompt Input\n\nAllows a user to send a message with file attachments to a large language model.\nIt includes a textarea, file upload capabilities, a submit button, and a\ndropdown for selecting the model.\n\nThe `PromptInput` component allows a user to send a message with file\nattachments to a large language model. It includes a textarea, file upload\ncapabilities, a submit button, and a dropdown for selecting the model.\n\nSee `scripts/prompt-input.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add prompt-input\n```\n\n## Usage with AI SDK\n\nBuild a fully functional chat app using `PromptInput`,\n[`Conversation`](/components/conversation) with a model picker:\n\nAdd the following component to your frontend:\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport {\n Attachment,\n AttachmentPreview,\n AttachmentRemove,\n Attachments,\n} from \"@/components/ai-elements/attachments\";\nimport {\n PromptInput,\n PromptInputActionAddAttachments,\n PromptInputActionMenu,\n PromptInputActionMenuContent,\n PromptInputActionMenuTrigger,\n PromptInputBody,\n PromptInputButton,\n PromptInputFooter,\n PromptInputHeader,\n type PromptInputMessage,\n PromptInputSelect,\n PromptInputSelectContent,\n PromptInputSelectItem,\n PromptInputSelectTrigger,\n PromptInputSelectValue,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n usePromptInputAttachments,\n} from \"@/components/ai-elements/prompt-input\";\nimport { GlobeIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from \"@/components/ai-elements/conversation\";\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from \"@/components/ai-elements/message\";\n\nconst PromptInputAttachmentsDisplay = () => {\n const attachments = usePromptInputAttachments();\n\n if (attachments.files.length === 0) {\n return null;\n }\n\n return (\n \n {attachments.files.map((attachment) => (\n attachments.remove(attachment.id)}\n >\n \n \n \n ))}\n \n );\n};\n\nconst models = [\n { id: \"gpt-4o\", name: \"GPT-4o\" },\n { id: \"claude-opus-4-20250514\", name: \"Claude 4 Opus\" },\n];\n\nconst InputDemo = () => {\n const [text, setText] = useState(\"\");\n const [model, setModel] = useState(models[0].id);\n const [useWebSearch, setUseWebSearch] = useState(false);\n\n const { messages, status, sendMessage } = useChat();\n\n const handleSubmit = (message: PromptInputMessage) => {\n const hasText = Boolean(message.text);\n const hasAttachments = Boolean(message.files?.length);\n\n if (!(hasText || hasAttachments)) {\n return;\n }\n\n sendMessage(\n {\n text: message.text || \"Sent with attachments\",\n files: message.files,\n },\n {\n body: {\n model: model,\n webSearch: useWebSearch,\n },\n },\n );\n setText(\"\");\n };\n\n return (\n

\n \n \n {messages.map((message) => (\n \n \n {message.parts.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n {part.text}\n \n );\n default:\n return null;\n }\n })}\n \n \n ))}\n \n \n \n\n \n \n \n \n \n setText(e.target.value)}\n value={text}\n />\n \n \n \n \n \n \n \n \n \n setUseWebSearch(!useWebSearch)}\n tooltip={{ content: \"Search the web\", shortcut: \"⌘K\" }}\n variant={useWebSearch ? \"default\" : \"ghost\"}\n >\n \n Search\n \n {\n setModel(value);\n }}\n value={model}\n >\n \n \n \n \n {models.map((model) => (\n \n {model.name}\n \n ))}\n \n \n \n \n \n \n

\n );\n};\n\nexport default InputDemo;\n```\n\nAdd the following route to your backend:\n\n```ts title=\"app/api/chat/route.ts\"\nimport { convertToModelMessages, streamText, UIMessage } from \"ai\";\n\n// Allow streaming responses up to 30 seconds\nexport const maxDuration = 30;\n\nexport async function POST(req: Request) {\n const {\n model,\n messages,\n webSearch,\n }: {\n messages: UIMessage[];\n model: string;\n webSearch?: boolean;\n } = await req.json();\n\n const result = streamText({\n model: webSearch ? \"perplexity/sonar\" : model,\n messages: await convertToModelMessages(messages),\n });\n\n return result.toUIMessageStreamResponse();\n}\n```\n\n## Features\n\n- Auto-resizing textarea that adjusts height based on content\n- File attachment support with drag-and-drop\n- Image preview for image attachments\n- Configurable file constraints (max files, max size, accepted types)\n- Automatic submit button icons based on status\n- Support for keyboard shortcuts (Enter to submit, Shift+Enter for new line)\n- Customizable min/max height for the textarea\n- Flexible toolbar with support for custom actions and tools\n- Built-in model selection dropdown\n- Built-in native speech recognition button (Web Speech API)\n- Optional provider for lifted state management\n- Form automatically resets on submit\n- Responsive design with mobile-friendly controls\n- Clean, modern styling with customizable themes\n- Form-based submission handling\n- Hidden file input sync for native form posts\n- Global document drop support (opt-in)\n\n## Examples\n\n### Cursor style\n\nSee `scripts/prompt-input-cursor.tsx` for this example.\n\n### Button tooltips\n\nButtons can display tooltips with optional keyboard shortcut hints. Hover over\nthe buttons below to see the tooltips.\n\nSee `scripts/prompt-input-tooltip.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------------- | --------------------------------------------------------- | ------- | ---------------------------------------------------------------------- |\n| `onSubmit` | `(message: PromptInputMessage, event: FormEvent) => void` | - | Handler called when the form is submitted with message text and files. |\n| `accept` | `string` | - | File types to accept (e.g., |\n| `multiple` | `boolean` | - | Whether to allow multiple file selection. |\n| `globalDrop` | `boolean` | - | When true, accepts file drops anywhere on the document. |\n| `syncHiddenInput` | `boolean` | - | Render a hidden input with given name for native form posts. |\n| `maxFiles` | `number` | - | Maximum number of files allowed. |\n| `maxFileSize` | `number` | - | Maximum file size in bytes. |\n| `onError` | `(err: { code:` | - | Handler for file validation errors. |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root form element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Textarea component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the toolbar div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | -------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the tools div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------ |\n| `tooltip` | `string | { content: ReactNode; shortcut?: string; side?: ` | - |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n#### Tooltip Examples\n\n```tsx\n// Simple string tooltip\n\n \n\n\n// Tooltip with keyboard shortcut hint\n\n \n\n\n// Tooltip with custom position\n\n \n\n```\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `status` | `ChatStatus` | - | Current chat status to determine button icon (submitted, streaming, error). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Select component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying SelectValue component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the body div. |\n\n### Attachments\n\nAttachment components have been moved to a separate module. See the\n[Attachment](/components/attachment) component documentation for details on\n``, ``, ``,\n``, and ``.\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenu component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `label` | `string` | - | Label for the menu item. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| -------------- | ----------------- | ------- | --------------------------------------------------------------- |\n| `initialInput` | `string` | - | Initial text input value. |\n| `children` | `React.ReactNode` | - | Child components that will have access to the provider context. |\n\nOptional global provider that lifts PromptInput state outside of PromptInput.\nWhen used, it allows you to access and control the input state from anywhere\nwithin the provider tree. If not used, PromptInput stays fully self-managed.\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| `...props` | `Omit,` | - | Any other props (except align) are spread to the InputGroupAddon component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------ | ---------------------------------------- | ------- | ------------------------------------------------------ |\n| `openDelay` | `number` | `0` | Delay in milliseconds before opening. |\n| `closeDelay` | `number` | `0` | Delay in milliseconds before closing. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCard component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCardTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `align` | `unknown` | - | Alignment of the hover card content. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCardContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | --------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the h3 element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Command component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandInput component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandList component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandGroup component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandSeparator component. |\n\n## Hooks\n\n### `usePromptInputAttachments`\n\nAccess and manage file attachments within a PromptInput context.\n\n```tsx\nconst attachments = usePromptInputAttachments();\n\n// Available methods:\nattachments.files; // Array of current attachments\nattachments.add(files); // Add new files\nattachments.remove(id); // Remove an attachment by ID\nattachments.clear(); // Clear all attachments\nattachments.openFileDialog(); // Open file selection dialog\n```\n\n### `usePromptInputController`\n\nAccess the full PromptInput controller from a PromptInputProvider. Only\navailable when using the provider.\n\n```tsx\nconst controller = usePromptInputController();\n\n// Available methods:\ncontroller.textInput.value; // Current text input value\ncontroller.textInput.setInput(value); // Set text input value\ncontroller.textInput.clear(); // Clear text input\ncontroller.attachments; // Same as usePromptInputAttachments\n```\n\n### `useProviderAttachments`\n\nAccess attachments context from a PromptInputProvider. Only available when using\nthe provider.\n\n```tsx\nconst attachments = useProviderAttachments();\n\n// Same interface as usePromptInputAttachments\n```\n\n### `usePromptInputReferencedSources`\n\nAccess referenced sources context within a PromptInput.\n\n```tsx\nconst sources = usePromptInputReferencedSources();\n\n// Available methods:\nsources.sources; // Array of current referenced sources\nsources.add(sources); // Add new source(s)\nsources.remove(id); // Remove a source by ID\nsources.clear(); // Clear all sources\n```\n",[],[195,660,661,1302,1440],"d5c34098-0ddd-11f1-acc9-42dde27851f2","plan.md","d5c34174-0ddd-11f1-acc9-42dde27851f2",66,["D",1771538184888],"# Plan\n\nA collapsible plan component for displaying AI-generated execution plans with\nstreaming support and shimmer animations.\n\nThe `Plan` component provides a flexible system for displaying AI-generated\nexecution plans with collapsible content. Perfect for showing multi-step\nworkflows, task breakdowns, and implementation strategies with support for\nstreaming content and loading states.\n\nSee `scripts/plan.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add plan\n```\n\n## Features\n\n- Collapsible content with smooth animations\n- Streaming support with shimmer loading states\n- Built on shadcn/ui Card and Collapsible components\n- TypeScript support with comprehensive type definitions\n- Customizable styling with Tailwind CSS\n- Responsive design with mobile-friendly interactions\n- Keyboard navigation and accessibility support\n- Theme-aware with automatic dark mode support\n- Context-based state management for streaming\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------- |\n| `isStreaming` | `boolean` | `false` | Whether content is currently streaming. Enables shimmer animations on title and description. |\n| `defaultOpen` | `boolean` | - | Whether the plan is expanded by default. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Collapsible component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CardHeader component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------- |\n| `children` | `string` | - | The title text. Displays with shimmer animation when isStreaming is true. |\n| `...props` | `Omit,` | - | Any other props (except children) are spread to the CardTitle component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |\n| `children` | `string` | - | The description text. Displays with shimmer animation when isStreaming is true. |\n| `...props` | `Omit,` | - | Any other props (except children) are spread to the CardDescription component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. Renders as a Button with chevron icon. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CardContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CardAction component. |\n",[],[195,660,661,1302,1448],"d62e1de6-0ddd-11f1-acc9-42dde27851f2","persona.md","d62e1ed6-0ddd-11f1-acc9-42dde27851f2",89,["D",1771538185099],"# Persona\n\nAn animated AI visual component powered by Rive that responds to different\nstates like listening, thinking, and speaking.\n\nThe `Persona` component displays an animated AI visual that responds to\ndifferent conversational states. Built with Rive WebGL2, it provides smooth,\nhigh-performance animations for various AI interaction states including idle,\nlistening, thinking, speaking, and asleep. The component supports multiple\nvisual variants to match different design aesthetics.\n\nSee `scripts/persona-obsidian.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add persona\n```\n\n## Features\n\n- Smooth state-based animations powered by Rive\n- Multiple visual variants (obsidian, mana, opal, halo, glint, command)\n- Responsive to five distinct states: idle, listening, thinking, speaking, and\n asleep\n- WebGL2-accelerated rendering for optimal performance\n- Customizable size and styling\n- Lifecycle callbacks for load, ready, pause, play, and stop events\n- TypeScript support with full type definitions\n\n## Variants\n\nThe Persona component comes with 6 distinct visual variants, each with its own\nunique aesthetic:\n\n### Obsidian (Default)\n\nSee `scripts/persona-obsidian.tsx` for this example.\n\n### Mana\n\nSee `scripts/persona-mana.tsx` for this example.\n\n### Opal\n\nSee `scripts/persona-opal.tsx` for this example.\n\n### Halo\n\nSee `scripts/persona-halo.tsx` for this example.\n\n### Glint\n\nSee `scripts/persona-glint.tsx` for this example.\n\n### Command\n\nSee `scripts/persona-command.tsx` for this example.\n\n## Props\n\n### ``\n\nThe root component that renders the animated AI visual.\n\n| Prop | Type | Default | Description |\n| ------------- | ----------------- | ------- | --------------------------------------------------------------------------- |\n| `state` | `unknown` | - | The current state of the AI persona. Controls which animation is displayed. |\n| `variant` | `unknown` | - | The visual style variant to display. |\n| `className` | `string` | - | Additional CSS classes to apply to the component. |\n| `onLoad` | `RiveParameters[` | - | Callback fired when the Rive file starts loading. |\n| `onLoadError` | `RiveParameters[` | - | Callback fired if the Rive file fails to load. |\n| `onReady` | `() => void` | - | Callback fired when the Rive animation is ready to play. |\n| `onPause` | `RiveParameters[` | - | Callback fired when the animation is paused. |\n| `onPlay` | `RiveParameters[` | - | Callback fired when the animation starts playing. |\n| `onStop` | `RiveParameters[` | - | Callback fired when the animation is stopped. |\n\n## States\n\nThe Persona component responds to five distinct states, each triggering\ndifferent animations:\n\n- **idle**: The default resting state when the AI is not active\n- **listening**: Displayed when the AI is actively listening to user input\n (e.g., during voice recording)\n- **thinking**: Shown when the AI is processing or generating a response\n- **speaking**: Active when the AI is delivering a response (e.g.,\n text-to-speech output)\n- **asleep**: A dormant state for when the AI is inactive or in low-power mode\n\n## Usage Examples\n\n### Basic Usage\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\n\nexport default function App() {\n return ;\n}\n```\n\n### With State Management\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\nimport { useState } from \"react\";\n\nexport default function App() {\n const [state, setState] = useState<\n \"idle\" | \"listening\" | \"thinking\" | \"speaking\" | \"asleep\"\n >(\"idle\");\n\n const startListening = () => setState(\"listening\");\n const startThinking = () => setState(\"thinking\");\n const startSpeaking = () => setState(\"speaking\");\n const reset = () => setState(\"idle\");\n\n return (\n

\n \n

\n \n \n \n \n

\n );\n}\n```\n\n### With Custom Styling\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\n\nexport default function App() {\n return (\n \n );\n}\n```\n\n### With Lifecycle Callbacks\n\n```tsx\nimport { Persona } from \"@repo/elements/persona\";\n\nexport default function App() {\n return (\n console.log(\"Animation ready\")}\n onLoad={() => console.log(\"Starting to load\")}\n onLoadError={(error) => console.error(\"Failed to load:\", error)}\n onPlay={() => console.log(\"Animation playing\")}\n onPause={() => console.log(\"Animation paused\")}\n onStop={() => console.log(\"Animation stopped\")}\n />\n );\n}\n```\n",[],[195,660,661,1302,1456],"d563224e-0ddd-11f1-8b80-42dde27851f2","panel.md","d5632320-0ddd-11f1-8b80-42dde27851f2",45,["D",1771538184410],"# Panel\n\nA styled panel component for React Flow-based canvases to position custom UI\nelements.\n\nThe `Panel` component provides a positioned container for custom UI elements on\nReact Flow canvases. It includes modern card styling with backdrop blur and\nflexible positioning options.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add panel\n```\n\n## Features\n\n- Flexible positioning (top-left, top-right, bottom-left, bottom-right,\n top-center, bottom-center)\n- Rounded pill design with backdrop blur\n- Theme-aware card background\n- Flexbox layout for easy content alignment\n- Subtle drop shadow for depth\n- Full TypeScript support\n- Compatible with React Flow's panel system\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------ | ------- | --------------------------------------------------- |\n| `position` | `unknown` | - | Position of the panel on the canvas. |\n| `className` | `string` | - | Additional CSS classes to apply to the panel. |\n| `...props` | `ComponentProps` | - | Any other props from @xyflow/react Panel component. |\n",[],[195,660,661,1302,1464],"d5c093fc-0ddd-11f1-b72b-42dde27851f2","package-info.md","d5c094ce-0ddd-11f1-b72b-42dde27851f2",65,["D",1771538185010],"# Package Info\n\nDisplay dependency information and version changes.\n\nThe `PackageInfo` component displays package dependency information including\nversion changes and change type badges.\n\nSee `scripts/package-info.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add package-info\n```\n\n## Features\n\n- Version change display (current → new)\n- Color-coded change type badges\n- Dependencies list\n- Description support\n\n## Change Types\n\n| Type | Color | Use Case |\n| --------- | ------ | ------------------ |\n| `major` | Red | Breaking changes |\n| `minor` | Yellow | New features |\n| `patch` | Green | Bug fixes |\n| `added` | Blue | New dependency |\n| `removed` | Gray | Removed dependency |\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------------- | -------------------------------------- | -------- | ---------------------------- |\n| `name` | `string` | Required | Package name. |\n| `currentVersion` | `string` | - | Current installed version. |\n| `newVersion` | `string` | - | New version being installed. |\n| `changeType` | `unknown` | - | Type of version change. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the header div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom name content. Defaults to the name from context. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `children` | `React.ReactNode` | - | Custom change type label. Defaults to the changeType from context. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the Badge component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | --------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom version content. Defaults to version transition display. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | ------------------------ |\n| `...props` | `React.HTMLAttributes` | - | Spread to the p element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ---------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | -------- | ---------------------- |\n| `name` | `string` | Required | Dependency name. |\n| `version` | `string` | - | Dependency version. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the row div. |\n",[],[195,660,661,1302,1472],"d5539108-0ddd-11f1-8b80-42dde27851f2","open-in-chat.md","d55391da-0ddd-11f1-8b80-42dde27851f2",42,["D",1771538184307],"# Open In Chat\n\nA dropdown menu for opening queries in various AI chat platforms including\nChatGPT, Claude, T3, Scira, and v0.\n\nThe `OpenIn` component provides a dropdown menu that allows users to open\nqueries in different AI chat platforms with a single click.\n\nSee `scripts/open-in-chat.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add open-in-chat\n```\n\n## Features\n\n- Pre-configured links to popular AI chat platforms\n- Context-based query passing for cleaner API\n- Customizable dropdown trigger button\n- Automatic URL parameter encoding for queries\n- Support for ChatGPT, Claude, T3 Chat, Scira AI, v0, and Cursor\n- Branded icons for each platform\n- TypeScript support with proper type definitions\n- Accessible dropdown menu with keyboard navigation\n- External link indicators for clarity\n\n## Supported Platforms\n\n- **ChatGPT** - Opens query in OpenAI's ChatGPT with search hints\n- **Claude** - Opens query in Anthropic's Claude AI\n- **T3 Chat** - Opens query in T3 Chat platform\n- **Scira AI** - Opens query in Scira's AI assistant\n- **v0** - Opens query in Vercel's v0 platform\n- **Cursor** - Opens query in Cursor AI editor\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | ------------------------------------------------------------------ |\n| `query` | `string` | - | The query text to be sent to all AI platforms. |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying radix-ui DropdownMenu component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `children` | `React.ReactNode` | - | Custom trigger button. |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | -------------------------------------------------- | ------- | ---------------------------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply to the dropdown content. |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuContent component. |\n\n### ``, ``, ``, ``, ``, ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuItem component. The query is automatically provided via context from the parent OpenIn component. |\n\n### ``, ``, ``\n\nAdditional composable components for custom dropdown menu items, labels, and\nseparators that follow the same props pattern as their underlying radix-ui\ncounterparts.\n",[],[195,660,661,1302,1480],"d5571e5e-0ddd-11f1-adf3-42dde27851f2","node.md","d5571f12-0ddd-11f1-adf3-42dde27851f2",43,["D",1771538184320],"# Node\n\nA composable node component for React Flow-based canvases with Card-based\nstyling.\n\nThe `Node` component provides a composable, Card-based node for React Flow\ncanvases. It includes support for connection handles, structured layouts, and\nconsistent styling using shadcn/ui components.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add node\n```\n\n## Features\n\n- Built on shadcn/ui Card components for consistent styling\n- Automatic handle placement (left for target, right for source)\n- Composable sub-components (Header, Title, Description, Action, Content,\n Footer)\n- Semantic structure for organizing node information\n- Pre-styled sections with borders and backgrounds\n- Responsive sizing with fixed small width\n- Full TypeScript support with proper type definitions\n- Compatible with React Flow's node system\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------- |\n| `handles` | `unknown` | - | Configuration for connection handles. Target renders on the left, source on the right. |\n| `className` | `string` | - | Additional CSS classes to apply to the node. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying Card component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |\n| `className` | `string` | - | Additional CSS classes to apply to the header. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardHeader component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------- | ------- | ----------------------------------------------------------------- |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardTitle component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------- | ------- | ----------------------------------------------------------------------- |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardDescription component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardAction component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `className` | `string` | - | Additional CSS classes to apply to the content. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ----------- | ----------------------------------- | ------- | ------------------------------------------------------------------ |\n| `className` | `string` | - | Additional CSS classes to apply to the footer. |\n| `...props` | `ComponentProps` | - | Any other props are spread to the underlying CardFooter component. |\n",[],[195,660,661,1302,1488],"d5b5d4f8-0ddd-11f1-9539-42dde27851f2","model-selector.md","d5b5d5ca-0ddd-11f1-9539-42dde27851f2",63,["D",1771538184940],"# Model Selector\n\nA searchable command palette for selecting AI models in your chat interface.\n\nThe `ModelSelector` component provides a searchable command palette interface\nfor selecting AI models. It's built on top of the cmdk library and provides a\nkeyboard-navigable interface with search functionality.\n\nSee `scripts/model-selector.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add model-selector\n```\n\n## Features\n\n- Searchable interface with keyboard navigation\n- Fuzzy search filtering across model names\n- Grouped model organization by provider\n- Keyboard shortcuts support\n- Empty state handling\n- Customizable styling with Tailwind CSS\n- Built on cmdk for excellent accessibility\n- TypeScript support with proper type definitions\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | -------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying Dialog component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DialogTrigger component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `title` | `ReactNode` | - | Accessible title for the dialog (rendered in sr-only). |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DialogContent component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandDialog component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandInput component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandList component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandEmpty component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | -------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandGroup component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | ------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------- | ------- | ----------------------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandShortcut component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying CommandSeparator component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------- | -------- | -------------------------------------------------------------------------------------------------- |\n| `provider` | `string` | Required | The AI provider name. Supports major providers like |\n| `...props` | `Omit`\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ---------------------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying span element. |\n",[],[195,660,661,1302,1496],"d5049576-0ddd-11f1-a0cd-42dde27851f2","mic-selector.md","d504962a-0ddd-11f1-a0cd-42dde27851f2",27,["D",1771538183790],"# Mic Selector\n\nA composable dropdown component for selecting audio input devices with\npermission handling and device change detection.\n\nThe `MicSelector` component provides a flexible and composable interface for\nselecting microphone input devices. Built on shadcn/ui's Command and Popover\ncomponents, it features automatic device detection, permission handling, dynamic\ndevice list updates, and intelligent device name parsing.\n\nSee `scripts/mic-selector.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add mic-selector\n```\n\n## Features\n\n- Fully composable architecture with granular control components\n- Automatic audio input device enumeration\n- Permission-based device name display\n- Real-time device change detection via devicechange events\n- Intelligent device label parsing with ID extraction\n- Controlled and uncontrolled component patterns\n- Responsive width matching between trigger and content\n- Built on shadcn/ui Command and Popover components\n- Full TypeScript support with proper types for all components\n\n## Props\n\n### ``\n\nRoot Popover component that provides context for all child components.\n\n| Prop | Type | Default | Description |\n| --------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |\n| `defaultValue` | `string` | - | The default selected device ID (uncontrolled). |\n| `value` | `string` | - | The selected device ID (controlled). |\n| `onValueChange` | `(deviceId: string) => void` | - | Callback fired when the selected device changes. |\n| `defaultOpen` | `boolean` | `false` | The default open state (uncontrolled). |\n| `open` | `boolean` | - | The open state (controlled). |\n| `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. Automatically requests microphone permission when opened without permission. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Popover component. |\n\n### ``\n\nButton that opens the microphone selector popover. Automatically tracks its\nwidth to match the popover content.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | --------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component. |\n\n### ``\n\nDisplays the currently selected microphone name or a placeholder.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n### ``\n\nContainer for the Command component, rendered inside the popover.\n\n| Prop | Type | Default | Description |\n| ---------------- | --------------------------------------------- | ------- | --------------------------------------------------------- |\n| `popoverOptions` | `React.ComponentProps` | - | Props to pass to the underlying PopoverContent component. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Command component. |\n\n### ``\n\nSearch input for filtering microphones.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandInput component. |\n\n### ``\n\nWrapper for the list of microphone items. Uses render props pattern to provide\naccess to device data.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------------ | ------- | ------------------------------------------------------------- |\n| `children` | `(devices: MediaDeviceInfo[]) => ReactNode` | - | Render function that receives the array of available devices. |\n| `...props` | `Omit,` | - | Any other props are spread to the CommandList component. |\n\n### ``\n\nMessage shown when no microphones match the search.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------- | ------- | --------------------------------------------------------- |\n| `children` | `ReactNode` | - | The message to display. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. |\n\n### ``\n\nSelectable item representing a microphone.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------- |\n| `value` | `string` | - | The device ID for this item. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandItem component. |\n\n### ``\n\nDisplays a formatted microphone label with intelligent device ID parsing.\nAutomatically extracts and styles device IDs in the format (XXXX:XXXX).\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ----------------------------------------------- |\n| `device` | `MediaDeviceInfo` | - | The MediaDeviceInfo object for the device. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. |\n\n## Hooks\n\n### `useAudioDevices()`\n\nA custom hook for managing audio input devices. This hook is used internally by\nthe `MicSelector` component but can also be used independently.\n\n```tsx\nimport { useAudioDevices } from \"@repo/elements/mic-selector\";\n\nexport default function Example() {\n const { devices, loading, error, hasPermission, loadDevices } =\n useAudioDevices();\n\n return (\n

\n );\n}\n```\n\n#### Return Value\n\n| Prop | Type | Default | Description |\n| --------------- | --------------------- | ------- | ---------------------------------------------------------------- |\n| `devices` | `MediaDeviceInfo[]` | - | Array of available audio input devices. |\n| `loading` | `boolean` | - | Whether devices are currently being loaded. |\n| `error` | `string | null` | - |\n| `hasPermission` | `boolean` | - | Whether microphone permission has been granted. |\n| `loadDevices` | `() => Promise\n ))}\n \n);\n\nexport default MessageAttachments;\n```\n\n## Features\n\n- Three display variants: grid (thumbnails), inline (badges), and list (rows)\n- Supports both FileUIPart and SourceDocumentUIPart from the AI SDK\n- Automatic media type detection (image, video, audio, document, source)\n- Hover card support for inline previews\n- Remove button with customizable callback\n- Composable architecture for maximum flexibility\n- Accessible with proper ARIA labels\n- TypeScript support with exported utility functions\n\n## Examples\n\n### Grid Variant\n\nBest for displaying attachments in messages with visual thumbnails.\n\nSee `scripts/attachments.tsx` for this example.\n\n### Inline Variant\n\nBest for compact badge-style display in input areas with hover previews.\n\nSee `scripts/attachments-inline.tsx` for this example.\n\n### List Variant\n\nBest for file lists with full metadata display.\n\nSee `scripts/attachments-list.tsx` for this example.\n\n## Props\n\n### ``\n\nContainer component that sets the layout variant.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------- |\n| `variant` | `unknown` | - | The display layout variant. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. |\n\n### ``\n\nIndividual attachment item wrapper.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ----------------------------------------------------------------- |\n| `data` | `unknown` | - | The attachment data (FileUIPart or SourceDocumentUIPart with id). |\n| `onRemove` | `() => void` | - | Callback fired when the remove button is clicked. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. |\n\n### ``\n\nDisplays the media preview (image, video, or icon).\n\n| Prop | Type | Default | Description |\n| -------------- | -------------------------------------- | ------- | ---------------------------------------------------- |\n| `fallbackIcon` | `React.ReactNode` | - | Custom icon to display when no preview is available. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. |\n\n### ``\n\nDisplays the filename and optional media type.\n\n| Prop | Type | Default | Description |\n| --------------- | -------------------------------------- | ------- | -------------------------------------------------- |\n| `showMediaType` | `boolean` | `false` | Whether to show the media type below the filename. |\n| `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. |\n\n### ``\n\nRemove button that appears on hover.\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ------------------------------------------ |\n| `label` | `string` | - | Screen reader label for the button. |\n| `...props` | `React.ComponentProps` | - | Spread to the underlying Button component. |\n\n### ``\n\nWrapper for hover preview functionality.\n\n| Prop | Type | Default | Description |\n| ------------ | ---------------------------------------- | ------- | --------------------------------------------- |\n| `openDelay` | `number` | `0` | Delay in ms before opening the hover card. |\n| `closeDelay` | `number` | `0` | Delay in ms before closing the hover card. |\n| `...props` | `React.ComponentProps` | - | Spread to the underlying HoverCard component. |\n\n### ``\n\nTrigger element for the hover card.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ---------------------------------------------------- |\n| `...props` | `React.ComponentProps` | - | Spread to the underlying HoverCardTrigger component. |\n\n### ``\n\nContent displayed in the hover card.\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------------------------------- | ------- | ---------------------------------------------------- |\n| `align` | `unknown` | - | Alignment of the hover card content. |\n| `...props` | `React.ComponentProps` | - | Spread to the underlying HoverCardContent component. |\n\n### ``\n\nEmpty state component when no attachments are present.\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | ------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. |\n\n## Utility Functions\n\n### `getMediaCategory(data)`\n\nReturns the media category for an attachment.\n\n```tsx\nimport { getMediaCategory } from \"@/components/ai-elements/attachments\";\n\nconst category = getMediaCategory(attachment);\n// Returns: \"image\" | \"video\" | \"audio\" | \"document\" | \"source\" | \"unknown\"\n```\n\n### `getAttachmentLabel(data)`\n\nReturns the display label for an attachment.\n\n```tsx\nimport { getAttachmentLabel } from \"@/components/ai-elements/attachments\";\n\nconst label = getAttachmentLabel(attachment);\n// Returns filename or fallback like \"Image\" or \"Attachment\"\n```\n",[],[195,660,661,1302,1656],"d56f1b62-0ddd-11f1-8ab1-42dde27851f2","artifact.md","d56f1c20-0ddd-11f1-8ab1-42dde27851f2",47,["D",1771538184476],"# Artifact\n\nA container component for displaying generated content like code, documents, or\nother outputs with built-in actions.\n\nThe `Artifact` component provides a structured container for displaying\ngenerated content like code, documents, or other outputs with built-in header\nactions.\n\nSee `scripts/artifact.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add artifact\n```\n\n## Features\n\n- Structured container with header and content areas\n- Built-in header with title and description support\n- Flexible action buttons with tooltips\n- Customizable styling for all subcomponents\n- Support for close buttons and action groups\n- Clean, modern design with border and shadow\n- Responsive layout that adapts to content\n- TypeScript support with proper type definitions\n- Composable architecture for maximum flexibility\n\n## Examples\n\n### With Code Display\n\nSee `scripts/artifact.tsx` for this example.\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the underlying div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the underlying div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the underlying paragraph element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | ------- | --------------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the underlying paragraph element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the underlying div element. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `tooltip` | `string` | - | Tooltip text to display on hover. |\n| `label` | `string` | - | Screen reader label for the action button. |\n| `icon` | `LucideIcon` | - | Lucide icon component to display in the button. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------- | ------- | --------------------------------------------------------- |\n| `...props` | `React.HTMLAttributes` | - | Any other props are spread to the underlying div element. |\n",[],[195,660,661,1302,1664],"d5009890-0ddd-11f1-affc-42dde27851f2","agent.md","d5009a70-0ddd-11f1-affc-42dde27851f2",26,["D",1771538183762],"# Agent\n\nA composable component for displaying AI agent configuration with model,\ninstructions, tools, and output schema.\n\nThe `Agent` component displays an interface for showing AI agent configuration\ndetails. It's designed to represent a configured agent from the AI SDK, showing\nthe agent's model, system instructions, available tools (with expandable input\nschemas), and output schema.\n\nSee `scripts/agent.tsx` for this example.\n\n## Installation\n\n```bash\nnpx ai-elements@latest add agent\n```\n\n## Usage with AI SDK\n\nDisplay an agent's configuration alongside your chat interface. Tools are\ndisplayed in an accordion where clicking the description expands to show the\ninput schema.\n\n```tsx title=\"app/page.tsx\"\n\"use client\";\n\nimport { tool } from \"ai\";\nimport { z } from \"zod\";\nimport {\n Agent,\n AgentContent,\n AgentHeader,\n AgentInstructions,\n AgentOutput,\n AgentTool,\n AgentTools,\n} from \"@/components/ai-elements/agent\";\n\nconst webSearch = tool({\n description: \"Search the web for information\",\n inputSchema: z.object({\n query: z.string().describe(\"The search query\"),\n }),\n});\n\nconst readUrl = tool({\n description: \"Read and parse content from a URL\",\n inputSchema: z.object({\n url: z.string().url().describe(\"The URL to read\"),\n }),\n});\n\nconst outputSchema = `z.object({\n sentiment: z.enum(['positive', 'negative', 'neutral']),\n score: z.number(),\n summary: z.string(),\n})`;\n\nexport default function Page() {\n return (\n \n \n \n \n Analyze the sentiment of the provided text and return a structured\n analysis with sentiment classification, confidence score, and summary.\n \n \n \n \n \n \n \n \n );\n}\n```\n\n## Features\n\n- Model badge in header\n- Instructions rendered as markdown\n- Tools displayed as accordion items with expandable input schemas\n- Output schema display with syntax highlighting\n- Composable structure for flexible layouts\n- Works with AI SDK `Tool` type\n\n## Props\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------- |\n| `...props` | `React.ComponentProps<` | - | Any props are spread to the root div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | -------- | ------------------------------------------------ |\n| `name` | `string` | Required | The name of the agent. |\n| `model` | `string` | - | The model identifier (e.g. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | ------- | ------------------------------------------------ |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | -------- | ------------------------------------------------ |\n| `children` | `string` | Required | The instruction text. |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------- | ------- | ------------------------------------------------------ |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the Accordion component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | -------------------------------------------- | -------- | ----------------------------------------------------------------------- |\n| `tool` | `Tool` | Required | The tool object from the AI SDK containing description and inputSchema. |\n| `value` | `string` | Required | Unique identifier for the accordion item. |\n| `...props` | `React.ComponentProps` | - | Any other props are spread to the AccordionItem component. |\n\n### ``\n\n| Prop | Type | Default | Description |\n| ---------- | ----------------------- | -------- | ------------------------------------------------------------------- |\n| `schema` | `string` | Required | The output schema as a string (displayed with syntax highlighting). |\n| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |\n",[],[195,660,661,1302,1672],"d49fa990-0ddd-11f1-affc-42dde27851f2",12,["D",1771538183130],[214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261],[195,660,661,1302],"d493da5c-0ddd-11f1-affc-42dde27851f2","d461f898-0ddd-11f1-83db-42dde27851f2",11,["D",1771538183055],[213,262,341],[195,660,661],"d461f7bc-0ddd-11f1-83db-42dde27851f2",7,["D",1771538182728],[212],[195,660],["D",1771538182366],[211,342,343],[195],["D",1771533418336],["D",1789530642963],{"_16":17,"_84":80},{"_16":17,"_78":-5,"_79":80,"_33":34,"_81":82,"_83":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":21,"_77":17},"ctx",{"_59":-5,"_105":1736,"_1737":1738,"_1739":1740,"_1741":26,"_1742":26,"_1743":26,"_1744":103,"_1745":-5,"_1746":-7,"_1747":-7,"_1748":40,"_1749":26,"_1750":26,"_1751":-5,"_1752":26,"_1753":26,"_1754":26,"_1755":-5},"ENV",{"_1707":1708,"_1709":1710,"_1711":68,"_1712":1713,"_1714":1715,"_1716":1717,"_1718":1719,"_1720":1721,"_1722":1723,"_1724":1725,"_1726":1727,"_1728":1729,"_1730":1731,"_1732":1733,"_1734":1735},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]