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

# Quick Start

> Get Nogic running in under 2 minutes

## Step 1: Install the extension

Install **Nogic** from the VS Code Marketplace:

1. Open VS Code
2. Open the Extensions sidebar (`Cmd+Shift+X` / `Ctrl+Shift+X`)
3. Search for **Nogic** (publisher: `Nogic`)
4. Click **Install**

Or install from the command line:

```bash theme={null}
code --install-extension Nogic.nogic
```

VSCodium and other Code OSS forks work too (Nogic supports VS Code engine `1.88.0+`).

## Step 2: Open the visualizer

Open any project folder, then either:

* Open the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and run **Nogic: Open Visualizer**, or
* Click the Nogic icon in the editor title bar

The first time, Nogic will offer to **Index Workspace**. Accept it. The extension scans your files, parses symbols (JS / TS / Python today), and stores everything locally under `~/.nogic/workspaces/`. Files in other languages appear in the tree without parsed symbols; the AI canvas (Step 5 below) still works on them.

<Note>
  Nogic also opens the visualizer automatically when you open a workspace. Disable that in Settings → Extensions → Nogic → `nogic.openOnStartup` if you prefer manual control.
</Note>

## Step 3: Explore the graph

You're now looking at your codebase as a connected map.

* **Pan / zoom** with trackpad or scroll wheel
* **Search** with `Cmd+F` (or `Ctrl+F`) to jump to a file or symbol
* **Right-click** any node and choose **Inspect** to focus it with its connections
* **Right-click** files or folders in the Explorer and choose **Add to Nogic Board** to build a focused view

See the [Visualizer](/features/visualizer) page for the full feature tour.

## Step 4: Connect an AI client

Nogic ships a local MCP server that lets AI clients draw answers directly on the canvas via `Cmd+K`.

When you first open the visualizer, the **MCP Setup** overlay appears with:

* Whether **Claude Code** and **Codex** are installed and on your `PATH`
* The local MCP server URL (e.g. `http://127.0.0.1:54123/mcp`)
* Toggles to enable each CLI

Install whichever CLI you'd like to use, toggle it on, and dismiss the overlay. You can reopen it anytime via **Nogic: Show MCP Setup**.

<CardGroup cols={2}>
  <Card title="Claude Code" icon="terminal" href="/mcp/claude-code">
    Set up Claude Code (`Cmd+K` and external use)
  </Card>

  <Card title="Codex" icon="robot" href="/mcp/codex">
    Set up Codex (auto-managed config)
  </Card>
</CardGroup>

## Step 5: Ask a question on the canvas

With the visualizer focused, press `Cmd+K` (or `Ctrl+K`). The on-canvas **Director cursor** opens. Type something like:

> Walk me through how authentication works in this app.

Nogic streams your prompt to the active CLI, which calls the local MCP server. Within seconds the canvas reflows into a diagram with a step-by-step narrative: sequence, dataflow, state machine, ER, or a curated tour of real code, depending on the question.

See [Agent Canvas](/features/agent-canvas) for what the AI can render and how to drive it.

## Next steps

<CardGroup cols={2}>
  <Card title="Visualizer" icon="diagram-project" href="/features/visualizer">
    Boards, inspect mode, search, auto-sync
  </Card>

  <Card title="Agent Canvas" icon="wand-magic-sparkles" href="/features/agent-canvas">
    What the AI cursor can draw on the canvas
  </Card>

  <Card title="Diff Analyze" icon="clipboard-check" href="/features/diff-analyze">
    AI-driven diff map with risk and blast radius
  </Card>

  <Card title="MCP Tools" icon="wrench" href="/mcp/overview">
    The MCP server and the canvas tools it exposes
  </Card>
</CardGroup>