ジェネラティブエージェンツの大嶋です。
「AIエージェントキャッチアップ #7 - Bolt.new」という勉強会を開催しました。
generative-agents.connpass.com
アーカイブ動画はこちらです。
Bolt.new
今回は、ブラウザで動作するフルスタックWeb開発エージェント「Bolt.new」を動かしたり、READMEやソースコードを読んだりしてみました。
Bolt.newのサービス版はこちらです。
今回のポイント
Bolt.newの概要
Bolt.newは、ブラウザで動作するフルスタックWeb開発エージェントです。
ユーザーの指示をもとに、JavaScriptの各種フレームワークを使ったWebアプリケーションを実装してくれます。
一度の指示で1ファイルだけ実装されるのではなく、複数のファイルが次々実装されていきます。
WebContainersでの動作
Bolt.newの大きな特徴としては、WebContainersによりブラウザ上でNode.jsが実行されることが挙げられます。
たとえば以下の画面キャプチャでは、npm installとnpm run devを実行してAstroのアプリケーションをプレビューしています。
WebContainersは、Bolt.newの開発元のStackBlitz社が提供している、ブラウザ上でNode.jsのコードを実行できるランタイムです。
詳細は分かりませんが、WebAssemblyを使って動作するようです。
AWS Cloud9やVisual Studio Code Serverといったブラウザ上で使うことができる開発環境では、実際の処理はサーバー上で行われます。 それに対して、Bolt.newは本当にブラウザ上で動いているというのが特徴です。
デプロイ
Bolt.newは、デプロイにも対応しています。
画面右上の「Deploy」をクリックすると、自動的にNetlifyでアプリケーションが公開されます。
（これは生成AIとは特に関係ない機能だと思われます）
StackBlitzとの連携
Bolt.newの画面右上の「Open in StackBlitz」をクリックすると、StackBlitzというWeb開発環境のサービス上で同じコードを編集したりできるようになります。
逆に、StackBlitzの画面左上の「Open in bolt.new | AI」をクリックすると、今度はBolt.newが開いて同じコードを編集できます。
StackBlitzはGitHubとも連携できるようなので、Bolt.newで実装したコードをGitHubにアップロードすることもできるかもしれません。
OSS版
今回はOSS版も起動できるか試してみました。
CONTRIBUTING.md に記載の手順を実行したところ、とくにエラーなく起動しました。
サービス版とは少しUIが異なりますが、同じようにブラウザ上でコードを書かせて実行することができました。
Bolt.newのREADMEには以下のように書かれています。
For developers interested in building their own AI-powered development tools with WebContainers, check out the open-source Bolt codebase in this repo!
WebContainersを使ってAIを組み込んだ開発ツールを実装する際にこのOSSリポジトリを見てください、ということのようです。
Enhance prompt
Bolt.newで面白いと思った機能の1つが「Enhance prompt」というボタンです。
チャット欄に表示されている「Enhance prompt」というボタンをクリックすると、ユーザーが入力したプロンプトが改善されます。
たとえば日本語での入力が英語に書き換えられるため、実際に生成されるコードがよくなる効果があるかもしれません。
ちなみに、このときの内部動作としては、以下のシンプルなプロンプトでLLMが呼び出されているだけです。
I want you to improve the user prompt that is wrapped in \`<original_prompt>\` tags.
IMPORTANT: Only respond with the improved prompt and nothing else!
<original_prompt>
${message}
</original_prompt>
プロンプトと動作の概要
最後に、Bolt.newのプロンプトとコード生成の動作の概要を紹介します。
Bolt.newのソースコードを読むと、主に1つのシステムプロンプトで動作しているようです。
ソースコードの該当箇所はこちら：https://github.com/stackblitz/bolt.new/blob/main/app/lib/.server/llm/prompts.ts
システムプロンプトの中では、出力の形式の例を与えている以下の箇所が分かりやすいです。
<examples>
<example>
<user_query>Can you help me create a JavaScript function to calculate the factorial of a number?</user_query>
<assistant_response>
Certainly, I can help you create a JavaScript function to calculate the factorial of a number.
<boltArtifact id="factorial-function" title="JavaScript Factorial Function">
<boltAction type="file" filePath="index.js">
function factorial(n) {
...
}
...
</boltAction>
<boltAction type="shell">
node index.js
</boltAction>
</boltArtifact>
</assistant_response>
</example>
<assistant_response>というタグの中でCertainly, I can help you create a JavaScript function to calculate the factorial of a number.のようにチャットに表示すべきメッセージを出力させ、<boltAction type="file" filePath="index.js">のタグで出力された内容はファイルに記述し、<boltAction type="shell">というタグで出力された内容はシェルコマンドとして実行する、という動作をしているようです。
一度のLLMの呼び出しで複数のファイル・コマンドを生成させようとしていることが分かります。
ちなみに、LLMが生成したXMLのパースには、既存のライブラリを使わず、自前でパーサーを実装しているようでした。
パーサーの実装はこちら：https://github.com/stackblitz/bolt.new/blob/main/app/lib/runtime/message-parser.ts
次回のご案内
以上、今回はBolt.newをキャッチアップしました。
次回は「AIエージェントキャッチアップ #8 - Anthropic Claude Computer use」ということで、Anthropic Claudeの「Computer use」がテーマです。
generative-agents.connpass.com
ご興味・お時間ある方はぜひご参加ください！
また、その次の回以降のテーマも募集しているので、気になるエージェントのOSSなどあれば教えてください！
