Happy slice of mcp pizzaMCP.pizza

vite-react-mcp

MCP.Pizza Chef: jazelly

Point at anything on a running React page and this add-on works out which component drew it, which file that component lives in, and what surrounds it, then hands all of that to your coding assistant as plain text. A tuning panel turns colour, font, spacing, and size choices into a written change request attached to the right file. It only looks things up and reports back, leaving the actual edits to your assistant. Now published as Agentic React, with versions for Vite, Webpack, and Next.js.

Coding
Images/Design

Use This MCP server To

Point at a broken button and get its exact source file Ask for a colour change on the element I just clicked Select several parts of a page for one request Skip the screenshot and hand my agent plain text instead Find which component is behind an unfamiliar bit of the page

README

Agentic React

English · 简体中文

Help coding agents find and change the React source behind a UI with fewer tokens and less search time—without requiring a multimodal model.

Select one or many elements in the browser. Agentic React turns each selection into source-aware text or JSON containing the React component, stable selector, source file, nearby code, owner trace, and any prepared UI tuning prompts.

Measured on Real Source-Location Tasks

In a controlled three-area benchmark, both input methods found the correct React source. Replacing cropped screenshots with pasted Agentic React UI context reduced the tokens and observed runtime used by the agent to locate that source:

Measured result Cropped screenshots Agentic React context Reduction
Total tokens 388,694 180,302 53.6%
Observed source-location runtime 84.63s 66.20s 21.8%
API-equivalent cost $0.3699 $0.1254 66.1%

This is measured evidence from three UI areas, not a general guarantee. See the benchmark write-up and raw evidence manifest for the controlled prompt, full matrix, hashes, pricing assumptions, and limitations.

Why Agentic React

  • Spend fewer tokens locating source: give the agent a component, selector, source location, and nearby code instead of making it infer all of that from pixels.
  • No multimodal model required: copied context is structured text or JSON, so source-location workflows do not depend on screenshot interpretation or vision-capable models.
  • Works across the React ecosystem: use a bundler-agnostic core with adapters for Vite, Webpack, and Next.js, plus Nx/module-federation playgrounds.
  • Built for agent handoff: copy context directly or expose it through local MCP tools, with the selected UI and its source kept together.
  • Prepared UI tuning prompts: choose colors, typography, dimensions, spacing, or layout in the tuning modal. Agentic React places the resulting change request beside the exact source location the agent should edit.

Copy a Change Request, Not Just a Selector

The tuning modal turns choices such as a new text color or font family into explicit instructions. The copied payload carries those instructions with the component and source trace:

vite-react-mcp FAQ

Can I use this to change my app's design directly?
Not on its own. It finds and describes the right place in your code and writes out the change you asked for; your coding assistant is what actually edits the file.
Is it only for Vite?
No longer. The project has been renamed Agentic React and now ships versions for Vite, Webpack, and Next.js under a shared core.
Do I need an assistant that can see images?
No, and that is the main point. Everything it hands over is text, so a model with no picture reading works fine.
Do I need a key or an account?
No. It runs alongside your local development server and needs no sign-in.
How hard is the setup?
This one is for developers. You install a package into your own React project and add a line to its build configuration.
Will it end up in my live website?
No. It is a development-time tool and the adapters deliberately keep it out of production builds.
Is it actively maintained?
Yes, the code was updated within the past couple of weeks.