axure-html-mcp

# Axure HTML MCP > Custom MCP server to directly read and analyze Axure HTML Export files with AI (gemini-cli / Claude Code)    --- # Axure HTML Export MCP Guide > **Version**: v2.0 > **Target**: Custom MCP server to enable direct analysis of Axure RP exported HTML files by AI (gemini-cli / Claude Code) --- ## Overview Axure Share requires login and lacks an official API, making it difficult to integrate with AI. This MCP parses Axure HTML Export files, allowing AI to directly read and analyze the contents. ``` Axure RP → HTML Export → axure-mcp-server.mjs → AI (gemini / Claude Code) ``` --- ## Comparison with Official Axure MCP In February 2026, Axure released an official MCP as an alpha version. The two MCPs are complementary, targeting different file types and usage environments. | Item | Official Axure MCP | This MCP (axure-html-mcp) | |------|:---:|:---:| | Target File | Axure Cloud (online) | Axure HTML Export (local file) | | Authentication | Axure account login required | Not required | | Sharing Settings | File must be public | No restrictions (local) | | Read/Write | Read-only | Read-only | | Supported Files | Whiteboard, Document | HTML Exported Prototype | | RP Prototype | ❌ Not supported | ✅ Supported | | Release Status | Alpha (February 2026) | Stable | | Installation | URL registration | npm installation required | | Offline Usage | ❌ Not possible | ✅ Possible | | Internal Secure Files | Public setting required (security risk) | ✅ Local file usage | **When to use this MCP?** - To analyze Axure RP prototype planning documents with AI - For files on internal networks or VPN environments that cannot be uploaded to external clouds - When only local HTML Export files are available, without an Axure Cloud account - When official MCP does not support RP prototype screen analysis --- ## Prerequisites ### 1. Export HTML from Axure Axure RP menu: **Publish → Generate HTML Files** Exported folder structure: ``` Planning Document/ ├── Cover.html ├── Main.html ├── Payment.html ├── Flow.html ├── Index.html ← Internal use (MCP automatically excludes) ├── Start.html ← Internal use (MCP automatically excludes) └── ... ``` ### 2. Dependency Installation ```bash # Create project folder and install packages mkdir axure-mcp && cd axure-mcp npm init -y npm install cheerio @modelcontextprotocol/sdk ``` ### 3. Required Environment - Node.js v18 or higher - gemini-cli or Claude Code CLI --- ## Installation ### Server File Placement Save the `axure-mcp-server.mjs` file in a desired location. ``` Example: D:\ai-agent\.gemini\axure-mcp-server.mjs ``` Modify the path settings at the top of the file according to your environment: ```js // Top configuration values in axure-mcp-server.mjs const LOCAL = '/your/path/axure-mcp/node_modules'; // cheerio installation path const DEFAULT_DIR = '/your/path/reports'; // Default planning document search path ``` ### gemini-cli Registration `~/.gemini/settings.json` (Windows: `C:\Users\{username}\.gemini\settings.json`): ```json { "mcpServers": { "axure": { "command": "node", "args": ["D:\\ai-agent\\.gemini\\axure-mcp-server.mjs"] } } } ``` ### Claude Code Registration `~/.claude.json` (WSL2/Linux: `~/.claude.json`): ```json { "mcpServers": { "axure": { "command": "/usr/bin/node", "args": ["/home/username/.mcp/axure-mcp-server.mjs"] } } } ``` --- ## Tool References ### `scan_projects` — Planning Document Scanning Automatically finds Axure HTML export folders within a specified directory (and up to two levels deep). | Parameter | Type | Required | Description | |---------|------|------|------| | `base_dir` | string | ❌ | Top-level directory path to search. Defaults to `DEFAULT_DIR` if omitted | **Usage Example** ``` "How many planning documents are in the reports folder?" "Show me the list of planning documents in D:\projects" ``` **Output Example** ``` Found 2 Axure planning documents: 1. Market Plus Paid Content Planning (22 pages) ← Currently active Path: D:\reports\Market Plus Paid Content Planning 2. New Service Planning (15 pages) Path: D:\reports\New Service Planning ``` --- ### `list_pages` — Page List Inquiry Returns the entire page list and screen IDs of a planning document. | Parameter | Type | Required | Description | |---------|------|------|------| | `export_dir` | string | ❌ | Planning document folder path. Automatically applies the last used path if omitted | **Usage Example** ``` "Show me the page list for this planning document" "Tell me the page list for D:\reports\New Planning Document" ``` **Output Example** ``` 📁 Market Plus Paid Content Planning Total 22 pages: [PRJ-0000] Cover [PRJ-0000_01] Main [PRJ-0000_01] Content Menu [PRJ-0000_02] Product Detail [PRJ-0000_02] Payment Before ... ``` --- ### `get_page` — Page Detailed Content Extracts planning text and widget comments for a specific page. Hidden elements (`display:none`) are automatically excluded. | Parameter | Type | Required | Description | |---------|------|------|------| | `page_name` | string | ✅ | Page name (partial match allowed) | | `export_dir` | string | ❌ | Planning document folder path | **Usage Example** ``` "Show me the planning content for the payment page" "Explain the information input screen" "Analyze the main page" ``` **Output Example** ``` ═══ Payment Before [PRJ-0000_02] ═══ ▶ Planning Content 1. PRJ-0000_02 2. Payment Before 3. Product Name 4. Point Balance 5. Payment Method Selection ... ▶ Widget Comments • Clicking the payment button proceeds with the payment process ``` --- ### `search` — Full Search Finds pages and contexts containing a keyword. | Parameter | Type | Required | Description | |---------|------|------|------| | `keyword` | string | ✅ | Keyword to search | | `export_dir` | string | ❌ | Planning document folder path | **Usage Example** ``` "Find all pages related to points" "Which page has a payment failure case?" "Find pages mentioning login?" ``` **Output Example** ``` "Point" — Found on 4 pages ▶ Payment Before [PRJ-0000_02] ...Check point balance and... ...Popup displayed if point insufficient... ▶ My Menu [PRJ-0000_02] ...Point balance... ``` --- ### `get_summary` — Planning Document Summary Automatically categorizes and summarizes the entire planning document. Extracts project name, release date, and author from the cover page. | Parameter | Type | Required | Description | |---------|------|------|------| | `export_dir` | string | ❌ | Planning document folder path | **Usage Example** ``` "Give me a summary of this planning document" "Summary of D:\reports\New Planning Document" ``` **Output Example** ``` ══════════════════════════════════════════ 📋 Market Plus Paid Content Planning v0.1 ══════════════════════════════════════════ Release: September 2025 Author: PM/Planning Lee Planning Total Pages: 22 📂 Planning Document • Cover [PRJ-0000] • History • Overview • Task Details • FLOW 🎯 Content Screen • Main [PRJ-0000_01] • Content Menu [PRJ-0000_01] • Product A [PRJ-0000_02] • Product B [PRJ-0000_02] ... 💳 Purchase/Payment Flow • Information Input [PRJ-0000_02] • Payment Before [PRJ-0000_02] • Payment [PRJ-0000_02] • Payment Result [PRJ-0000_02] 👤 My Page • My Menu [PRJ-0000_02] • Purchased Content [PRJ-0000_02] ``` --- ### `get_flow` — Screen Flow Structure Extracts the connection structure between screens from the `flow.html` page. Valid only when a Flow diagram is drawn in Axure. | Parameter | Type | Required | Description | |---------|------|------|------| | `export_dir` | string | ❌ | Planning document folder path | --- ## Automatic Path Memory Function Once `export_dir` is specified, it is stored in `axure-last-used.json`, allowing it to be omitted from the next call. ``` # Initial: Specify path "Analyze D:\reports\New Planning Document" → get_summary(export_dir: "D:\reports\New Planning Document") → Path saved # Subsequent: Path can be omitted "Show me the payment page" → get_page("Payment") ← Automatically use saved path ``` Path priority: ``` Specified export_dir at call > axure-last-used.json > DEFAULT_DIR (default) ``` --- ## Usage Examples ### Planning Document Onboarding ``` 1. "Show me the planning document list" → scan_projects 2. "Summarize the overall structure" → get_summary 3. "Explain the payment flow screens" → get_page (each screen) ``` ### Planning Review ``` "How many pages have error handling cases?" → search "error" "Which screens have a cancel button?" → search "cancel" "List pages containing PRJ-0000_02" → search "PRJ-0000_02" ``` ### Integration with Other MCPs ``` "Analyze the payment flow of this planning document and create Jira issues" → get_page("Payment Before") + get_page("Payment") → Create Jira issue with jira MCP "Save this planning document summary to Google Docs" → get_summary() → Create document with google-drive MCP "Notify Slack that planning review is complete" → Send message with slack MCP ``` --- ## Limitations | Item | Description | |------|------| | Supported Format | Only Axure HTML Export is supported (`.rp` binary files cannot be directly parsed) | | Axure Version | Supports RP 8 / 9 / 10 HTML Export | | Images | Text within images cannot be read (only Axure text widgets are extracted) | | Interactions | Button click actions, conditional logic, etc., are not extracted | --- ## WSL2 / Linux Environment Adaptation Modify the path at the top of `axure-mcp-server.mjs` to Linux format. ```js // Windows const LOCAL = 'D:/ai-agent/.gemini/axure-mcp/node_modules'; const DEFAULT_DIR = 'D:/ai-agent/agent-team/reports'; // WSL2 / Linux (replace with npm root -g result) const LOCAL = '/usr/lib/node_modules'; const DEFAULT_DIR = '/home/username/reports'; ``` `~/.claude.json` settings: ```json { "mcpServers": { "axure": { "command": "/usr/bin/node", "args": ["/home/username/.mcp/axure-mcp-server.mjs"] } } } ``` --- ## File Structure ``` axure-mcp/ ├── axure-mcp-server.mjs ← MCP server main body ├── axure-last-used.json ← Automatically save last used path (gitignore recommended) └── node_modules/ └── cheerio/ ← HTML parser ```