ClaudeMate Agent

A full-stack Claude-powered agent application built with Next.js 15 App Router, Tailwind CSS, ShadCN UI, Convex, WorkOS, and Claude 3.7 Sonnet. This project provides a production-ready chatbot interface with advanced AI capabilities powered by Anthropic's Claude model.

🌟 Features

• Modern Tech Stack

  • Next.js 15 App Router with TypeScript (Strict Mode)
  • React 19 with Server Components
  • Tailwind CSS for responsive styling
  • ShadCN UI component library for beautiful interfaces

• Real-time Communication

  • Convex backend for real-time database and API
  • Live chat updates without polling
  • Message persistence and thread management

• Secure Authentication

  • WorkOS integration for enterprise-grade auth
  • Google OAuth support out of the box
  • Protected routes and session management

• AI Integration

  • Claude 3.7 Sonnet integration via Vercel AI SDK
  • Streaming responses for better UX
  • Tool-calling capabilities for extended functionality

• Advanced Agent Tools

  • Text analysis for sentiment and content insights
  • Email composition with tone selection
  • Extensible tool framework for adding custom capabilities

• Responsive Design

  • Mobile-first approach
  • Dark mode support
  • Optimized for all screen sizes

📋 Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher
• Anthropic API key (Get one here)
• WorkOS account (Sign up here)
• Convex account (Sign up here)

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/claudemate-agent.git
   cd claudemate-agent
   

2. Install dependencies

   npm install
   

3. Set up environment variables Create a .env.local file in the root directory with the following variables:

   WORKOS_API_KEY=your_workos_api_key
   WORKOS_CLIENT_ID=your_workos_client_id
   WORKOS_REDIRECT_URI=http://localhost:3000/auth/callback
   ANTHROPIC_API_KEY=your_anthropic_api_key
   NEXT_PUBLIC_CONVEX_URL=your_convex_deployment_url
   

4. Start the development server

   # In one terminal, start the Convex development server
   npm run convex
   
   # In another terminal, start the Next.js development server
   npm run dev
   

5. Open the application Visit http://localhost:3000 in your browser

🏗️ Project Structure

claudemate-agent/
├── app/                   # Next.js App Router components
│   ├── auth/              # Authentication related pages
│   ├── dashboard/         # Main chat interface
│   └── providers/         # React context providers
├── components/            # Reusable UI components
│   └── ui/                # ShadCN UI components
├── convex/                # Convex backend
│   ├── schema.ts          # Database schema
│   ├── messages.ts        # Message-related mutations/queries
│   └── agent.ts           # Claude agent integration
├── lib/                   # Utility functions
│   ├── auth-server.ts     # Server-side auth utilities
│   ├── claude.ts          # Claude API integration
│   └── tools.ts           # Agent tool definitions
└── public/                # Static files

🛠️ Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Lint the codebase
• npm run convex - Start the Convex development server

🔧 Environment Variables

🧩 Agent Tools

The ClaudeMate Agent includes several built-in tools powered by Claude:

1. Text Analysis

   • Sentiment analysis
   • Key topic extraction
   • Intent detection
   • Action item identification

2. Email Composition

   • Generate professional emails
   • Customize tone (formal, casual, professional)
   • Format with proper structure
   • Optimize for clarity and effectiveness

🔄 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📚 Documentation

For additional documentation on the technologies used:

• Next.js Documentation
• Convex Documentation
• WorkOS Documentation
• Anthropic Claude API
• TailwindCSS Documentation
• ShadCN UI Documentation

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.