> For the complete documentation index, see [llms.txt](https://newsleopard.gitbook.io/help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://newsleopard.gitbook.io/help-center/ai/install-mcp-server/lovable.md).

# 如何安裝電子豹 Lovable MCP

注意：你需要為<mark style="background-color:yellow;">付費版本的 Lovable</mark>

想要不寫一行程式碼，就為行銷團隊打造專屬的數據儀表板嗎？透過 Lovable 結合電子豹的 API，你可以輕鬆實現這個願望！

電子豹已經用這個方法建立了一個超實用的互動式報表，你可以先來體驗看看成果：👉 [**點我查看行銷活動報表 Demo**](https://newsleopard-campaign-report.lovable.app/)

## 串接 MCP Server

### Step 1. 複製連線網址

首先，複製以下電子豹的 AI 連線位址（MCP Server URL）：

```
https://mcp.newsleopard.com/mcp
```

### Step 2. 在 Lovable 中新增連線

開啟你的 Lovable 桌面版或是瀏覽器，進入左下角的 **Settings**，找到 **Connectors**，點選 **Custom**。

Server name 輸入：`Newsleopard`，Server URL 貼上剛剛複製的連線網址，選第一個 **OAuth (default)** 後點擊「**Add**」即可接上。

<figure><img src="https://4127314495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsvDTOR6r3x23iQ0fZfaN%2Fuploads%2Fgit-blob-f8cc9eb144b2de5754d63fa9d2f167aad3e73b45%2Fai-4-settings-connectors.png?alt=media" alt="在 Lovable 找到 Connectors 設定"><figcaption></figcaption></figure>

<figure><img src="https://4127314495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsvDTOR6r3x23iQ0fZfaN%2Fuploads%2Fgit-blob-633be70d925ed68c7b0392f370a217db9024c078%2Fai-4-add-connector.png?alt=media" alt="填入 Server name 和 Server URL"><figcaption></figcaption></figure>

<figure><img src="https://4127314495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsvDTOR6r3x23iQ0fZfaN%2Fuploads%2Fgit-blob-d62bac1bcb861010e11bf91df5f1fa97677fb618%2Fai-4-connector-added.png?alt=media" alt="Connector 新增完成"><figcaption></figcaption></figure>

### Step 3. OAuth 一鍵授權登入

確認連接後，使用你的 `電子豹帳號 Email`、`密碼` 登入，點擊「**授權電子豹**」，就可以開始囉！

<figure><img src="https://4127314495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsvDTOR6r3x23iQ0fZfaN%2Fuploads%2Fgit-blob-7456105dd71c575d3b7f5966e173ef924d6f3b2a%2Fai-4-oauth-login.png?alt=media" alt="電子豹帳號登入頁面"><figcaption></figcaption></figure>

<figure><img src="https://4127314495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsvDTOR6r3x23iQ0fZfaN%2Fuploads%2Fgit-blob-d05a8b447d513bc69e18260647725bc3239240a1%2Fai-4-oauth-authorize.png?alt=media" alt="授權電子豹存取 Lovable"><figcaption></figcaption></figure>

<figure><img src="https://4127314495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsvDTOR6r3x23iQ0fZfaN%2Fuploads%2Fgit-blob-c80bf37035a1204d169c8d946adcdb661210db63%2Fai-4-permissions.png?alt=media" alt="建議把所有權限都打開"><figcaption></figcaption></figure>

{% hint style="info" %}
建議把權限都打開，不然會在使用過程中一直被詢問是否允許。
{% endhint %}

這套流程特別適合行銷團隊或非技術背景的 PM，只要懂得下指令，就能快速產出具備即時數據互動能力的 Web App，再也不用等工程師幫你拉報表了！