> ## 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.

# Overview

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](/studio/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.

<CardGroup cols={2}>
  <Card title="Frontic CLI" icon="terminal" href="/ide/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.
  </Card>

  <Card title="MCP Tools" icon="microchip-ai" href="/ide/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.
  </Card>

  <Card title="Project Context" icon="brain" href="/ide/project-context">
    The conceptual view: what flows from Frontic into your editor —
    typed SDK, Rules, Skills, MCP tools — and how they fit together.
  </Card>

  <Card title="Nuxt module" icon="code" href="/reference/nuxt-module">
    If you're on Nuxt, the shortcut to wire everything together —
    composables, context, caching, auto-imported components.
  </Card>
</CardGroup>

## How the pieces fit together

<Steps>
  <Step title="Install the CLI, log in, pick your project" icon="terminal">
    One-time setup per workstation and project.

    <CodeGroup>
      ```bash frontic theme={"theme":"css-variables"}
      frontic login
      frontic project
      ```

      ```bash pnpm theme={"theme":"css-variables"}
      pnpm dlx @frontic/cli@latest login
      pnpm dlx @frontic/cli@latest project
      ```

      ```bash npm theme={"theme":"css-variables"}
      npx @frontic/cli@latest login
      npx @frontic/cli@latest project
      ```

      ```bash yarn theme={"theme":"css-variables"}
      yarn dlx @frontic/cli@latest login
      yarn dlx @frontic/cli@latest project
      ```

      ```bash bun theme={"theme":"css-variables"}
      bunx @frontic/cli@latest login
      bunx @frontic/cli@latest project
      ```
    </CodeGroup>

    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.
  </Step>

  <Step title="Generate the typed Client SDK" icon="code">
    Writes a typed JavaScript client into `.frontic/` that your frontend code imports. Every block, listing, and page becomes a first-class typed method.

    <CodeGroup>
      ```bash frontic theme={"theme":"css-variables"}
      frontic generate
      ```

      ```bash pnpm theme={"theme":"css-variables"}
      pnpm dlx @frontic/cli@latest generate
      ```

      ```bash npm theme={"theme":"css-variables"}
      npx @frontic/cli@latest generate
      ```

      ```bash yarn theme={"theme":"css-variables"}
      yarn dlx @frontic/cli@latest generate
      ```

      ```bash bun theme={"theme":"css-variables"}
      bunx @frontic/cli@latest generate
      ```
    </CodeGroup>
  </Step>

  <Step title="Sync your Context Base into the repo" icon="brain">
    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.

    <CodeGroup>
      ```bash frontic theme={"theme":"css-variables"}
      frontic context init
      ```

      ```bash pnpm theme={"theme":"css-variables"}
      pnpm dlx @frontic/cli@latest context init
      ```

      ```bash npm theme={"theme":"css-variables"}
      npx @frontic/cli@latest context init
      ```

      ```bash yarn theme={"theme":"css-variables"}
      yarn dlx @frontic/cli@latest context init
      ```

      ```bash bun theme={"theme":"css-variables"}
      bunx @frontic/cli@latest context init
      ```
    </CodeGroup>
  </Step>

  <Step title="Wire MCP for in-editor project control" icon="microchip-ai">
    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.

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

      ```bash pnpm theme={"theme":"css-variables"}
      pnpm dlx @frontic/cli@latest mcp init --client cursor
      ```

      ```bash npm theme={"theme":"css-variables"}
      npx @frontic/cli@latest mcp init --client cursor
      ```

      ```bash yarn theme={"theme":"css-variables"}
      yarn dlx @frontic/cli@latest mcp init --client cursor
      ```

      ```bash bun theme={"theme":"css-variables"}
      bunx @frontic/cli@latest mcp init --client cursor
      ```
    </CodeGroup>

    Swap `cursor` for `claude`, `windsurf`, `vscode`, or `codex` depending on your editor.
  </Step>

  <Step title="Build and ship" icon="rocket">
    Write your frontend against the typed SDK, commit as usual,
    open a PR, deploy.
  </Step>
</Steps>

## 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](/essentials/core-concepts#project) 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](/reference/nuxt-module) 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](/reference/frontic-ui) for the installation and component details.

## Plugins

<Note>
  **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](mailto:support@frontic.com) if you want early access
  as the plugins come out of internal testing.
</Note>

## Related

<CardGroup cols={3}>
  <Card title="Project Context" icon="brain" href="/ide/project-context">
    What flows from Frontic into your editor, conceptually.
  </Card>

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

  <Card title="MCP Tools" icon="microchip-ai" href="/ide/mcp-tools">
    Connect Claude Code or Cursor to Frontic and the Frontic docs.
  </Card>
</CardGroup>