# Quick Start (5 minutes)

<figure><img src="https://3471329132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOAdwcrDuWPJnqMDk0ciO%2Fuploads%2Fgit-blob-6809db5159961f4a888921777f77c8940f03597b%2Fviewgraph-logo.png?alt=media" alt="ViewGraph" width="420"><figcaption></figcaption></figure>

Go from zero to your first AI-assisted bug fix in 5 minutes.

## Prerequisites

* [Node.js](https://nodejs.org/) 22+ (LTS)
* [Chrome](https://www.google.com/chrome/) 116+ or [Firefox](https://www.mozilla.org/firefox/) 109+
* An MCP-compatible AI agent ([Kiro](https://kiro.dev/), [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview), [Cursor](https://www.cursor.com/), [Windsurf](https://windsurf.com/), [Cline](https://cline.bot/), or [Aider](https://aider.chat/))

## 1. Install the extension

[![Chrome - Install](https://img.shields.io/badge/Chrome-Install_Extension-4285F4?style=flat-square)](https://chromewebstore.google.com/detail/viewgraph-capture/dmgbneoidgmkdcfnlegmfijkedijjnjj) [![Firefox - Install](https://img.shields.io/badge/Firefox-Install_Extension-FF7139?style=flat-square)](https://addons.mozilla.org/en-US/firefox/addon/viewgraph-capture/)

{% hint style="info" %}
**Store version outdated?** Chrome/Firefox store reviews can delay updates. Check your version in the sidebar footer. If it's behind, [install the latest from GitHub](https://chaoslabz.gitbook.io/viewgraph/getting-started/manual-install) instead.
{% endhint %}

## 2. Connect to your AI agent

Add ViewGraph to your agent's MCP config. The server runs automatically via [`npx`](https://docs.npmjs.com/cli/commands/npx) - no install needed.

**For Kiro** (`~/.kiro/settings/mcp.json`):

```json
{
  "mcpServers": {
    "viewgraph": {
      "command": "npx",
      "args": ["-y", "@viewgraph/core"]
    }
  }
}
```

**For Claude Code** (`~/.claude/mcp.json`), **Cursor**, **Windsurf**, **Cline** - same JSON, different config file location. See [Installation](https://chaoslabz.gitbook.io/viewgraph/getting-started/installation) for each agent's config path.

That's it. Open your project, start your agent, and the server auto-configures on first capture.

> **Alternative: npm install** If you prefer explicit control over versions and config:
>
> ```bash
> # Step 1: Install ViewGraph globally (one time only)
> npm install -g @viewgraph/core
>
> # Step 2: Set up your project
> cd ~/my-project
> viewgraph-init
> ```
>
> If your app runs on a local server (e.g., `localhost:3000`), tell ViewGraph the URL:
>
> ```bash
> viewgraph-init --url localhost:3000
> ```
>
> See [Installation](https://chaoslabz.gitbook.io/viewgraph/getting-started/installation) for details.

## 3. Capture and annotate

1. Open your app in Chrome
2. Click the **ViewGraph** icon - sidebar opens, elements highlight on hover

![Element highlighted with tooltip](https://3471329132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOAdwcrDuWPJnqMDk0ciO%2Fuploads%2Fgit-blob-a775b4491e1a361a59046899335eb8a59990c08d%2Fhover-highlight.png?alt=media)

3. **Click** any element to annotate it - type what's wrong, set severity

![Annotation panel with comment and severity](https://3471329132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOAdwcrDuWPJnqMDk0ciO%2Fuploads%2Fgit-blob-2c5bbced7a8ed4f944423fee7e110ad1b271622e%2Fannotation-panel.png?alt=media)

4. **Shift+drag** to select a region
5. Click **Send to Agent**

![Send to Agent button](https://3471329132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOAdwcrDuWPJnqMDk0ciO%2Fuploads%2Fgit-blob-2fda68f89019d13aa6b28610ebe20af7f05440e9%2Fsend-to-agent.png?alt=media)

After sending, your annotations show "Sent to agent - waiting for fix...":

![Annotations sent and waiting for agent to fix](https://3471329132-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOAdwcrDuWPJnqMDk0ciO%2Fuploads%2Fgit-blob-796db071c35ef3536767ecdf61109b0ba3197a95%2Fsent-waiting-for-fix.png?alt=media)

## 4. Let your agent fix it

Tell your agent:

```
Fix the annotations from the latest ViewGraph capture
```

The agent reads your annotations with full DOM context, finds the source files, implements fixes, and marks each annotation as resolved. Green checkmarks appear in the sidebar.

## What just happened?

1. You clicked a broken element and described the problem
2. ViewGraph captured the full DOM - every element's selector, styles, attributes, accessibility state, network errors, console warnings
3. Your annotation + the DOM context were sent to the MCP server
4. Your agent read the capture via MCP tools, found the source file, and fixed the code
5. The agent resolved the annotation, and the sidebar updated in real-time

## Next steps

* [Installation guide](https://chaoslabz.gitbook.io/viewgraph/getting-started/installation) - detailed setup for Chrome, Firefox, and all agents
* [Multi-project setup](https://chaoslabz.gitbook.io/viewgraph/getting-started/multi-project) - run multiple projects simultaneously
* Try the demo: open `docs/demo/index.html` in the ViewGraph repo - a login page with 8 planted bugs to practice on
* **Tip:** Enable HTML snapshots and screenshots in sidebar settings (footer link) for visual evidence alongside your captures