MCP Server - Frontic Docs

The Frontic MCP (Model Context Protocol) server enables seamless integration between AI coding assistants and your Frontic Commerce projects, allowing you to build storefronts and configure your Frontic API directly from your IDE.

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 34 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

Add the Frontic MCP server to your MCP client configuration:

{
  "mcpServers": {
    "frontic": {
      "url": "https://mcp.frontic.com"
    }
  }
}

The first time you connect, you’ll be prompted to authenticate via OAuth. This secure flow ensures your Frontic data stays protected while giving AI tools the access they need.

Client-Specific Configuration

Claude Code

Add to your Claude Code MCP settings (~/.claude/settings.json or project-level .claude/settings.json):

{
  "mcpServers": {
    "frontic": {
      "url": "https://mcp.frontic.com"
    }
  }
}

Claude Desktop

Add to your Claude Desktop configuration file:

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

{
  "mcpServers": {
    "frontic": {
      "url": "https://mcp.frontic.com"
    }
  }
}

Cursor

Add to your Cursor MCP settings (.cursor/mcp.json in your project or global settings):

{
  "mcpServers": {
    "frontic": {
      "url": "https://mcp.frontic.com"
    }
  }
}

Example Prompts

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

Explore Your Projects

List all my Frontic projects and show me the resources in my main project

Understand Your Data

What storages and data structures are available in my project?

Build a Product Listing

Create a product listing with filters for category and price, sorted by newest first

Create a Hero Block

Create a hero block with fields for title, subtitle, background image, and CTA button

Build a Page

Create a homepage with a hero section at the top and a featured products listing below

Full Storefront Setup

Help me set up a basic storefront with a homepage, product listing page, and the necessary blocks

Inspect Data Syncs

Show me all data syncs and their field mappings for my project

Preview Value Composer

Preview how the value composer transforms a sample product record

Screenshot a Storefront

Take a screenshot of my storefront homepage and extract the navigation links

Explore Context Hierarchy

List all scopes, regions, and domains in my project to understand the context 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

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

Parameter	Type	Default	Description
`url`	`string`	required	The webpage URL to screenshot
`viewport_width`	`integer`	`1280`	Browser viewport width (320–1440)
`viewport_height`	`integer`	`720`	Browser viewport height (200–900)
`full_page`	`boolean`	`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

Parameter	Type	Default	Description
`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

Parameter	Type	Default	Description
`url`	`string`	required	The webpage URL to scan
`internal_only`	`boolean`	`true`	Only return links to the same domain
`wait_for`	`string`	—	CSS selector to wait for before extracting links

Getting Started

Essentials

Reference

Integrations

​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

​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

Browser Tools

`browser_screenshot`

`browser_extract`

`browser_links`