https://github.com/chihebnabil/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.
https://github.com/chihebnabil/claude-ui
anthropic chat-application claude claude-ai drizzle-orm nuxt3 nuxtui
Last synced: 6 months ago
JSON representation
A modern chat interface for Anthropic's Claude AI models built with Nuxt.js. Experience seamless conversations with Claude in a clean user interface.
- Host: GitHub
- URL: https://github.com/chihebnabil/claude-ui
- Owner: chihebnabil
- License: mit
- Created: 2024-11-03T16:53:06.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-03-27T22:19:59.000Z (7 months ago)
- Last Synced: 2025-03-27T23:25:10.127Z (7 months ago)
- Topics: anthropic, chat-application, claude, claude-ai, drizzle-orm, nuxt3, nuxtui
- Language: Vue
- Homepage: https://claudeui.com
- Size: 639 KB
- Stars: 86
- Watchers: 2
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://nuxt.com/)
- 💾 Database integration with [Drizzle ORM](https://orm.drizzle.team/)
- 🎨 UI components from [@nuxt/ui](https://ui.nuxt.com/)
- 🤖 AI integration with [@anthropic-ai/sdk](https://www.anthropic.com/)
- 📝 Text extraction capabilities with [@nosferatu500/textract](https://www.npmjs.com/package/@nosferatu500/textract)
- ✨ Markdown support with [markdown-it](https://github.com/markdown-it/markdown-it)
- 🎯 Code highlighting with [highlight.js](https://highlightjs.org/)
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
```
## Parsing PDFs
Ensure `poppler-utils` is part of your environment by installing it:
```bash
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:
```bash
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
```
## Production
Build the application for production:
```bash
# 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:
```bash
# Generate database schema
npm run db:generate
# Migrate database schema
npm run db:migrate
```
## Todo
- [x] Add streaming support for long-running chats
- [ ] Add server-side validation for form inputs
- [x] Add user authentication