Home
Menuing
Tool Panel

Configuration,VS Code Extension

Configuring the Claude Extension for Visual Studio Code

The Claude extension for Visual Studio Code connects to your Contensive MCP Server, giving developers access to website management tools alongside their code editor.

Requirements

  • Visual Studio Code
  • Claude extension for VS Code (search "Claude" in the Extensions marketplace)
  • Administrator access to your Contensive website

Setup

Step 1: Install the Extension

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "Claude"
  4. Install the Claude extension
  5. Sign in with your Anthropic account when prompted

Step 2: Add the MCP Server

  1. Open the Command Palette (Ctrl+Shift+P)
  2. Search for "Claude: Edit MCP Settings"
  3. Add a remote MCP server entry:
{
  "mcpServers": {
    "contensive": {
      "url": "https://yoursite.com/mcp"
    }
  }
}
  1. Save the file

Step 3: Authenticate

When Claude first connects to the MCP server, it will prompt you to authenticate via OAuth. Log in to your Contensive site with administrator credentials in the browser window that opens.

Step 4: Reload and Test

  1. Reload VS Code (Command Palette > "Developer: Reload Window")
  2. Open the Claude panel
  3. Type: "List all pages on my Contensive site"
  4. Verify Claude returns your site's page list

Workspace vs User Settings

You can configure the MCP server at two levels:

  • User settings -- Available in all VS Code workspaces. Good for personal sites.
  • Workspace settings -- Stored in .vscode/settings.json. Good for team projects where each developer authenticates separately.

Example Developer Workflows

Content and code changes together:

Create a 'Team' page under /about with a team-member widget, then
scaffold a TeamMember design block class in the server project.

Content migration from files:

Read the page content from docs/homepage-copy.md and update the
homepage content on the Contensive site to match.

Widget development and testing:

Add a new instance of the Hero widget to the /landing page with
the headline 'Welcome' and verify it appears in page_get output.

Troubleshooting

MCP tools not appearing

  • Verify the settings file has valid JSON
  • Check the URL is correct and the site is reachable
  • Open VS Code Output panel (View > Output), select "Claude" from the dropdown to see error logs
  • Reload the VS Code window

Authentication errors

  • Re-authenticate by disconnecting and reconnecting the MCP server
  • Verify your Contensive account has the Administrator role

Extension not connecting

  • Ensure you are signed in to your Anthropic account in the extension
  • Check your network can reach the Contensive site