> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentfront.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install FrontMCP via npm, yarn, or the CLI scaffolder

## Prerequisites

* **Node.js**: Version 24+ (LTS)
  * *The `engines` field in `@frontmcp/sdk` and `frontmcp` requires Node 24+. FrontMCP is developed and tested on Node 24.*
* **npm ≥ 10** (pnpm / yarn work too)
* TypeScript project (the init command can set this up)

***

<Tabs>
  <Tab title="Standard">
    ## Option A — Create a new project

    Use the built-in project generator. It will create a new folder under your current directory.

    <CodeGroup>
      ```bash universal theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      npx frontmcp create my-app
      ```

      ```bash pnpm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      pnpm dlx frontmcp create my-app
      ```

      ```bash yarn theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      yarn dlx frontmcp create my-app
      ```
    </CodeGroup>

    The `create` command is **interactive** by default:

    ```
    ? Project name: my-app
    ? Deployment target:
      > Node.js (Docker)
        Vercel (Serverless)
        AWS Lambda
        Cloudflare Workers
    ? Redis setup: (Docker target only)
      > Docker Compose
        Existing Redis
        None
    ? Enable GitHub Actions CI/CD? (Y/n)
    ```

    Use `--yes` (or `-y`) to skip prompts and use defaults.

    ### CLI Flags

    | Flag                 | Description                                          | Default  |
    | -------------------- | ---------------------------------------------------- | -------- |
    | `--yes, -y`          | Use defaults (non-interactive)                       | -        |
    | `--target <type>`    | Deployment: `node`, `vercel`, `lambda`, `cloudflare` | `node`   |
    | `--redis <setup>`    | Redis: `docker`, `existing`, `none`                  | `docker` |
    | `--cicd / --no-cicd` | Enable GitHub Actions                                | `--cicd` |
    | `--pm <manager>`     | Package manager: `npm`, `yarn`, `pnpm`               | `npm`    |

    **Examples:**

    ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    # Interactive mode (default)
    npx frontmcp create my-app

    # Non-interactive with defaults
    npx frontmcp create my-app --yes

    # Vercel target with CI/CD
    npx frontmcp create my-app --target vercel

    # Use pnpm as package manager
    npx frontmcp create my-app --pm pnpm --yes

    # Docker without Redis
    npx frontmcp create my-app --target node --redis none --no-cicd
    ```

    This will:

    * scaffold a FrontMCP project in `./my-app`
    * configure `tsconfig.json` for decorators and modern ESM
    * generate a `package.json` with helpful scripts
    * create deployment configuration for your target (Dockerfile, vercel.json, etc.)
    * generate GitHub Actions workflows (if enabled)
    * install required dev dependencies (e.g. TypeScript, tsx, zod, reflect-metadata)

    ***

    ## Option B — Add to an existing project

    Install the SDK, CLI, and Node types:

    <CodeGroup>
      ```bash npm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      npm i @frontmcp/sdk reflect-metadata
      npm i -D frontmcp @types/node@^24
      ```

      ```bash pnpm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      pnpm add @frontmcp/sdk reflect-metadata
      pnpm add -D frontmcp @types/node@^24
      ```

      ```bash yarn theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      yarn add @frontmcp/sdk reflect-metadata
      yarn add -D frontmcp @types/node@^24
      ```
    </CodeGroup>

    Then initialize FrontMCP in your project root:

    ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    npx frontmcp init
    ```

    `init` will:

    * create or update your **tsconfig.json** with the required decorator settings (`experimentalDecorators`, `emitDecoratorMetadata`, `target: es2021`, `module: esnext`)

    ***

    ## Package scripts

    After `create`, you'll have these scripts:

    ```json theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "scripts": {
        "dev": "frontmcp dev",
        "build": "frontmcp build",
        "inspect": "frontmcp inspector",
        "doctor": "frontmcp doctor",
        "test": "frontmcp test"
      }
    }
    ```

    **What they do**

    * `frontmcp dev` — run your server in watch mode (tsx)
    * `frontmcp build` — bundle your entry for the configured deployment target (outputs to `./dist` by default)
    * `frontmcp inspector` — launch the MCP Inspector (`npx @modelcontextprotocol/inspector`)
    * `frontmcp doctor` — validate Node/npm versions, tsconfig, and project setup
    * `frontmcp test` — run E2E tests with the auto-injected Jest configuration

    ***

    ## Verify your setup

    Run:

    ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    npm run doctor
    ```

    <Info>
      If anything is missing or misconfigured (Node/npm versions, `tsconfig.json`, scripts), **doctor** will tell you
      exactly what to fix.
    </Info>
  </Tab>

  <Tab title="Nx Monorepo">
    ## Option A — New monorepo

    Scaffold a complete FrontMCP Nx workspace from scratch:

    <CodeGroup>
      ```bash npm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      npx frontmcp create my-workspace --nx
      ```

      ```bash pnpm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      pnpm dlx frontmcp create my-workspace --nx --pm pnpm
      ```

      ```bash yarn theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      npx frontmcp create my-workspace --nx --pm yarn
      ```
    </CodeGroup>

    This creates:

    * Nx workspace with `nx.json` configuration
    * `apps/`, `libs/`, `servers/` directory structure
    * `@frontmcp/sdk`, `frontmcp`, `@frontmcp/nx` pre-installed
    * Sample application (optional)
    * TypeScript, Jest, ESLint pre-configured

    ***

    ## Option B — Existing Nx workspace

    Add `@frontmcp/nx` to an existing Nx workspace:

    <CodeGroup>
      ```bash npm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      npm install -D @frontmcp/nx @frontmcp/sdk frontmcp @frontmcp/testing
      ```

      ```bash yarn theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      yarn add -D @frontmcp/nx @frontmcp/sdk frontmcp @frontmcp/testing
      ```

      ```bash pnpm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
      pnpm add -D @frontmcp/nx @frontmcp/sdk frontmcp @frontmcp/testing
      ```
    </CodeGroup>

    Ensure your `tsconfig.base.json` includes decorator support:

    ```json theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "target": "es2022",
        "module": "esnext",
        "strict": true
      }
    }
    ```

    ***

    ## Verify installation

    List available generators to confirm the plugin is installed:

    ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    nx list @frontmcp/nx
    ```

    You should see all generators and executors listed.

    ***

    ## Nx commands

    After setting up your workspace, use Nx to manage projects:

    ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    # Generate a new app
    nx g @frontmcp/nx:app my-app

    # Generate a shared library
    nx g @frontmcp/nx:lib shared-utils

    # Generate a tool in an app
    nx g @frontmcp/nx:tool my-tool --project my-app

    # Start dev server
    nx dev my-app

    # Build all projects
    nx run-many -t build

    # Run all tests
    nx run-many -t test
    ```

    <Info>
      See the full [Nx Plugin documentation](/frontmcp/nx-plugin/overview) for all 20 generators and 7 executors.
    </Info>
  </Tab>
</Tabs>

***

## Next steps

* Start developing: `npm run dev` (standard) or `nx dev <app>` (Nx)
* Build for distribution: `npm run build` (standard) or `nx build <project>` (Nx)
* Explore tools and messages live: `npm run inspect` (standard) or `nx inspector <app>` (Nx)