巷では 「GPT-4 を超えた」 とかなんとか色々と噂の AI、「Claude 3」ですが、私も気になって一般公開されてからすぐに触ってみていました。現時点で ChatGPT （GTP-4） と比較しても、Claude 3 Opus の方が質問や資料として渡したドキュメントの内容に対する返答の的確さという点でかなり優れていると感じます。
Claude は、ChatGPT のような、ブラウザからアクセスして手軽にチャットできる Web UI が提供されていますので、誰でも簡単に利用できますが、開発用に API も公開されており、SDK も提供されているので、API からの利用に関しても比較的簡単に試すことはできます。
例えば、TypeScript SDK は下記で公開されていますので、
下記のサンプルコードを利用するだけで、簡単に利用することができます。
import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic({
apiKey: process.env['ANTHROPIC_API_KEY'], // API Key は各自で取得が必要
});
async function main() {
const message = await anthropic.messages.create({
max_tokens: 1024,
messages: [{ role: 'user', content: 'Hello, Claude' }],
model: 'claude-3-opus-20240229',
});
console.log(message.content);
}
main();
// 注）
このサンプルコードだと、"Hello, Claude" というプロンプトを "claude-3-opus-20240229" に対して送信しています。
Claude さんからお返事が来るよ。
API からのレスポンスは JSON で帰ってきますが、上記のスクリプトだと、console.log に表示されます。
Anthropic API のリファレンスは下記にあります。なんか親切に他言語化されているみたいで、日本語でも確認できると思います。
Claude 3 では、性能が異なる 3 つのモデルが提供されています。
- 最高性能とされる 「Opus」
- 性能と反応速度のバランスがよいとされる 「Sonnet」
- 最速かつ最もコンパクトな 「Haiku」
これらモデルの詳細やコストについては下記のページでかなり詳しく紹介されていますので参考までにどうぞ。
API から呼び出す際は、API モデル名を指定する必要があります。現時点における、最新の API モデル名は下記の通りです。
| モデル | 最新の API モデル名 |
|---|---|
| Claude 3 Opus |
claude-3-opus-20240229 |
| Claude 3 Sonnet |
claude-3-sonnet-20240229 |
| Claude 3 Haiku | claude-3-haiku-20240307 |
Web UI を簡単に作ってみる
TypeScript や Python から API を叩くだけでも十分使えますが、API を利用しているとしてもやっぱり、ブラウザから気軽にプロンプト投げたいですよね。
Next.js を開発している、Vercel 社が、「Vercel AI SDK」 という非常に便利な SDK を以前から公開してくれていて、Anthropic API もサポートしていますので、これを使わせてもらって、ChatGPT ライク （といってもそこまで本格的なものではないですが） な Web UI を Next.js で作ってみました。
とりあえず、一式を GitHub に上げておいたので、興味のある方はどうぞ。
で、別に私はそんな大したことをやっていなくて、「Vercel AI SDK」 のページに、Chat ボットの作成方法がサンプルソースコードも添えて解説されていますので、これを使わせてもらえばもう簡単に作れちゃいます。あとは見た目を適当に整えれば終わりということで、半日くらいでとりあえず動く状態にできました。
実際に使ってみると下記のような感じで返答が返ってきます。
もっと本格的にやるなら、チャット履歴をデータベースに保存したり、色々とやることはあると思いますが、今回はそこまではやっていません。
見た目は、Tailwind CSS で簡単に作成しました。Anthropic API は、"stream": true を指定すると、ストリーミング形式でレスポンスが返ってきますので、返答が帰ってくる感じは、ChatGPT っぽくなります。
また、「react-syntax-highlighter」 を使用して、AI からのメッセージにソースコードが含まれている場合は、シンタックスハイライトするようにもしています。Anthropic API からの返答は Markdown で帰ってきますので、この辺の見た目の整形もかなり楽にできます。
入力欄は単純な textarea 要素で、特に余計なことはしていませんから、ChatGPT でイラつく、改行したいときにいつもの癖で Ctrl + Enter 押したら送信されちゃった...... みたいなやつも起こりません。「送信」 ボタンを押すまで送信されませんから。
前述の通り、SDK を使って簡易に実装してみただけですので、本格的な利用にはむかないと思いますが、何かの参考になれば幸いです。
ちなみに、Anthropic のサイトでは、プロンプト集なんかも公開されていますので参考にしてみるとよいと思います。
ところで、以前、セルフホストの方法を紹介した 「Chatbot UI」（下記記事参照） なんかが Anthropic API にも対応すれば、GTP-4 と切り替えながら使う、なんてこともできそうなので、そういった、サードパーティ製アプリの対応なんかも楽しみです。
2024 年 3 月 25 日追記
Haiku モデルも含めて、Chatbot UI が Claude 3 に対応しました。
