AI Features Overview

This project uses Vercel AI SDK v6 to power AI-driven features including a chat interface, tool execution, and generative UI widgets.

What is Vercel AI SDK v6?

Vercel AI SDK v6 is a TypeScript library for building AI-powered applications. It provides:

• Streaming responses - Real-time streaming of AI responses
• Tool calling - Define tools that AI can invoke during conversations
• Multi-step agents - Agents that can execute multiple tool calls in sequence
• Generative UI - Render React components based on AI responses
• Provider agnostic - Works with OpenAI, Anthropic, and other providers

Core Concepts

1. Chat Interface

The chat interface uses the useAIChat hook to manage:

• Message history
• Streaming responses
• Tool approvals
• Error handling

import { useAIChat } from '@/components/ai';

const { messages, sendMessage, isLoading } = useAIChat();

2. Tool System

Tools are functions that the AI can call to perform actions:

• Navigation tools - Navigate to different pages
• Data tools - Query and analyze data
• Visualization tools - Create charts and tables
• Memory tools - Remember user preferences

3. Generative UI Widgets

AI responses can include rich widgets:

• ChartWidget - Bar, line, area charts
• DataGridWidget - Data tables
• MetricWidget - KPI metrics
• NavigationWidget - Navigation confirmations

Quick Start

1. Install Dependencies

npm install ai@beta @ai-sdk/react@beta @ai-sdk/openai@beta

2. Set Environment Variables

OPENAI_API_KEY=your-api-key

3. Use the Chat Component

import { ChatContainer, useAIChat } from '@/components/ai';

export function MyComponent() {
  const chat = useAIChat();
  
  return (
    <ChatContainer
      messages={chat.messages}
      input={chat.input}
      onInputChange={chat.setInput}
      onSend={chat.sendMessage}
      isLoading={chat.isLoading}
    />
  );
}

Architecture

src/
├── components/ai/          # UI Components
│   ├── AIProvider/         # Context provider
│   ├── ChatContainer/      # Chat UI
│   ├── ChatMessage/        # Message rendering
│   ├── widgets/            # Generative UI widgets
│   └── useAIChat.ts        # Chat hook
├── lib/ai/                 # Core logic
│   ├── config.ts           # Configuration
│   ├── types.ts            # TypeScript types
│   ├── tools.ts            # Tool definitions
│   └── agents.ts           # Agent factories
└── app/api/ai/chat/        # API route
    └── route.ts            # Streaming endpoint

Feature Flags

Enable/disable features in src/lib/ai/config.ts:

export const AI_FEATURES = {
  toolApproval: true,    // Require approval for certain tools
  streaming: true,       // Stream responses
  multiStep: true,       // Allow multi-step tool execution
  generativeUI: true,    // Render widgets in chat
  patternMemory: true,   // Remember user patterns
};