Migrate from AI Elements
The AI Elements site now says it is moving to shadcn/ui and that the project will be deprecated at the end of November 2026. If you are choosing what to move to, this page maps each AI Elements component to its Unseen UI counterpart and shows how the AI SDK connects.
What changes
| Area | AI Elements | Unseen UI |
|---|---|---|
| Distribution | Source copied into your project with a CLI | One npm package, @stackunseen/ui, updated by version |
| Styling | Tailwind CSS 4 and shadcn/ui | Scoped CSS files and theme tokens; no Tailwind needed |
| Data | Reads AI SDK message parts directly | Controlled components; useAiSdkChat maps AI SDK state for you |
| Approvals | Confirmation and tool approval states | ApprovalCard binds the decision to the proposal version and stays pending until your server answers |
Connect the AI SDK
Keep your useChat hook and server route. Replace the conversation, messages and prompt input with one component:
'use client';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from 'ai';
import { Chat, useAiSdkChat } from '@stackunseen/ui/chat';
import { renderMarkdownPart } from '@stackunseen/ui/markdown';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/chat.css';
export function Assistant() {
const chat = useChat({
transport: new DefaultChatTransport({ api: '/api/chat' }),
sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
});
return <Chat {...useAiSdkChat(chat)} title="Assistant" renderTextPart={renderMarkdownPart} />;
}Tools marked needsApproval on the server show an approval card under the tool; Approve and Reject call addToolApprovalResponse with the approval id. Your own tool views go in renderTool. The Chat on the AI SDK recipe runs this with a simulated chat and has the server route.
If you built your own layout from the pieces, use them directly: PromptInput, Message, ToolCall and ApprovalCard, with fromAiSdkChat from @stackunseen/ui-core/ai-sdk to map messages, tool calls, sources and approvals.
Component map
Each link opens the component page, which shows its import line and stylesheet.
Chatbot
| AI Elements | Unseen UI |
|---|---|
| Attachments | Attachment, FileDropzone |
| Chain of Thought | ChainOfThought |
| Checkpoint | Checkpoint |
| Confirmation | ApprovalCard, shown inline by Chat |
| Context | ContextBar, UsageMeter |
| Conversation | Chat, or ConversationViewport for paged history |
| Inline Citation | Citation |
| Message | Message |
| Model Selector | ModelSelector |
| Plan | Plan |
| Prompt Input | PromptInput |
| Question | ClarificationRequest |
| Queue | MessageQueue |
| Reasoning | Reasoning (public summaries only) |
| Shimmer | LoadingIndicator; in-progress labels in ChainOfThought shimmer on their own |
| Sources | Sources |
| Suggestion | Suggestions |
| Task | ChainOfThought with file chips as sources |
| Tool | ToolCall, ToolGroup |
Code
| AI Elements | Unseen UI |
|---|---|
| Agent | AgentCard |
| Artifact | ArtifactPanel, ArtifactPreview |
| Code Block | MarkdownCodeBlock, CodeTabs |
| Commit | Commit |
| Environment Variables | EnvironmentVariables |
| File Tree | FileExplorer |
| JSX Preview | Not offered: Unseen UI never renders model-written code. Use GeneratedUI for validated generated interfaces |
| Package Info | PackageInfo |
| Sandbox | Not yet; planned |
| Schema Display | SchemaDisplay |
| Snippet | Snippet |
| Stack Trace | StackTrace |
| Terminal | TerminalOutput |
| Test Results | TestResults |
| Web Preview | WebPreview |
Voice
| AI Elements | Unseen UI |
|---|---|
| Audio Player | AudioPlayer |
| Mic Selector | VoiceControl (microphone choice is part of it) |
| Persona | Persona |
| Speech Input | VoiceControl |
| Transcription | Transcription |
| Voice Selector | VoiceSelector |
Workflow and utilities
| AI Elements | Unseen UI |
|---|---|
| Canvas, Node, Edge, Connection, Controls, Panel, Toolbar | WorkflowGraph as one component |
| Image | Image |
| Open In Chat | ShareMenu with a target per chat product |
Styling
Remove the copied AI Elements files once their replacements are in place, then import @stackunseen/ui/styles.css once. Unseen UI's styles are scoped, so they sit beside Tailwind without conflict. Set colors, radius and density with AITheme or export a theme from the Theme Studio.
What to check after moving
- Approval decisions now wait for your server's answer before reading as done. Make sure your route answers.
- Reasoning parts from the AI SDK are not shown by
useAiSdkChat; show public summaries with Reasoning if you want them. - Replies are plain text until you pass
renderTextPart={renderMarkdownPart}.