Setting Up Claude Integration with VS Code

If you're searching for "claude integration with vs code," you're probably trying to answer one of two questions: which extension actually works well, or how to wire Claude into your editor if you need something the existing extensions don't offer. This guide covers both — a fast path using existing tools, and a lower-level path for teams that want more control over keys, usage, and billing.

The short answer: there are a few solid ways to get Claude inside VS Code today, and the right one depends on whether you want a polished out-of-the-box experience or a custom setup you control end-to-end.

Option 1: Official and community extensions

The fastest way to get Claude working in VS Code is through an existing extension. A few worth knowing:

• Claude Code — Anthropic's own CLI-based coding assistant, which also integrates with editors including VS Code. It handles multi-file edits, running commands, and reading your repo context directly.
• Continue — an open-source AI coding assistant that supports Claude as a model provider. You bring your own API key and configure it in a config.json file.
• Cline (formerly Claude Dev) — an autonomous coding agent extension built specifically around Claude's tool-use capabilities, good for larger refactors and multi-step tasks.

For most individual developers, installing one of these and pasting in an API key is enough. The setup usually looks like this in Continue's config:

{
  "models": [
    {
      "title": "Claude",
      "provider": "anthropic",
      "model": "claude-sonnet-4-5",
      "apiKey": "sk-ant-..."
    }
  ]
}

This works fine for a single developer with a personal key. Where it gets messier is at team scale.

Option 2: A custom integration when you need more control

Extensions are built around a single provider config and a single key per developer. That breaks down once you have more than one or two engineers using Claude inside VS Code, because you end up with:

• API keys scattered across .env files, extension settings, and personal config directories
• No shared visibility into who is using how much, or which project is driving costs
• No easy way to revoke access for one person without rotating a key everyone shares

This is where a gateway layer helps. SubToAPI turns your existing Claude access into a standard HTTPS API with per-application keys (sub_live_...), so instead of every developer's VS Code extension pointing at one shared secret, each person or project gets its own scoped key from a dashboard. You can revoke one without touching the others, and see usage per key.

If you're building a custom VS Code extension or internal tool rather than relying on an off-the-shelf one, the integration is a standard chat completions call:

curl https://api.subtoapi.app/v1/messages \
  -H "Authorization: Bearer $SUBTOAPI_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "claude-sonnet-4-5",
    "max_tokens": 1024,
    "messages": [
      { "role": "user", "content": "Explain this function and suggest a refactor." }
    ]
  }'

Inside an extension, that same call from a VS Code webview or extension host looks like:

const response = await fetch("https://api.subtoapi.app/v1/messages", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.SUBTOAPI_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    model: "claude-sonnet-4-5",
    max_tokens: 1024,
    messages: [{ role: "user", content: userSelection }]
  })
});
const data = await response.json();

For an inline "explain this code" command that streams tokens back into a webview as they arrive, streaming is worth setting up early rather than bolting on later — see /docs/streaming for the event format.

Wiring it into a VS Code command

Once you have a working API call, the VS Code side is just standard extension plumbing: register a command, grab the active editor's selection, send it, and render the response in a webview or output channel.

vscode.commands.registerCommand("myClaudeExt.explain", async () => {
  const editor = vscode.window.activeTextEditor;
  if (!editor) return;

  const selection = editor.document.getText(editor.selection);
  const result = await callClaude(selection); // wraps the fetch above
  showInWebview(result);
});

This pattern extends naturally to tool use if you want Claude to run linters, fetch file contents, or query your test runner as part of a command — see /docs/tools for the request format. For the full request/response shape, /docs/messages covers everything the endpoint accepts.

Choosing between the two approaches

Use an existing extension (Continue, Cline, or Claude Code) if:

• You're a solo developer or small team
• You don't need centralized key management or usage tracking
• You want something installed and working in five minutes

Build or extend a custom integration if:

• You have multiple developers and want per-seat visibility into usage
• You need to revoke access for one person without rotating a shared key
• You're building internal tooling beyond what off-the-shelf extensions offer

For teams going the custom route, /docs/quickstart walks through getting a key and making the first request, and /pricing covers the Solo, Team, and Scale tiers if you're deciding how to license it across a team. You can also start with a free trial at /signup before committing to a plan.

A practical starting point

If you're just trying Claude in VS Code today, install Continue or Cline, grab an API key, and paste it into the config — you'll be productive in minutes. If you're rolling this out to a team and want to avoid shared secrets scattered across everyone's machine, put an API layer in front of it first so each developer gets their own key and you get usage data without extra spreadsheets.

questions

Does Claude have an official first-party VS Code extension? Anthropic's Claude Code tool integrates with several editors including VS Code, primarily aimed at agentic coding workflows like multi-file edits and running commands. Most VS Code-native chat experiences come from third-party extensions like Continue and Cline, which let you choose Claude as the underlying model.

Can I use Claude in VS Code without exposing my API key to every extension? Yes — route requests through a gateway that issues per-application keys instead of pasting a shared secret into every extension's settings. This way you can revoke access for one project or developer without rotating the key everyone else uses.

Is streaming supported when integrating Claude into a custom VS Code extension? Yes, standard Claude-compatible APIs support server-sent event streaming, which is important for rendering responses token-by-token in a webview rather than waiting for the full completion. Check your provider's streaming docs for the exact event format before wiring it into the extension host.