React-Sentinel v0.1.0-alpha

[edgarbnt]

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

New Contributors

• @edgarbnt made their first contribution in feat: initialize React-Sentinel MCP server with baseline tools and pr… #1
• @Copilot made their first contribution in Harden runtime metadata, bound console event memory, and remove legacy diagnostics artifacts #29

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

---

This discussion was created from the release React-Sentinel v0.1.0-alpha.