A modern, ChatGPT-like interface built with Next.js 16, TypeScript, and shadcn/ui.
- 🎨 Modern UI: Clean, ChatGPT-inspired interface with shadcn/ui components
- 💬 Real-time Chat: Interactive chat interface with message history
- 🎯 TypeScript: Fully typed for better developer experience
- 🌙 Dark Mode: Automatic dark mode support
- 📱 Responsive: Works seamlessly on desktop and mobile devices
- ⚡ Fast: Built with Next.js 16 App Router for optimal performance
- Node.js 18+
- npm, yarn, or pnpm
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
chatbot/
├── app/
│ ├── api/
│ │ └── chat/
│ │ └── route.ts # Chat API endpoint
│ ├── globals.css # Global styles with shadcn/ui theme
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main chat page
├── components/
│ ├── ui/ # shadcn/ui components
│ │ ├── button.tsx
│ │ ├── input.tsx
│ │ ├── scroll-area.tsx
│ │ ├── separator.tsx
│ │ └── textarea.tsx
│ ├── chat-interface.tsx # Main chat component
│ ├── chat-input.tsx # Chat input component
│ ├── chat-message.tsx # Message display component
│ ├── chat-sidebar.tsx # Sidebar component (optional)
│ └── markdown.tsx # Markdown renderer
└── lib/
└── utils.ts # Utility functions
The current implementation includes a simple demo response system. To integrate with a real AI service (OpenAI, Anthropic, etc.), update app/api/chat/route.ts:
// Example with OpenAI
import OpenAI from 'openai'
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
})
export async function POST(request: NextRequest) {
const { messages } = await request.json()
const completion = await openai.chat.completions.create({
model: "gpt-4",
messages: messages,
})
return NextResponse.json({
message: completion.choices[0].message.content
})
}The project uses Tailwind CSS with shadcn/ui. Customize colors and themes in app/globals.css.
- Next.js 16: React framework with App Router
- TypeScript: Type-safe JavaScript
- shadcn/ui: High-quality React components
- Tailwind CSS: Utility-first CSS framework
- Lucide React: Beautiful icon library
MIT