claude ui

Claude UI

Eine moderne Chat-Oberfläche für die Claude-KI-Modelle von Anthropic, erstellt mit Nuxt.js. Erleben Sie nahtlose Gespräche mit Claude in einer übersichtlichen Benutzeroberfläche.

Voraussetzungen

• Node.js (v18 oder höher)
• npm oder Garn
• Anthropischer API-Schlüssel

? Merkmale

• ? Verwaltung des Gesprächsverlaufs
• ? Unterstützung mehrerer Claude-Modelle
• Markdown und Code-Syntax-Hervorhebung
• ? Umschalten zwischen Dunkel- und Hellmodus
• ? Personalisieren Sie das Verhalten mithilfe von Systemaufforderungen für jeden Chat
• Begrenzen Sie die Ausgabetokens für jeden Chat
• Benutzerdefinierte Temperatur (Zufälligkeit) für jeden Chat
• ?? Prompt-Caching für Anhänge
• ? Textextraktion und -analyse

Tech-Stack

• Gebaut mit Nuxt 3
• ? Datenbankintegration mit Drizzle ORM
• ? UI-Komponenten von @nuxt/ui
• ? KI-Integration mit @anthropic-ai/sdk
• Textextraktionsfunktionen mit @nosferatu500/texttract
• Markdown-Unterstützung mit markdown-it
• Code-Hervorhebung mit highlights.js

Aufstellen

Stellen Sie sicher, dass Sie die Abhängigkeiten installieren:

 # npm
npm install

# pnpm
pnpm install

# yarn
yarn install

ENV

Erstellen Sie eine .env-Datei im Stammverzeichnis und fügen Sie Ihren ANTHROPIC_KEY API-Schlüssel hinzu.

Entwicklungsserver

Starten Sie den Entwicklungsserver unter http://localhost:3000:

 # npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

Produktion

Erstellen Sie die Anwendung für die Produktion:

 # npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

Datenbank

Die Anwendung verwendet eine SQLite-Datenbank zum Speichern von Thread- und Nachrichtendaten.

Datenbankverwaltung

Dieses Projekt verwendet Drizzle ORM für die Datenbankverwaltung. Verfügbare Befehle:

 # Generate database schema
npm run db:generate

# Migrate database schema
npm run db:migrate

Todo

• Fügen Sie Streaming-Unterstützung für lang laufende Chats hinzu
• Fügen Sie eine serverseitige Validierung für Formulareingaben hinzu
• Benutzerauthentifizierung hinzufügen