Skip to main content

​
AI SDK UI

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 provides robust abstractions that simplify the complex tasks of managing chat streams and UI updates on the frontend, enabling you to develop dynamic AI-driven interfaces more efficiently. With three main hooks — useChat, useCompletion, and useObject — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.
  • useChat offers real-time streaming of chat messages, abstracting state management for inputs, messages, loading, and errors, allowing for seamless integration into any UI design.
  • useCompletion enables you to handle text completions in your applications, managing the prompt input and automatically updating the UI as new completions are streamed.
  • useObject is a hook that allows you to consume streamed JSON objects, providing a simple way to handle and display structured data in your application.
These hooks are designed to reduce the complexity and time required to implement AI interactions, letting you focus on creating exceptional user experiences.

​
UI Framework Support

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:
FrameworkuseChatuseCompletionuseObject
React @ai-sdk/react✓✓✓
Vue.js @ai-sdk/vue✓✓✓
Svelte @ai-sdk/svelte✓ Chat✓ Completion✓ StructuredObject
Angular @ai-sdk/angular✓ Chat✓ Completion✓ StructuredObject
SolidJS (community)✓✓✓

​
Framework Examples

Explore these example implementations for different frameworks:

​
Core Features

​
Chat Interfaces

Build full-featured chatbots with:
  • Real-time message streaming
  • Tool calling and execution
  • Message persistence and resumable streams
  • File attachments and multi-modal content
  • Custom metadata and data streaming
Learn more in the Chatbot guide.

​
Text Completions

Create autocomplete and text generation interfaces:
  • Streaming text generation
  • Customizable prompts
  • Loading and error states
  • Input management
Learn more in the Completion guide.

​
Structured Data

Generate and stream structured JSON objects:
  • Type-safe schema validation
  • Partial object streaming
  • Real-time UI updates
  • Enum classification
Learn more in the Object Generation guide.

​
Key Concepts

​
Transport System

Customize how messages are sent to your API with the transport system. Choose from:
  • DefaultChatTransport for HTTP-based communication
  • DirectChatTransport for in-process agent calls
  • TextStreamChatTransport for plain text streams
  • Custom transports for WebSockets or other protocols
Learn more in the Transport guide.

​
Stream Protocol

AI SDK UI supports multiple streaming protocols:
  • UI Message Stream Protocol: Full-featured protocol with tool calls, metadata, and custom data
  • Text Stream Protocol: Simple plain text streaming
Learn more in the Stream Protocol guide.

​
Error Handling

Robust error handling with:
  • Error state management
  • Retry functionality
  • Custom error callbacks
  • Generic error messages for security
Learn more in the Error Handling guide.

​
Getting Started

Install the AI SDK for your framework: 
npm install ai @ai-sdk/react
Create a simple chat interface: 
'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';

export default function Chat() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
    }),
  });
  const [input, setInput] = useState('');

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? <span key={index}>{part.text}</span> : null,
          )}
        </div>
      ))}

      <form
        onSubmit={e => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
            setInput('');
          }
        }}
      >
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
          placeholder="Say something..."
        />
        <button type="submit" disabled={status !== 'ready'}>
          Submit
        </button>
      </form>
    </div>
  );
}

​
Next Steps

Build a Chatbot

Learn how to build interactive chatbots with useChat

Text Completion

Create text completion interfaces with useCompletion

Object Generation

Stream structured JSON objects with useObject

Streaming Data

Stream custom data alongside AI responses