🤖 AI Assistant App with Clerk Authentication

A modern, full-featured AI assistant application built with Next.js 16, Clerk authentication, and a beautiful UI. Features include real-time chat interface, user dashboard, and secure authentication.

✨ Features

• 🔐 Secure Authentication - Powered by Clerk with sign-in/sign-up flows
• 💬 Real-time Chat Interface - Beautiful chat UI with typing indicators
• 📊 User Dashboard - Track conversations, messages, and activity
• 🎨 Modern UI/UX - Gradient backgrounds, smooth animations, and responsive design
• 🌙 Dark Mode Support - Automatic dark/light theme switching
• ⚡ Fast Performance - Built with Next.js 16 App Router
• 🔒 Protected Routes - Middleware-based route protection
• 📱 Fully Responsive - Works seamlessly on all devices

🚀 Quick Start

Prerequisites

• Node.js 18+ installed
• A Clerk account (free tier available at clerk.com)

1. Clone and Install

cd asno_ai_assistant
npm install

2. Set Up Clerk Authentication

1. Go to Clerk Dashboard
2. Create a new application or use an existing one
3. Navigate to API Keys in the dashboard
4. Copy your Publishable Key and Secret Key

3. Configure Environment Variables

Create a .env.local file in the root directory:

# Clerk Authentication Keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
CLERK_SECRET_KEY=sk_test_your_secret_key_here

# Optional: AI API Keys (for future integration)
# OPENAI_API_KEY=your_openai_key_here
# ANTHROPIC_API_KEY=your_anthropic_key_here

4. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

📁 Project Structure

asno_ai_assistant/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts          # Chat API endpoint
│   ├── components/
│   │   └── chat-interface.tsx    # Main chat component
│   ├── dashboard/
│   │   └── page.tsx              # User dashboard
│   ├── layout.tsx                # Root layout with ClerkProvider
│   ├── layout-client.tsx         # Client-side header component
│   └── page.tsx                  # Home page with landing & chat
├── middleware.ts                 # Clerk auth middleware
├── .env.local                    # Environment variables (create this)
└── package.json

🎯 Key Components

Home Page

• Signed Out: Beautiful landing page with hero section and features
• Signed In: Full-screen chat interface with AI assistant

Dashboard

• User statistics and activity tracking
• Quick action buttons
• Recent conversation history
• Analytics overview

Chat Interface

• Real-time message rendering
• Typing indicators
• Message timestamps
• Clear chat functionality
• Responsive design

🔌 API Integration

The app includes a chat API route at /api/chat that's ready for AI integration:

Connect to OpenAI

npm install openai

// app/api/chat/route.ts
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Replace the simulated response with:
const completion = await openai.chat.completions.create({
  model: "gpt-4",
  messages: [{ role: "user", content: message }],
});

const aiResponse = completion.choices[0].message.content;

Connect to Anthropic Claude

npm install @anthropic-ai/sdk

import Anthropic from '@anthropic-ai/sdk';

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

const message = await anthropic.messages.create({
  model: "claude-3-opus-20240229",
  messages: [{ role: "user", content: userMessage }],
});

🔐 Authentication Flow

1. Middleware Protection: Routes are protected by clerkMiddleware()
2. Sign In/Up: Modal-based authentication flows
3. Session Management: Automatic session handling by Clerk
4. User Profile: UserButton component for account management

🎨 Customization

Update Theme Colors

Edit the primary color in your components:

// Current: #6c47ff (purple)
// Replace with your brand color throughout the app
className="bg-[#6c47ff]"

Modify Chat Behavior

Edit app/components/chat-interface.tsx:

• Adjust message styling
• Change animation timings
• Customize placeholder text
• Add new features

📦 Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Authentication: Clerk
• Icons: Heroicons (SVG)
• Fonts: Geist Sans & Geist Mono

🚢 Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Environment Variables for Production

Make sure to add these in your hosting platform:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_production_key
CLERK_SECRET_KEY=your_production_secret

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest features
• Submit pull requests

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

🆘 Support

If you encounter issues:

1. Check the Clerk Documentation
2. Review Next.js Docs
3. Ensure environment variables are set correctly
4. Check the browser console for errors

🎉 What's Next?

• Connect to real AI API (OpenAI, Claude, etc.)
• Add conversation persistence (database)
• Implement chat history
• Add file upload support
• Create chat templates
• Add voice input/output
• Implement team collaboration features

---

Built with ❤️ using Next.js and Clerk