Frontic Tools - Frontic Docs

The Frontic Tools MCP server connects AI coding assistants directly to your Frontic projects, letting you build storefronts and configure your Frontic API from your IDE. Pair it with the Frontic Docs MCP server so the agent can also answer “how does X work?” questions without leaving the editor.

Overview

Connect your favorite AI coding assistants directly to your Frontic Commerce projects through secure OAuth authentication. Build a frontend AND the corresponding Frontic API — all from your coding agent or IDE of choice.

Claude Code

Full project management and content creation workflows

Claude Desktop

Interactive Frontic operations from your desktop

Cursor

Integrated development experience with AI assistance

The MCP server provides 36 tools across these categories:

Project & Resource Discovery

Browse projects, list resources, inspect storage data, and make raw API calls

Blocks, Listings & Pages

Create and manage blocks, listings, and pages that define your API

Project Configuration

Explore domains, scopes, regions, and locales

Browse Data

Search storage records and raw feed records

Data Syncs & Value Composer

Inspect and configure data sync field mappings and composer operations

Context Documents

Manage skills, rules, guides, and other context documents

Browser Tools

Screenshot, extract content, and discover links on external websites

Setup

The fastest path is the CLI — pick your package manager:

frontic mcp init --client cursor

Swap cursor for claude, windsurf, vscode, or codex. The CLI prompts whether to install Frontic Tools, Frontic Docs, or both — the recommended default is both. See the Frontic CLI reference for full options. If you’d rather edit the config yourself, drop this entry into your client’s MCP config file:

{
  "mcpServers": {
    "frontic-tools": {
      "type": "http",
      "url": "https://mcp.frontic.com/mcp"
    }
  }
}

The first time you connect, you’ll be prompted to authenticate via OAuth. The token carries your Frontic account’s permissions — whatever role you have on a project, the MCP can do on that project, and nothing more.

Client-specific configuration

Claude Code

Add to .mcp.json at your project root — Claude Code reads project MCP config from this file:

{
  "mcpServers": {
    "frontic-tools": {
      "type": "http",
      "url": "https://mcp.frontic.com/mcp"
    }
  }
}

Claude Desktop

Edit the Claude Desktop config file:

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

{
  "mcpServers": {
    "frontic-tools": {
      "type": "http",
      "url": "https://mcp.frontic.com/mcp"
    }
  }
}

Cursor

Add to .cursor/mcp.json in your project root, or Cursor’s global settings:

{
  "mcpServers": {
    "frontic-tools": {
      "type": "http",
      "url": "https://mcp.frontic.com/mcp"
    }
  }
}

Example Prompts

Once connected, try these prompts to explore the MCP server’s capabilities:

Have your agent list your projects and inspect the main one

Ask the agent to map out your Data Storages and their fields

Let the agent build a Search Listing with filters and sorting

Tell the agent to scaffold a hero block with the standard fields

Have the agent assemble a homepage from existing primitives

Get the agent to plan and set up a basic storefront end to end

Ask the agent to inspect your data syncs and their field mappings

Have the agent preview a Value Composer transformation on a sample record

Use the agent's browser tools to screenshot a storefront and extract its links

Ask the agent to walk your scope, region, and domain hierarchy

Available Tools

Project & Resource Discovery

`list_projects`

Browse all your Frontic projects with their names, IDs, data types, and configured locales. This is typically the first call in any workflow.

`list_resources`

List all blocks, listings, pages, or storages within a project.

`storage_ids`

Get record identifiers (IDs, slugs, keys) for a specific storage. Returns projected column values, not full records.

`fetch_api_call`

Get a sample Fetch API response for a block, listing, or page — exactly what the frontend receives when calling the Frontic API. Useful for understanding the response shape before building your frontend.

`delete_resource`

Permanently delete a block, listing, page, or storage from the project. This action cannot be undone.

Block Management

`create_block`

Create a new block — a reusable content component that defines which fields are exposed in Fetch API responses. Blocks serve single-record endpoints.

`manage_block`

Update an existing block by adding or removing fields, and control its active status.

Listing Management

`create_listing`

Create a new listing — a searchable, filterable, sortable collection that performs search queries on a block index.

`manage_listing`

Configure all aspects of an existing listing: search fields, filter fields, sort fields, parameters, query conditions, search settings, and pagination.

Page Management

`create_page`

Create a page — a URL routing pattern that generates SEO-friendly routes from block data records.

`manage_page`

Update an existing page’s URL generation settings like slug source, conflict strategy, and delete behavior.

Project Configuration

Explore the context hierarchy of your project. A domain is the top layer — from a domain you get the exact configuration map of scope, region, and locale.

Domains map a scope, region, and locale combination to URL routing. Start here to understand how your project is configured.
Scopes are data segmentation layers (e.g., B2B vs B2C). Every project has at least the default public scope. A scoped field can return different values per scope — for example, true in scope A and false in scope B.
Regions are subdivisions of a scope (e.g., EU, US, APAC). Each region holds a currency and one or more locales, determining which prices to show.
Locales determine which translation to return for translatable fields. If a field is set as translatable, the response value matches the translation for that locale.

Tool	Description
`list_domains`	List all domains configured in a project
`get_domain`	Get domain details including bound scope, region, locale, and URL pattern
`list_scopes`	List all scopes in a project
`get_scope`	Get scope details including associated regions
`list_regions`	List all regions within a scope
`get_region`	Get region details
`list_locales`	List all configured locales in a project
`get_locale`	Get locale details

Browse Data

Search and inspect the actual data in your project — both transformed storage records and raw feed records from integrations.

Tool	Description
`search_storage_records`	Search records in a storage with scope/region/locale contextualization
`search_feed_records`	Search raw feed records from an integration before value-composer transformation

Data Syncs

Tool	Description
`list_data_syncs`	List all data sync configurations, showing which integrations feed into which storages
`get_data_sync`	Get a single data sync with full field-level detail including value-composer configurations
`manage_data_sync_value_configs`	Update data sync value composer field configurations by field ID

Value Composer

Tool	Description
`list_composer_operations`	List all available value-composer operations with type, input/output shapes, and documentation
`preview_composer_value`	Preview a computed value by running a single value-composer config against a sample record (dry-run)
`preview_composer_record`	Preview a full transformed record by running all storage-field mapping configs against a sample source record

Context Documents ^Plus

Context document tools are part of Frontic AI Studio, available on the Plus plan.

Manage skills, rules, commands, guides, and other context documents that provide instructions and knowledge to AI agents working with your project.

Tool	Description
`list_context_documents`	List all active documents in a collection (`skills`, `rules`, `commands`, `guides`, `docs`)
`fetch_context_document`	Fetch a single document by key, returning full markdown with YAML frontmatter
`create_context_document`	Create a new document in draft status (must be manually activated in the admin UI)
`manage_context_document`	Update a document’s metadata and/or content

Studio Settings ^Plus

Studio settings tools are part of Frontic AI Studio, available on the Plus plan.

Read and update the Studio settings that govern chat behaviour at the project level — Project Rules (system/studio-rules) and the project Studio Prompt (system/studio-agent).

Tool	Description
`list_studio_settings`	List the available Studio settings keys for the project
`manage_studio_setting`	Update a Studio setting’s content by key (e.g. `system/studio-rules`, `system/studio-agent`)

Browser Tools

Screenshot, extract content, and discover links on external websites using a server-side headless browser. Useful for analyzing existing storefronts during migration planning or store discovery.

`browser_screenshot`

Take a screenshot of a URL and return it as a compressed JPEG image.

Show Parameters

url

string

required

The webpage URL to screenshot.

viewport_width

integer

default:"1280"

Browser viewport width (320–1440).

viewport_height

integer

default:"720"

Browser viewport height (200–900).

full_page

boolean

default:"false"

Capture the full scrollable page (capped at 7680px height).

selector

string

CSS selector to screenshot a specific element.

For Claude Code users: set MAX_MCP_OUTPUT_TOKENS=100000 in your environment to handle screenshot responses.

`browser_extract`

Extract specific DOM elements from a webpage using CSS selectors. Returns text content, attributes, dimensions, and HTML for each match.

Show Parameters

url

string

required

The webpage URL to extract from.

selectors

string[]

required

CSS selectors to extract (max 10).

wait_for

string

CSS selector to wait for before extracting (useful for SPAs).

`browser_links`

Discover all links on a webpage, grouped by internal vs external. Useful for mapping site structure and navigation patterns.

Show Parameters

url

string

required

The webpage URL to scan.

internal_only

boolean

default:"true"

Only return links to the same domain.

wait_for

string

CSS selector to wait for before extracting links.

Overview

CLI & SDKs

MCP Server

Data Model

Ingest API

Fetch API

Documentation Index

​Overview

Claude Code

Claude Desktop

Cursor

Project & Resource Discovery

Blocks, Listings & Pages

Project Configuration

Browse Data

Data Syncs & Value Composer

Context Documents

Browser Tools

​Setup

​Client-specific configuration

​Example Prompts

​Available Tools

​Project & Resource Discovery

​list_projects

​list_resources

​storage_ids

​fetch_api_call

​delete_resource

​Block Management

​create_block

​manage_block

​Listing Management

​create_listing

​manage_listing

​Page Management

​create_page

​manage_page

​Project Configuration

​Browse Data

​Data Syncs

​Value Composer

​Context Documents Plus

​Studio Settings Plus

​Browser Tools

​browser_screenshot

​browser_extract

​browser_links

Overview

Setup

Client-specific configuration

Example Prompts

Available Tools

Project & Resource Discovery

`list_projects`

`list_resources`

`storage_ids`

`fetch_api_call`

`delete_resource`

Block Management

`create_block`

`manage_block`

Listing Management

`create_listing`

`manage_listing`

Page Management

`create_page`

`manage_page`

Project Configuration

Browse Data

Data Syncs

Value Composer

Context Documents ^Plus

Studio Settings ^Plus

Browser Tools

`browser_screenshot`

`browser_extract`

`browser_links`