Claude Code Setup

Claude Code is the CLI version of Claude. It reads MCP configuration from a .mcp.json file in your project directory.

Step 1: Create .mcp.json

Create a .mcp.json file in your project root (or home directory for global access):

.mcp.json
{
  "mcpServers": {
    "vibesites": {
      "type": "url",
      "url": "https://vibesites.dev/api/mcp?key=vibe_live_YOUR_KEY"
    }
  }
}

Keep your key private

Add .mcp.json to your .gitignore if you have one — it contains your API key.

Step 2: Launch Claude Code

Run claude in your terminal. Claude Code will automatically detect the MCP configuration and load the Vibesites tools.

Terminal
claude

Step 3: Verify

Ask Claude to list the available tools:

Test prompt
"What Vibesites tools do you have?"

You should see 24 tools listed. If not, check that the .mcp.json file is in the correct directory and the API key is valid.

Step 4: Build a site

Now you can build websites directly from your terminal:

Example conversation
you: Create a portfolio site for my web design agency, Pixel Perfect.
     Modern dark theme, showcase 6 projects, about section, contact form.

claude: I'll create that for you. Let me ask a few questions first...
        1. What's the location of Pixel Perfect?
        2. Who are your typical clients?
        3. Do you have brand colors?
        ...

Pro tip

Claude Code works great for iterating on sites. You can say "make the header sticky" or "add a dark mode toggle" and Claude will edit the files and republish.

Alternative: npm package

You can also install the Vibesites MCP server as a local npm package:

npm installation
npm install -g @vibesites/mcp-server
export VIBESITES_API_KEY=vibe_live_YOUR_KEY
vibesites-mcp

The hosted URL method (Step 1) is recommended — it requires no installation and always uses the latest version.

← Claude DesktopAPI Keys →