claude ui

interfaz de usuario claude

Una interfaz de chat moderna para los modelos Claude AI de Anthropic creada con Nuxt.js. Experimente conversaciones fluidas con Claude en una interfaz de usuario limpia.

Requisitos previos

• Node.js (v18 o superior)
• npm o hilo
• Clave API antrópica

? Características

• ? Gestión del historial de conversaciones.
• ? Soporte para múltiples modelos de Claude
• Markdown y resaltado de sintaxis de código
• ? Alternar modo oscuro/claro
• ? Personalice el comportamiento utilizando indicaciones del sistema para cada chat.
• Limitar tokens de salida para cada chat
• Temperatura personalizada (aleatoriedad) para cada chat
• ?? Solicitar almacenamiento en caché para archivos adjuntos
• ? Extracción y análisis de texto.

Pila de tecnología

• Construido con Nuxt 3
• ? Integración de bases de datos con Drizzle ORM
• ? Componentes de la interfaz de usuario de @nuxt/ui
• ? Integración de IA con @anthropic-ai/sdk
• Capacidades de extracción de texto con @nosferatu500/textract
• Soporte de rebajas con markdown-it
• Resaltado de código con resaltado.js

Configuración

Asegúrese de instalar las dependencias:

 # npm
npm install

# pnpm
pnpm install

# yarn
yarn install

ENV

Cree un archivo .env en el directorio raíz y agregue su clave API ANTHROPIC_KEY .

Servidor de desarrollo

Inicie el servidor de desarrollo en http://localhost:3000:

 # npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

Producción

Cree la aplicación para producción:

 # npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

Base de datos

La aplicación utiliza una base de datos SQLite para almacenar datos de mensajes y subprocesos.

Gestión de bases de datos

Este proyecto utiliza Drizzle ORM para la gestión de bases de datos. Comandos disponibles:

 # Generate database schema
npm run db:generate

# Migrate database schema
npm run db:migrate

Hacer

• Agregue soporte de transmisión para chats de larga duración
• Agregar validación del lado del servidor para entradas de formulario
• Agregar autenticación de usuario