> ## 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](https://docs.frontic.com/context-base/overview.md)** (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](https://docs.frontic.com/reference/frontic-cli.md).

## Install and log in

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

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

```bash frontic theme={"theme":"css-variables"}
frontic generate
# Uses the public version, or develop before anything is published
# Or name the API version:
frontic generate develop
```

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

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

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

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

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:

> [tab] 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] 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>
> ```

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

The generated client reflects the API version you generated against, as it was when 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]
>
> To build against a [preview version](https://docs.frontic.com/releases/overview.md#api-versions),
> run `frontic generate preview`. The CLI embeds its version key in the
> generated files, so the deploy built from your PR reads the preview
> version, not the public version. Without a version, the CLI uses the
> public version, or the develop version before anything is published.

## Sync your Context Base

Your [Context Base](https://docs.frontic.com/context-base/overview.md) 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.

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

One shot: pulls Skills, Context Rules and brand tokens from your Frontic project and writes them into your repo.

### What gets written where

```
.claude/
  CLAUDE.md              # Project Rules - only with --profile studio or designer
  rules/
    <rule-name>.md       # one file per Context Rule
  skills/
    <skill-name>/
      SKILL.md           # skill content
      <attached-files>   # any files attached to the skill
tokens/
  brand.json             # brand tokens, when your project has them
.frontic/
  locales.json           # locales, when your project has them
```

The CLI owns `.claude/rules/`: a `.md` file there that no longer matches a Context Rule is removed on the next sync. Keep your own rule files elsewhere.

For **Cursor**, pass `--agent cursor`. Skills go to `.cursor/skills/` instead; everything else is written to the same paths as above.

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

### Choosing a profile

`--profile` picks which workspace you sync for. Skills and Context Rules come through only when their [Profile](https://docs.frontic.com/context-base/rules.md#targeting-a-rule-by-surface) is empty or includes that workspace.

| `--profile` | Skills and Context Rules | Project Rules in `.claude/CLAUDE.md` |
| - | - | - |
| `custom` (default) | Those for Custom | None |
| `studio` | Those for Studio | [Studio's Project Rules](https://docs.frontic.com/studio/settings.md#project-rules) |
| `designer` | Those for Designer | [Designer Project Rules](https://docs.frontic.com/designer/building.md#designer-settings) |

```bash frontic theme={"theme":"css-variables"}
frontic context init --profile studio
```

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

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

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

```bash bun theme={"theme":"css-variables"}
bunx @frontic/cli@latest context init --profile studio
```

### Running it safely

Running `frontic context init` repeatedly is safe. When nothing changed in Frontic since the last sync, the CLI leaves your rules, `CLAUDE.md`, tokens and locales alone. Skills are written fresh on every run. To overwrite everything, use `--force`:

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

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

### Syncing Skills only

`frontic context skills` syncs only your skills, with the same `--agent` and `--output` options. It takes no `--profile` and syncs every skill, whatever its Profile.

```bash frontic theme={"theme":"css-variables"}
frontic context skills
```

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

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

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

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

### 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` leaves them alone until something changes in Frontic.

## 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](https://docs.frontic.com/ide/mcp-tools.md#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](https://docs.frontic.com/reference/frontic-cli.md).

## Related

> [card] [Project Context](https://docs.frontic.com/ide/project-context.md)
>
> What the CLI is syncing, conceptually.

> [card] [Frontic CLI reference](https://docs.frontic.com/reference/frontic-cli.md)
>
> Complete per-command reference with all flags and options.

> [card] [MCP Tools](https://docs.frontic.com/ide/mcp-tools.md)
>
> Connect Claude Code or Cursor to Frontic for agent-driven project work.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.