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

# MCP Tools

Let your editor's AI agent talk to Frontic directly. Frontic runs two [MCP](https://modelcontextprotocol.io) servers your agent can connect to — the **project MCP** for reading and writing your Frontic project, and the **docs MCP** for querying Frontic documentation. Any MCP-compatible client works: Claude Code, Claude Desktop, Cursor, and any other editor that speaks the protocol.

With the project MCP connected, your coding agent can understand and control the project alongside the code it's writing:

* explore project configuration — domains, scopes, regions, locales — to see what it's building against
* create, update, and delete [blocks](/api-builder/blocks), [listings](/api-builder/listings), [trees](/api-builder/trees), and [pages](/api-builder/pages)
* create [Data Storages](/data-integration/data-storages) and [Data Syncs](/data-integration/value-composer), then evolve storage schemas — add, rename, and remove top-level fields, including translatable, scoped, and relational fields
* search Data Storage records and Data Feed records to see real data, and inspect integration feed schemas to learn the source field shape before mapping
* read and edit [Data Sync](/data-integration/value-composer) configurations, and preview Value Composer transforms on sample records to debug mappings without round-tripping to the admin app
* on [Plus plans](/admin/billing-and-plans), read and author Context Base documents (Skills, Rules, Commands)

The docs MCP is read-only and needs no auth — add it alongside the project MCP and your agent can answer "how does X work?" questions without you leaving the editor.

## The two MCP servers

<CardGroup cols={2}>
  <Card title="Project MCP" icon="microchip-ai">
    **`https://mcp.frontic.com/mcp`** — the full project surface. Lets your agent
    read and write blocks, listings, pages, inspect Data Storages,
    preview Value Composer output, and so on. OAuth-authenticated,
    bound to your Frontic account.
  </Card>

  <Card title="Docs MCP" icon="book">
    **`https://docs.frontic.com/mcp`** — read-only access to Frontic
    documentation. Your agent can search the docs and pull in the
    relevant page when it needs to answer a how-to question. No
    authentication required.
  </Card>
</CardGroup>

Both are standalone MCP servers. You can install one or both — they don't depend on each other. Most editor setups add both so the agent can both **query the docs** and **act on your project**.

## Quick setup with the CLI

The fastest way to wire up either or both MCP servers is the **`frontic mcp init`** command. It detects your client, writes the right config to the right place, and asks whether you want both servers, tools only, or docs only:

```bash theme={"theme":"css-variables"}
frontic mcp init --client cursor
```

<Screenshot name="ide/mcp-tools/mcp-init-prompt" caption="frontic mcp init — interactive prompt for tools, docs, or both" alt="Terminal showing the frontic mcp init command with a selector for Tools & Docs, Tools only, or Docs only" />

Supported clients: `cursor`, `claude` (Claude Code), `windsurf`, `vscode`, `codex`. The command merges with any existing MCP config rather than overwriting it.

After setup, restart your client. On the first call to the project MCP, you'll be prompted to authenticate via OAuth. The docs MCP needs no auth.

<Screenshot name="ide/mcp-tools/oauth-consent" caption="OAuth consent — authorize your editor's MCP client to act on your Frontic account" alt="Frontic OAuth consent screen listing the projects the MCP client will have access to and an Authorize button" />

See the [Frontic CLI reference](/reference/frontic-cli#mcp-init) for the per-client config paths and the full option list.

## Manual configuration

If you'd rather write the config yourself, here's the JSON to add:

```json theme={"theme":"css-variables"}
{
  "mcpServers": {
    "frontic-tools": {
      "type": "http",
      "url": "https://mcp.frontic.com/mcp"
    },
    "frontic-docs": {
      "type": "http",
      "url": "https://docs.frontic.com/mcp"
    }
  }
}
```

Drop it into your client's MCP config file. The accordions below show where each client expects the file.

## Client-specific configuration

<AccordionGroup>
  <Accordion title="Claude Code">
    Add to `.mcp.json` at your project root — Claude Code reads project
    MCP config from this file:

    ```json theme={"theme":"css-variables"}
    {
      "mcpServers": {
        "frontic-tools": {
          "type": "http",
          "url": "https://mcp.frontic.com/mcp"
        },
        "frontic-docs": {
          "type": "http",
          "url": "https://docs.frontic.com/mcp"
        }
      }
    }
    ```

    Restart Claude Code and run the `/mcp` command to confirm both
    servers are connected. The first project MCP call triggers the
    OAuth flow.

    <Screenshot name="ide/mcp-tools/claude-code-mcp-panel" caption="Claude Code /mcp — both Frontic servers connected" alt="Claude Code MCP panel showing frontic and frontic-docs servers with connected status" />
  </Accordion>

  <Accordion title="Claude Desktop">
    Edit the Claude Desktop config file:

    * **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
    * **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`

    ```json theme={"theme":"css-variables"}
    {
      "mcpServers": {
        "frontic-tools": {
          "type": "http",
          "url": "https://mcp.frontic.com/mcp"
        },
        "frontic-docs": {
          "type": "http",
          "url": "https://docs.frontic.com/mcp"
        }
      }
    }
    ```

    Restart Claude Desktop. Both Frontic servers should appear in the
    MCP tools list at the top of your chat.
  </Accordion>

  <Accordion title="Cursor">
    Add to Cursor's MCP settings — `.cursor/mcp.json` in your project
    root, or Cursor's global settings:

    ```json theme={"theme":"css-variables"}
    {
      "mcpServers": {
        "frontic-tools": {
          "type": "http",
          "url": "https://mcp.frontic.com/mcp"
        },
        "frontic-docs": {
          "type": "http",
          "url": "https://docs.frontic.com/mcp"
        }
      }
    }
    ```

    Reload Cursor. Both servers will appear in the MCP panel under
    Cursor's settings.
  </Accordion>

  <Accordion title="Windsurf, VS Code, Codex">
    `frontic mcp init` supports these clients directly. Config paths:

    | Client   | Config path                                    |
    | -------- | ---------------------------------------------- |
    | Windsurf | `~/.codeium/windsurf/mcp_config.json` (global) |
    | VS Code  | `.vscode/mcp.json` (project-local)             |
    | Codex    | `~/.codex/config.toml` (global, TOML format)   |

    Run `frontic mcp init --client <windsurf|vscode|codex>` to write the
    config, or drop the JSON above into the file yourself. For Codex,
    the TOML equivalent goes in the `[mcp_servers]` section.
  </Accordion>

  <Accordion title="Other MCP-compatible clients">
    Any editor that supports the Model Context Protocol can connect.
    Follow your editor's MCP setup documentation — the URLs are the
    only Frontic-specific piece.
  </Accordion>
</AccordionGroup>

## First things to try

<Prompt description="Have your agent list your projects and inspect the main one">List my Frontic projects and show me the resources in my main project.</Prompt>

Good first call — confirms the connection works and gives your agent an overview of what's there.

<Prompt description="Ask the agent to map out your Data Storages and their fields">What Data Storages are in this project, and what fields do they have?</Prompt>

Gets your agent a mental model of the semantic layer before it starts building anything.

<Prompt description="Let the agent build a Search Listing for products with filters and sorting">Create a product listing with category and price filters, sorted by newest first. Use the Products Data Storage.</Prompt>

The agent creates the listing, wires the filters, and returns the configuration. You review and approve.

<Prompt description="Have the agent extend a storage schema and wire the new field through a Data Sync">Add a translatable `shortDescription` field to the Products storage, then map it from the matching field in the Shopify Products feed.</Prompt>

Combines `create_storage` or `manage_storage` with the integration feed schema and Data Sync tools — the agent inspects the feed, creates or updates the storage shape, and proposes the mapping in one pass.

<Prompt description="Look up how Request Context resolves from a domain via the docs MCP">How does request context get resolved from a domain?</Prompt>

With the docs MCP connected, the agent queries the Frontic documentation and answers with the relevant section — without leaving your editor.

<Prompt description="Have the agent plan and set up a basic storefront end to end">Help me set up a basic storefront — homepage, product list page, product detail page, and the blocks each one needs.</Prompt>

Multi-step prompt. The agent plans the setup, confirms the plan with you, then runs through the creation steps.

The full catalog of what the project MCP exposes is in the [Frontic Tools reference](/reference/mcp/frontic-tools) — but most day-to-day work never touches the catalog directly because prompts like the ones above are enough.

## Permissions and security

The project MCP authenticates via **OAuth** against your Frontic account. The token the agent uses carries **your account's permissions** — whatever role you have on a project in the admin app, the MCP can do on that project, and nothing more. If you're a Viewer, the agent can read but not write. If you're an Admin, the agent can do everything you can do.

A few consequences worth knowing:

* **The agent picks a project explicitly.** Most tools take a project ID as a parameter. A typical first call is `list_projects`; after that, ask your agent to switch projects whenever you need it to work against a different one.
* **Per-call approvals are your MCP client's job.** Claude Code, Cursor, and other clients have their own tool-use approval UI — that's where you approve or reject individual calls before they hit Frontic. Frontic doesn't inject anything on top of that; the permission layer is the OAuth token.

The docs MCP is read-only end to end — no auth, no permissions to worry about.

## Combining MCP with the CLI

MCP is the agent-facing surface. The [Frontic CLI](/ide/frontic-cli) is the developer-facing surface. They compose naturally:

<Steps>
  <Step title="Agent creates stack resources via MCP" icon="sparkles">
    You describe what you need; the project MCP creates blocks,
    listings, pages in your Frontic project. Everything lands in
    `develop` immediately.
  </Step>

  <Step title="You regenerate the Client SDK via CLI" icon="code">
    Run `frontic generate` from your terminal. The CLI pulls the
    current project API and writes a typed client into `.frontic/`.
  </Step>

  <Step title="Agent writes frontend code against the SDK" icon="file-code">
    The agent now has a typed Client SDK to build against. It writes
    pages, components, and data calls against the API surface it
    created.
  </Step>

  <Step title="Review and type-check" icon="circle-check">
    Review the diff and run your type-checker against the regenerated
    client. Any drift from the actual API shape surfaces as a type
    error before you ship.
  </Step>

  <Step title="Preview and ship" icon="rocket">
    Create a [preview release](/releases/overview) and test the
    full stack on a PR preview deploy — the frontend builds against
    the preview snapshot, so you can rewrite straight to the new API
    shape without keeping legacy paths around. Promote, deploy. See
    the [Release Flow](/releases/release-flow) for the full picture.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="OAuth didn't trigger on first connect">
    Some clients cache an old server definition. Remove the `frontic`
    entry from your MCP config, reload the client, add it back, and
    try again. OAuth should prompt the first time a tool is called.
  </Accordion>

  <Accordion title="My agent sees the wrong project">
    Ask your agent to `list my Frontic projects` and switch explicitly
    to the one you want — most tools take a project ID per call.
  </Accordion>

  <Accordion title="A call failed with a permission error">
    Your Frontic account's role on the project doesn't cover that
    operation, or your OAuth token expired. Check your role in the
    admin app, re-authenticate, and retry.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={3}>
  <Card title="Project Context" icon="brain" href="/ide/project-context">
    What flows from Frontic into your editor — MCP is the live tool surface.
  </Card>

  <Card title="Frontic CLI" icon="terminal" href="/ide/frontic-cli">
    Generate the typed SDK, sync your Context Base, and manage
    project state from the command line.
  </Card>

  <Card title="Frontic Tools reference" icon="microchip-ai" href="/reference/mcp/frontic-tools">
    The full catalog of tools the project MCP exposes.
  </Card>
</CardGroup>