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

托多

• 添加對長時間運行的聊天的串流支持
• 為表單輸入新增伺服器端驗證
• 新增用戶認證