claude ui

克劳德·伊尔

使用 Nuxt.js 构建的 Anthropic 的 Claude AI 模型的现代聊天界面。在干净的用户界面中体验与 Claude 的无缝对话。

先决条件

• Node.js（v18 或更高版本）
• npm 或纱线
• 人为 API 密钥

？特征

• ？对话历史管理
• ？多种克劳德模型支持
• Markdown 和代码语法高亮
• ？暗/亮模式切换
• ？使用每次聊天的系统提示来个性化行为
• 限制每个聊天的输出令牌
• 每次聊天的客户温度（随机性）
• ??提示缓存附件
• ？文本提取和解析

技术堆栈

• 使用 Nuxt 3 构建
• ？与 Drizzle ORM 的数据库集成
• ？来自 @nuxt/ui 的 UI 组件
• ？与 @anthropic-ai/sdk 的人工智能集成
• @nosferatu500/texttract 的文本提取功能
• 使用 markdown-it 支持 Markdown
• 使用highlight.js 进行代码高亮显示

设置

确保安装依赖项：

 # npm
npm install

# pnpm
pnpm install

# yarn
yarn install

环境电压

在根目录中创建一个 .env 文件并添加您的ANTHROPIC_KEY API 密钥。

开发服务器

在 http://localhost:3000 上启动开发服务器：

 # npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

生产

构建生产应用程序：

 # npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

数据库

该应用程序使用 SQLite 数据库来存储线程和消息数据。

数据库管理

该项目使用 Drizzle ORM 进行数据库管理。可用命令：

 # Generate database schema
npm run db:generate

# Migrate database schema
npm run db:migrate

托多

• 添加对长时间运行的聊天的流支持
• 为表单输入添加服务器端验证
• 添加用户认证