> ## 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.

# Claude Code

> Use Claude Code to power Nogic's AI features

The Nogic extension spawns [Claude Code](https://docs.claude.com/en/docs/claude-code) for you with the MCP server pre-wired — no manual config required.

## Prerequisites

* Your editor (VS Code or compatible) with the [Nogic extension](/installation) installed
* Claude Code installed and on your `PATH`

Verify Claude Code is installed:

```bash theme={null}
claude --version
```

If you see a version, you're set. If not, follow the [Claude Code install guide](https://docs.claude.com/en/docs/claude-code).

## Usage

1. Open the visualizer (**Nogic: Open Visualizer**)
2. The MCP Setup overlay should show **Claude Code: installed, enabled**. If not, enable the toggle.
3. Press `Cmd+K` (or `Ctrl+K`) inside the visualizer.
4. Type your question in the cursor bubble.

Behind the scenes the extension:

* Writes a temp file with `{"mcpServers": {"nogic": {"type": "http", "url": "http://127.0.0.1:.../mcp"}}}`
* Spawns `claude` with `--mcp-config <that file>` and `--allowedTools mcp__nogic__*`
* Streams narration deltas back into the cursor as Claude calls render / patch tools

The CLI's native `Read` / `Glob` / `Grep` are also available to Claude during the turn, governed by Claude Code's normal permission model.

### Continuing a conversation

A second `Cmd+K` reuses the prior conversation (Claude Code's `--continue`) so follow-ups feel natural:

> "Walk me through how auth works."
> *(diagram appears)*
> "Now show the path when the token is expired."
> *(diagram extends)*

After 30 minutes idle, the next `Cmd+K` starts fresh.

### Switching CLI / model

The cursor lets you pick:

* **CLI**: Claude Code or Codex, per-turn override
* **Model tier**: `auto`, `cheap` (Haiku), `medium` (Sonnet), or a specific model id
* **Verbosity**: `auto`, `low`, `medium`, or `high` (switches to `render_code_tour`)

You can also set a default CLI globally:

```jsonc theme={null}
// settings.json
{
  "nogic.walkthrough.preferredCli": "claude" // "auto" | "claude" | "codex"
}
```

## Troubleshooting

**`claude` not detected in the MCP Setup overlay**: make sure `claude --version` works in a normal terminal. The extension uses your shell's `PATH`. If you installed via `npm` to a custom prefix, restart VS Code so it picks up the new `PATH`.

**Tools time out / `user cancelled MCP tool call`**: the extension launches Claude Code with `--allowedTools mcp__nogic__*` to skip per-tool approval prompts. If you see this error, check that the MCP Setup overlay shows Claude Code as enabled.

**Canvas doesn't update**: the visualizer must be open for canvas tools to apply. The tool will return a clear error message ("no panel open") that Claude can recover from.

## Next

<CardGroup cols={2}>
  <Card title="MCP Tools" icon="wrench" href="/mcp/overview">
    Full canvas tool reference
  </Card>

  <Card title="Codex" icon="robot" href="/mcp/codex">
    Same flow with Codex
  </Card>
</CardGroup>