Connecting Claude Code (MCP)

Optional power feature

This page is for people who want to manage their Studio projects from their own computer using Anthropic's Claude Code. If you're happy editing your site in the Studio chat, you don't need any of this — the Studio website does everything described here.

What is this?

Claude Code is Anthropic's AI assistant that runs in a terminal on your own computer. VectrForce Studio can connect to Claude Code so you can work with your Studio projects directly from your machine — list them, create new ones, ask Studio's AI to make changes, publish, and check logs — without opening the Studio website.

The connection uses MCP (the Model Context Protocol), an open standard for letting AI assistants talk to outside services. Studio runs an MCP server; you point Claude Code at it once, and from then on Claude Code can operate your Studio account on your behalf.

Is this for me?

You'll be comfortable here if you've used a command line or terminal before and you have Claude Code installed.

If that doesn't sound like you, that's completely fine — everything on this page can also be done from the Studio website, which needs no setup. You can safely skip this guide.

What you can do with it

Once connected, you can ask Claude Code to do any of the following. You don't type commands — you just describe what you want in plain language.

You want to…	Ask Claude Code something like…
See your projects	"List my Studio projects"
Check a project's state	"What's the status of my project acme?"
Create a project	"Create a new Studio project called acme"
Make changes with AI	"Ask Studio to add a contact form to acme"
Preview a project	"Open the preview for acme"
Publish a project	"Publish acme to production"
Investigate a problem	"Show me the logs for acme"

There's also an advanced add-on that lets you keep a local copy of a project on your computer, edit it with Claude Code's own file tools, and sync the changes back to Studio. That's covered at the end of this page.

What it can't do

• It is not a full replacement for the Studio website. Visual things — watching the live preview, using the file editor, browsing activity — are still best done in Studio itself.
• Publishing changes your live site. The publish action pushes your draft changes to production. Claude Code asks you to confirm first — always read that confirmation before approving.
• One AI change at a time. Studio runs a single AI session per project, so Claude Code and the Studio chat can't both edit the same project at the same moment.
• Rate limits apply. Heavy automated use may be throttled.
• Tokens can expire. If you gave your access token an expiry date, the connection stops working when it lapses — you'll need to create a new one.

Before you start

1. Install Claude Code. Follow Anthropic's guide at code.claude.com/docs.
2. Have a Studio account with at least one project. If you don't, create one first — see the Quickstart.

Step 1 — Create an API token

Claude Code needs a token to prove it's allowed to act on your account.

1. Open Studio and go to Settings → API Tokens.
2. Click Generate new token. Give it a name (for example, "laptop") and choose an expiry, or "Never".
3. Copy the token immediately — it is shown only once. It starts with vfs_.

For more on tokens, see API tokens.

Step 2 — Connect Studio to Claude Code

Open the file ~/.claude/settings.json on your computer in a text editor. (On Windows, this file is at %USERPROFILE%\.claude\settings.json.) If it doesn't exist, create it. Add an mcpServers section like this:

{
  "mcpServers": {
    "studio": {
      "type": "http",
      "url": "https://studio.vectrforce.ai/api/mcp",
      "headers": {
        "Authorization": "Bearer vfs_your_token_here"
      }
    }
  }
}

Replace vfs_your_token_here with the token you copied in Step 1. If the file already has content, merge the studio entry into the existing mcpServers object rather than overwriting the whole file.

Save the file and restart Claude Code so it picks up the change.

Step 3 — Try it

Open Claude Code and ask:

List my Studio projects

Claude Code should reply with your project list. If it does, you're connected.

Keeping it safe

• Treat your token like a password. Anyone who has it can act on your Studio account. Don't paste it into emails, chat messages, or screenshots.
• Revoke a token you no longer need. Go to Settings → API Tokens and click Revoke next to it — this takes effect immediately.
• Confirm before publishing. When Claude Code is about to publish, it shows a confirmation. Read it before approving.

Troubleshooting

Problem	Fix
Claude Code says UNAUTHORIZED	The token is wrong, expired, or revoked. Create a fresh one and update settings.json.
Claude Code doesn't have the Studio tools	Make sure you restarted Claude Code after editing settings.json, and that the JSON is valid (no trailing commas).
"Project not found"	Re-check the project name. Use "List my Studio projects" to see exact names.

Advanced — work on a local copy

There is a second, optional piece: a small program you install that lets you keep a local copy of a Studio project on your computer, edit its files directly with Claude Code, and sync changes back.

Install it:

npm install -g @vectrforce/studio-mcp

Then add a second entry to ~/.claude/settings.json, alongside the studio entry from Step 2:

{
  "mcpServers": {
    "studio": {
      "type": "http",
      "url": "https://studio.vectrforce.ai/api/mcp",
      "headers": { "Authorization": "Bearer vfs_your_token_here" }
    },
    "studio-local": {
      "type": "stdio",
      "command": "studio-mcp",
      "env": { "STUDIO_API_TOKEN": "vfs_your_token_here" }
    }
  }
}

Use the same token for both. Restart Claude Code.

This adds three more capabilities:

You want to…	Ask Claude Code something like…
Download a project to your computer	"Clone my project acme for local editing"
Send your local edits back to Studio	"Sync my changes"
Pull in changes made elsewhere	"Pull the latest from Studio"

Your local edits sync to the project's draft — they don't go live until you publish. If both you and Studio's chat AI changed the same project, a sync may report a conflict; resolve it in your local copy the way you'd resolve any file conflict, then sync again.