AI Copilots in React: Building Chat-Powered UIs with Vercel's Free SDK

The Rise of Conversational UI: Why Now?

Moving Beyond Traditional Forms and Buttons

Use Cases for AI Copilots

Introducing the Vercel AI SDK: Your Toolkit for Building with AI

What is the Vercel AI SDK?

Key Features and Benefits

Why 'Streaming-First' Matters

Building Your First Chatbot: A Step-by-Step Guide

Setting Up the Backend: The API Route

import { OpenAI } from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

Creating the Frontend: The useChat Hook

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="flex flex-col h-screen">
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map(m => (
          <div key={m.id} className="mb-4">
            <div className="font-bold">
              {m.role === 'user' ? 'You: ' : 'AI: '}
            </div>
            <div>{m.content}</div>
          </div>
        ))}
      </div>
      
      <form onSubmit={handleSubmit} className="p-4 border-t">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Say something..."
          className="w-full p-2 border rounded"
        />
      </form>
    </div>
  );
}

Rendering the UI

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map(m => (
          <div
            key={m.id}
            className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div
              className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                m.role === 'user'
                  ? 'bg-blue-500 text-white'
                  : 'bg-gray-200 text-gray-800'
              }`}
            >
              {m.content}
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg">
              <span className="animate-pulse">AI is thinking...</span>
            </div>
          </div>
        )}
      </div>
      
      <form onSubmit={handleSubmit} className="p-4 border-t bg-white">
        <div className="flex space-x-2">
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="Ask me anything..."
            className="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={isLoading}
            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50"
          >
            Send
          </button>
        </div>
      </form>
    </div>
  );
}

Beyond Text: Generative UI with the Vercel AI SDK

What is Generative UI?

Example: A Dynamic Stock Ticker Component

function StockTicker({ symbol, price, change }: { 
  symbol: string; 
  price: number; 
  change: number;
}) {
  const isPositive = change >= 0;
  
  return (
    <div className="border rounded-lg p-4 bg-white shadow-sm">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-bold">{symbol}</h3>
        <div className={`text-2xl font-bold ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
          ${price.toFixed(2)}
        </div>
      </div>
      <div className={`text-sm ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
        {isPositive ? '▲' : '▼'} {Math.abs(change).toFixed(2)} ({(change / price * 100).toFixed(2)}%)
      </div>
    </div>
  );
}

import { render } from 'ai/rsc';

const response = await openai.chat.completions.create({
  model: 'gpt-4',
  messages,
  functions: [{
    name: 'show_stock_price',
    description: 'Display current stock price',
    parameters: {
      type: 'object',
      properties: {
        symbol: { type: 'string' },
        price: { type: 'number' },
        change: { type: 'number' }
      }
    }
  }]
});

// When the AI calls the function, render the component
if (response.choices[0].function_call?.name === 'show_stock_price') {
  const args = JSON.parse(response.choices[0].function_call.arguments);
  return render(<StockTicker {...args} />);
}

How it Works: The render Function

const components = {
  StockTicker,
  WeatherCard,
  TodoList,
  Chart
};

export async function POST(req: Request) {
  const { messages } = await req.json();
  
  // Let the AI know what components are available
  const systemPrompt = `You can render these UI components:
    - StockTicker: for showing stock prices
    - WeatherCard: for weather information
    - TodoList: for task management
    - Chart: for data visualization
    
    Use them when appropriate instead of just text responses.`;
  
  // Process the response and render components as needed
  const ui = await processAIResponse(response, components);
  return new StreamingTextResponse(ui);
}

Best Practices for Building AI Copilots

Managing Loading and Error States

function Chat() {
  const { 
    messages, 
    isLoading, 
    error,
    reload 
  } = useChat();
  
  if (error) {
    return (
      <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
        <p className="text-red-800">Something went wrong. Please try again.</p>
        <button 
          onClick={() => reload()}
          className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        >
          Retry
        </button>
      </div>
    );
  }
  
  // Rest of your chat UI
}

Setting the Context and Prompt Engineering

const systemPrompt = `You are a helpful assistant for an e-commerce platform.
Your role is to:
- Help users find products they're looking for
- Answer questions about orders and shipping
- Provide product recommendations based on their needs
- Assist with account and payment issues

Important guidelines:
- Be concise but friendly
- Ask clarifying questions when needed
- Always verify order numbers before providing information
- If you don't know something, admit it and offer to help find the answer
- Never make up product information or prices`;

Handling Cost and Performance

const model = isComplexQuery(message) ? 'gpt-4' : 'gpt-3.5-turbo';

const MAX_MESSAGES = 20;
if (messages.length > MAX_MESSAGES) {
  // Summarize and start a new conversation
}

const cachedResponse = await redis.get(`response:${queryHash}`);
if (cachedResponse) {
  return new Response(cachedResponse);
}

Conclusion

References