/** * Example: AI Chat with File Uploads using Vercel AI SDK v5 * * This example demonstrates how to properly integrate file uploads * with the useChat hook from @ai-sdk/react. * * Key concepts: * 1. Using sendMessage with files parameter * 2. Converting File[] to FileList * 3. Handling different file types (images, text, PDFs) * 4. Displaying uploaded files in the chat */ interface SimpleFileUploadChatProps { apiEndpoint?: string; maxFileSize?: number; allowedFileTypes?: string[]; } export declare function SimpleFileUploadChat({ apiEndpoint, maxFileSize, allowedFileTypes }: SimpleFileUploadChatProps): import("react/jsx-runtime").JSX.Element; /** * Server-side API route example (/api/chat/route.ts) * * ```typescript * import { openai } from '@ai-sdk/openai' * import { convertToModelMessages, streamText, UIMessage } from 'ai' * * export async function POST(req: Request) { * const { messages, fileCount, timestamp }: { * messages: UIMessage[], * fileCount?: number, * timestamp?: number * } = await req.json() * * console.log('Received message with', fileCount, 'files at', timestamp) * * const result = streamText({ * model: openai('gpt-4o'), // Use a model that supports vision for images * system: 'You are a helpful assistant that can analyze files and images.', * messages: convertToModelMessages(messages), * }) * * return result.toUIMessageStreamResponse() * } * ``` * * Key features of this approach: * * 1. **File Conversion**: FileUpload[] → FileList for AI SDK compatibility * 2. **Multiple File Types**: Supports images, text, PDFs with validation * 3. **Custom Metadata**: Additional data can be sent in the request body * 4. **Error Handling**: File size and type validation with user feedback * 5. **Image Previews**: Automatic preview generation for image files * 6. **AI SDK Integration**: Proper use of sendMessage with files parameter */ export default SimpleFileUploadChat;