Package Exports
- @explainui/mcp
- @explainui/mcp/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@explainui/mcp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@explainui/mcp
ExplainUI MCP for agent-driven UX QA.
It captures screenshots, runs UX analysis against your project constraints, and guides the agent with strict next commands.
Input contract: pass both
project_idandpage_keyon every tool call.
Installation
npm install -g @explainui/mcpChromium is installed automatically via Playwright during postinstall.
Important workflow update:
explainui_new_runnow performs baseline analysis automatically. You normally do not need to callexplainui_baseline_analysisseparately unless retrying/refreshing baseline.
Quick Setup
Claude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"explainui": {
"command": "explainui-mcp",
"env": {
"EXPLAINUI_LICENSE_KEY": "ek_live_your_key_here"
}
}
}
}Cursor
Add to .cursor/mcp.json:
{
"mcpServers": {
"explainui": {
"command": "explainui-mcp",
"env": {
"EXPLAINUI_LICENSE_KEY": "ek_live_your_key_here"
}
}
}
}GitHub Copilot (VS Code)
Add to VS Code settings.json or .vscode/mcp.json:
{
"mcp": {
"servers": {
"explainui": {
"command": "explainui-mcp",
"env": {
"EXPLAINUI_LICENSE_KEY": "ek_live_your_key_here"
}
}
}
}
}Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"explainui": {
"command": "explainui-mcp",
"env": {
"EXPLAINUI_LICENSE_KEY": "ek_live_your_key_here"
}
}
}
}Cline
Add a server with command explainui-mcp and set EXPLAINUI_LICENSE_KEY.
Environment Variables
| Variable | Required | Default | Description |
|---|---|---|---|
EXPLAINUI_LICENSE_KEY |
Yes | — | License key from explainui.com/settings |
EXPLAINUI_API_HOST |
No | https://api.explainui.com |
Override API host (self-hosted/staging) |
Available Tools (8)
| Tool | Purpose |
|---|---|
explainui_status |
Entry point: attach project/page context and fetch strict next commands |
explainui_new_run |
Create run and auto-run baseline analysis |
explainui_baseline_analysis |
Optional manual baseline retry/refresh before iteration phase |
explainui_begin_iteration_phase |
Initialize iteration phase / branch metadata |
explainui_new_iteration |
Analyze updated page state for each fix iteration |
explainui_goto_checkpoint |
Roll back code and iteration history to a checkpoint |
explainui_finish_run |
Close run and record merged checkpoint |
explainui_close_project |
End session and release resources |
Typical Workflow (Recommended)
1) explainui_status({ project_id, page_key })
2) explainui_new_run({ project_id, page_key })
- baseline analysis runs automatically here
3) explainui_begin_iteration_phase({ project_id, page_key })
4) explainui_new_iteration({ project_id, page_key, changes_made })
5) repeat step 4 until done
6) optional: explainui_goto_checkpoint({ project_id, page_key, checkpoint })
7) explainui_finish_run({ project_id, page_key, merged_iteration })
8) explainui_close_project({ project_id, page_key, reason })When to call explainui_baseline_analysis manually
Use it only when:
- automatic baseline from
explainui_new_runfailed (e.g. page unavailable) - you changed constraints/intended-issue decisions before starting iterations and want a fresh baseline
Troubleshooting
- "No page attached" → run
explainui_status({ project_id, page_key })first. - "Iteration phase not started" → run
explainui_begin_iteration_phase({ project_id, page_key }). - Baseline capture failed in
new_run→ retry withexplainui_baseline_analysis({ project_id, page_key }).
Development
cd packages/explainui_mcp
npm install
npm run build
npm test
npm run devLicense
MIT