Skip to content
<Tokens />

<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)


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


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

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{
    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.

© 2023 Vercel Inc.