> ## Documentation Index
> Fetch the complete documentation index at: https://synthetiq.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect to a Deployed App Over MCP

> Connect Claude (or any MCP client) to a deployed Synthetiq app: register an MCP server for credentials, add it as a connector, and call the app's tools.

Every app you deploy in Synthetiq runs its own **MCP (Model Context Protocol) server**. Any MCP-compatible client — **Claude** (claude.ai or Claude Desktop), Cursor, or your own agent — can connect to it and call the app's tools on your behalf. Each request is authenticated through the app's built-in OAuth, so a tool only ever sees what your account is allowed to see.

This tutorial walks through connecting **Claude** on the web as the worked example. The same two things — your app's **MCP endpoint** and a **client ID and secret** — connect any other MCP client too.

> [!NOTE]
>
> This tutorial is for a **deployed** app. Connecting uses the app's live web address and its OAuth provider. If you haven't deployed your app yet, see [Publish an App](/docs/tutorials/publishing-an-app.md).

## Prerequisites

* An app that's already **deployed**.
* Permission to manage API & MCP access on that app. If you don't see **API & MCP Access** in your user menu, ask an admin to grant you access.
* A **Claude** account on a plan that supports custom connectors (Pro, Max, Team, or Enterprise). Custom connectors aren't available on the free plan.

## Register an application in your app

**1. Open your app's API & MCP Access page**

Open your deployed app in a browser. Click your **avatar** in the top-right corner, then click **API & MCP Access**.

![The deployed app with the avatar menu open and API & MCP Access highlighted](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-01-open-mcp-servers.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=fa3d62f360af36ae8f2c41d0fa0ff040)

**2. Copy your MCP server endpoint**

The **API & MCP Access** page shows two connection URLs. To connect Claude, copy the one in the **MCP server endpoint** card (labeled *for MCP clients*). The **API base URL** card below it is for calling the app's API directly — you don't need it for this tutorial.

> [!WARNING]
>
> Your MCP endpoint is **not** the web address of the page you're on. It lives on your app's separate **API host** and ends in `/mcp`. That host is generated from where your app is deployed — it can sit on a numbered shard or a custom (vanity) domain — so don't type or guess it. Always copy it from the **MCP server endpoint** card using its copy button. Using the app's page address instead is the most common setup mistake, and it makes the connection fail.

![The API & MCP Access page showing the MCP server endpoint card (for MCP clients) with its copy button, above the API base URL card](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-02-mcp-endpoint.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=851ecd784e946bce08c755a39725866a)

**3. Register an application**

Click **New application** and fill in the form:

* **Name** — a label for this connection, such as `Claude`.
* **Redirect URIs** — click **Add Claude's redirect URL**. This fills in the address Claude uses to finish connecting. At least one is required.
* **Scopes** — on the **App scopes** tab, tick the permissions you want Claude to have. The **System scopes** tab covers admin features that most clients don't need. When in doubt, start with a couple and add more later.

Then click **Create application**.

![The New application form with a name, Claude's redirect URL added, and App scopes selected](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-03-new-mcp-server.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=f553bdf6e73d88af118ebd26bec3b791)

**4. Save your Client ID and Secret**

The **Application created** screen shows a **Client ID** and a **Client Secret**. Copy both now and keep them somewhere safe — the secret is shown only this once. (You can create a new secret later from the application's settings, but that disconnects anything already using the old one.)

![The Application created screen showing the Client ID and a masked Client Secret](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-04-mcp-server-created.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=3bea053f87f13ac683b75eb826861378)

## Connect it in Claude

**1. Open Connectors in Claude**

Switch to [claude.ai](https://claude.ai). In the left sidebar, click **Customize**, then open the **Connectors** tab.

![Claude's Customize page with the Connectors tab selected](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-05-claude-connectors.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=04d8d5ff96ddfdeb08e1c30d226bff28)

**2. Add your app as a custom connector**

Click **Add**, then **Add custom connector**. Paste your app's **MCP server endpoint** from Step 2, then add the **Client ID** and **Client Secret** from Step 4. Save — your connector now appears in the **Connectors** list.

**3. Open your connector and connect**

Click your connector in the list, then click **Connect**.

![The connector page showing the Connect button](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-07-claude-connect.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=aea35ff5b0d047f1231c294ed3763c7e)

**4. Sign in to your app**

A sign-in window opens. Click **Sign in** with your app and approve the access you granted in Step 3. Claude stores the token and refreshes it automatically from then on.

![The app's sign-in window with a Sign in button](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-08-claude-sign-in.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=7ef9fb354e3add9ce6ffe9088be10a91)

**5. Review what Claude can use**

Claude lists the app's tools and when it's allowed to call them. Leave the defaults, or fine-tune which tools need your approval.

![Claude showing the connector's tool permissions](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-09-claude-permissions.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=4c1e72742a6e3181fc3e8ac92562623b)

**6. Use your app's tools**

Start a chat and ask Claude to do something that uses one of the app's tools. Claude calls the matching tool and returns live data from your app. Every call runs as you, so the app's own role and row-level security rules still apply.

![A Claude chat calling the app's tool and showing the result](https://mintcdn.com/synthetiq/Xx2eS9oN_D14H2l2/images/tutorials/connecting-over-mcp/step-10-claude-use-tool.png?fit=max\&auto=format\&n=Xx2eS9oN_D14H2l2\&q=85\&s=2e04aa8bcd401b9de7f1b8d3a93e1410)

> **Advanced: connect Claude Desktop with a config file**
>
> Prefer the desktop app, or on a plan without custom connectors? You can connect **Claude Desktop** through its config file using the [`mcp-remote`](https://www.npmjs.com/package/mcp-remote) bridge. It runs locally and completes the OAuth flow in your browser.
>
> 1. Make sure Node.js is installed (`mcp-remote` runs through `npx`).
>
> 2. Because `mcp-remote` finishes authorization on a local address, add its callback as a **Redirect URI** on the application you created in Step 3: `http://localhost:3334/oauth/callback`.
>
> 3. Open your Claude Desktop config file:
>    * **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
>    * **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
>
> 4. Add your server under `mcpServers`. Replace the placeholder with the **MCP server endpoint** you copied in Step 2 — paste the whole URL rather than rebuilding it by hand:
>
>    ```json theme={"system"}
>    {
>      "mcpServers": {
>        "my-app": {
>          "command": "npx",
>          "args": [
>            "-y",
>            "mcp-remote",
>            "<paste your MCP server endpoint from Step 2>",
>            "--callback-port",
>            "3334"
>          ]
>        }
>      }
>    }
>    ```
>
> 5. Fully quit and reopen Claude Desktop. On first launch it opens a browser to authorize — sign in and approve the scopes.
>
> For the complete reference, including passing the client ID and secret explicitly, see the [Connect Claude Desktop to MCP guide](https://github.com/SynthetiqAI/frameworks/blob/main/packages/app-framework/docs/connect-claude-desktop-to-mcp.md).

> [!TIP]
>
> Only the procedures an app chooses to expose show up as tools — internal procedures are left out. If a client can't reach the server, confirm the app is deployed, that you copied the endpoint from the **MCP server endpoint** card (not the app's page address), and that your application's redirect URI matches what the client uses.

## What's next

> **[Connect One App to Another](/docs/tutorials/connecting-apps.md)**
>
> Turn a deployed app's API into a service so your other apps can read its data and trigger its actions.

> **[MCP server reference](/docs/platform-docs/app-framework/headless/mcp.md)**
>
> The technical reference for the MCP server every app exposes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.