blob: d794c10425aa9514ad8763d7fd18d5e765d14d79 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
---
allowed-tools: Read, Write, Edit, MultiEdit, Bash
description: Set up a complete AI chat interface with streaming
argument-hint: "[basic|advanced|multimodal|rag|agent]"
---
## Set up AI Chat Interface
Create a production-ready chat interface with the Vercel AI SDK based on the specified type: $ARGUMENTS
### Project Context
Current project structure: !`find . -type f -name "*.json" -o -name "*.ts" -o -name "*.tsx" | head -10`
Current dependencies: !`cat package.json | jq '.dependencies // {}' 2>/dev/null || echo "No package.json found"`
### Requirements Analysis
Based on the requested chat type ($ARGUMENTS), I'll implement:
**Basic Chat**: Simple text-based streaming chat interface
**Advanced Chat**: Enhanced UI with message history, error handling, and optimizations
**Multimodal Chat**: Support for images, PDFs, and file uploads
**RAG Chat**: Retrieval-augmented generation with knowledge base
**Agent Chat**: Tool-calling agents with function execution
### Your Task
1. **Analyze the current project structure** to understand the existing setup
2. **Install required dependencies** if not already present
3. **Create the appropriate chat implementation** based on the specified type
4. **Set up the API route** with proper streaming and error handling
5. **Implement the React component** with modern UI patterns
6. **Add proper TypeScript types** for type safety
7. **Include error boundaries** and loading states
8. **Test the implementation** and provide usage instructions
### Implementation Guidelines
- Use the latest AI SDK patterns and best practices
- Implement proper error handling and loading states
- Add TypeScript types for all interfaces
- Follow Next.js App Router conventions
- Include proper accessibility features
- Use modern React patterns (hooks, Suspense, etc.)
- Add responsive design considerations
- Implement proper security measures
### Expected Deliverables
1. API route handler (`app/api/chat/route.ts`)
2. Chat component (`components/chat.tsx` or similar)
3. Required TypeScript types
4. Updated package.json dependencies
5. Basic styling (Tailwind classes)
6. Usage documentation and examples
Focus on creating a robust, production-ready implementation that follows AI SDK best practices and modern web development standards.
|
