Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/burnworks/next-claude-chat-ui
Claude AI Chat UI using Vercel AI SDK.
https://github.com/burnworks/next-claude-chat-ui
Last synced: about 2 months ago
JSON representation
Claude AI Chat UI using Vercel AI SDK.
- Host: GitHub
- URL: https://github.com/burnworks/next-claude-chat-ui
- Owner: burnworks
- Created: 2024-03-13T06:25:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-14T01:40:53.000Z (10 months ago)
- Last Synced: 2024-03-14T07:36:09.845Z (10 months ago)
- Language: TypeScript
- Size: 108 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-claude-chat-ui
Claude AI Chat UI using Vercel AI SDK.
Vercel AI SDK を利用して作成された、Anthropic API を介して Claude 3 AI とチャットするための簡易 UI です。
- [Claude - Anthropic](https://www.anthropic.com/claude)
- [Anthropic API Getting started](https://docs.anthropic.com/claude/reference/getting-started-with-the-api)
- [Vercel AI SDK](https://github.com/vercel/ai)
- [anthropic-sdk-typescript](https://github.com/anthropics/anthropic-sdk-typescript)
- [Next.js](https://nextjs.org/)
## Getting Started
Install Node.js if you haven't already.
```bash
git clone https://github.com/burnworks/next-claude-chat-ui.git
cd next-claude-chat-ui
npm install
```
### .env
`.env.sample` を `.env` にリネームしてから各環境変数を記述して保存してください。
```
# API Key (Required)
ANTHROPIC_API_KEY=[ここに API Key を記述]
# claude-3-opus-20240229 or claude-3-sonnet-20240229 (Default) or claude-3-haiku-20240307
ANTHROPIC_MODEL=
```
`ANTHROPIC_MODEL` にセットできるモデル名は現時点で下記の3種類です。モデルごとに API の利用金額が異なりますので、用途に合わせて選択してください。
- Claude 3 Opus: `claude-3-opus-20240229`
- Claude 3 Sonnet: `claude-3-sonnet-20240229`
- Claude 3 Haiku: `claude-3-haiku-20240307`
`ANTHROPIC_MODEL` が未設定の場合は、デフォルト値として `claude-3-sonnet-20240229` がセットされます。
#### 【参考】モデル比較
[Models overview](https://docs.anthropic.com/claude/docs/models-overview#model-comparison)
### Run
Run the development server:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Note
> [!NOTE]
> このスクリプトは、とりあえず簡単に Claude 3 AI とチャットするための UI を作成したもので、機能は最低限、かつ細かいテストなどはしていません。
> クローズドなチャット UI を実装する時の参考程度に使用してください。