Claude UI

A modern chat interface for Anthropic's Claude AI models built with Nuxt.js. Experience seamless conversations with Claude in a clean user interface.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Anthropic API key

🌟 Features

• 💾 Conversation history management
• 🎭 Multiple Claude model support
• 📝 Markdown and code syntax highlighting
• 🌙 Dark/Light mode toggle
• 🤖 Personlize behavior using system prompts for each chat
• 🎯 Limit output tokens for each chat
• 🔄 Custome temperature (Randomness) for each chat
• 📎💾 Prompt Caching for attachments
• 📝🔍 Text extraction and parsing

Tech Stack

• 🚀 Built with Nuxt 3
• 💾 Database integration with Drizzle ORM
• 🎨 UI components from @nuxt/ui
• 🤖 AI integration with @anthropic-ai/sdk
• 📝 Text extraction capabilities with @nosferatu500/textract
• ✨ Markdown support with markdown-it
• 🎯 Code highlighting with highlight.js

Setup

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

Parsing PDFs

Ensure poppler-utils is part of your environment by installing it:

sudo apt update
sudo apt install poppler-utils

ENV

Create a .env file in the root directory and add your ANTHROPIC_KEY API key.

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

Database

The application uses a SQLite database to store thread and message data.

Database Management

This project uses Drizzle ORM for database management. Available commands:

# Generate database schema
npm run db:generate

# Migrate database schema
npm run db:migrate

Todo

• Add streaming support for long-running chats
• Add server-side validation for form inputs
• Add user authentication