| ai-elements |
vercel/ai-elements |
5 |
https://sdk.vercel.ai/docs/ai-sdk-ui/chatbot-with-tool-calling |
https://sdk.vercel.ai/sitemap.xml |
| components/ai-elements/** |
| src/components/ai-elements/** |
| components/**/chat* |
| components/**/*chat* |
| components/**/message* |
| components/**/*message* |
| src/components/**/chat* |
| src/components/**/*chat* |
| src/components/**/message* |
| src/components/**/*message* |
|
| \bnpx\s+ai-elements\b |
| \bnpm\s+(install|i|add)\s+[^\n]*\bai-elements\b |
| \bpnpm\s+(install|i|add)\s+[^\n]*\bai-elements\b |
| \bbun\s+(install|i|add)\s+[^\n]*\bai-elements\b |
| \byarn\s+add\s+[^\n]*\bai-elements\b |
| \bnpx\s+shadcn@latest\s+add\s+[^\n]*elements.ai-sdk.dev\b |
| \bnpm\s+(install|i|add)\s+[^\n]*\b@ai-sdk/react\b |
| \bpnpm\s+(install|i|add)\s+[^\n]*\b@ai-sdk/react\b |
| \bbun\s+(install|i|add)\s+[^\n]*\b@ai-sdk/react\b |
| \byarn\s+add\s+[^\n]*\b@ai-sdk/react\b |
|
| ai |
| @ai-sdk/* |
| @ai-sdk/react |
| @/components/ai-elements/* |
|
| phrases |
allOf |
anyOf |
noneOf |
minScore |
| ai elements |
| ai components |
| chat components |
| chat ui |
| chat interface |
| voice elements |
| code elements |
| voice agent |
| speech input |
| transcription component |
| code editor component |
| streaming markdown |
| streaming ui |
| streaming response |
| markdown formatting |
|
|
| message component |
| conversation component |
| tool call display |
| reasoning display |
| voice conversation |
| speech to text |
| text to speech |
| mic selector |
| voice selector |
| ai code editor |
| file tree component |
| terminal component |
| stack trace component |
| test results component |
| react-markdown |
| chat ui |
| terminal |
| useChat |
| streamText |
|
| vue |
| svelte |
| readme |
| markdown file |
| changelog |
|
6 |
|
| pattern |
message |
severity |
skipIfFileContains |
upgradeToSkill |
upgradeWhy |
| part.text\b |
You are rendering AI message text as raw strings — use <MessageResponse> from @/components/ai-elements/message to render markdown, code blocks, and rich formatting. Install with: npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json |
warn |
ai-elements/message |
ai-elements |
Guides migration from raw text rendering to AI Elements MessageResponse for streaming-aware markdown display. |
|
| pattern |
message |
severity |
skipIfFileContains |
upgradeToSkill |
upgradeWhy |
| react-markdown |
Use <MessageResponse> from @/components/ai-elements/message instead of react-markdown — it handles streaming, code highlighting, and AI SDK message parts out of the box |
warn |
ai-elements/message |
ai-elements |
Guides migration from react-markdown to AI Elements MessageResponse with streaming, code highlighting, and math support. |
|
| pattern |
message |
severity |
skipIfFileContains |
upgradeToSkill |
upgradeWhy |
| dangerouslySetInnerHTML |
Do not render AI responses with dangerouslySetInnerHTML — use <MessageResponse> from @/components/ai-elements/message for safe, styled markdown rendering |
error |
ai-elements/message |
ai-elements |
Guides migration from dangerouslySetInnerHTML to AI Elements MessageResponse for safe, streaming-aware AI content rendering. |
|
| pattern |
message |
severity |
| @ts-nocheck |
Do not add @ts-nocheck — this means you installed an AI Elements component with a type conflict. Delete unused components, or reinstall the broken one: npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/<component>.json --overwrite |
error |
|
|
| pattern |
targetSkill |
message |
| {message.content} |
ai-sdk |
Raw message.content rendering detected — loading AI SDK guidance for UIMessage parts migration (message.parts). |
|
| pattern |
targetSkill |
message |
| dangerouslySetInnerHTML |
ai-sdk |
Unsafe HTML rendering of AI content — loading AI SDK guidance for proper streaming and MessageResponse rendering. |
|
| pattern |
targetSkill |
message |
| from\s+[''"](react-markdown|marked|markdown-it|showdown|commonmark)[''"]|require\s*(\s*[''"](react-markdown|marked|markdown-it|showdown|commonmark)[''"] |
ai-elements |
Generic markdown library detected for AI content — use <MessageResponse> from AI Elements instead. It handles streaming, code highlighting, math, mermaid, and CJK out of the box. |
|
|
| aliases |
intents |
entities |
| ai components |
| chat components |
| ai ui kit |
| ai interface |
|
| build chat ui |
| render tool calls |
| show streaming response |
| add reasoning panel |
|
| AIMessage |
| ToolCallDisplay |
| StreamingMessage |
| ReasoningPanel |
| shadcn |
|
|