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

# Subtext Installation: Snippet and MCP Server Overview

> Learn the two parts of Subtext setup: adding the capture snippet to your web app and connecting your AI coding agent via the MCP server.

Installing Subtext involves two independent pieces that work together: a capture snippet you add to your web application, and an MCP server connection you configure in your AI coding agent. The snippet records what your users actually do in production. The MCP connection gives your agent the tools to open those recordings, inspect them, and reason about what went wrong. Neither piece does much on its own — together, they close the gap between your codebase and your running app.

## The two parts of setup

### 1. Capture snippet

The capture snippet is a small async script that loads `fs.js` from Fullstory's edge network and begins recording sessions as soon as a user lands on your app. It is lightweight enough to run on every production session without meaningfully affecting page performance.

Key behaviours out of the box:

* **Full session recording** — every click, scroll, navigation, network request, and console error is captured in a structured event stream your agent can query
* **Automatic form input masking** — text typed into `<input>`, `<textarea>`, and `<select>` elements is masked before it ever leaves the browser, so passwords, emails, and card numbers are never recorded
* **No sampling** — you do not need to configure sampling rates; the snippet is efficient enough to capture everything

<Note>
  Subtext uses Fullstory's capture infrastructure under the hood. The snippet loads `fs.js` from `edge.fullstory.com` — the same battle-tested network that powers Fullstory's enterprise session replay product. You get that reliability without a separate Fullstory account.
</Note>

### 2. MCP server connection

The MCP server is what makes session data actionable for your agent. It is hosted — `https://api.fullstory.com/mcp/subtext` over HTTP, with no local process to run — and you connect with OAuth or an API key. The [Subtext plugin](/docs/install/manual) configures the connection automatically for Claude Code, Cursor, Codex, and Gemini CLI. Once connected, your agent gains a set of structured tools it can call during any conversation or task:

| Tool                   | What it does                                                                    |
| ---------------------- | ------------------------------------------------------------------------------- |
| `review-list-sessions` | Find reviewable sessions — returns numbered URLs and timestamps                 |
| `review-open`          | Open a session — returns a handle, the semantic app map, and a digest rollup    |
| `review-summary`       | Get a static summary of what happened, frozen at default zoom                   |
| `review-zoom`          | Adjust resolution and time window to focus on a specific moment                 |
| `review-snapshot`      | Capture the screen at a moment — screenshot, component tree, and bounding boxes |
| `review-close`         | Close the session and record feedback                                           |

Beyond session review, the MCP server also exposes privacy tools (`privacy-propose`, `privacy-create`, `privacy-list`, `privacy-promote`, `privacy-delete`) so your agent can run a full PII governance loop: scan a session, propose masking rules, preview them, and promote approved rules to production.

The Subtext plugin also installs **skills** — slash commands that teach your agent structured workflows:

| Skill              | Type     | What it does                                                             |
| ------------------ | -------- | ------------------------------------------------------------------------ |
| `/subtext:review`  | Workflow | Read the app map, zoom to the moments that matter, explain what happened |
| `/subtext:session` | Atomic   | Session replay tools (`review-*`) — catalog and usage patterns           |
| `/subtext:shared`  | Atomic   | Foundation — MCP conventions and security rules                          |

## Choose your setup path

Both paths lead to the same outcome. Use the wizard for speed; use the manual path if you need precise control or your framework is not yet detected automatically.

<CardGroup cols={2}>
  <Card title="Setup Wizard" icon="wand-magic-sparkles" href="/docs/quickstart">
    **Recommended for most projects.**

    Run `npx @subtextdev/subtext-wizard` from your project root. The wizard detects your agent and framework, injects the snippet, configures the MCP server, and registers skills and commands — all in a single interactive session.

    Best for: Next.js, React, Vite, Remix, and Claude Code or Cursor users.
  </Card>

  <Card title="Manual Install" icon="screwdriver-wrench" href="/docs/install/manual">
    **For full control or unsupported setups.**

    Add the snippet by hand using the framework-specific guides, then install the agent plugin or configure the MCP server connection yourself. Takes about ten minutes but gives you exact visibility into every change made to your codebase.

    Best for: custom frameworks, monorepos, CI-driven installs, or teams that review every dependency manually.
  </Card>
</CardGroup>

## What to do next

1. **Add the snippet** — follow the [snippet overview](/docs/install/snippet) to understand what it inserts and pick the right framework guide
2. **Connect your agent** — configure the MCP server for [Claude Code, Cursor, or another agent](/docs/install/manual)
3. **Run your first review** — once sessions are flowing, use `/subtext:review` to let your agent open a real session and explain what it sees