3行でいうと

  • コネクタには種類があり、「チャットコネクタ」は自分のアカウントで、チャットの中だけで使えます。自作のMCPサーバーも、同じチャットコネクタとして足せます。
  • 外し方は、チャットコネクタは「Connectorsで見直し、取り消せる」とだけ、自作のMCPサーバーは「削除の手順が書かれていない」と、公式のページにあります。
  • デスクトップアプリは、パソコン上のMCPサーバー(FigmaやPaperなど)につなげます。ローカルの処理は自分の責任、と公式に書かれています。
  • 作ったアプリを、外のAI(ChatGPT、Claude)から呼べるMCPサーバーにする機能もあります(More → AI → Agent integrations)。
  • Build with URL は、リンクでプロンプトを入れた状態でLovableを開く仕組みです。送信はされず、クリックして送ります。

この記事は、公式の資料を2026年10月25日に読んでまとめたものです。この記事は、実際に使って確かめた記録ではありません。

画面の表記は変わります。公式ページの表記を使っているので、手元の画面と照らして読んでください。秘密の値の登録や、IPアドレスの許可のように、外のシステムに権限や記録を登録する操作は、登録の前に、公式ページの原文を見てください。「この記事の案」は、公式の手順ではなく、この記事で組んだ例です(動作は確かめていません)。

先に結論

前提:用語をそろえる

1. 外のツールをコネクタでつなぐ(チャットコネクタ)

コネクタの種類(公式の表)

種類 誰のアカウントか どこで動くか
App + chat connector 共有の1つのアカウント 公開したアプリ、プロジェクトのチャット、Chats
Chat connector(MCPサーバー) 自分のアカウント。個人用 プロジェクトのチャットとChatsだけ。公開したアプリでは使えない
App user connector アプリの利用者それぞれのアカウント 公開したアプリ。利用者それぞれの権限で

どのコネクタが、どの種類に対応するかは、各コネクタのカタログのページに出ます。Add connection のボタンに、使える選択肢が並びます。

開き方

カタログは lovable.dev/dashboard?connectors です。ダッシュボードのサイドバーの Connectors、プロンプト欄の +、プロジェクトのサイドバーの Connectors、チャットの +(Chat actions)→ Add context → Connectors、プロジェクトの More → Connectors(Project connections と MCP connectors が出る)から開きます。並べ替えは Popular、A to Z、Z to A、右上に Add custom。

チャットコネクタを足す手順(公式の記載)

  1. Connectors を開き、NotionやLinearのようなコネクタを選ぶ。
  2. Add connection を押す。複数の接続の種類があるときは、Chat connector を選ぶ。
  3. 認証する。多くは、自分のアカウントでサインインします。Excalidraw+のように、APIキーを求めるものや、Hexのように、サーバーのURL(通常は https://app.hex.tech/mcp)を求めるものもあります。
  4. n8nのように、ツール側の設定が要るものがあります(MCPのアクセスを有効にし、各ワークフローを「Available in MCP」にする)。

渡るデータと承認

外し方と管理

カスタムのコネクタ(管理者のみ)

Add custom の下に、Custom connector(REST APIをワークスペース全体のカタログに足す)、MCP server(自分のMCPサーバー)、MCP registry(MCPサーバーの一覧を足す)があります。Custom connector と MCP registry は、管理者とオーナーに限られます。

2. 自作のMCPサーバーをチャットコネクタにする

公式の「Connect a custom MCP server」の手順です。

  1. Connectors を開き、右上の Add custom → MCP server。
  2. Server name を入れる(例は「Internal CRM」)。
  3. Connection のドロップダウンが出るとき、Direct connection のままにする。サーバーが、許可したIPだけを受けるなら、Lovable static IPs を選ぶ。
  4. Server URL を入れる。
  5. 認証を選ぶ:OAuth(既定)、Bearer token or API key、No authentication。
  6. OAuthなら Add & authorize、それ以外は Add server。
  7. Lovableに、そのサーバーが答えられることを尋ねて、つながりを確かめる。

  8. 専用のヘッダーの欄は、ページに書かれていません。資格情報としては、Bearerトークンと、APIキーだけが出ています。

  9. 全プランで追加できます。MCP server が灰色なら、管理者が無効にしています。
  10. Lovable static IPs は、Enterpriseで、Lovableがワークスペースに有効にする必要があります。URLで足したサーバーだけで、特集のコネクタやレジストリのサーバーには使えません。接続の種類は、追加するときに決まり、変えられません。
  11. 接続は個人用で、ほかのメンバーは、自分でつなぎます。文脈はプロジェクトのチャットとChatsだけで、公開したアプリでは使えません。
  12. 管理者は、Connectors → Admin settings → Chat connectors の Custom MCP の行で、まとめて制御します。個々のサーバーは、その表に出ません。
  13. 静的IPの注意:Lovableの静的IPは、共有の送信元で、ワークスペース専用ではありません(公式のページに、IPv4の2つの範囲とIPv6の範囲が書かれています)。公式は「許可リストは、認証ではなく、ネットワークの制御として扱う」趣旨を書いています。サーバー側の、Bearerトークンや OAuth は、そのまま残します。範囲の値は、原文で確かめてください。
  14. 削除の手順は、ページに書かれていません。 接続の種類を変えるときに、サーバーを消して、足し直す、とだけあります。

3. デスクトップアプリで、パソコン上のMCPサーバーにつなぐ

デスクトップアプリ(macOS 13以降、Windows 10以降。全プランで追加料金なし)の機能です。公式のデスクトップアプリのページは、ローカルのMCPサーバーはデスクトップ専用で、リモートのMCPサーバーはWeb版でも使える、と書いています。

Figma

  1. FigmaのデスクトップアプリでDesignファイルを開き、Dev Mode(</> のトグル、または Shift+D)に切り替え、Enable desktop MCP server を押す。
  2. Lovableで Connectors → Local MCP servers を開き、Figmaの横の Enable を押し、求められたら承認する。

Paper

  1. Paperが入っていて、動いていることを確かめる。
  2. Lovableで Connectors → Local MCP servers を開き、Paperの横の Enable、承認。

自作のサーバー

  1. Connectors → Local MCP servers → Custom MCP。
  2. 名前と、コマンドと引数(ローカルのプロセス用)、またはURL(ローカルのHTTPサーバー用)を入れる。
  3. Add server を押し、接続を承認する。

注意

4. 作ったアプリを、AIが呼べるMCPサーバーにする

作ったアプリの機能を、ChatGPTやClaudeから呼べるようにする機能です。公式の「Publish your app as an MCP server」の手順です。

場所: アプリを開いて More → AI → Agent integrations。

前提:

手順:

  1. Enable agent integrations を押す。LovableがMCPサーバーを作り、ツールを提案します。ビルド用クレジットを使います。
  2. 「Who should be able to call this MCP server?」に答える。選択肢は、Protected with OAuth (recommended)(既定。公式の表記)と、Public — no login(明示的に選ぶ)。
  3. MCP tools の欄でツールを確かめ、足す、消す、変えるは、Lovableに頼む。
  4. アプリを公開する。ツールは、公開で有効になります。
  5. Your MCP link のカードのリンクをコピーして、利用者に渡す。

何が出るか: ツール1つが、AIが呼べる1つの操作です。状態は Active、Not published、Inactive、ラベルは Read-only か May modify data です。ブラウザ用のツール(WebMCP)は別に足され、MCP tools の一覧には出ません。

認証: サインインで呼び出す人を識別し、アプリの規則は、ツールの呼び出しごとに効きます。アクセスは統合全体で決まり、一部のツールだけを公開にすることはできません。

利用者側: MCPのリンクを、ChatGPTやClaudeにカスタムコネクタとして追加し、必要ならサインインします。ツールを足す、消す、名前を変えたあとは、利用者がコネクタを再読み込みします。

止め方:

注意(公式):

費用: ホスティングとツール呼び出しに、別料金はありません。バックエンドとAIの使用量は、通常のアプリの使用量に数えられます。

5. Build with URL:リンクで、プロンプトを入れた状態でLovableを開く

形式(公式):# のあとに、& で区切ってパラメーターを書きます。

https://lovable.dev/#prompt=YOUR_PROMPT&images=IMAGE_URL&html=PAGE_URL
パラメーター 内容
prompt(必須) 作る内容。特殊な文字はエンコードする(空白は %20)
images(任意) 見本になる、公開されている画像のURL。複数はキーを繰り返す
html(任意) 配置、内容、スタイルの見本にする、公開されているページのURL。複数はキーを繰り返す

例:https://lovable.dev/#prompt=Create%20a%20todo%20app

6. この記事の案:AI同士の組み合わせ

以下は、この記事で組んだ例です(動作は確かめていません)。

組み合わせ 流れ 使う公式の機能
Notion/Linear × Lovable Notionの仕様書やLinearの課題を、チャットコネクタでつなぎ、Lovableのチャットで、「その課題を読んで、画面を作って」と頼む 1節(チャットコネクタ)。読み取りは確認なし、作成・更新は承認が出る
Figma × Lovable デスクトップアプリで、FigmaのDev Modeの、デスクトップMCPサーバーをつなぎ、デザインを見ながら作らせる 3節
GitHub × 別のAI リポジトリをクローンして、別のAIツールで編集し、同期中のブランチへpushする 08の1節。強制push、リベース、スカッシュはしない
自作のMCPサーバー × Lovable 社内の知識のMCPサーバーを足し、Lovableのチャットから参照する 2節。個人用の接続で、公開したアプリでは使えない
Lovableで作ったアプリ × ChatGPT/Claude アプリを、MCPサーバーにして、AIから呼べるようにする 4節。OAuthで保護 を選び、書き込みのツールに注意
外のAI × Lovable(逆向き) ClaudeなどからLovableのプロジェクトを動かす 07

気をつけること

出典