Skip to main content

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.

Build against Frontic from your own editor. Keep the tools and workflow you already know — Frontic slots in as the typed API, the project context your agent reads, and the tools your agent can call while it works. This is the path closest to how most developers already ship: you stay in your editor, and Frontic meets you where you are. Prefer not to stand up a local environment? Frontic Studio provides the sandbox and the live preview out of the box — open a job, prompt, and ship. Both paths build against the same project, and teammates can freely mix them — one works in the editor, another lives in Studio, a third hops between them. Pick whichever fits your own tooling and habits.

Frontic CLI

Generate the typed Client SDK for your frontend code. Sync your Context Base (Skills + Rules) into your repo so your editor’s AI agent reads them. Manage project state from the command line.

MCP Tools

Let Claude Code, Cursor, or any MCP-compatible agent talk to Frontic directly — reading and writing blocks, listings, pages, and querying the Frontic docs in the same editor session.

Project Context

The conceptual view: what flows from Frontic into your editor — typed SDK, Rules, Skills, MCP tools — and how they fit together.

Nuxt module

If you’re on Nuxt, the shortcut to wire everything together — composables, context, caching, auto-imported components.

​
How the pieces fit together

Install the CLI, log in, pick your project

One-time setup per workstation and project.
frontic login
frontic project
The global install (first tab) assumes npm install -g @frontic/cli has been run once. The other tabs use the one-off runners from each package manager — no global install required.

Generate the typed Client SDK

Writes a typed JavaScript client into .frontic/ that your frontend code imports. Every block, listing, and page becomes a first-class typed method.
frontic generate

Sync your Context Base into the repo

Pulls Skills and Rules from your Frontic project and writes them to .claude/ or .cursor/ — so your editor agent reads the same guardrails and skills your team has defined.
frontic context init

Wire MCP for in-editor project control

Adds the Frontic project MCP and the Frontic Docs MCP to your editor’s config so your agent can create blocks and listings, inspect Data Storages, and query the Frontic docs without leaving the editor.
frontic mcp init --client cursor
Swap cursor for claude, windsurf, vscode, or codex depending on your editor.

Build and ship

Write your frontend against the typed SDK, commit as usual, open a PR, deploy.

​
Project and repository

The editor path works best with one Frontic project paired with one codebase: the typed SDK type-checks against the code in that repo, the Context Base syncs into it, and Release Control lines up with the repo’s deploy pipeline. You can target other repos from one project, but shared state (typed SDK, synced rules) only fits one. See Core Concepts for the reasoning.

​
Nuxt Module

If you’re building on Nuxt, the @frontic/nuxt module is the most direct way to connect your frontend to Frontic. It wraps the Client SDK in idiomatic Nuxt composables — useFronticBlock, useFronticListing, useFronticPage, useFronticSearch — handles request context, manages caching, and auto-imports the Frontic UI components into your project. Drop it into a Nuxt project and the rest of this section’s setup is largely done for you. See the Nuxt module reference for the full configuration and composable API.

​
Design System

Frontic ships a Vue component library scaffolded directly into your project — you own the code, you modify it freely, and the Nuxt module auto-imports the components for you. Works the same in your editor as it does in Studio. See the Frontic UI reference for the installation and component details.

​
Plugins

Coming soon. We’re building one-click Claude Code and Cursor plugins that install Frontic + Frontic UI with a single command — no manual MCP config, no hand-written CLI setup. Get in touch if you want early access as the plugins come out of internal testing.

Project Context

What flows from Frontic into your editor, conceptually.

Frontic CLI

SDK generation, Context Base sync, project state from the command line.

MCP Tools

Connect Claude Code or Cursor to Frontic and the Frontic docs.