`<Tokens />`

The Tokens component is a React Server Component for streaming in tokens in a React Component. You can view a live demo with Next.js here (opens in a new tab)

Props

type Props = {
  /**
   * A ReadableStream produced by the AI SDK.
   */
  stream: ReadableStream;
};

Usage

The below example shows usage with OpenAI, but any of the SDK's supported providers work as long as you provide a ReadableStream.

app/page.tsx

import OpenAI from 'openai';
import { OpenAIStream } from 'ai';
import { Tokens } from 'ai/react';
 
export const runtime = 'edge';
 
export default async function Page() {
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY!,
  });
 
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages: [
      {
        role: 'user',
        content: 'Tell me about San Francisco',
      },
    ],
  });
 
  // Convert the response into a friendly text-stream using the SDK's wrappers
  const stream = OpenAIStream(response);
 
  return <Tokens stream={stream} />;
}

And that's it! More customization and examples will be coming soon as we continue to build the AI SDK and explore different use-cases.

streamToResponse ai/prompts