Reproleaf

One MCP toolkit for frontend checks and AI agents

Give your agent working rules, reproducible examples and independent checks. One toolkit for Vue, React, Three.js, Phaser and HTML, with inspectable evidence for a fix.

Reproleaf / Developer tools / Alpha

Download MCP and cases ↗Explore the cases ↓Connect a client ↓

From a symptom to a verified fix

An agent can change CSS, but a convincing fix needs a reproduced failure and an independent expectation. Each case includes symptoms, steps, a small example, acceptance conditions and a fix approach. Use these with an existing project rather than generating another starter template.

Project checks: retain and compare evidence

Import a report from the adapter CLI, retain it locally and compare a repeat run. This panel does not run or certify your application in the browser.

Project and history

On this device

Save a project once to retain subsequent completed checks. Save draft edits with the Save button. Data belongs to this browser and site origin, with no server upload.

History and comparison

    Up to 20 projects and the latest 15 checks per project. Browser cleanup or private browsing can remove history. Exports contain your inputs and reports: review them before sharing.

    node src/cli.mjs check --adapter local-page.json

    A check library inside one MCP server

    Search by symptom or stack. These examples and acceptance conditions support the agent’s workflow. The library grows without a separate installation for each framework.

    A verifiable example library. Four entries per page.

    • vueModal close button becomes unreachable after scrolling

      The close button remains visible and can be activated after reading the bottom of the panel.

      modal-close-unreachable

      node src/cli.mjs verify --case modal-close-unreachable

      MCP get_case and get_case_source return steps, clean example source and limitations. Your local agent runs the check.

    • reactReverse gestures stay trapped at a contact panel boundary

      A reverse gesture at the panel boundary scrolls the surrounding document toward the preceding section.

      nested-scroll-trap

      node src/cli.mjs verify --case nested-scroll-trap

      MCP get_case and get_case_source return steps, clean example source and limitations. Your local agent runs the check.

    • threeA full-screen canvas exposes a gap after viewport growth

      The rendered canvas continues to cover its full-screen host after viewport resizing.

      canvas-resize-gap

      node src/cli.mjs verify --case canvas-resize-gap

      MCP get_case and get_case_source return steps, clean example source and limitations. Your local agent runs the check.

    • phaserA game canvas blocks vertical page gestures

      A game that only needs tap input allows the page to scroll vertically over its canvas.

      canvas-touch-trap

      node src/cli.mjs verify --case canvas-touch-trap

      MCP get_case and get_case_source return steps, clean example source and limitations. Your local agent runs the check.

    1

    An agent workflow with MCP

    1. list_cases: find a symptom or framework.
    2. get_case and get_case_source: inspect steps, limitations and clean example source.
    3. Use mobile-web-review to prepare an adapter and run the CLI against an authorized page.
    4. Save observations and repeat the check. A setup error is not a pass.
    node src/cli.mjs skill install --skill mobile-web-review --dest /path/to/project/.agents/skills
node src/cli.mjs check --adapter examples/local-page.json
node src/cli.mjs verify --all

    For developers, teams and agent builders

    Use the kit when a failure appears only in a narrow viewport, a close control escapes a modal or a scene traps a gesture. Explicit acceptance and evidence help explain a fix to a reviewer and prevent a regression. There is not yet a specialized skill for every framework: one mobile-web-review workflow uses framework-specific cases.

    What the evidence establishes

    Six synthetic cases define 24 broken/fixed classifications across two Chromium viewport sizes. An independent controlled suite first classified 15/16, then 16/16 after a fix on the same suite. That is a regression result, not a fresh independent benchmark. Physical Safari/iOS, WebGL camera correctness and benefits on unseen projects require separate evaluation.

    Open tooling, private project source

    Cases are written separately. Client project source, keys, databases and original editorial documents are not published. Contribute a minimal synthetic example with an independently testable expectation.

    One kit, different clients

    Connect your agent

    Choose your client. Editorial checks and frontend cases share one toolkit; each client has its own connection settings.

    Codex

    Extract the kit, install Node.js 22+ and run npm ci –ignore-scripts in the kit directory. Replace the example with your absolute path. Commands register MCP in your client; this page does not execute them.

    codex mcp add reproleaf -- node "C:/tools/reproleaf/src/mcp.mjs"
codex mcp list
    Official documentation ↗

    After connecting, ask the agent to call list_workflows or list_cases. Use review_editorial_packet and audit_blog_links for editorial work; get_case and get_case_source for frontend cases. The toolkit does not automatically gain access to your projects or upload their source.

    Working on content? Open the SEO and internal-link workspace.

    Questions about the checker

    Which sites and frameworks does Reproleaf support?

    Content checks accept Markdown and a common JSON inventory independently of the CMS. A local exporter supports static HTML builds from Astro and other generators. WordPress is one adapter. UI checks include Vue, React, Three.js, Phaser and plain HTML cases.

    Do I need a different MCP server for each framework?

    No. One Reproleaf MCP server exposes the workflows, searchable cases and checking tools. The agent selects relevant material. Vue, React and editorial checks do not require separate MCP installations.

    How do MCP, skills, the API and the workspace differ?

    MCP exposes tools and reference material to an agent. A skill describes the working process and limitations. The API provides programmatic access to the same core. The workspace supports manual inputs and reports. These are different interfaces to one toolkit.

    Is it a model trained on projects that prevents every bug?

    No. It is a toolkit of generalized working rules and separately written reproducible examples, not a separately trained model or a guarantee. Cases help define an expectation and verify a fix. Relevance must be checked for each project, and failures outside the current coverage can remain.

    Do I have to upload my project source?

    No. Browser checks process the supplied draft and inventory locally. The local CLI and MCP use explicitly supplied inputs and bundled materials. Private client project source, keys and databases are not included in the public toolkit.

    Can I connect Claude, Codex, Gemini, ChatGPT or Grok?

    Local clients have stdio MCP setup instructions. Web clients require a reachable remote MCP endpoint or a supported tunnel. A public Reproleaf endpoint is not yet available, so explicit report handoff is available for those chats. Check the tab for your client.

    Does the workspace already run a generative AI model?

    Structural checks currently run through the local core, not a generative model. You can hand a report to your chosen AI chat. A hosted AI review with an agreed provider and daily spending limit is planned separately and is not enabled yet.

    How can I use a report with my team or client?

    Download JSON for an agent or an HTML report for reading and printing. HTML attributes the report tool to Reproleaf. Downloads are not automatically published. Review reports for private URLs and data before sharing.

    Can I embed the workspace in my site?

    Yes. Host the static workspace on your own HTTPS domain and embed it with an iframe. The local HTTP API is for your integrations and binds to 127.0.0.1 by default. Setup and examples are included in the archive.

    Does the WordPress adapter edit articles or insert links?

    No. It analyzes an inventory of published content in a bundled local admin workspace and exports JSON. It does not edit posts, replace Yoast or inject hidden backlinks.

    Will the case library grow?

    New cases can add separately written reproductions and independent acceptance checks. Search, filters and pagination keep the catalogue compact as it grows. Case count alone does not establish coverage quality.