【新機能】Lovable MCP Server（Research Preview）｜Claude CodeやCursorからLovableを操作する

3行まとめ#

• Lovable自体がMCP（Model Context Protocol）サーバーとして公開され、外部のAIエージェントから操作できるようになりました。
• Claude Code・Cursor・ターミナル上のCLIエージェントから、Lovableプロジェクトの作成・編集・プレビュー・デプロイが可能です。
• 『Lovableで作ったアプリを、別エージェント主導のワークフローに組み込む』が現実的な選択肢になりました。

MCPって何？#

MCP（Model Context Protocol）は、AnthropicがオープンスタンダードとしてリリースしたAIエージェント用の通信規約です。AIアシスタント（Claude / Cursor / GPT等）が外部サービスのツールを呼び出すための共通インターフェースで、いまや業界デファクトになりつつあります。

従来のLovableは『Lovableのチャット画面』が唯一の入り口でした。MCP Serverの登場で、Lovableは“他のAIエージェントが呼び出せるツール群”として外部に公開されることになります。

何ができるようになる？#

• Claude Codeに『LovableでこのSpec通りのアプリを作って』と指示 → Claudeが裏でLovable MCPを呼び出してプロジェクト生成。
• Cursorで仕様を編集しながら『今のmarkdownをLovableプロジェクトに反映』→ Cursor内から直接Lovableプロジェクトを書き換え。
• ターミナルから cron 経由でLovableプロジェクトを定期更新（例：毎週月曜にダッシュボードを再生成）。
• 複数Lovableプロジェクトを横断して一括変更（例：全プロジェクトのフッターに新リンクを追加）。

実例ケーススタディ：Claude CodeからLovableを叩く#

1. Claude Codeを起動し、Lovable MCP ServerのエンドポイントとAPIキーを `~/.config/claude-code/mcp.json` に登録。
2. ターミナルから『Lovableで“週次レポート閲覧用の社内ツール”を新規作成。タブは“今週／先週／月次”の3つ。Supabase連携あり』と自然言語指示。
3. Claude Codeが内部でLovable MCPの create-project / edit-files / deploy ツールを順次呼び出し。完成プレビューURLを返す。
4. そのまま『今のヘッダーに会社ロゴを追加して再デプロイ』と続けると、Lovable側のプロジェクトが書き換わる。

接続の基本手順（Claude Code）#

1. Lovableのアカウント設定 → Developer → MCP Server から接続用APIキーを発行。
2. Claude Code側の `mcp.json` に、Lovable MCPサーバーのURL・APIキーを追加。
3. ターミナルでClaude Codeを再起動し、`/tools` コマンドでlovable系ツールが一覧に出ることを確認。
4. あとは普通の自然言語指示でOK。Claude側が必要に応じてLovableツールを自動選択する。

効くユースケース#

• “仕様書（Markdown / Notion）→ Lovableプロジェクト”の自動変換パイプライン
• PdM／デザイナーがCursor上で要件を書き、エンジニアがLovable側でレビューする分業フロー
• コードレビュー結果をもとに、Claude CodeがLovable側コードを自動修正
• 複数クライアント案件を横断する“ブランド一括差し替え”バッチ

つまずきポイント集#

• 症状：Claude Codeからツールが見えない → 対処：mcp.jsonの記述ミスが大半。command か url のどちらかが必須、両方混ぜない。
• 症状：認証エラー（401） → 対処：APIキーの有効期限／スコープを確認。Research Preview期間中はキーが短命なケースあり。
• 症状：プロジェクト編集が空振りする → 対処：MCP経由の編集も内部的にはLovableチャットと同じターン消費。クォータ／プラン上限を確認。
• 症状：MCP経由だとデザインが寂しい → 対処：Aesthetics設定はLovable側プロジェクトに既に保存しておくと、MCP生成にも自動適用されます。

よくある質問（検索意図別）#

[初心者向け] Q. MCPサーバーとAPIは何が違う？

APIは“エンドポイントを直接叩く”、MCPは“AIエージェントがツールを発見して呼び出す”ための規約です。Lovable MCP ServerはAPIの上位互換ではなく、AIエージェント前提のラッパーと考えるのが正確です。

[実装手順] Q. CursorやClineからも接続できる？

MCPに対応する全クライアントから接続可能です。Cursorは『Settings → MCP』、Clineは設定ファイル経由でLovable MCPサーバーのURL／APIキーを登録すればツール一覧に表示されます。

原典・参考リンク#

• 発表ポスト：@lovable_dev（X / 2026年5月7日）
• MCP公式：modelcontextprotocol.io
• Lovable公式：lovable.dev