A modern, production-ready AI chat application starter template built with Next.js 15, TypeScript, and comprehensive testing. Perfect for building AI-powered chat interfaces with multiple provider support.
- Next.js 15 with App Router
- TypeScript 5.7 with strict configuration
- Tailwind CSS with shadcn/ui components
- ESM-only modules throughout
- Monorepo structure with Turborepo
- Vitest for lightning-fast tests
- React Testing Library for component testing
- MSW for API mocking
- 23 tests with 100% pass rate
- Type-safe testing throughout
- Responsive design for all devices
- Dark/light mode support
- Accessible components with Radix UI
- Modern chat interface with message bubbles
- Loading states and error handling
- Hot reload development
- ESLint 9 with flat config
- Prettier code formatting
- Husky git hooks
- Lint-staged for pre-commit checks
- Turbo for optimized builds
- Multiple AI providers (OpenAI, Anthropic, etc.)
- Configurable models per provider
- Mock responses for development
- Fallback API routes for reliability
- Node.js 18+
- pnpm 8.12+ (recommended) or npm/yarn
# Clone the template
git clone <your-repo-url> my-ai-chat-app
cd my-ai-chat-app
# Install dependencies
pnpm install
# Start development server
pnpm devVisit http://localhost:3000 to see your chat app!
# Copy environment template
cp apps/web/.env.example apps/web/.env.local
# Add your AI provider API keys
OPENAI_API_KEY=your_openai_key_here
ANTHROPIC_API_KEY=your_anthropic_key_hereai-chat-starter/
├── apps/
│ └── web/ # Next.js chat application
│ ├── src/
│ │ ├── app/ # App Router pages & API routes
│ │ ├── components/ # App-specific components
│ │ └── mocks/ # MSW mock handlers
│ └── public/ # Static assets
├── packages/
│ ├── ui/ # Shared UI components
│ │ ├── src/components/ # Reusable components
│ │ └── src/lib/ # Utilities
│ ├── types/ # Shared TypeScript types
│ └── config/ # Shared configurations
├── docs/ # Documentation
└── .kiro/ # Kiro AI assistant config
pnpm dev # Start development servers
pnpm build # Build all packages
pnpm test # Run all tests
pnpm test:watch # Run tests in watch mode
pnpm lint # Lint all packages
pnpm lint:fix # Fix linting issues
pnpm format # Format code with Prettier
pnpm type-check # Type check all packages
pnpm clean # Clean build artifacts# Work with specific packages
pnpm --filter @ai-chat/web dev
pnpm --filter @ai-chat/ui test:watch
pnpm --filter @ai-chat/types buildThe template includes comprehensive testing setup:
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests for specific package
pnpm --filter @ai-chat/ui test- UI Components: 14 tests covering all interactive elements
- Type Definitions: 6 tests ensuring type safety
- Application: 3 tests for main functionality
- Total: 23 tests with 100% pass rate
- ChatContainer: Main chat interface
- MessageBubble: Individual message display
- Button: Accessible button component
- Avatar: User/AI avatar display
# Create new component in UI package
cd packages/ui/src/components
# Add your component with tests
# Export from packages/ui/src/index.ts- OpenAI (GPT-4, GPT-3.5)
- Anthropic (Claude 3)
- Custom providers (easily extensible)
- Update
apps/web/src/mocks/handlers.tsfor development - Create API route in
apps/web/src/app/api/ - Add provider configuration
- Update UI selector
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod# Build Docker image
docker build -t ai-chat-app .
# Run container
docker run -p 3000:3000 ai-chat-appRequired for production:
OPENAI_API_KEYANTHROPIC_API_KEYNEXT_PUBLIC_APP_URL
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript strict mode
- Write tests for new features
- Use conventional commits
- Ensure all tests pass
- Format code with Prettier
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js for the amazing framework
- Vercel for deployment platform
- shadcn/ui for beautiful components
- MSW for API mocking
- Vitest for fast testing
Happy coding! 🚀