Data Driven Knowledgebase

produced by

  • Facebook
  • Twitter
  • Facebook
  • Twitter
  • AI
  • URLを入力するだけでサイトをReactアプリに変換する「Open Lovable」を試してみた
AI
2025/10/14
佐藤 大生

URLを入力するだけでサイトをReactアプリに変換する「Open Lovable」を試してみた

WebサイトをReactアプリに自動変換するOSS「Open Lovable」の概要と使い方を解説します。導入手順からカスタマイズ、現状の制約と今後の可能性まで、具体例を通して理解しましょう。

React検証レビューLLMChatGPTAI

目次

1 はじめに

今回は、非常に興味深いオープンソースツール「Open Lovable」を発見したので、実際に使ってみた感想と使い方をまとめました。


Open LovableはURLを入力するだけで、既存のウェブサイトをReactアプリのコードに変換してくれる画期的なツールです。完全オープンソースとして公開されている点も大きな魅力です。


2 Open Lovableとは？

Open Lovableは、既存のウェブサイトのURLを指定するだけで、そのサイトの構造やデザインを解析し、Reactアプリケーションのコードを自動生成してくれるツールです。




主な特徴



  • URLベースの変換: サイトのURLを入力するだけで自動的にReact化

  • AIチャット機能: 自然言語でコードの修正指示が可能

  • オープンソース: GitHubで公開されており、自由にカスタマイズ可能


技術構成


Open Lovableは以下の技術を組み合わせて動作しています：



  • Firecrawl: ウェブサイトのコンテンツとレイアウト情報を取得

  • LLM (GPT-4/Claude等): 取得した情報を基にReactコンポーネントを生成

  • E2B Sandbox: 生成されたコードを安全な環境で実行し、プレビューを提供


3 環境構築（セットアップ）

実行するために必要なもの


使用するには以下のAPIキーが必要です。E2B API キーとFirecrawl API キーの取得方法については説明します。



  • E2B API キー

  • Firecrawl API キー

  • お好みのLLMのAPIキー


APIキーの取得方法


E2B API キー



  1. e2b.devのサイトにアクセスし、右上のSIGN UPまたは真ん中のSTART FOR FREEからサインアップしてください。

  2. サインアップできたら、左サイドバーからAPI Keysを選択し、「CREATE KEY」を押してAPIキーを作成・コピーしてください。後で再び確認することができないので、この時点で.env.localファイルにコピペしてください。


 


Firecrawl API キー



  1. Firecrawのサイトにアクセスし、右上のSign Upからサインアップしてください。

  2. サインアップできたら、左サイドバーからAPI Keysを選択してください。Firecrawlについては、DefaultにあるAPIキーをコピーして使用することができます。新しく作りたい場合は、Create API Keyから作成してください。


セットアップ手順



  1. クローンして、依存関係をインストールします。

    # リポジトリをクローン


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


    cd open-lovable


    # 依存関係をインストール


    npm install



  2. プロジェクトのルートに.env.localファイルを作り、以下を埋めるように、APIキーを入力します。 E2BとFIRECRAWLについては必須で、ANTHROPICやOPENAIなどのAPIについては、いずれか1つで大丈夫です。

    # Required E2B_API_KEY=your_e2b_api_key # Get from https://e2b.dev (Sandboxes) FIRECRAWL_API_KEY=your_firecrawl_api_key # Get from https://firecrawl.dev (Web scraping) # Optional (need at least one AI provider) ANTHROPIC_API_KEY=your_anthropic_api_key # Get from https://console.anthropic.com OPENAI_API_KEY=your_openai_api_key # Get from https://platform.openai.com (GPT-5) GEMINI_API_KEY=your_gemini_api_key # Get from https://aistudio.google.com/app/apikey GROQ_API_KEY=your_groq_api_key # Get from https://console.groq.com (Fast inference - Kimi K2 recommended)


  3. npm run devを実行してローカルサーバーを起動します。起動すると、以下のような出力が表示されます。表示されたLocal URLをブラウザでアクセスしてください。



  4. アクセスすると、以下の画像のサイトが表示されます。コピーしたいサイトのURLの入力と使用するLLMを選ぶことができます。使用するLLMをGPT-5、Kimi K2 Instruct、Sonnet 4、Gemini 2.5 Proから選ぶことができます。今回はSonnet 4を選んでみました。


  5. また、URLを入力するとサイトのイメージスタイルを選ぶことができます。今回は、SiNCEのサイトでModernを選びました。




4 使用してみた感想

使用してみて良かった点と課題点については以下のようになりました。


良かった点：



  • テキストコンテンツは比較的正確に抽出される

  • 基本的な表示されている順番は再現される

  • AIチャット機能で修正指示が可能


課題点：



  • レイアウトが元のサイトと大きく異なる場合がある

  • 存在しないボタンやリンクが勝手に追加される

  • エラーが多く発生する（いろんなサイトを用いて実行しましたが、一発でコピーサイトが作ることはできませんでした。何度か修正指示をして出来ました）


一部にはなりますが、元のサイト（SiNCEのサイト）と、Open Lovableによって作られたサイトを比較できるように画像を添付します。


Open Lovable



元のサイト（SiNCEのサイト）



Open Lovable



元のサイト（SiNCEのサイト）



Open Lovable



元のサイト（SiNCEのサイト）



5 まとめ

正直なところ、Open Lovableは現時点ではまだ課題があるツールでした。上記で示した課題点が深刻であり、「既存のウェブサイトをReactアプリのコードに変換してくれる画期的なツール」という触れ込みでしたが、実際の開発には限定的な用途で止めるのが現実的といった印象でした。


ただし、Open Lovableは始まったばかりの技術なので、オープンソースプロジェクトとして活発に開発が進み、以下の点で今後の改善が期待できるのではないかと考えています。



  • AIモデルの進化：より高精度なLLMの登場により、生成精度の向上が見込める

  • コミュニティの貢献：GitHubでの開発が活発で、バグ修正や機能追加が継続的に行われる

  • ユースケースの最適化；特定の用途に特化することで実用性が向上する可能性


New call-to-action

あわせて読みたい