Web To Mcp

Created By
Web to MCP9 months ago
Send any website component to Cursor, or Claude Code, in one click. No more screenshots, descriptions, or guesswork—just seamless visual handoffs that your AI coding assistant understands perfectly. Bridge the gap between design and code.
Overview

what is Web To MCP?

Web To MCP is a Chrome extension that allows users to capture website components visually and convert them into ready-to-use code and prompts for AI coding assistants like Cursor and Claude Code.

how to use Web To MCP?

To use Web To MCP, install the Chrome extension, enable it in your browser, visit any website, hover over an element to highlight it, and click to capture the component. The generated code and prompt can then be copied directly into your coding assistant.

key features of Web To MCP?

  • Capture components visually with a simple hover and click
  • Generate instant code and prompts for direct use in your editor
  • Seamless integration with Cursor and Claude Code through MCP
  • Preserve pixel-perfect references for accurate design-to-code handoff
  • Save hours of manual effort by automating repetitive front-end tasks
  • Lightweight and secure Chrome extension built for speed

use cases of Web To MCP?

  1. Quickly capture navigation bars, buttons, or layouts from live sites
  2. Speed up prototyping with real-world design elements
  3. Train AI coding assistants with exact visuals for better results
  4. Eliminate rework in front-end development by reducing miscommunication
  5. Automate repetitive coding tasks and focus on shipping features

FAQ from Web To MCP?

  • Is Web To MCP free to use?

Yes! Web To MCP is free to use for everyone.

  • What browsers are supported?

Currently, Web To MCP is available as a Chrome extension.

  • How does Web To MCP improve collaboration?

It allows designers, developers, and AI tools to stay aligned with shared visual references.

Server Config

{
  "mcpServers": {
    "web-to-mcp": {
      "url": "https://web-to-mcp.com/mcp/93594892-9671-47a0-9401-82070a506b9a/"
    }
  }
}
Project Info
Created At
9 months ago
Updated At
9 months ago
Author Name
Web to MCP
Star
-
Language
-
License
-

Recommend Servers

View All
Wpnews

10 hours ago
Trainzilla Mcp

3 hours ago
Shippo
@Shippo

a day ago
//beforeyouship — LLM Cost Modeling From Your Editor
@Indiegoing

Query realistic LLM cost models without leaving your editor. beforeyouship models the **true monthly cost** of an LLM app architecture — retries, prompt caching, batch discounts, infra overhead, and 3×/10× growth — across GPT-5.x, Claude, Gemini, DeepSeek, and more. Not a token calculator: a planning tool for the design phase, before you commit to a stack. **No API key needed to try it** — demo mode covers the six free-tier models. A Pro key from [beforeyouship.dev](https://beforeyouship.dev) unlocks the full 18-model catalog. ## What you can ask - "How much will a RAG chatbot cost at 10,000 requests/day?" - "Compare Claude Haiku vs Gemini Flash pricing for my workload" - "What's the cheapest model for a multi-step agent at scale?" - "Show me current per-token prices for Anthropic models" ## Tools ### `estimate_cost` Full cost model for an architecture at a given usage level. Returns Naive / Realistic / Worst Case monthly cost per model, 3×/10× growth scenarios, and an opinionated recommendation with reasoning. ### `get_model_prices` Current per-1M-token pricing — input, output, cached input, batch — with context windows and staleness metadata. ### `list_archetypes` Seven preset architecture patterns (simple chatbot, chatbot with history, RAG pipeline, multi-model router, coding assistant, document processor, multi-step agent) used as starting points for estimates. ## Setup **Claude Code:** ​```bash claude mcp add --transport http beforeyouship https://beforeyouship.dev/api/mcp ​``` **Cursor / other clients** — add a remote server: ​```json { "mcpServers": { "beforeyouship": { "type": "streamable-http", "url": "https://beforeyouship.dev/api/mcp" } } } ​``` Add an `Authorization: Bearer bys_...` header with a Pro key for the full catalog. ## Try it > Estimate the monthly cost of a RAG pipeline at 10,000 requests/day

a day ago