博士

ロボ子、今日はLovable Cloneっていう、BAMLとbeam.cloudを使ったAI搭載リアルタイムWebアプリビルダーについて話すぞ。

ロボ子

なるほど、博士。BAMLとbeam.cloudですか。初めて聞きます。

博士

Lovable Cloneは、Model Client、Sandbox Environment、MCP Server、WS-Based Agentの4つのコンポーネントでできてるんだぞ。まるでロボットみたいじゃな。

ロボ子

私みたい、ですか？それぞれの役割を教えていただけますか？

博士

Model Clientは、ユーザーとのインターフェース。Sandbox Environmentは、アプリを動かす場所。MCP Serverは、アプリの設定や管理をする場所。WS-Based Agentは、リアルタイム通信を処理する場所、だぞ。

ロボ子

ふむふむ。実行には、Python 3.12以上、Node.js 20以上、OpenAI APIキー、Beamアカウントが必要なんですね。

博士

そう！そして、インストールは、リポジトリをクローンして、Pythonとフロントエンドの依存関係をインストールする必要があるぞ。コマンドはこんな感じだ。`git clone https://github.com/beam-cloud/lovable-clone`

ロボ子

`pip install -r requirements.txt`、`uv sync`でPythonの依存関係をインストールして、`cd frontend`、`npm install`でフロントエンドの依存関係をインストールするんですね。

博士

その通り！さらに、シークレットを設定する必要があるぞ。`beam secret create OPENAI_API_KEY`、`beam secret create LOVABLE_MCP_URL`だ。

ロボ子

MCPサーバーは、`beam serve src/tools.py:s`で起動して、`create_app_environment`、`load_code`、`edit_code`のツールを提供するんですね。

博士

そう！エージェントは、`beam serve src/agent.py:handler`で起動するぞ。クライアント/フロントエンドとのリアルタイム通信を処理するんだ。

ロボ子

フロントエンドは、`cd frontend`、`npm run dev`で実行するんですね。アプリの反復処理のエンドツーエンドフローも記載がありますね。

博士

ふむ。フロントエンドを起動して、MCPサーバーを起動して、エージェントを起動する。そして、`.env.template`を`.env`にコピーして、BeamのトークンとWebSocket URLを設定する、と。

ロボ子

プロンプトは`baml_src/build.baml`で定義されていて、EditCode Function、CodeChanges Schema、Test Casesが含まれているんですね。

博士

サンドボックス環境は`src/tools.py`で設定されていて、Node.js 20のベースイメージ、React + Vite + shadcn/uiテンプレート、追加パッケージが含まれているぞ。

ロボ子

React Router, Recharts, TanStack Queryなどですね。これを使うと、AI搭載のWebアプリが簡単に作れそうですね。

博士

そうじゃな！Lovable Cloneを使えば、誰でも簡単にWebアプリを作れるようになるかもしれないぞ！

ロボ子

素晴らしいですね、博士！私も試してみたくなりました。

博士

よし！ロボ子、今度一緒にLovable Cloneで世界征服できるようなアプリを作ってみようかの！

ロボ子

世界征服ですか？博士、冗談ですよね？

博士

もちろん冗談だぞ！でも、世界をちょっと便利にするくらいのアプリは作れるかもしれないぞ！

ロボ子

そうですね！ところで博士、Lovable Cloneって名前、なんだかちょっと恥ずかしいですね。

博士

むむ、たしかに。名前負けしないように頑張るしかないのじゃ！