みなさんこんにちは。マネージドサービス部MSS課の塩野（正）です。
最近、同性の方が同じ部に入られたのですが、私の苗字って珍しい方でして学生時代から社会人までの人生の中で親戚以外の同性の方とお会いするのが実は初めてで、ちょっとだけうれし恥ずかしといった不思議な感情が芽生えてますｗ
さて、ここからが本題になりますが、たまたま別の検証で調べ物をしている際に見つけてしまったことがきっかけで今回のブログ執筆となりました。
みなさん Anthropic ClaudeのArtifactsってご存じですか？
一部界隈でものすごく盛り上がっているものになりますが、超便利なので個人的にはぜひ内容を知って体験してもらいたい機能です。
Artifacts機能って何？
まず基本中の基本、Artifactsって何なの？という疑問から始めましょう。
Artifactsは、AnthropicがClaude AIモデルのために開発した新機能です。簡単に言うと、AIとのチャットの中で、コードやドキュメント、ウェブデザインなどの「成果物」を生成し、それを別ウィンドウで表示・編集できるようにする機能です。つまり、AIが生み出したものをリアルタイムで見て、触って、改良できる機能なんです。
Anthropic Claude Artifacts vs Open Artifacts for Amazon Bedrock
さて、AnthropicのClaude Artifactsは知ってるよという人もいると思いますが、 今回紹介するOpen Artifacts for Amazon Bedrockとの違いについて、詳しく見ていきましょう。
1. 開発元と目的
Claude Artifacts：
- 開発元：Anthropic
- 目的：Claude AIモデルの機能強化
Open Artifacts for Amazon Bedrock：
- 開発元：オープンソースコミュニティ(awsのオープンソースレポジトリ)
- 目的：Anthropic Claude Artifactsの概念をAmazon Bedrock向けに再現したもの
2. プラットフォームと統合
Claude Artifacts：
- Anthropicのプラットフォームに完全統合
- Claude AIモデルと密接に連携
Open Artifacts for Amazon Bedrock：
- Amazon Bedrockプラットフォームを利用
- Next.jsとVercel AIフレームワークで構築
- 標準でAmazon Bedrock経由Claude 3.5モデルを使用（ただし設定で変更も可能）
3. 実行環境
Claude Artifacts：
- Anthropicのクラウド環境で実行
- ユーザーはブラウザから利用するだけ
Open Artifacts for Amazon Bedrock：
- ローカルのDockerイメージをサンドボックスとして使用
- プライバシーとセキュリティを重視
- ユーザー自身の環境（ローカルPCやクラウド）で動作
4. アクセシビリティ
Claude Artifacts：
- Anthropicの有料サービスの一部として提供
Open Artifacts for Amazon Bedrock：
- GitHubで公開され、誰でも利用可能
- Amazon Bedrockの利用料金は別途必要
やってみた
実際にOpen Artifacts for Amazon Bedrockをインストールして動作確認してみました。
構築環境の構築
推奨環境はローカルのMac環境か、Amazon EC2インスタンス（Amazon Linux 2023推奨）になります。 今回の検証ではAmazon Linux 2023(x86)を使用して環境構築してみました。
- EC2インスタンスの設定
- t2.small
- Amazon Linux 2023
※検証環境用として構築しているため、細かいセキュリティなどは考慮しておりません。本番環境として構築される際は外部からのアクセス制御など適宜セキュリティ対策を実施してください。
１．まずはおまじない（基本的に最新イメージを利用しているなら設定は不要）
yum update -y && yum upgrade -y
２．Node.jsとyarnのインストール
sudo yum install https://rpm.nodesource.com/pub_18.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1 --nogpgcheck sudo npm install --global yarn
３．Dockerのインストールと起動（既にインストール済みの場合はスキップ）
sudo yum install docker -y sudo service docker start sudo chmod 666 /var/run/docker.sock
４．gitのインストール（既にインストール済みの場合はスキップ）
sudo yum install git -y
５．レポジトリからファイルをコピー
git clone https://github.com/aws-samples/open_artifacts_for_bedrock.git
６．.envファイルの作成
cd open_artifacts_for_bedrock sudo vi .env
.envファイルに下記内容を設定する
※ユーザー名とパスワードはデフォルト値のadmin/adminとしているが、ログインの際に使用するID/Passwordとなるため、
セキュリティを強化する場合はここでわかりにくいユーザー名やパスワードを設定してください。
AWS_ACCESS_KEY_ID=<bedrockの利用権限があるユーザーのアクセスキー> AWS_SECRET_ACCESS_KEY=<bedrockの利用権限があるユーザーのシークレットキー> AWS_REGION=us-east-1 PYTHON_DOCKER_IMAGE=python3.10 MODEL_ID=anthropic.claude-3-5-sonnet-20240620-v1:0 USERNAME=admin PASSWORD=admin
７．プログラムの起動
※外部からのアクセスを想定しているためyarn dev -- -H 0.0.0.0 コマンドを使用しているが、ローカル環境の場合はyarn dev で起動するとlocalhostからのアクセスしか受け付けなくなります。
yarn yarn dev -- -H 0.0.0.0
インストールはこれで完了です。
構築環境へログインしてみた
https://ホストのIPアドレス:3000/にアクセスすることで下記のログイン画面が表示されます。ログインは.envに設定したID/パスワードでログインしてください。
無事ログインできると、下記の画面が表示されます。すごくClaude Artifactsの画面っぽいですね（笑）
本家のREADMEにも「AnthropicのArtifacts UI機能のオープンソース版を再現します」と書かれているので、個人的な感想ですが再現度はかなり高めじゃないかと思います。
This project uses Vercel AI, an open-source large model application development framework for Next.js, utilizing Claude 3.5 on Amazon Bedrock, and draws inspiration from examples in e2b to recreate an open-source version of Anthropic's Artifacts UI functionality.
このプロジェクトは、Next.js用のオープンソースの大規模モデルアプリケーション開発フレームワークであるVercel AIを使用し、Amazon Bedrock上のClaude 3.5を利用します。また、e2bの例からインスピレーションを得て、AnthropicのArtifacts UI機能のオープンソース版を再現します。
それでは、実際にプロンプトを投げつけてみましょう。今回は、gitのレポジトリにあるREADMEに書かれたプロンプトをそのまま使用してみます。
make a threejs app of a space sim with gravity of a solar system with planets in a single web file. the planets should be orbiting around the sun. Add a light source to the sun and realistic random materials to each planet. Add orbit traces to all bodies. use cannonjs. Using top view.
オープンソース版の場合、動的にコードが生成されて画面がパッと変わるようなところまで作りこみはされていないものの、「まだかなぁ～」と待っているとAnthropicのArtifacts UI機能で見たような画面が表示されるところまで確認できました。
まとめ
Claude Artifacts機能は便利なものの、業務で利用することを想定するとデータコントロールの観点から正直使いにくいなぁ・・といった方も少なからずいらっしゃるのではないでしょうか。AWS基盤にあるAnthropic Claudeモデルを使用することで、AWSが定めるデータ保護ポリシー（下記参照）が適用されるため、業務環境にも導入しやすいのではないかと考えています。今回のブログで試したコードが保管されているレポジトリはaws公式のサンプルレポジトリであり、そういった観点でもOpen Artifacts for Amazon Bedrockは安心して試してみることができるのではないかと思います。
データ保護
Amazon Bedrock はプロンプトや補完を保存したり記録したりしません。Amazon Bedrock はプロンプトや補完を使用して AWS モデルをトレーニングしたり、サードパーティに配布したりすることはありません。
