はじめに

X(旧Twitter）を眺めていると、チャエンさんのある投稿が目に飛び込んできました。私は単なる読者です。もしも、このタイトルに興味有る方は、以下の投稿をチェックしてみてください。また、この投稿も読んでみてください。

AI Artifactsとは

AI Artifactsは、AIによるコード生成と安全な実行環境を提供するオープンソースプロジェクトです。このプロジェクトは、Anthropic社のClaude AIチャットアプリに搭載されているアーティファクト機能を参考に、同様の機能をオープンソースで実現することを目指しています。

デモサイトでstreamlitで「カレーの作り方」のWebサイトを実装してもらっている様子。

生成されたコード

プレビューでstreamlitのアプリを実行している様子

プロジェクトの概要

AI Artifactsの主な目的は、AIが生成したコードを安全に実行できる環境を、より多くの開発者に提供することです。このプロジェクトは、最新のAI技術と安全なコード実行環境を組み合わせることで、開発者がAIとより効率的に協力して作業を行えるようサポートします。

主な特徴

Claude AI Sonnet 3.5モデルの活用
- 最新のAIモデルを使用してコード生成を行います。
- 高度な自然言語処理能力により、複雑な要求にも対応可能です。
E2Bによる安全なコード実行環境
- E2BのCode Interpreter SDKとCore SDKを使用し、サンドボックス環境でコードを実行します。
- ライブラリのインストールやシェルコマンドの実行も可能です。
多言語・多フレームワーク対応
- Python、JavaScriptをサポートしています。
- Jupyter notebook、Next.js、Streamlitなどの環境にも対応しています。
Vercel AI SDKの統合
- ツール呼び出しとモデルからのストリーミングレスポンスを実現しています。

一部まだToDoの項目もある　詳細は公式のGitHubのページを参照ください

セットアップ方法

AI Artifactsを使用するには、以下の手順に従ってセットアップを行います：
（2024年8月4日時点）

依存関係のインストール
```
npm i
```
APIキーの設定
.env.localファイルを作成し、以下の内容を設定します：
```
E2B_API_KEY="your-e2b-api-key"
ANTHROPIC_API_KEY="your-anthropic-api-key"
```
※APIキーはE2BのサイトとAnthropicのサイトで取得できます。
アプリケーションの起動
```
npm run dev
```

使用例

AI Artifactsを使用することで、以下のようなタスクを効率的に行うことができます：

自然言語による複雑なコードの生成
生成されたコードの即時実行と結果の確認
複数の言語やフレームワークを跨いだプロトタイピング
AIとの対話を通じたコードの最適化や改善

まとめ

AI Artifactsは、AIによるコード生成と安全な実行環境を組み合わせた革新的なプロジェクトです。オープンソースで提供されることにより、多くの開発者がAI技術を活用した開発手法を試すことができます。AI Artifactsを通じて、開発者はAIとの新しい協力関係を築き、より効率的で創造的なソフトウェア開発プロセスを実現することが可能となります。

はじめに

AI Artifactsとは

プロジェクトの概要

主な特徴

セットアップ方法

使用例

まとめ

参考情報