Skip to content

React-Sentinel v0.1.0-alpha

Latest
Latest

Choose a tag to compare

View all tags
@edgarbnt edgarbnt released this 12 May 08:31
· 2 commits to main since this release
v0.1.0-alpha
0f19637
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

React-Sentinel is an experimental MCP server that gives AI coding agents browser runtime awareness for debugging React applications.

Instead of guessing from source code alone, agents can inspect live React runtime state, capture console and network errors, replay user interactions, validate outcomes with assertions, and test runtime patches inside a sandbox.

Highlights

  • MCP server for AI coding agents
    Exposes React debugging tools over stdio MCP for compatible clients.

  • Runtime React inspection
    Detect React, inspect component trees, targeted components, props, simple hooks, context values, and runtime state.

  • Console and network diagnostics
    Capture console errors, warnings, JavaScript exceptions, fetch/XHR requests, HTTP failures, and runtime timelines.

  • Replay sandbox
    Launch an isolated Playwright browser, navigate to a target URL, replay interaction sequences, and collect runtime evidence.

  • Assertions and validation reports
    Validate DOM, React runtime, console, and network expectations, then generate structured JSON and readable Markdown reports.

  • Shadow sandbox patch validation
    Apply temporary runtime patches inside the replay sandbox, rerun scenarios, execute assertions, and return a validation verdict without modifying local source files.

  • Render loop diagnostics
    Count renders, detect render hotspots, trace hook changes, and help diagnose infinite render loops or unstable dependencies.

  • Hydration and async diagnostics
    Detect hydration mismatch signals and trace async request ordering or race-condition style issues.

  • CLI and MCP integration
    Provides CLI commands and an MCP stdio entry point for local usage and editor/agent integrations.

Installation

npx -y @edgarbrunet/react-sentinel --help

Run the MCP server:

npx -y @edgarbrunet/react-sentinel mcp

Example MCP configuration:

{
  "mcpServers": {
    "react-sentinel": {
      "command": "npx",
      "args": ["-y", "@edgarbrunet/react-sentinel", "mcp"],
      "env": {}
    }
  }
}

For Zed-style MCP configuration:

{
  "react-sentinel": {
    "command": "npx",
    "args": ["-y", "@edgarbrunet/react-sentinel", "mcp"],
    "env": {}
  }
}

Package

This package is published as:

@edgarbrunet/react-sentinel

The unscoped package name react-sentinel is owned by another project and should not be used for installing this tool.

Project Status

This is an alpha release.

React-Sentinel is usable for local experiments and MCP-compatible agents, but APIs, commands, plugin integrations, and packaging may change before a stable v1.0 release.

Works With

React-Sentinel is designed for MCP-compatible and agentic development environments, including:

  • Claude Code
  • Claude Desktop
  • Zed
  • Cursor
  • Windsurf
  • Cline
  • GitHub Copilot / Copilot CLI, via CLI or future plugin integration
  • Gemini CLI, via CLI or MCP-compatible workflows
  • Generic MCP clients

Support levels may vary depending on each tool’s MCP/plugin capabilities.

Known Limitations

  • Some integrations still require manual MCP configuration.
  • Native Claude Code and Copilot CLI plugin packaging is planned separately.
  • Browser attach mode may require Chrome to be launched with a CDP endpoint.
  • Shadow patching is runtime-only and does not modify local source files.
  • React Fiber and hook inspection are best-effort and may vary by React version and app structure.
  • This release is intended for experimentation and feedback, not production-critical workflows.

Recommended First Test

  1. Start a local React app.
  2. Configure React-Sentinel as an MCP server.
  3. Ask your agent to inspect the runtime, capture console/network events, or replay a small interaction.
  4. Review the generated diagnostics or validation report.

Feedback

Feedback, bug reports, integration requests, and compatibility reports are welcome.

Good first areas for contributions:

  • MCP setup guides for different editors and agents
  • Cursor / Windsurf / Zed integration examples
  • Additional React and Next.js demo scenarios
  • Better troubleshooting for Windows, WSL, and browser CDP setup
  • Documentation improvements
  • Agent integration experiments

What's Changed

  • feat: initialize React-Sentinel MCP server with baseline tools and pr… by @edgarbnt in #1
  • chore: install project dependencies in node_modules by @edgarbnt in #2
  • feat: implement get_runtime_status and update BLUEPRINT.md with attac… by @edgarbnt in #3
  • docs: finalize Sprint 1 documentation, test scenarios, and sprint sum… by @edgarbnt in #4
  • feat: add TodoList and TodoItem components to test app by @edgarbnt in #5
  • Revert "feat: add TodoList and TodoItem components to test app" by @edgarbnt in #6
  • S2/epic 5 by @edgarbnt in #8
  • Reapply "feat: add TodoList and TodoItem components to test app" by @edgarbnt in #7
  • feat: implement targeted component inspection (SCRUM-9) by @edgarbnt in #9
  • feat(diagnostics): implement stateful console event capture (SCRUM-8) by @edgarbnt in #10
  • S33/epic 13 14 by @edgarbnt in #11
  • feat(demo): implement full validation loop scenario (SCRUM-15) by @edgarbnt in #12
  • Add network event tracking for fetch and XMLHttpRequest by @edgarbnt in #13
  • feat: add runtime network diagnostics by @edgarbnt in #14
  • Add runtime timeline feature for unified event tracking by @edgarbnt in #15
  • feat: add demo app api mocks by @edgarbnt in #16
  • Add support for checking Chrome CDP attach status by @edgarbnt in #17
  • Add support for listing and selecting CDP tabs by @edgarbnt in #18
  • Add GitHub instructions and enhance BrowserManager runtime handling by @edgarbnt in #19
  • Add explicit consent flow for live browser tab selection by @edgarbnt in #20
  • Update documentation and add Sprint 6 report and implementation of thge by @edgarbnt in #21
  • feat: [SCRUM-109][SCRUM-108][SCRUM-104][SCRUM-106] add replay sandbox… by @edgarbnt in #22
  • Sprint/sprint 8 by @edgarbnt in #23
  • feat: [SCRUM-177][SCRUM-175][SCRUM-174][SCRUM-176] deliver sprint 9 s… by @edgarbnt in #24
  • Benchmarks/mcp e2e by @edgarbnt in #25
  • Sprint/sprint 10 by @edgarbnt in #26
  • Sprint/sprint 11 by @edgarbnt in #27
  • Sprint/sprint 12 by @edgarbnt in #28
  • Harden runtime metadata, bound console event memory, and remove legacy diagnostics artifacts by @Copilot in #29
  • Sprint/sprint 13 by @edgarbnt in #30
  • Sprint/sprint 14 agent pack by @edgarbnt in #31
  • Sprint/sprint 15 by @edgarbnt in #32

New Contributors

  • @edgarbnt made their first contribution in #1
  • @Copilot made their first contribution in #29

Full Changelog: https://github.com/edgarbnt/ReactSentinel/commits/v0.1.0-alpha

Contributors

edgarbnt
Assets 2
Loading
0 Join discussion