claude ui

クロードUI

Nuxt.js で構築された Anthropic の Claude AI モデル用の最新のチャット インターフェイス。クリーンなユーザー インターフェイスでクロードとのシームレスな会話を体験してください。

前提条件

• Node.js (v18 以降)
• npmまたは糸
• 人間の API キー

?特徴

• ?会話履歴管理
• ?複数のクロード モデルのサポート
• マークダウンとコード構文のハイライト表示
• ?ダーク/ライトモード切り替え
• ?各チャットのシステム プロンプトを使用して動作をパーソナライズする
• 各チャットの出力トークンを制限する
• 各チャットのカスタム温度 (ランダム性)
• ??添付ファイルの即時キャッシュ
• ?テキストの抽出と解析

技術スタック

• Nuxt 3 で構築
• ? Drizzle ORM とのデータベース統合
• ? @nuxt/ui の UI コンポーネント
• ? @anthropic-ai/sdk との AI 統合
• @nosferatu500/textrac によるテキスト抽出機能
• markdown-it によるマークダウンのサポート
• ハイライト.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

藤堂

• 長時間実行されるチャットのストリーミング サポートを追加する
• フォーム入力に対するサーバー側検証の追加
• ユーザー認証を追加する