ClaudeとLovable MCPサーバーを連携してアプリを作る手順

Lovable MCPサーバーは、Lovableのプロジェクトを外部のAIクライアントから操作するための入口です。ClaudeやClaude Codeにつなぐと、「フィードバック収集フォームのアプリを作って」と頼むだけでプロジェクトが作られ、プレビューURLが返ります。修正の依頼も、本番公開も、同じ会話の中で進められます。

接続先のURLは https://mcp.lovable.dev です。認証はOAuthのみで、APIキーでは接続できません。この記事では、接続の手順、使えるツール、課金と公開範囲の注意点、そしてLovableが用意している3つの入口(MCPサーバー・API・APIコネクタ)の使い分けを順に示します。

Lovable MCPサーバーとは何か

Lovable MCPサーバーとは、Lovable自身がMCPサーバーとして https://mcp.lovable.dev に公開している窓口のことです。外部のAIエージェントが、自然言語でLovableのプロジェクトを作成・編集・管理できます。全プランで使えます。

名前が似た機能に、Lovableの「チャットコネクタ」があります。向きが逆です。

Claudeのコネクタ一覧にも「Lovable」が載っています。作成元はLovableで、一覧の表示は「Anthropic verified」、サインインが必要です。コネクタのURLは https://mcp.lovable.dev/ で、MCPサーバーと同じ窓口に当たります。Claudeのコネクタ全般の考え方はClaudeコネクタの使い方にまとめています。

MCP・API・APIコネクタはどう使い分けるか

Lovableは、プログラムからLovableを扱う方法を3つ用意しています。どれも「どこから動かすか」が違います。

境目になるのは、AIが何を作るかです。LovableのAPIは既存プロジェクトの管理と公開が中心で、AIによるプロジェクトの作成や編集はMCPサーバー経由で行います。API自体に別料金はなく、現行のエンドポイントはAIのビルド用クレジットを消費しないと説明されています。

プランの条件も異なります。APIキーの作成にはBusinessまたはEnterpriseが要り、ワークスペースのownerかadminである必要があります。APIコネクタもBusiness・Enterprise限定です。MCPサーバーだけが全プランで使えます。

迷ったときは、次の順で考えると選びやすくなります。

Claudeの側で似た構造を持つ連携は、RetoolのMCPサーバーにもあります。外部のアプリ生成基盤をClaudeから呼ぶ点が共通です。

接続する前に確かめること

接続の前に、次の条件を確認します。

• Lovableのアカウントがある(プランは問わない)
• ワークスペースで「サードパーティのMCPクライアント」が有効になっている
• Claude、Claude Code、Cursorなど、MCPクライアントが手元にある

サードパーティのMCPクライアントは、Free・Pro・Businessのワークスペースでは既定で有効です。Enterpriseでは既定で無効なので、ワークスペースのadminかownerがWorkspace settings → Security → Privacy & securityで有効にします。

Enterpriseの社内で使うなら、もう一点あります。BusinessとEnterpriseでは、管理者がエンタープライズ管理の認証を有効にすると、メンバーはLovableへ別途サインインせず、Okta経由でClaudeからLovableを使えます。この場合、Claude側はTeamまたはEnterpriseプランが必要です。

Claudeからつなぐ手順

接続の方法は、使うClaudeの面で変わります。

claude.aiとClaude Desktop

コネクタ一覧から追加する方法が最短です。Claude Desktop(macOSとWindows)とclaude.aiで同じ手順になります。

Claude Desktopの設定ファイル

設定ファイルを直接編集する方法もあります。ファイルの場所は、macOSが ~/Library/Application Support/Claude/claude_desktop_config.json、Windowsが %APPDATA%\Claude\claude_desktop_config.json です。

{
  "mcpServers": {
    "lovable": {
      "type": "http",
      "url": "https://mcp.lovable.dev"
    }
  }
}

すでに mcpServers がある場合は、ブロックを2つ書かず、既存のオブジェクトの内側に "lovable" を足します。二重に書くとJSONとして壊れます。保存したらClaude Desktopを再起動します。

Claude Code

Claude Codeでは、1行のコマンドで登録できます。

claude mcp add --transport http lovable "https://mcp.lovable.dev"

最初のツール実行時にブラウザが開くので、Lovableにログインします。登録できたかは、セッション内の /mcp で lovable を探して確かめます。「自分のLovableワークスペースを一覧にして」と頼む確認方法もあります。

スラッシュコマンドもまとめて入れたいときは、Lovableのプラグインを使います。

/plugin install lovable@claude-plugins-official

Cursorにもプラグインがあり、/lovable-new、/lovable-iterate、/lovable-db、/lovable-deploy のコマンドが入ります。VS Codeは設定ファイルの servers キーに同じURLを書きます。キー名がClaude Desktopの mcpServers と違う点に注意します。

Claudeからアプリを作る・直す・出す

接続が済めば、あとは会話です。公式が示している流れは、作成、確認、修正の繰り返し、最後に任意で公開、の順です。

作る

create_project に、ビルドの指示となる initial_message を渡してプロジェクトが作られます。テンプレートやデザインシステムを起点にすることもできます。ワークスペースを指定しなかった場合、対象になり得るワークスペースが1つならLovableが自動で選びます。複数あるときは WAITING の応答で候補が返るので、workspace_id を指定して呼び直します。

依頼の例は、次のような短さで足ります。

Lovableで「Feedback Hub」というプロジェクトを作って。
ユーザーの意見を集めるフォームを付けて。

直す

修正は send_message で、プロジェクトのAIエージェントにメッセージを送ります。応答を待つ動作が既定です。wait=false を渡すと待たずに戻り、get_message で状況を取り直せます。ビルドに時間がかかる依頼を投げたあとに、Claude側で別の作業を進めたいときの使い方です。plan_mode を使うと、実装の前に方針を相談できます。ファイルを添付する場合は、get_file_upload_url で署名付きURLを取ります。

変更の中身を確かめる手段も揃っています。

公式の例には、「プロジェクトの直近3回の編集で何が変わったか見せて」という依頼があります。統一形式の差分が返ります。

出す

公開は deploy_project です。lovable.app 上の本番ホスティングに公開され、公開URLが返ります。公開は常に任意で、作っただけで止めても構いません。複数のレイアウト案を別々のプロジェクトとして作り、すべて公開してURLを比べる使い方も、公式の例に挙がっています。

データベースと分析も扱える

プロジェクトのデータベースは enable_database で有効にし(30〜60秒かかります)、query_database でSQLを実行します。公開したアプリのアクセス状況は get_project_analytics と get_project_analytics_trend で取れます。分析は訪問数、ページビュー、直帰率、滞在時間のほか、ページ・流入元・デバイス・国の内訳が対象です。

自前のSupabaseプロジェクトを使っているプロジェクトでは、データベースの管理はSupabase側で行います。これらのツールは、Lovable内蔵のデータベース向けです。

課金と公開で気をつけること

実害が出やすい点は、4つに絞れます。

• 標準のLovableクレジットを消費するのは create_project と send_message です。ほかのツールは無料と説明されています。
• deploy_project の公開URLは、FreeとProではリンクを知っていれば誰でも開けます。サイトのアクセス権を「Invite only」にしておけば防げます。BusinessとEnterpriseでは、ワークスペースの既定に従います。
• query_database は、読み取り、書き込み、スキーマ変更のすべてを、データベースの全権限で実行します。
• set_project_visibility が変えるのは、エディタを開ける人の範囲です。公開されたアプリを訪問できる人の範囲は変わりません。

最後の点は、取り違えやすい部分です。エディタの共有範囲と、公開アプリの閲覧範囲は別の設定として扱われます。

Claude Code側で公開と書き込みを止める

Claude Codeから使うなら、確認なしで進んでほしくない操作を、権限の設定で先に絞れます。MCPツールは mcp__<サーバー名>__<ツール名> の形で指定します。サーバー名を lovable で登録した場合は、次の書き方になります。

{
  "permissions": {
    "ask": [
      "mcp__lovable__deploy_project",
      "mcp__lovable__query_database"
    ]
  }
}

これで、公開とSQL実行は毎回確認に回ります。読み取り系を自動で通したいなら、mcp__lovable__get_* のように、サーバー名を固定したうえでツール名にワイルドカードを使えます。このルールはClaude Codeの設定の仕組みを使った一例です。Lovable側が推奨している設定ではありません。

作業の進め方もCLAUDE.mdに書いておくと安定します。たとえば次のような断片です。

## Lovable
- create_project の前に、作るものを要約して確認を取る
- deploy_project はユーザーの明示的な指示があるときだけ呼ぶ
- 修正のあとは get_diff で差分を確認してから報告する

つまずいたときの切り分け

公式のトラブルシューティングに載っている症状を、原因別に並べます。

公開の拒否は、finding_refs に原因の指摘が入ります。Securityビューで該当の指摘を直すか、意図して無視する扱いにしてから、deploy_project をもう一度呼びます。重大な指摘のすべてが公開を止めるわけではないので、finding_refs に挙がったものだけを見ればよい構造です。

SSO(シングルサインオン)を強制しているワークスペースでは、セッションの期間が過ぎると 401 Unauthorized が返ります。仕様に沿ったクライアント(Claude Desktop、Cursor、Claude Code)は、OAuthを自動でやり直します。ブラウザでIDプロバイダーに再ログインすれば、ツールの呼び出しが再開します。

ツール名の表記は提供元とコネクタ一覧で食い違う

Lovableのドキュメントに載るツールと、Claudeのコネクタ一覧に載るツールは、完全には一致しません。一覧には list_library_projects があります。ドキュメントのツール表には載っておらず、代わりに list_design_systems があります。一覧の件数は35個と表示されます。

ツールはサーバーの側で更新されるため、手元でどのツールが使えるかは、接続した状態のツール一覧が確実です。提供元は、パラメーターまで含めた機械可読の一覧を mcp.lovable.dev/skill.md で公開しており、サーバーが今公開しているツールに合わせて保守されると説明しています。

スキルを入れるとClaudeの使い方が安定する

Lovableは、MCPサーバーの使い方を書いたスキルファイルも配っています。いつ呼ぶか、ツールをどの順に使うか、守るべき型が入っています。ダウンロードして、Claude Codeなら .claude/skills/lovable-mcp/SKILL.md に置くと、毎回の指示なしでLovableを扱えるようになります。スキルとプラグイン、クライアント別の接続手順は、lovablelabs/mcp のリポジトリでオープンソースとして公開されています。

提供元がサーバーの更新に合わせて保守するファイルなので、自分でツール名の一覧を書き写すより、ツールの変更に追随しやすい構成です。

まとめ

Lovable MCPサーバーは、Claudeから「作る・直す・出す」までを1つの会話に収める手段です。入口を選ぶ判断は単純で、会話でアプリを組み立てるならMCPサーバー、自前のスクリプトで公開や分析を回すならAPI、アプリの中に管理画面を埋めるならAPIコネクタになります。

接続後に注意が要るのは、deploy_project と query_database です。前者は公開URLを作り、後者はデータベースの全権限で動きます。Claude Codeで使う場合は、この2つを確認付きにしておくと、勢いで本番に出す事故を防げます。Claude CodeとLovableの役割の違いは、Claude CodeとLovableの違いで比べています。