claude ui

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

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