> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Claude Code

> Anthropic's Claude. The default agent in vly. Best for large refactors, deep multi-file reasoning, and tasks that require holding the whole project in working memory.

Claude Code is the default coding agent in vly, powered by Anthropic's [Claude](https://www.anthropic.com/claude). It runs the full plan-and-build pipeline behind the scenes whenever you submit a prompt without overriding the agent.

## Strengths

<CardGroup cols={2}>
  <Card title="Reasoning across many files" icon="files">
    When a feature touches schema, queries, components, and styles all at once, Claude Code traces dependencies cleanly and edits in the right order.
  </Card>

  <Card title="Large refactors" icon="git-branch">
    "Convert all components from class-based to function components" or "extract this duplicated logic into a shared hook" — Claude is unusually good at these.
  </Card>

  <Card title="Following long, structured prompts" icon="list">
    A prompt with five sections and a checklist is honored end-to-end, not skimmed.
  </Card>

  <Card title="Self-correcting" icon="rotate-cw">
    When the build fails, Claude reads the type-checker output and fixes it without escalating to you. Up to three retries before it asks for help.
  </Card>
</CardGroup>

## When to pick Claude Code over the others

<Tabs>
  <Tab title="Big refactors">
    "Refactor the auth flow to use a state machine instead of nested useEffects." Claude is the right pick.
  </Tab>

  <Tab title="Multi-file features">
    "Add a billing system across schema, API routes, components, and the settings page." Claude.
  </Tab>

  <Tab title="Long prompts with constraints">
    "Add a notifications feature. It must (1) not depend on a third-party service, (2) use the existing Convex schema patterns, (3) be tested with the existing test setup, (4) work in offline mode." Claude.
  </Tab>

  <Tab title="When you need consistency">
    Claude is more conservative on style — it tends to match the existing codebase rather than introducing new patterns.
  </Tab>
</Tabs>

## When Codex or Gemini might be better

<CardGroup cols={2}>
  <Card title="Tight, surgical edits" icon="terminal" href="/features/agents/openai-codex">
    Single-line changes, single-function rewrites. **OpenAI Codex** is faster and just as accurate.
  </Card>

  <Card title="Multi-file design work" icon="sparkles" href="/features/agents/gemini-cli">
    "Redesign the dashboard with a new layout." **Gemini CLI** has stronger visual / layout intuition.
  </Card>
</CardGroup>

See [Choosing an agent](/features/agents/choosing-an-agent) for the full decision tree.

## How it integrates

```mermaid theme={null}
sequenceDiagram
    participant You
    participant vly
    participant Claude as Claude Code
    participant Build

    You->>vly: prompt
    vly->>vly: bundle project context<br/>(schema, files, custom instructions)
    vly->>Claude: plan request
    Claude-->>vly: plan
    vly->>You: show plan (Plan mode)
    You->>vly: approve
    vly->>Claude: code request
    Claude-->>vly: file edits (streaming)
    vly->>Build: run type-check + bundle
    Build-->>vly: errors (if any)
    vly->>Claude: fix-errors request
    Claude-->>vly: corrected files
    Build-->>You: live preview URL
```

A few things worth noting:

* **vly bundles project context for Claude.** This includes the full schema, your custom instructions, knowledge base entries, and the file graph. Claude doesn't fish for context one file at a time.
* **Streaming output.** You see files appear in the editor as Claude writes them.
* **Self-correcting up to 3 retries.** If type-check fails, Claude reads the error and tries again, silently. You only see the build that succeeded.

## What you can ask for

Claude Code handles the full vly prompt vocabulary:

<Tabs>
  <Tab title="Schema-first features">
    ```
    Add a "comments" feature. Each task can have many comments. Each
    comment has author, body, and timestamp. Show comments on the task
    detail page in chronological order, with an input at the bottom.
    Realtime sync — when someone else comments on a task I'm viewing,
    I see it immediately.
    ```
  </Tab>

  <Tab title="Refactors">
    ```
    Refactor the task list to use TanStack Table for sorting and
    filtering. Keep the existing behavior; just swap the underlying
    rendering. Update the test setup to match.
    ```
  </Tab>

  <Tab title="Performance work">
    ```
    The dashboard is slow when there are 500+ tasks. Profile what's
    rendering on each task update and fix the worst offenders.
    Consider: memoization, query splitting, paginated rendering.
    ```
  </Tab>

  <Tab title="Migrations">
    ```
    Add a `priority` field to the `tasks` table (low / medium / high,
    default 'medium'). Backfill existing tasks to 'medium'. Update the
    UI to show priority as a colored chip on each row.
    ```
  </Tab>
</Tabs>

## Tips

<Tip>
  **Use Plan mode for the first prompt of any project with Claude.** Claude's plans are detailed enough to surface architectural choices early, before they're hard to undo.
</Tip>

<Tip>
  **Reference your custom instructions explicitly when stakes are high.** "Per my custom instructions on TypeScript style, use named functions for top-level components." Claude is reliable about following stated rules but better when you cite them in the prompt.
</Tip>

<Tip>
  **Claude Code is best at *not* over-editing.** If you say "just add the field," it will not also reformat the rest of the file. This restraint pays off in clean diffs.
</Tip>

## Pricing

Claude Code runs are billed in [credits](/features/billing/credits). Typical credit costs:

| Change size | Credits |
| - | - |
| Tiny (one line, one file) | 1 |
| Small (one feature, \~3 files) | 2–4 |
| Medium (multi-file feature) | 5–10 |
| Large (refactor, \~15+ files) | 10–25 |

See [Credits](/features/billing/credits) for the full breakdown.

## Related

<CardGroup cols={3}>
  <Card title="OpenAI Codex" icon="terminal" href="/features/agents/openai-codex">
    The fast, surgical alternative.
  </Card>

  <Card title="Gemini CLI" icon="sparkles" href="/features/agents/gemini-cli">
    The design-and-multi-file alternative.
  </Card>

  <Card title="Choosing an agent" icon="git-branch" href="/features/agents/choosing-an-agent">
    The full decision tree.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.