● verbatim-mcp 1.0.0 on npm

Your agent can write anything and see nothing.

Verbatim is an MCP server that reads the real design of a live web page and hands it to Cursor, Claude Code, Codex, Windsurf or VS Code: the CSS that actually applies with the cascade resolved, the tokens, the components, the assets. Exact values, checked against the page they came from.

Set it up See the nine tools

Pick your agent. Paste one line.

It speaks MCP over stdio, so anything that speaks MCP can use it. npx fetches the server the first time your client starts it, and there is nothing else to install.

One command, from any directory.


            
Check it took with claude mcp list. The nine tools then appear in /mcp.

          

          
          
          
          
          
          
        

      

    

  






  

    
Eight things your agent can ask for.

    
The same engine the browser extension runs, so what an agent gets back is exactly what you would see picking that element yourself. You never call these yourself: you say what you want and your agent picks. Six things people ask for, and what happens when they do.

    

      

        

          
get_design_contextthe one to reach for first

          
Buildable markup, every rule that styles the subtree in cascade order with layers preserved, the tokens it reads, its states, its behaviour at each breakpoint, and its contrast.
url, selector, task, viewport, depth, include_markup

        

        

          
get_componentas code, in your stack

          
One part of a page as HTML and CSS, or as a React, Vue, Svelte, Astro or Angular component. Optionally converted to Tailwind.
url, selector, framework, styling

        

        

          
get_design_systemthe whole page at once

          
Palette ordered by how much of the screen each colour covers with its role named, type scale, spacing, radii, shadows, breakpoints, and the site’s own custom properties.
url, format: summary | tailwind | css | design-tokens | json

        

        

          
get_design_prompta whole site, not one part of it

          
One prompt that rebuilds a site’s look: the palette as :root custom properties with each colour’s role and coverage, the faces it actually renders in and where they are served from, the CSS of the components that repeat, every section in order with its layout and spacing, the assets it loads, and its transitions and keyframes.
url, task, components, viewport

        

        

          
verify_extractionit checks its own inputs

          
Renders the extraction in isolation and reports every computed style that differs from the live page. A model that can check its inputs need not trust them.
url, selector

        

        

          
get_assetsevery image on the page

          
Every image, SVG, CSS background and video poster, largest first, with oversized sources flagged.
url

        

        

          
screenshotwhen the picture helps too

          
A page or one element as a PNG. Useful alongside the context: the values say what, the picture says why.
url, selector, full_page

        

        

          
list_handoffswhat you picked by hand

          
Captures sent from the browser extension, for the pages a headless browser cannot reach.
no arguments

        

        

          
get_handoffand reads it

          
Whatever you picked by hand, in whatever state you picked it, waiting for the agent to read.
id, optional

        

      

    

  






  

    
It checks its own work.

    
Every other tool in this category asks you to trust its output. This one renders what it extracted in an isolated frame, diffs every computed style against the live element, and reports what disagrees before your agent writes a line.

    

      

        
Without it

        
The agent builds from whatever it was handed. A wrong shadow or a rounded radius surfaces in review, or in production, and nobody can say which step lost it.

      

      

        
With it

        
verify_extraction answers 22 of 22 properties match, or names the ones that do not and what they should have been.

        
A model that can check its inputs need not trust them.

      

    

  






  

    
The pages a headless browser cannot reach.

    
Your agent drives a browser with no session and no hands. It cannot log in to your dashboard, and it cannot see a dropdown that exists only while you hold it open. So pick it yourself in the browser extension, press G, and the agent reads it with get_handoff. The bridge listens on loopback only and accepts the extension on sight, because a web page cannot set the Origin header that identifies one. Nothing to paste.

    

      
The handoff has its own page, with a recording of the loop end to end: Send to agent. So does the whole-page brief the server returns from get_design_prompt: Design prompt, and the token extraction behind get_design_system: Design system.

      
Get the extension, free All thirteen tools

    

  






  

    
Questions about the server

    
What it does, what it needs, and what it costs.

    

      

        

          What is the Verbatim MCP server?
          
A local server that gives a coding agent nine tools for reading the design of a live web page: the CSS that actually applies with the cascade resolved, the design tokens, the components, a whole site’s look as one prompt, the assets, and a verification tool that diffs an extraction against the page it came from. It speaks the Model Context Protocol over stdio, so any MCP client can use it.

        

        

          Which clients work with it?
          
Claude Code, Claude Desktop, Cursor, Codex CLI, Windsurf and VS Code with Copilot in agent mode, plus anything else that speaks MCP over stdio. ChatGPT itself only connects to MCP servers reachable over HTTP, so a local server is out of its reach; Codex CLI is the local path for OpenAI users.

        

        

          Why not just give the agent a screenshot?
          
A screenshot has no values in it. The model cannot tell #2E6FF2 from #2F6DF6, cannot see what happens on hover, and cannot know what the layout does at another width, so it invents all three and you find out in review. Pasting the stylesheet has the opposite problem: thousands of rules with no way to tell which applied.

        

        

          Does it need a browser installed?
          
It uses Google Chrome if you have it, and Microsoft Edge if you have that instead. Installing the package downloads no browser of its own. If you have neither, run npx playwright install chromium once and it will use that.

        

        

          Can it read pages behind a login?
          
Not on its own, and no headless browser can. That is what the browser extension's handoff is for: you pick the element yourself in your own logged-in session, press G, and the agent reads it with get_handoff. Same for anything that only exists while a menu is held open.

        

        

          What does it cost?
          
Free for 24 hours from first run, then a one time 29 USD key. No subscription. The browser extension is free forever and needs no key at all.

        

        

          Does the licence check phone home?
          
No. A key is an Ed25519 signature over a tiny payload, and the server carries the public half, so it is verified offline. Activation contacts nothing and works with no network at all.

        

        

          Does anything get sent to your servers?
          
There are no servers of ours. The server runs on your machine under your account and drives a local browser. The only outbound requests are to the pages you ask it to read and the origins that served their stylesheets.