A modern, responsive, and powerful AI chat agent built with Next.js, Vercel AI SDK, and Tailwind CSS v4. This agent supports multi-modal interactions, allowing users to send text, images, and PDF documents for processing.
- Multi-Modal Support: Chat with AI using text, images, and PDFs.
- Rich File Previews: In-chat previews for images and full-featured PDF viewing.
- Modern UI: A clean, borderless, and responsive interface using Tailwind CSS v4.
- Streaming Responses: Real-time AI response streaming for a better user experience.
- Type-Safe: Built entirely with TypeScript for better developer experience and reliability.
- Framework: Next.js 15 (App Router)
- AI Integration: Vercel AI SDK (
ai,@ai-sdk/react) - Styling: Tailwind CSS v4
- Language: TypeScript
-
Clone the repository:
git clone <repository-url> cd multi-modal-agent
-
Install dependencies:
pnpm install
-
Configure Environment Variables: Create a
.env.localfile in the root directory and add your API key:cp .env.example .env.local
Then edit
.env.localwith your actual credentials:AI_GATEWAY_API_KEY=your_actual_api_key_here
-
Run the development server:
pnpm dev
-
Open the application: Navigate to http://localhost:3000 in your browser.
app/api/chat/route.ts: API route handling the AI chat logic.app/page.tsx: Main chat interface.components/ChatForm.tsx: Custom chat input with file attachment support.components/MessagePart.tsx: Component for rendering different message parts (text, image, PDF).lib/chats.ts: Chat-related utility functions.lib/file.ts: File processing and data URL conversion utilities.
To ensure the agent works correctly, you need:
- API Access: An active API key from your AI provider.
- Environment: The
AI_GATEWAY_API_KEYmust be set in your.env.local.
pnpm dev: Start development server.pnpm build: Create an optimized production build.pnpm lint: Run ESLint for code quality checks.