@ai-sdk/react

AI SDK: React provider

React UI components for the AI SDK:

Setup

npm i ai @ai-sdk/react

Usage

'use client';

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

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

  return (
    <>
      {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>
    </>
  );
}

See the React documentation for more information.

Similar packages

Other packages similar to @ai-sdk/react

@assistant-ui/react

A React toolkit focused on polished assistant and chat interfaces, with components and primitives for messages, threads, and composer experiences. It is more UI-oriented than the AI SDK's hooks; it can be paired with different AI backends.

@copilotkit/react-core

React primitives for adding copilots and in-app AI assistants, including agent interaction and application-context features. It offers a more opinionated copilot and agent integration, while the AI SDK React package provides general-purpose hooks for building AI interactions.

@langchain/langgraph-sdk

The LangGraph SDK includes React-oriented streaming support for interacting with LangGraph applications. It is a closer fit when your backend is a LangGraph agent; the AI SDK React package is designed to work with AI SDK UI endpoints and its broader provider ecosystem.

@chatscope/chat-ui-kit-react

A collection of React components for building chat layouts and user interfaces. It provides presentation components rather than AI-generation hooks, so you typically connect it to your own model or streaming backend.