CFR Refs Diagram

What it does

CFR Refs Diagram renders interactive, styled HTML lifecycle diagrams paired with US Code of Federal Regulations (CFR) reference data. Click any node in the diagram to see the relevant CFR regulatory text in a tooltip popup. When used in an MCP Apps-capable host, the diagram renders inline in the conversation — no separate file to open. The tool accepts a JSON config defining diagram type, content, and metadata, and returns a fully self-contained HTML file.

Key features

• Inline rendering — Diagrams appear directly in the chat UI in MCP Apps-capable hosts (Claude, VS Code, etc.)
• Clickable CFR nodes — Each node links to the relevant Code of Federal Regulations text via interactive popups
• Mermaid + custom HTML — Supports both Mermaid diagrams and custom styled lifecycle diagrams
• Self-contained output — Generates a single HTML file with all assets bundled; works offline
• Multiple install paths — Use as a CLI tool, MCP tool, MCP App, Claude Code skill, or Claude.ai project skill

Installation

Clone and build:

git clone git@github.com:paulopes/cfr-refs.git && cd cfr-refs
npm install
npm run build

Claude Desktop (claude_desktop_config.json) — stdio transport:

npm run install-mcp:claude-desktop

Or manually add:

{
  "mcpServers": {
    "cfr-refs": {
      "command": "node",
      "args": ["/path/to/cfr-refs/main.mjs", "--stdio"]
    }
  }
}

VS Code Copilot (settings.json):

npm run install-mcp:vscode

HTTP transport (for browser-based or remote clients):

node main.mjs

Server runs at http://localhost:3001/mcp. Add as remote MCP URL in Claude.ai Settings → Integrations (requires public URL for cloud-hosted clients).

Supported hosts

Claude Desktop, Claude Code, VS Code, Cursor, Windsurf, Gemini CLI — all explicitly listed in the README with automated install commands.