Mistral Thing

An AI chat app with models from Mistral AI.
Report Bug · Request Feature

---

About The Project

Mistral Thing is a sleek and modern AI chat application that allows you to interact with large language models from Mistral AI. Built with a focus on user experience, it provides a clean interface for conversing with various Mistral AI models, managing conversation threads, and customizing your chat experience.

Tech Stack

This project is built with modern technologies:

Frontend

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• Shadcn/UI - UI component library
• Radix UI - Accessible component primitives
• React Markdown - Markdown rendering
• Shiki - Code syntax highlighting

Backend

• Convex - Backend-as-a-Service with real-time database
• Better Auth - Authentication system
• Mistral AI SDK - AI model integration
• Resend - Email delivery service

Development Tools

• Bun - Package manager and runtime
• Biome - Linter and formatter
• Ultracite - Code formatting
• Husky - Git hooks
• mprocs - Process manager for development

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js - Version 22.x or higher
• Bun - Version 1.3.1 or higher (Installation Guide)
• Convex Account - Sign up at convex.dev
• Mistral AI API Key - Get one from console.mistral.ai
• OAuth Credentials (Optional, for social login):
  • GitHub OAuth App (GitHub Developer Settings)
  • Google OAuth Client (Google Cloud Console)
• Resend API Key (Optional, for magic link emails) - Get one from resend.com

Installation

1. Clone the Repository

git clone https://github.com/RodrigoRafaelSantos7/mistral-thing.git
cd mistral-thing

2. Install Dependencies

bun install

3. Set Up Convex

1. Install Convex CLI globally (if not already installed):

   bun add -g convex

2. Login to Convex:

   bunx convex login

3. Initialize Convex in your project:

   bunx convex dev

   This will:

   • Create a new Convex project (or link to an existing one)
   • Generate deployment URL
   • Start the Convex development server

4. Copy the NEXT_PUBLIC_CONVEX_URL from the Convex dashboard or terminal output.

4. Configure Environment Variables

Client-Side Environment Variables

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

NEXT_PUBLIC_CONVEX_URL=https://your-project.convex.cloud

Server-Side Environment Variables (Convex)

Set these in your Convex dashboard under Settings > Environment Variables:

Required:

• MISTRAL_API_KEY - Your Mistral AI API key
• SITE_URL - Your application URL (e.g., http://localhost:3000 for development, https://mistral-thing.xyz for production)
• CONVEX_SITE_URL - Your Convex site URL (usually the same as SITE_URL)

Optional (for OAuth):

• GITHUB_CLIENT_ID - GitHub OAuth App Client ID
• GITHUB_CLIENT_SECRET - GitHub OAuth App Client Secret
• GOOGLE_CLIENT_ID - Google OAuth Client ID
• GOOGLE_CLIENT_SECRET - Google OAuth Client Secret

Optional (for Email Magic Links):

• Configure Resend API key through the Convex dashboard (Settings > Integrations > Resend)

5. Set Up OAuth Providers (Optional)

GitHub OAuth Setup

1. Go to GitHub Developer Settings
2. Create a new OAuth App
3. Set Authorization callback URL to: https://your-domain.com/api/auth/callback/github
4. Copy the Client ID and Client Secret to Convex environment variables

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI: https://your-domain.com/api/auth/callback/google
6. Copy the Client ID and Client Secret to Convex environment variables

6. Initialize Models

After setting up Convex and environment variables, you need to populate the models in your database. The models are automatically fetched from Mistral AI and filtered to only include supported models.

The models will be automatically created when you first run the application, or you can trigger the model sync manually through the Convex dashboard.

Getting Started

Development Mode

Start the development servers (both Next.js and Convex):

bun run dev

This uses mprocs to run both:

• Convex development server (bun x convex dev)
• Next.js development server (bun run next dev)

The application will be available at:

• Frontend: http://localhost:3000
• Convex Dashboard: Check your terminal for the dashboard URL

Production Build

1. Build the Next.js application:

   bun run build

2. Start the production server:

   bun run start

Usage

First Time Setup

1. Sign In: Navigate to the login page and choose your preferred authentication method:

   • Enter your email for a magic link
   • Sign in with Google
   • Sign in with GitHub

2. Configure Settings: After logging in, go to Account settings to:

   • Select your preferred AI model
   • Pin frequently used models
   • Set your nickname and biography
   • Add custom system instructions
   • Choose your theme and color mode

Using the Chat Interface

1. Start a New Conversation: Click the "New Chat" button or start typing
2. Select a Model: Use the model selector to choose which Mistral AI model to use
3. Send Messages: Type your message and press Enter or click Send
4. View Threads: Access your conversation history from the sidebar
5. Manage Threads: Threads are automatically titled based on the first message

Features

• Streaming Responses: Watch AI responses stream in real-time
• Code Highlighting: Code blocks are automatically syntax-highlighted
• Markdown Support: Full markdown rendering for formatted responses
• Thread Organization: Conversations are organized into threads with automatic titles
• Session Management: View and revoke active sessions from account settings

Development

Available Scripts

• bun run dev - Start development servers (Convex + Next.js)
• bun run build - Build the Next.js application for production
• bun run start - Start the production server
• bun run check - Run linting and type checking
• bun run check:fix - Fix linting issues automatically
• bun run clean - Remove .next and node_modules directories

Code Quality

The project uses:

• Biome - Fast linter and formatter
• TypeScript - Type checking with strict mode
• Ultracite - Code formatting (via lint-staged)
• Husky - Git hooks for pre-commit checks

Code is automatically formatted on commit using lint-staged.

Project Structure

mistral-thing/
├── convex/              # Convex backend functions
│   ├── auth.ts         # Authentication configuration
│   ├── chat.ts         # Chat and AI response generation
│   ├── models.ts       # Model management
│   ├── messages.ts     # Message handling
│   ├── threads.ts      # Thread management
│   ├── settings.ts     # User settings
│   ├── schema.ts       # Database schema
│   └── _generated/     # Auto-generated Convex files
├── src/
│   ├── app/            # Next.js App Router pages
│   │   ├── (auth)/     # Authentication pages
│   │   ├── (protected)/ # Protected routes
│   │   └── api/        # API routes
│   ├── components/     # React components
│   │   ├── ui/         # Shadcn/UI components
│   │   └── icons/      # Custom icons
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utility functions and stores
│   └── styles/         # Global styles and themes
├── public/             # Static assets
├── package.json        # Dependencies and scripts
└── README.md          # This file

Key Directories

• convex/ - Backend logic, database schema, and Convex functions
• src/app/ - Next.js pages and routes
• src/components/ - Reusable React components
• src/lib/ - Shared utilities, stores, and configuration
• public/ - Static files (images, icons, etc.)

Deployment

Deploying to Vercel

1. Push your code to GitHub
2. Import your repository in Vercel
3. Configure environment variables:
   • NEXT_PUBLIC_CONVEX_URL - Your Convex deployment URL
4. Update Convex environment variables with production URLs:
   • SITE_URL - Your Vercel deployment URL
   • CONVEX_SITE_URL - Your Vercel deployment URL
5. Deploy!

Convex Deployment

Convex automatically deploys when you push to your main branch. For production:

1. Create a production deployment in Convex dashboard
2. Update environment variables for the production deployment
3. Use the production deployment URL in your frontend

Troubleshooting

Common Issues

Convex connection errors:

• Verify NEXT_PUBLIC_CONVEX_URL is set correctly
• Ensure Convex dev server is running
• Check Convex dashboard for deployment status

Authentication not working:

• Verify OAuth credentials are set in Convex environment variables
• Check callback URLs match your application URL
• Ensure SITE_URL and CONVEX_SITE_URL are set correctly

AI responses not generating:

• Verify MISTRAL_API_KEY is set in Convex environment variables
• Check API key is valid and has sufficient credits
• Review Convex logs for error messages

Email magic links not sending:

• Configure Resend integration in Convex dashboard
• Verify email domain is verified in Resend
• Check Convex logs for email sending errors

License

Distributed under the MIT License. See LICENSE for more information.

Links

• Live Demo: mistral-thing.xyz
• Report Bug: GitHub Issues
• Request Feature: GitHub Issues