Skill: ai-sdk-ui
SkillDocs & knowledgeThis skill gives your AI accurate, current reference material for building chat interfaces in React with Vercel AI SDK v7. Once added, your AI can write chat UI code using the correct methods, including useChat, DefaultChatTransport, status, and sendMessage, instead of guessing from memory. It also helps when an existing chat interface misbehaves, such as parse errors or values that do not update.
Available today. Use it from your connected AI after setup.
No other account needed.
After adding the skill, ask your AI to build a chat interface in your React app or to fix one that is not working. It will use the documented AI SDK v7 patterns rather than writing useChat from memory.
Then ask your AI: use the Skill: ai-sdk-ui skill
What your AI can do with it
- Build React chat interfaces using Vercel AI SDK v7
- Write useChat code that matches the current version instead of outdated patterns
- Connect a chat interface to your app's backend with DefaultChatTransport
- Show live message and connection status in the interface
- Send messages from the interface using sendMessage
- Diagnose common problems such as stream parse errors, missing responses, and stale values
What this skill tells your AI
The instructions your AI receives, as published by blockmatic/basilic in .agents/skills/ai-sdk-ui-v7/SKILL.md and read by ahel’s review.
Scope
- Applies to:
@ai-sdk/reactuseChatandDefaultChatTransportfromai - Does NOT cover: Backend generation (see ai-sdk-core)
Assumptions
- SDK major is
ai^7;@ai-sdk/reactis a separate package major. Folder followsai - Never write
useChatfrom memory. Grepnode_modules/@ai-sdk/react/docs/andnode_modules/ai/docs/, else https://ai-sdk.dev/docs/ai-sdk-ui/chatbot - Chat HTTP may be Fastify; pass
transportwhen the URL is not/api/chat
Principles
useChatfrom@ai-sdk/react;DefaultChatTransportfromai- Local input state;
sendMessage({ text });statusnotisLoading; rendermessage.parts - Server: see ai-sdk-core. Handlers use
createUIMessageStreamResponse+toUIMessageStream({ stream: result.stream }). Leave deprecatedtoUIMessageStreamResponse()only when the task is unrelated to streaming or the SDK
Constraints
MUST
DefaultChatTransport({ api })when the endpoint is not/api/chat- Disable send while
status !== 'ready'
AVOID
import { useChat } from 'ai/react'toDataStreamResponse/pipeDataStreamToResponse- Pre-v5
handleInputChange/handleSubmit/useAssistant
Interactions
- Uses ai-sdk-core
- Complements fastify, next
Templates
Signals
- GitHub stars
- 89
- Forks
- 11
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
ai-sdk-ui-v7- Source
- github.com/blockmatic/basilic