Open Lovable: AIを使ってウェブページを素早くReactアプリにクローンする

オープン 愛すべき は、AIとチャットすることでReactアプリケーションコードを素早く生成できるオープンソースプロジェクトである。プロジェクトはMendableAIによって開発され、GitHubでホストされている。E2Bサンドボックス環境とFirecrawlウェブクローラツールを統合し、複数のAIモデル（Anthropic、OpenAI、Groqなど）をサポートしてコードを生成する。ユーザーは、コードをクローンし、APIキーを設定し、プロジェクトを実行するだけで、ローカルに開発環境を素早く立ち上げることができる。 愛すべき 自然言語との対話を通じてReactの開発を加速させたい開発者に適したこのプロジェクトは、MITライセンスの下で無償かつオープンに使用できる。

機能一覧

• AIチャットがコードを生成自然言語を通してAIと会話することで、Reactコンポーネント、ページ、または完全なアプリケーションコードを素早く生成します。
• 複数のAIモデルをサポートAnthropic、OpenAI、GroqのAPIと互換性があり、AIプロバイダーを柔軟に選択できます。
• E2Bサンドボックス環境コードのテストと実行の分離を保証するセキュアなコード実行環境を提供します。
• ファイヤークロール動的コンテンツの生成や外部リソースの参照を支援するために、ウェブページからのデータ抽出をサポートします。
• 地域開発支援シンプルなnpm run devコマンドを使えば、ローカル開発サーバーを素早く起動できる。
• オープンソースで無料MITライセンスに基づき、ユーザーは自由にコードを使用、変更、配布することができます。

ヘルプの使用

設置プロセス

Open Lovableを使い始めるには、以下のステップを完了し、開発環境をセットアップする必要があります。すべてのプロセスは簡単で、Node.jsとReactに精通している開発者に適しています。

1.プロジェクトをクローンし、依存関係をインストールする

まず、GitHubからOpen Lovableのコードベースをクローンし、必要な依存関係をインストールする必要があります。ターミナルを開き、以下のコマンドを実行する：

git clone https://github.com/mendableai/open-lovable.git
cd open-lovable
npm install

• git clone: GitHubからプロジェクトのコードをローカルにダウンロードする。
• cd open-lovableプロジェクトカタログへ
• npm installReact、Node.jsなど、必要なライブラリを含むプロジェクトの依存関係をインストールします。Node.jsがインストールされていることを確認してください（推奨バージョン16以上）。

2.環境変数の設定

Open Lovableは外部APIサービスに依存しているため.env.localファイルを開き、以下のAPIキーを追加する：

# 必须配置
E2B_API_KEY=your_e2b_api_key  # 从 https://e2b.dev 获取，用于沙箱环境
FIRECRAWL_API_KEY=your_firecrawl_api_key  # 从 https://firecrawl.dev 获取，用于网页抓取
# 可选配置（至少选择一个AI提供商）
ANTHROPIC_API_KEY=your_anthropic_api_key  # 从 https://console.anthropic.com 获取
OPENAI_API_KEY=your_openai_api_key  # 从 https://platform.openai.com 获取
GROQ_API_KEY=your_groq_api_key  # 从 https://console.groq.com 获取，推荐Kimi K2模型

• APIキーの取得::
  • E2B_API_KEYアクセスhttps://e2b.dev登録し、サンドボックス環境のAPIキーを取得して、コードを実行しテストする。
  • firecrawl_api_keyアクセスhttps://firecrawl.devウェブクローリング用のAPIキーを取得したい場合は、それを使って外部のウェブページからデータを抽出することができる。
  • AIプロバイダー・キーAnthropic、OpenAI、GroqのいずれかのAIサービスを選択できます。対応するウェブサイトにアクセスして登録し、APIキーを取得する。少なくとも1つのAIキーを設定する。推論を高速化するためにGroqのKimi K2モデルの使用を推奨する。
• 確立.env.local書類プロジェクトのルート・ディレクトリでテキストエディタ（VS Codeなど）を使って.env.localファイルに上記のテンプレートをコピーし、キーを記入します。保存後、プロジェクトは自動的にこれらの設定を読み込みます。

3.プロジェクトの実行

設定が完了したら、以下のコマンドを実行して開発サーバーを起動する：

npm run dev

• コマンド実行後、プロジェクトはローカルでhttp://localhost:3000これでOpen Lovableのインターフェイスが表示されます。
• ポート3000が占有されていないことを確認する。ポートが競合している場合は、プロジェクトの設定ファイルでポートを変更してください。

主な機能

AIチャットがReactコードを生成

Open Lovableの中核機能は、AIチャットを介してReactコードを生成することだ。開くhttp://localhost:3000チャット画面が表示されます。これがその仕組みです：

• 入力要件チャットボックスに「ボタン付きのReactコンポーネントを作成する」「ユーザー一覧を表示するページを作成する」など、開発要件を入力してください。
• AIの反応: AIは、あなたの記述に基づいてReactのコードスニペット（JSX、CSSまたは完全なコンポーネントコードなど）を生成します。生成されたコードはインターフェイスに表示され、プロジェクトに直接コピーして使用することができます。
• 調整要件もし結果が期待通りでなければ、AIとの対話を続け、「クリックイベントを追加する」「ボタンを青に変更する」など、要件を追加・修正することができる。
• 対応AIモデル設定したAPIキーによって、AIはAnthropic、OpenAI、Groqのモデルを呼び出します。GroqのKimi K2モデルはスピードが速いのでおすすめです。

E2Bサンドボックス環境の使用

E2Bサンドボックスは、コードを実行するための安全で隔離された環境を提供します。コードを生成した後、インターフェイスで "Run "または "Test "オプションを選択すると、コードは自動的にE2Bサンドボックスで実行されます：

• コードテストAIが生成したコードはサンドボックス内で実行され、その結果（コンポーネントのレンダリング効果など）を見ることができる。
• エラーデバッグもしコードにエラーがあれば、サンドボックスはエラーメッセージを返す。
• 安全性E2Bサンドボックスは、コードがローカル環境に影響を与えることなく実行されることを保証し、複雑なロジックのテストに適しています。

ウェブクローラー

Firecrawlの統合ウェブクローリング機能により、外部ウェブサイトからデータを抽出し、動的コンテンツの生成を支援することができます：

• 操作方法ウェブサイトからヘッドラインと画像を取得する」や「最新ニュースのリストを取得する」などのコマンドをチャットインターフェースに入力します。
• 結果処理: Firecrawlは構造化データ（タイトル、リンク、画像URLなど）をJSON形式で返し、AIはこのデータに基づいて適切なReactコンポーネントを生成する。
• 典型例ブログサイトの投稿リストをクロールしてReactコンポーネントを生成する」と入力すると、AIがFirecrawlを呼び出してデータをクロールし、投稿タイトルを表示するReactリストコンポーネントを生成する。

ほら

• APIキーのセキュリティを付けないでください。.env.localこのファイルは、鍵の漏洩を避けるため、GitHubやその他の公開プラットフォームにアップロードされる。
• ネットワーク接続AIモデルの呼び出しやウェブクロールには外部APIへのアクセスが必要なため、コンピューターがインターネットに接続されていることを確認してください。
• パフォーマンス最適化複雑なコンポーネントを生成する際にAIのレスポンスが遅い場合は、スピード重視でGroqのKimi K2モデルを選んでみてください。
• プロジェクト延長MITライセンスに基づいてOpen Lovableのコードを変更し、カスタム機能を追加したり、他のツールを統合することができます。

アプリケーションシナリオ

1. ラピッドプロトタイピング
   開発者は、AIを使って数分でReactアプリケーションのプロトタイプを作成できる。例えば、「ログインページを作成」と入力すると、入力ボックス、ボタン、スタイルを備えたReactコンポーネントが生成され、製品のアイデアを素早く検証するのに最適です。
2. リアクト開発を学ぶ
   AIが明確なコードを生成し、ニーズに応じて段階的に最適化するため、ユーザーはReactコンポーネントの構造とロジックを理解することができる。
3. 動的コンテンツ生成
   Firecrawlのウェブクローリング機能と組み合わせることで、開発者は、ニュース、製品リスト、ソーシャルメディアコンテンツを表示する動的ページなど、外部データに基づいてReactコンポーネントを迅速に生成することができます。
4. チームワーク
   開発チームはOpen Lovableを使用することで、コードスニペットを素早く生成し、手作業によるコーディング時間を短縮することができます。生成されたコードは、既存のReactプロジェクトに直接統合することができ、コラボレーション効率を向上させます。

品質保証

1. Open LovableはどのようなAIモデルをサポートしていますか？
   Anthropic、OpenAI、GroqのAPIをサポートしています。.env.local少なくとも1つのAIプロバイダーのキーを設定する。コード生成を高速化するためにGroqのKimi K2モデルを使用することを推奨する。
2. E2BとFirecrawlのAPIキーを取得するには？
   インタビューhttps://e2b.devE2BサンドボックスのAPIキーを取得するには、登録が必要です。https://firecrawl.devウェブクローラーAPIキーの登録。登録プロセスは簡単で、通常はEメールによる認証が必要です。
3. AIが生成したコードにエラーがあったら？
   チャット・インターフェイスでエラーを説明するか、AIにコードの最適化を依頼する。
4. Open Lovableはオフラインで使用できますか？
   Open Lovableは外部のAIモデルとウェブクローリングAPIに依存しており、安定したインターネット接続が必要です。
5. 料金はかかりますか？
   Open Lovable自体は無料（MITライセンス）だが、使用する外部API（E2B、Firecrawl、AIモデルなど）は、サービスプロバイダーの価格設定によって有料になる場合がある。