Builder.io MCP Server

About

## Builder.io MCP Server: Visual Development Platform The **Builder.io MCP Server** integrates Builder.io visual development platform into Google Antigravity, enabling visual content creation, A/B testing, and component management directly from your development environment. ### Why Builder.io MCP? - **Visual Editing**: Drag-and-drop editing for developers and marketers alike - **Framework Agnostic**: Works with React, Vue, Angular, Next.js, and more - **A/B Testing**: Built-in experimentation with statistical significance tracking - **Performance**: Optimized rendering with lazy loading and code splitting - **Developer Control**: Custom components with full type safety ### Key Features #### 1. Content Management ```python # Get content by model content = await mcp.get_content( model="page", url_path="/landing-page", options={"includeRefs": True} ) # List content entries entries = await mcp.list_content( model="blog-post", limit=10, query={"data.category": "technology"} ) # Create content await mcp.create_content( model="announcement", data={ "title": "New Feature Launch", "message": "Check out our new feature!", "startDate": "2024-01-15" } ) ``` #### 2. Component Registration ```python # Register custom component await mcp.register_component( name="hero-banner", inputs=[ {"name": "title", "type": "string"}, {"name": "subtitle", "type": "string"}, {"name": "backgroundImage", "type": "file"}, {"name": "ctaText", "type": "string"}, {"name": "ctaLink", "type": "url"} ], defaults={ "title": "Welcome", "ctaText": "Learn More" } ) # List registered components components = await mcp.list_components() ``` #### 3. A/B Testing ```python # Create experiment experiment = await mcp.create_experiment( name="Hero Test", content_id="content_123", variations=[ {"name": "Control", "weight": 50}, {"name": "Variant A", "weight": 50} ] ) # Get experiment results results = await mcp.get_experiment_results( experiment_id=experiment["id"] ) print(f"Winner: {results['winner']}") print(f"Confidence: {results['confidence']}%") ``` #### 4. Targeting and Personalization ```python # Set targeting rules await mcp.set_targeting( content_id="content_123", targeting={ "device": "mobile", "location.country": "US", "custom.userTier": "premium" } ) # Schedule content await mcp.schedule_content( content_id="content_123", start_date="2024-01-15T00:00:00Z", end_date="2024-01-31T23:59:59Z" ) ``` ### Configuration ```json { "mcpServers": { "builder-io": { "command": "npx", "args": ["-y", "@anthropic/mcp-builder"], "env": { "BUILDER_API_KEY": "your-api-key", "BUILDER_PRIVATE_KEY": "your-private-key" } } } } ``` ### Use Cases **Landing Pages**: Create and iterate on marketing landing pages without developer involvement. **Feature Flags**: Use targeting rules to control feature rollouts and personalization. **Content Experiments**: Run A/B tests on headlines, layouts, and calls-to-action. **Component Library**: Build and maintain a visual component library for marketing teams. The Builder.io MCP enables visual development and content management within your development environment.

Installation

{
  "mcpServers": {
    "builder-io": {
      "mcpServers": {
        "builder-io": {
          "env": {
            "BUILDER_API_KEY": "your-api-key"
          },
          "args": [
            "-y",
            "builder-mcp-server"
          ],
          "command": "npx"
        }
      }
    }
  }
}

How to Use

1. 1Get Builder.io API key
2. 2Configure space
3. 3Build pages visually