Send any website component to Cursor,
or Claude Code, in one click

MCP (Model Context Protocol) is an open standard that enables AI coding assistants to connect to external tools and data sources. It allows applications like Cursor and Claude Code to access real-time information, APIs, and specialized tools during conversations.

Think of MCP as a bridge that lets your AI assistant "see" and interact with external systems—like databases, APIs, or in our case, web components—providing much richer context for better responses.

Step 1: Install our Chrome extension from the Web Store and sign in with Google.

Step 2: Configure MCP in your AI coding assistant (Cursor or Claude Code) using our provided configuration.

Step 3: Navigate to any website and click our extension icon to activate component selection mode.

Step 4: Select any UI component you want to recreate—we capture the DOM structure and visual styling.

Step 5: The component data is automatically sent to your AI assistant via MCP for perfect recreation.

10x faster development: No more describing components or taking screenshots—send pixel-perfect references instantly.

Perfect accuracy: Your AI gets the exact HTML structure, CSS styles, and visual context it needs for accurate recreation.

Seamless workflow: Direct integration with Cursor and Claude Code means no context switching or manual copy-pasting.

Universal compatibility: Works with any website, design system, or UI framework—React, Vue, Angular, or plain HTML.

Time savings: Turn 30 minutes of back-and-forth explanations into 30 seconds of precise handoff.

General MCP Setup:

Cursor natively supports MCP through configuration files. You can add MCP servers by creating a configuration file that tells Cursor which external tools to connect to.

For Web to MCP specifically:

1. Open Cursor settings (Ctrl+Shift+J or Cmd+Shift+J)

2. Navigate to features → Model Context Protocol

3. Create a project-specific .cursor/mcp.json file with our provided configuration

4. Add your unique Web to MCP server URL (generated after signing in with Google)

5. Restart Cursor—Web to MCP tools will now be available in your chat context!

General MCP Setup:

Claude Code supports MCP through configuration files that connect to external MCP servers, allowing Claude to access specialized tools and data sources.

For Web to MCP specifically:

1. Locate your Claude Code configuration directory

2. Create or edit the MCP configuration file (usually config.json)

3. Add the Web to MCP server configuration with your unique server URL

4. Include the required server settings and authentication details

5. Restart Claude Code to enable the Web to MCP integration

Note: Detailed setup instructions with your personalized config are provided after signing up.

Yes! MCP (Model Context Protocol) itself is completely free and open-source. It's a standard protocol developed to enhance AI assistant capabilities.

However, the individual MCP servers and tools (like Web to MCP) may have their own pricing models. The cost depends on the specific service you're connecting to, not the MCP protocol itself.

Web to MCP offers both free and premium tiers:

Free Tier: Perfect for trying out the service with limited component captures per month.

Premium Tier: Unlimited captures, priority support, and advanced features for professional developers.

You can start with our free tier to experience the workflow enhancement, then upgrade when you're ready to supercharge your development process.

Eliminates Design Guesswork: Instead of describing "make it look like that button," you send the exact button with all its styling context.

Reduces Back-and-forth: No more "make it more rounded," "different shade of blue," or "add more padding"—get it right the first time.

Maintains Design Consistency: Extract components from existing design systems to ensure your new code matches established patterns.

Speeds Up Prototyping: Quickly grab UI patterns from anywhere on the web to accelerate your design exploration.

vs Screenshots: We capture actual DOM structure and CSS properties, not just pixels. Your AI gets semantic HTML and exact styling values.

vs Design Tools: No need to switch between Figma and code—capture live, interactive components directly from production websites.

vs Manual Description: Skip the "center-aligned blue button with rounded corners" explanations. Send the real thing with one click.

Full Context: Includes responsive behavior, hover states, and surrounding layout context that static designs miss.

Instant Reference: Turn any UI component into a coding reference in seconds, not minutes.

Fewer Iterations: Get accurate results on the first try instead of multiple refinement cycles.

Learning Acceleration: Understand how complex components are built by examining real production code.

Pattern Building: Build a library of proven UI patterns by capturing components from successful products.

Faster Onboarding: New team members can quickly understand existing component patterns and styling approaches.

Minimal Data Collection: We only capture the DOM structure and styling of selected components—no personal data, passwords, or sensitive information.

Secure Authentication: Sign in securely through Google OAuth—we never see or store your credentials.

No Full Page Capture: We only capture the specific element you select, not entire pages or other website content.

Direct Transmission: Component data goes directly to your AI assistant via MCP—we don't store captured components on our servers.

While we provide pixel-perfect references, the final output depends on your AI assistant and how you prompt it:

What we guarantee: Accurate DOM structure, exact CSS values, proper styling context, and visual screenshots.

What affects results: Your AI model choice, prompt clarity, and specific framework requirements (React vs Vue vs Angular).

Best practices: Be specific about your tech stack, mention any design system you're using, and iterate with the AI for perfect results.

Most developers see 90%+ accuracy on first generation, with perfect results after minimal refinement.