Client Examples

Ready-to-use configurations for popular MCP clients. Both Claude and ChatGPT connect the same way — with just a URL, no API key or config file — and both show up (and can be individually revoked) under heycreo → Account → Connected Apps once connected.

Claude

Custom Connector

Works for both claude.ai (web) and Claude Desktop: no API key, no config file, no terminal.

1. In Claude, click your account name (bottom left) → Settings → Connectors
2. Click Add connector, then Add custom connector
3. Enter a name (e.g. "heycreo") and the Remote MCP server URL: https://app.heycreo.io/api/mcp
4. Leave Client ID and Client Secret empty. heycreo registers Claude automatically via Dynamic Client Registration, so no manual credentials are needed
5. Claude opens a browser window; log in to heycreo if you aren't already
6. On the consent screen, pick which organization Claude should access, then Allow access
7. You're redirected back to Claude, and the heycreo tools are now available in this conversation

To change organizations later, just ask Claude to switch. It will call the switch-organization tool without requiring you to reconnect. Manage or revoke previously connected apps any time from heycreo → Account → Connected Apps.

ChatGPT

Custom Connector

ChatGPT connects the same way as Claude: through a custom connector you set up once. No API key, no config file. It currently requires switching on ChatGPT's Developer mode first, since custom connectors are an advanced/developer-facing feature there.

1. In ChatGPT, open Settings
2. Go to Apps (in the sidebar of the Settings window)
3. Scroll down to Advanced settings and turn on Developer mode. This unlocks the option to add your own connectors
4. Go back to Apps, then click Create app
5. Enter a name, e.g. "heycreo"
6. Under Connection, choose Server URL
7. Enter the server URL: https://app.heycreo.io/api/mcp
8. Tick/confirm the security warning shown at the bottom of the form. ChatGPT shows this for every custom connector, not specifically heycreo; it's just reminding you to only connect apps you trust
9. Click Create
10. ChatGPT now opens heycreo's login/consent screen; log in if you aren't already, pick which organization ChatGPT should access, then Allow access
11. You're redirected back to ChatGPT, and the heycreo tools are now available in this conversation

To change organizations later, just ask ChatGPT to switch. It will call the switch-organization tool without requiring you to reconnect. Manage or revoke previously connected apps any time from heycreo → Account → Connected Apps.

TypeScript (custom client)

Using the MCP TypeScript SDK with SSE transport:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

const transport = new SSEClientTransport(
  new URL("https://app.heycreo.io/api/sse"),
  {
    requestInit: {
      headers: {
        "Authorization": "Bearer heycreo_your_api_key",
        "X-heycreo-Org": "your-org-slug",
      },
    },
  }
);

const client = new Client({ name: "my-app", version: "1.0.0" });
await client.connect(transport);

// List available tools
const tools = await client.listTools();
console.log(tools);

// Call a tool
const result = await client.callTool({
  name: "get-templates",
  arguments: {},
});
console.log(result);

Using Streamable HTTP transport:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";

const transport = new StreamableHTTPClientTransport(
  new URL("https://app.heycreo.io/api/mcp"),
  {
    requestInit: {
      headers: {
        "Authorization": "Bearer heycreo_your_api_key",
        "X-heycreo-Org": "your-org-slug",
      },
    },
  }
);

const client = new Client({ name: "my-app", version: "1.0.0" });
await client.connect(transport);

Python

Using the MCP Python SDK:

from mcp import ClientSession
from mcp.client.sse import sse_client

async def main():
    headers = {
        "Authorization": "Bearer heycreo_your_api_key",
        "X-heycreo-Org": "your-org-slug",
    }

    async with sse_client(
        url="https://app.heycreo.io/api/sse",
        headers=headers,
    ) as (read, write):
        async with ClientSession(read, write) as session:
            await session.initialize()

            # List tools
            tools = await session.list_tools()
            print(tools)

            # Call a tool
            result = await session.call_tool(
                "get-templates",
                arguments={},
            )
            print(result)

Editing a design in Studio

Beyond reading and creating data, an assistant can read and edit a heycreo design. You target a document by id: a template (templateId, from get-templates) or a free design (designId). Edits are applied and persisted server-side. No editor tab needs to be open; if someone is viewing the design, they see the changes appear live.

A minimal editing loop:

1. studio_get_capabilities()                          → learn the model + tool catalog (once)
2. studio_get_document({ templateId })                → read element IDs + active page
3. studio_call({ templateId, tool, args })            → apply an edit
4. studio_get_screenshot({ templateId })              → verify visually

See the Studio tools reference for the full workflow and the studio_call sub-tool catalog.

cURL (debugging)

For quick testing, you can interact with the Streamable HTTP endpoint directly:

curl -X POST https://app.heycreo.io/api/mcp \
  -H "Authorization: Bearer heycreo_your_api_key" \
  -H "X-heycreo-Org: your-org-slug" \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/list"
  }'