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

# Frontic CLI

The Frontic CLI is how you work against your Frontic project from the command line. Two main jobs: **generate the typed Client SDK** for your frontend code, and **sync your [Context Base](/context-base/overview)** (skills + rules) into your repository so your editor's AI agent can read them.

This page covers the editor-workflow use of the CLI — how and when to use each command. For the complete per-command reference (all flags, all options), see the [Frontic CLI reference](/reference/frontic-cli).

## Install and log in

<CodeGroup>
  ```bash frontic theme={"theme":"css-variables"}
  npm install -g @frontic/cli
  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>

`frontic login` opens a browser to authenticate. `frontic project` shows you a picker to select which Frontic project you're working against. Both commands persist their state in a `.frontic-local/` directory at your project root. The `frontic` tab assumes a one-time global install; the other tabs use each package manager's one-off runner so no install is needed.

## Work with your project API

The `frontic generate` command pulls the current state of your project's API — every block, listing, and page — and writes a **typed JavaScript client** into a `.frontic/` directory in your project:

<CodeGroup>
  ```bash frontic theme={"theme":"css-variables"}
  frontic generate
  # CLI prompts for the environment to target (develop / preview / public)
  # Or pass --env to skip the prompt:
  frontic generate --env develop
  ```

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

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

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

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

Output: `.frontic/generated-client.js`, `.frontic/generated-types.d.ts`, and a few supporting files. Import the client in your frontend code — every block, listing, and page in your project becomes a typed method:

<Tabs>
  <Tab title="Client SDK">
    ```ts theme={"theme":"css-variables"}
    import client from './.frontic/generated-client';

    const { data: product } = await client.block('ProductCard', 'my-product-key');
    const { items } = await client.listing('ProductListing', { categoryId: 'shoes' });
    ```
  </Tab>

  <Tab title="Nuxt Module">
    ```vue theme={"theme":"css-variables"}
    <script setup lang="ts">
    const { data: product } = await useFronticBlock('ProductCard', 'my-product-key')
    const { listing } = useFronticListing('ProductListing', { categoryId: 'shoes' })
    </script>
    ```
  </Tab>
</Tabs>

See the [Client SDK reference](/reference/client-sdk) for the full method surface (blocks, listings, pages, search) and the [Nuxt module reference](/reference/nuxt-module) for the composable API.

The generated client reflects your project's current state at the moment you ran `frontic generate`. If the stack changes — new block, renamed field, adjusted listing filter — regenerate with the same command and commit the updated files. They're the contract between your frontend code and your Frontic project at that specific revision.

<Tip>
  If you're working against a [preview release](/releases/overview),
  run `frontic generate --env preview` to target the active preview.
  The CLI embeds its version token in the generated files, so the
  preview deploy built from your PR talks to the preview snapshot, not
  `public`. Without the `--env` flag, the CLI prompts you to pick an
  environment.
</Tip>

## Sync your Context Base

Your [Context Base](/context-base/overview) lives in Frontic — Skills and Rules you've defined for your project. To make them available to your editor's AI agent (Claude Code, Cursor), the CLI can **sync them into your repository** as files the agent reads on every session.

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

One shot: pulls Skills and Rules from your Frontic project's Context Base and writes them into your repo.

### What gets written where

Default layout for **Claude Code**:

```
.claude/
  CLAUDE.md              # Project Rules — monolithic, always applied
  rules/
    <rule-name>.md       # one file per Context Rule, optionally scoped by applyTo
  skills/
    <skill-name>/
      SKILL.md           # skill content
      <attached-files>   # any files attached to the skill
```

For **Cursor**, pass `--agent cursor`:

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

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

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

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

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

```
.cursor/
  rules/
    project-rules.md     # project-wide rules
    <rule-name>.md       # one file per rule
  skills/
    <skill-name>/
      SKILL.md
      <attached-files>
```

The Context Base content is the same — only the paths differ to match each editor's conventions.

### Running it safely

By default, `frontic context init` **skips files that haven't changed**. Running it repeatedly is safe — it only writes what's new or updated. If you want to force-overwrite everything, use `--force`:

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

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

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

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

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

Use `--force` when you've edited local files by hand and want to reset them back to the canonical versions from Frontic.

### Syncing Skills or Rules independently

Two subcommands let you sync one collection at a time instead of running the full `init`:

<CodeGroup>
  ```bash frontic theme={"theme":"css-variables"}
  frontic context skills       # skills only
  frontic context rules        # rules only
  ```

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

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

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

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

Same `--agent` and `--output` options apply. Useful when you know only one side of the Context Base has changed and you don't need a full sync.

### Checking in the synced files

The synced files are the **authoritative copy for your editor**. Check them into git so everyone on the team gets the same Context Base when they clone the repo — and so your CI and other developers can see what rules the agents are reading. The files are safe to commit: they're generated from Frontic but they're intentionally stable, and re-running `frontic context init` without `--force` won't touch unchanged files.

## Other commands

The CLI also provides:

* **`frontic mcp init --client <client>`** — wire up the Frontic MCP servers in your editor's config in one command (Cursor, Claude Code, Windsurf, VS Code, Codex). See [MCP Tools](/ide/mcp-tools#quick-setup-with-the-cli).
* **`frontic info`** — show the current org/project/user you're authenticated as
* **`frontic login` / `frontic logout`** — session management; `login --token <token>` for non-interactive login in CI/CD
* **`frontic project`** — switch between projects

Full per-command details with all flags are in the [Frontic CLI reference](/reference/frontic-cli).

## Related

<CardGroup cols={3}>
  <Card title="Project Context" icon="brain" href="/ide/project-context">
    What the CLI is syncing, conceptually.
  </Card>

  <Card title="Frontic CLI reference" icon="book" href="/reference/frontic-cli">
    Complete per-command reference with all flags and options.
  </Card>

  <Card title="MCP Tools" icon="microchip-ai" href="/ide/mcp-tools">
    Connect Claude Code or Cursor to Frontic for agent-driven project work.
  </Card>
</CardGroup>