content/docs/07-reference/02-ai-sdk-ui/index.mdx
AI SDK UI is designed to help you build interactive chat, completion, and assistant applications with ease. It is a framework-agnostic toolkit, streamlining the integration of advanced AI functionalities into your applications.
AI SDK UI contains the following hooks:
<IndexCards cards={[ { title: 'useChat', description: 'Use a hook to interact with language models in a chat interface.', href: '/docs/reference/ai-sdk-ui/use-chat', }, { title: 'useCompletion', description: 'Use a hook to interact with language models in a completion interface.', href: '/docs/reference/ai-sdk-ui/use-completion', }, { title: 'useObject', description: 'Use a hook for consuming a streamed JSON objects.', href: '/docs/reference/ai-sdk-ui/use-object', }, { title: 'convertToModelMessages', description: 'Convert useChat messages to ModelMessages for AI functions.', href: '/docs/reference/ai-sdk-ui/convert-to-model-messages', }, { title: 'pruneMessages', description: 'Prunes model messages from a list of model messages.', href: '/docs/reference/ai-sdk-ui/prune-messages', }, { title: 'createUIMessageStream', description: 'Create a UI message stream to stream additional data to the client.', href: '/docs/reference/ai-sdk-ui/create-ui-message-stream', }, { title: 'createUIMessageStreamResponse', description: 'Create a response object to stream UI messages to the client.', href: '/docs/reference/ai-sdk-ui/create-ui-message-stream-response', }, { title: 'pipeUIMessageStreamToResponse', description: 'Pipe a UI message stream to a Node.js ServerResponse object.', href: '/docs/reference/ai-sdk-ui/pipe-ui-message-stream-to-response', }, { title: 'readUIMessageStream', description: 'Transform a stream of UIMessageChunk objects into an AsyncIterableStream of UIMessage objects.', href: '/docs/reference/ai-sdk-ui/read-ui-message-stream', }, ]} />
AI SDK UI supports the following frameworks: React, Svelte, Vue.js, Angular, and SolidJS.
Here is a comparison of the supported functions across these frameworks:
| useChat | useCompletion | useObject | |
|---|---|---|---|
React @ai-sdk/react | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
Vue.js @ai-sdk/vue | <Check size={18} /> Chat | <Check size={18} /> | <Check size={18} /> |
Svelte @ai-sdk/svelte | <Check size={18} /> Chat | <Check size={18} /> Completion | <Check size={18} /> StructuredObject |
Angular @ai-sdk/angular | <Check size={18} /> Chat | <Check size={18} /> Completion | <Check size={18} /> StructuredObject |
| SolidJS (community) | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |