diff options
Diffstat (limited to 'tooling/vercel-ai-sdk/.claude/commands/ai-advanced-features-setup.md')
| -rw-r--r-- | tooling/vercel-ai-sdk/.claude/commands/ai-advanced-features-setup.md | 569 |
1 files changed, 569 insertions, 0 deletions
diff --git a/tooling/vercel-ai-sdk/.claude/commands/ai-advanced-features-setup.md b/tooling/vercel-ai-sdk/.claude/commands/ai-advanced-features-setup.md new file mode 100644 index 0000000..9a7a7b2 --- /dev/null +++ b/tooling/vercel-ai-sdk/.claude/commands/ai-advanced-features-setup.md @@ -0,0 +1,569 @@ +--- +allowed-tools: Read, Write, Edit, MultiEdit, Bash +description: Set up advanced AI SDK features including reasoning models, computer use, and cutting-edge capabilities +argument-hint: "[reasoning|computer-use|generative-ui|edge-optimization|experimental]" +--- + +## Set up Advanced AI SDK Features + +Configure cutting-edge AI SDK capabilities for: $ARGUMENTS + +### Current Advanced Features Analysis + +Existing advanced implementations: !`grep -r "experimental\|reasoning\|computer\|streamUI" . --include="*.ts" --include="*.tsx" | head -5` + +Provider-specific features: !`grep -r "o1-preview\|deepseek\|computer_20241022\|responses" . --include="*.ts" | head -5` + +Experimental configurations: !`grep -r "experimental_" . --include="*.ts" | head -5` + +### Advanced Feature Categories + +**Reasoning Models**: O1-Preview, O3-mini, DeepSeek R1 with thinking capabilities +**Computer Use**: Claude 3.5 Sonnet screen interaction and automation +**Generative UI**: Dynamic component streaming with streamUI +**Edge Optimization**: Vercel Edge Runtime performance enhancements +**Experimental**: Cutting-edge AI SDK experimental features + +### Your Task + +1. **Analyze project requirements** for advanced AI capabilities +2. **Configure reasoning models** with thinking mode and extended context +3. **Set up computer use tools** for automation and testing +4. **Implement generative UI** with dynamic component generation +5. **Optimize for edge deployment** with performance enhancements +6. **Enable experimental features** safely with proper fallbacks +7. **Add comprehensive monitoring** for advanced feature usage +8. **Create testing strategies** for cutting-edge capabilities + +### Implementation Requirements + +#### Reasoning Models Integration + +- O1-Preview and O3-mini setup with thinking tokens +- DeepSeek R1 configuration for enhanced reasoning +- Thinking mode visibility and streaming +- Extended context window management +- Reasoning-specific prompt engineering + +#### Computer Use Capabilities + +- Claude 3.5 Sonnet computer use tool setup +- Screen interaction and automation +- Browser automation and testing +- File system operations +- Cross-platform compatibility + +#### Generative UI Features + +- streamUI implementation for dynamic components +- Real-time component generation +- Interactive widget creation +- Chart and visualization streaming +- Form and dashboard generation + +### Expected Deliverables + +1. **Advanced provider configurations** with reasoning and computer use +2. **Generative UI implementation** with component streaming +3. **Edge runtime optimizations** for global deployment +4. **Experimental features setup** with safety controls +5. **Performance monitoring** for advanced capabilities +6. **Testing suite** covering all advanced features +7. **Documentation** with examples and best practices + +### Advanced Provider Setup + +#### Reasoning Models Configuration + +```typescript +// lib/reasoning-providers.ts +import { openai } from '@ai-sdk/openai'; +import { createOpenAI } from '@ai-sdk/openai'; + +// OpenAI O1 Models +export const o1Preview = openai('o1-preview', { + // Reasoning-specific configuration + experimental_reasoning: true, + experimental_thinkingMode: 'visible', + maxCompletionTokens: 32768, + temperature: 1.0, // Fixed for reasoning models +}); + +export const o3Mini = openai('o3-mini', { + experimental_reasoning: true, + experimental_thinkingTokens: true, + experimental_thinkingMode: 'visible', + maxCompletionTokens: 65536, +}); + +// DeepSeek R1 +export const deepseekR1 = createOpenAI({ + apiKey: process.env.DEEPSEEK_API_KEY, + baseURL: 'https://api.deepseek.com/v1', +})('deepseek-reasoner', { + experimental_reasoning: true, + experimental_thinkingTokens: true, + maxTokens: 8192, +}); + +// Reasoning model selector +export function selectReasoningModel(complexity: 'simple' | 'complex' | 'mathematical') { + switch (complexity) { + case 'mathematical': + return o1Preview; // Best for math and logic + case 'complex': + return o3Mini; // Good for complex reasoning + case 'simple': + return deepseekR1; // Fast for simple reasoning + default: + return o1Preview; + } +} +``` + +#### Computer Use Implementation + +```typescript +// lib/computer-use.ts +import { anthropic } from '@ai-sdk/anthropic'; +import { tool } from 'ai'; +import { z } from 'zod'; + +export const computerUseTool = anthropic.tools.computer_20241022({ + displayWidthPx: 1920, + displayHeightPx: 1080, + execute: async ({ action, coordinate, text }) => { + // Implement safe computer interactions + return await executeComputerAction(action, coordinate, text); + }, +}); + +export const browserAutomationTool = tool({ + description: 'Automate browser interactions for testing and data collection', + inputSchema: z.object({ + url: z.string().url(), + actions: z.array(z.object({ + type: z.enum(['navigate', 'click', 'type', 'wait', 'screenshot']), + selector: z.string().optional(), + text: z.string().optional(), + })), + }), + execute: async ({ url, actions }) => { + const results = []; + + for (const action of actions) { + const result = await executeBrowserAction(action, url); + results.push(result); + + if (!result.success) break; // Stop on error + } + + return { success: true, results }; + }, +}); + +// Safe computer action execution with permissions +async function executeComputerAction(action: string, coordinate?: [number, number], text?: string) { + // Security checks + const allowedActions = ['screenshot', 'click', 'type', 'scroll']; + if (!allowedActions.includes(action)) { + throw new Error(`Action not allowed: ${action}`); + } + + // Rate limiting + await checkRateLimit(`computer_${action}`); + + // Execute action based on platform + switch (action) { + case 'screenshot': + return await takeScreenshot(); + case 'click': + if (!coordinate) throw new Error('Click requires coordinates'); + return await performClick(coordinate); + case 'type': + if (!text) throw new Error('Type requires text'); + return await typeText(text); + case 'scroll': + return await performScroll(text || 'down'); + default: + throw new Error(`Unsupported action: ${action}`); + } +} +``` + +#### Generative UI Setup + +```typescript +// app/api/ui/route.ts +import { streamUI } from 'ai/rsc'; +import { anthropic } from '@ai-sdk/anthropic'; +import { z } from 'zod'; + +export async function POST(req: Request) { + const { messages } = await req.json(); + + const result = streamUI({ + model: anthropic('claude-3-sonnet-20240229'), + messages, + text: ({ content }) => <div>{content}</div>, + + tools: { + createChart: { + description: 'Generate interactive charts and visualizations', + inputSchema: z.object({ + type: z.enum(['bar', 'line', 'pie', 'scatter', 'heatmap']), + data: z.array(z.record(z.any())), + title: z.string(), + options: z.record(z.any()).optional(), + }), + generate: async ({ type, data, title, options }) => { + const { default: Chart } = await import('@/components/dynamic-chart'); + return <Chart type={type} data={data} title={title} options={options} />; + }, + }, + + createForm: { + description: 'Generate dynamic forms with validation', + inputSchema: z.object({ + fields: z.array(z.object({ + name: z.string(), + type: z.enum(['text', 'email', 'number', 'select', 'textarea']), + required: z.boolean(), + options: z.array(z.string()).optional(), + })), + title: z.string(), + onSubmit: z.string().optional(), // Callback name + }), + generate: async ({ fields, title, onSubmit }) => { + const { default: DynamicForm } = await import('@/components/dynamic-form'); + return <DynamicForm fields={fields} title={title} onSubmit={onSubmit} />; + }, + }, + + createDashboard: { + description: 'Build interactive dashboards with multiple widgets', + inputSchema: z.object({ + layout: z.enum(['grid', 'flex', 'sidebar']), + widgets: z.array(z.object({ + type: z.enum(['metric', 'chart', 'table', 'list']), + title: z.string(), + data: z.any(), + size: z.enum(['small', 'medium', 'large']).optional(), + })), + }), + generate: async ({ layout, widgets }) => { + const { default: Dashboard } = await import('@/components/dynamic-dashboard'); + return <Dashboard layout={layout} widgets={widgets} />; + }, + }, + }, + }); + + return result.toDataStreamResponse(); +} +``` + +### Edge Optimization Configuration + +```typescript +// next.config.js - Advanced edge configuration +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + runtime: 'edge', + serverComponentsExternalPackages: [ + '@ai-sdk/anthropic', + '@ai-sdk/openai', + '@ai-sdk/google', + ], + // Advanced streaming + streaming: { + compression: true, + keepAlive: true, + timeout: 300000, // 5 minutes + }, + // Edge-specific features + edgeRuntime: { + unsafeEval: false, // Security + allowMiddlewareResponseBody: true, + }, + }, + + webpack: (config, { nextRuntime, isServer }) => { + if (nextRuntime === 'edge') { + // Edge runtime optimizations + config.resolve.fallback = { + ...config.resolve.fallback, + fs: false, + net: false, + tls: false, + crypto: false, + }; + + // Reduce bundle size for edge + config.externals = [ + ...(config.externals || []), + 'sharp', // Image processing + 'canvas', // Canvas operations + ]; + } + + return config; + }, + + // Advanced headers for performance + headers: async () => [ + { + source: '/api/:path*', + headers: [ + { + key: 'Cache-Control', + value: 'public, max-age=0, s-maxage=3600, stale-while-revalidate=86400', + }, + { + key: 'X-Content-Type-Options', + value: 'nosniff', + }, + { + key: 'X-Frame-Options', + value: 'DENY', + }, + { + key: 'X-XSS-Protection', + value: '1; mode=block', + }, + ], + }, + ], +}; + +module.exports = nextConfig; +``` + +### Experimental Features Configuration + +```typescript +// lib/experimental-features.ts +import { streamText, generateObject, streamUI } from 'ai'; + +export const experimentalConfig = { + // Multi-modal streaming + multimodalStreaming: true, + + // Advanced tool calling + toolCallStreaming: true, + continueSteps: true, + + // Reasoning capabilities + reasoning: true, + thinkingMode: 'visible', + thinkingTokens: true, + + // Performance optimizations + streamingTimeouts: { + streamingTimeout: 30000, + completeTimeout: 120000, + keepAliveInterval: 5000, + }, + + // Memory management + memoryManagement: { + maxTokensInMemory: 50000, + enableGarbageCollection: true, + cleanupInterval: 60000, + }, + + // Connection optimization + connectionOptimization: { + enableCompression: true, + enableKeepAlive: true, + connectionPooling: true, + }, +}; + +// Experimental feature wrapper +export function withExperimentalFeatures<T extends Function>(fn: T): T { + return (async (...args: any[]) => { + try { + // Enable experimental features for this call + const result = await fn(...args); + + // Track experimental feature usage + await trackExperimentalUsage(fn.name, true); + + return result; + } catch (error) { + // Fallback to stable version on experimental failure + console.warn(`Experimental feature ${fn.name} failed, falling back:`, error); + + await trackExperimentalUsage(fn.name, false); + + // Implement fallback logic here + throw error; // or return fallback result + } + }) as T; +} + +// Feature flag system +export class FeatureFlags { + private static flags = new Map<string, boolean>(); + + static async initialize() { + // Load feature flags from environment or external service + this.flags.set('reasoning_models', process.env.ENABLE_REASONING === 'true'); + this.flags.set('computer_use', process.env.ENABLE_COMPUTER_USE === 'true'); + this.flags.set('generative_ui', process.env.ENABLE_GENERATIVE_UI === 'true'); + this.flags.set('edge_optimization', process.env.ENABLE_EDGE_OPT === 'true'); + } + + static isEnabled(feature: string): boolean { + return this.flags.get(feature) ?? false; + } + + static enable(feature: string) { + this.flags.set(feature, true); + } + + static disable(feature: string) { + this.flags.set(feature, false); + } +} + +async function trackExperimentalUsage(feature: string, success: boolean) { + // Track experimental feature usage for monitoring + const usage = { + feature, + success, + timestamp: Date.now(), + environment: process.env.NODE_ENV, + }; + + // Send to analytics service + console.log('Experimental feature usage:', usage); +} +``` + +### Advanced Monitoring and Analytics + +```typescript +// lib/advanced-monitoring.ts +export class AdvancedMonitoring { + static async recordAdvancedMetric( + feature: string, + metric: string, + value: number, + metadata: Record<string, any> = {} + ) { + const record = { + feature, + metric, + value, + metadata, + timestamp: Date.now(), + environment: process.env.NODE_ENV, + region: process.env.VERCEL_REGION || 'unknown', + }; + + // Send to monitoring service + await this.sendToMonitoring(record); + } + + static async recordReasoningMetrics( + model: string, + thinkingTokens: number, + completionTokens: number, + success: boolean + ) { + await this.recordAdvancedMetric('reasoning', 'token_usage', thinkingTokens + completionTokens, { + model, + thinking_tokens: thinkingTokens, + completion_tokens: completionTokens, + success, + }); + } + + static async recordComputerUseMetrics( + action: string, + duration: number, + success: boolean + ) { + await this.recordAdvancedMetric('computer_use', 'action_duration', duration, { + action, + success, + }); + } + + static async recordGenerativeUIMetrics( + componentType: string, + renderTime: number, + complexity: 'low' | 'medium' | 'high' + ) { + await this.recordAdvancedMetric('generative_ui', 'render_time', renderTime, { + component_type: componentType, + complexity, + }); + } + + private static async sendToMonitoring(record: any) { + // Implementation depends on your monitoring service + // Examples: DataDog, New Relic, Custom Analytics + console.log('Advanced Monitoring:', record); + } +} +``` + +### Testing Advanced Features + +```typescript +// tests/advanced-features.test.ts +import { describe, it, expect } from 'vitest'; +import { experimentalConfig, FeatureFlags } from '@/lib/experimental-features'; + +describe('Advanced Features', () => { + beforeAll(async () => { + await FeatureFlags.initialize(); + }); + + it('should handle reasoning models', async () => { + if (!FeatureFlags.isEnabled('reasoning_models')) { + return; // Skip if not enabled + } + + const result = await testReasoningModel(); + expect(result.success).toBe(true); + expect(result.thinking_tokens).toBeGreaterThan(0); + }); + + it('should execute computer use safely', async () => { + if (!FeatureFlags.isEnabled('computer_use')) { + return; + } + + const result = await testComputerUse(); + expect(result.screenshot).toBeDefined(); + expect(result.actions).toBeInstanceOf(Array); + }); + + it('should generate UI components', async () => { + if (!FeatureFlags.isEnabled('generative_ui')) { + return; + } + + const component = await testGenerativeUI(); + expect(component).toBeDefined(); + expect(component.type).toBe('chart'); + }); +}); +``` + +### Security Considerations + +- **Feature flags**: Control advanced features with environment variables +- **Rate limiting**: Implement strict limits for resource-intensive features +- **Permissions**: Computer use requires explicit user permissions +- **Monitoring**: Track all advanced feature usage and errors +- **Fallbacks**: Always have stable alternatives for experimental features +- **Testing**: Comprehensive testing in isolated environments +- **Documentation**: Clear usage guidelines and safety measures + +Focus on building cutting-edge AI applications that push the boundaries of what's possible while maintaining security, reliability, and user safety.
\ No newline at end of file |