AI Configuration

Configure AI providers, models, and features in your application.

Configuration File

All AI configuration is centralized in src/lib/ai/config.ts:

// Provider configuration
export const AI_PROVIDERS = {
  openai: 'openai',
  anthropic: 'anthropic',
} as const;

// Model configuration
export const AI_MODELS = {
  'gpt-4o': 'openai/gpt-4o',
  'gpt-4o-mini': 'openai/gpt-4o-mini',
  'claude-4-sonnet': 'anthropic/claude-sonnet-4-20250514',
  'claude-3.5-sonnet': 'anthropic/claude-3-5-sonnet-20241022',
} as const;

// Default configuration
export const AI_CONFIG = {
  defaultModel: AI_MODELS['gpt-4o'],
  maxSteps: 20,
  streamThrottle: 50,
  apiEndpoint: '/api/ai/chat',
} as const;

// Feature flags
export const AI_FEATURES = {
  toolApproval: true,
  streaming: true,
  multiStep: true,
  generativeUI: true,
  patternMemory: true,
} as const;

Provider Setup

OpenAI

npm install @ai-sdk/openai

OPENAI_API_KEY=sk-...

import { openai } from '@ai-sdk/openai';

const model = openai('gpt-4o');

Anthropic

npm install @ai-sdk/anthropic

ANTHROPIC_API_KEY=sk-ant-...

import { anthropic } from '@ai-sdk/anthropic';

const model = anthropic('claude-sonnet-4-20250514');

Feature Flags

Tool Approval

When enabled, certain tools require user approval:

AI_FEATURES.toolApproval = true;

// In tool definition
const deleteTool = {
  name: 'deleteItem',
  requiresApproval: true,
  // ...
};

Streaming

Enable/disable response streaming:

AI_FEATURES.streaming = true;

// Client-side handling
if (AI_FEATURES.streaming) {
  // Handle streaming response
} else {
  // Wait for complete response
}

Multi-Step Execution

Allow AI to execute multiple tool calls:

AI_FEATURES.multiStep = true;

// In streamText call
streamText({
  maxSteps: AI_CONFIG.maxSteps, // Maximum tool call iterations
  // ...
});

Generative UI

Enable widget rendering in chat:

AI_FEATURES.generativeUI = true;

// Widgets will render tool results
{toolResult && AI_FEATURES.generativeUI && (
  <WidgetRouter toolName={toolName} result={toolResult} />
)}

Pattern Memory

Enable user preference learning:

AI_FEATURES.patternMemory = true;

// Memory tools available
const tools = AI_FEATURES.patternMemory
  ? [...allTools, ...memoryTools]
  : allTools;

Tool Categories

Configure available tool categories:

export const TOOL_CATEGORIES = {
  navigation: ['navigateTo', 'goBack', 'scrollToComponent'],
  components: ['highlightComponent', 'clickComponent', 'focusComponent'],
  filters: ['setFilter', 'clearFilters', 'setDateRange', 'setSearch'],
  data: ['queryData', 'aggregateData', 'analyzePattern', 'exportData'],
  visualization: ['createChart', 'createDataGrid', 'createWidget'],
  memory: ['rememberPattern', 'recallPattern', 'listPatterns'],
} as const;

Runtime Configuration

Override configuration at runtime:

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

const chat = useAIChat({
  endpoint: '/api/custom-chat', // Custom endpoint
  // Custom options...
});

Environment-Based Configuration

export const AI_CONFIG = {
  defaultModel: process.env.AI_MODEL || AI_MODELS['gpt-4o'],
  maxSteps: Number(process.env.AI_MAX_STEPS) || 20,
  apiEndpoint: process.env.AI_ENDPOINT || '/api/ai/chat',
} as const;

Type Safety

All configuration is fully typed:

export type AIProvider = (typeof AI_PROVIDERS)[keyof typeof AI_PROVIDERS];
export type AIModel = (typeof AI_MODELS)[keyof typeof AI_MODELS];
export type ToolCategory = keyof typeof TOOL_CATEGORIES;

// Usage with type checking
const provider: AIProvider = 'openai'; // ✓
const provider: AIProvider = 'invalid'; // ✗ Type error

Best Practices

1. Centralize configuration - Keep all AI config in one place
2. Use environment variables - Don't hardcode API keys
3. Enable feature flags - Control features without code changes
4. Type everything - Leverage TypeScript for safety
5. Document changes - Keep configuration documented