Reftrixmcp

ReftrixMCP

Web design knowledge base platform -- layout analysis, motion detection, and quality evaluation via MCP tools.

For frontend engineers, designers, and AI-agent builders who want to analyze real websites and retrieve reusable UI patterns via Claude or any MCP client.

Japanese / 日本語の概要

ReftrixMCPは、Webデザインパターンをベクトル検索(pgvector HNSW)と RAGで検索可能なナレッジベースに集約し、MCPツール経由でClaude等の AIエージェントと統合するプラットフォームです。

主要機能: レイアウト分析 / モーション検出 / 品質評価 / セマンティック検索 / 横断検索 / 画像類似検索 / レスポンシブ解析 / パーツ分析 / レート制限 / 検索キャッシュ / BullMQ UI / SBOM

27 のMCPツールを提供: Layout(4) / Motion(2) / Quality(1) / Page(3) / Narrative(1) / Background(1) / Responsive(2) / Part(3) / System(1) / Search(1) / Design(3) / Data(2) / Audit(1) / Accessibility(1) / Performance(1)

詳細な日本語ドキュメント: docs/README.ja.md

What it does

• Layout analysis -- auto-detect sections (hero, feature, CTA, etc.), extract grid/typography, and generate React/Vue/HTML code
• Motion detection -- discover CSS/JS animations with frame capture (15 px/frame video mode), CLS detection via Pixelmatch
• Quality evaluation -- score designs on three axes (originality, craftsmanship, contextuality) with anti-AI-cliche detection
• Semantic search -- find layout, motion, narrative, background, and responsive patterns via pgvector HNSW hybrid search
• Part-level analysis -- extract 16 UI part types (button, icon, heading, etc.) with DINOv2 visual embeddings for visual similarity search
• Vision integration -- Ollama llama3.2-vision for richer layout, motion, and narrative understanding
• Section post-processing -- auto merge/split sections by type, heading, and height (Rule 1-4) for optimal structure
• Multi-tile capture -- split large sections (>viewport height) into tiles for complete DINOv2 visual coverage
• Blank image detection -- detect lazy-loading unrendered sections and re-capture via Playwright for full coverage
• Code generation -- convert analyzed sections to React, Vue, or plain HTML with matched motion patterns
• Unified search -- cross-service search across layout, part, motion, background, and narrative patterns in a single query
• Image similarity search -- find visually similar designs via DINOv2 embeddings from Base64/URL input (RRF 3-source)
• Rate limiting -- Token Bucket + Redis Lua (CWE-770 DoS prevention), 3-tier (analysis 10 RPM / search 120 RPM / default 60 RPM)
• Search cache -- LRU in-memory cache (lru-cache v11) with TTL-based natural expiry (5 min)
• BullMQ UI -- Bull Board dashboard for monitoring async page.analyze jobs (port 21080)
• SBOM -- CycloneDX 1.6 auto-generation for EU CRA vulnerability reporting compliance

Why ReftrixMCP

Quickstart

Run page.analyze on any URL in under 5 minutes.

Prerequisites

Node.js ^22.23.4 || ^24.22.1 || ^26.12.1, pnpm 10+, Docker & Docker Compose, Ollama

Setup

git clone https://github.com/TKMD/ReftrixMCP.git && cd ReftrixMCP

pnpm install # CUDA skip is default; see GPU note below cp .env.example .env.local # edit DATABASE_URL / REDIS_URL as needed cp .env.local packages/database/.env # Prisma CLI requires this copy pnpm docker:up # PostgreSQL 18 + pgvector + Redis pnpm db:migrate && pnpm db:seed pnpm build pnpm exec playwright install chromium # browser for page crawling pnpm --filter @reftrixmcp/ml download:dinov2 # DINOv2 visual embedding model (~330 MB) pnpm --filter @reftrixmcp/ml repair:e5-cache --check # (optional) verify multilingual-e5-base ONNX cache (~1.1 GB) integrity curl -fsSL https://ollama.com/install.sh | sh # install Ollama ollama pull llama3.2-vision # vision model (~7.9 GB) ollama serve # keep running in a separate terminal

Note: If you change .env.local, also update packages/database/.env.

page.analyze workers are auto-forked by WorkerSupervisor when the MCP server starts (v0.4.0 PR7d-2+). Manual start via pnpm --filter @reftrixmcp/mcp-server worker:start:page is developer-only and requires REFTRIX_ALLOW_MANUAL_WORKER=true to bypass the Redis-based dual-run guard if the MCP server is also running.

See Getting Started for GPU configuration and details.

GPU / CUDA: CUDA binary download is skipped by default (CPU fallback). For GPU acceleration setup, see Troubleshooting: CUDA Detection.

pnpm "Ignored build scripts": On pnpm install, pnpm 10 prints Ignored build scripts: @prisma/client, esbuild, sharp, ... and suggests Run "pnpm approve-builds". This is expected, not an error — pnpm 10 blocks dependency build/lifecycle scripts by default as a supply-chain safeguard. Setup still completes because sharp and esbuild ship prebuilt binaries, and the Prisma client is generated by the @reftrixmcp/database workspace package's own postinstall (prisma generate) during pnpm install — a workspace lifecycle script, which pnpm does not gate behind the dependency build-script allowlist. Only run pnpm approve-builds if you have a specific reason to let one of these blocked dependencies run its own native build step (onnxruntime-node is already allow-listed via pnpm.onlyBuiltDependencies, so it never appears in the ignored list; and CUDA acceleration is a separate opt-in — see the GPU / CUDA note above — not pnpm approve-builds).

Using the npm package

If you install @reftrixmcp/mcp-server from npm instead of cloning, the Playwright browser is not included: get it with npx playwright@1.57.0 install chromium (any directory). See "Using the npm Package" in the MCP Server README for the browser notice (third-party software, not covered by this project's license, not redistributed, not in the SBOM) and the --ignore-scripts step (npm rebuild @prisma/client).

Connect to Claude

Add to your MCP config:

• Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
• MCP Client CLI: .mcp.json in the project root or ~/.claude/.mcp.json

{

"mcpServers": { "reftrix": { "command": "node", "args": ["/absolute/path/to/ReftrixMCP/apps/mcp-server/dist/index.js"], "env": { "NODE_ENV": "development", "DATABASE_URL": "postgresql://reftrix:change_me@localhost:26432/reftrix?schema=public", "REDIS_URL": "redis://localhost:27379", "OLLAMA_BASE_URL": "http://localhost:11434", "OLLAMA_HOST": "http://localhost:11434", "ENABLE_SECTION_SCREENSHOT_FALLBACK": "true" } } } }

Replace change_me with a secure password. Port 26432 = standard 5432 + 21000 offset.

OLLAMA_BASE_URL is used by the MCP server process; OLLAMA_HOST is used by the worker process. Both must match if Ollama runs on a non-default port.

ENABLE_SECTION_SCREENSHOT_FALLBACK enables Playwright-based individual section screenshots for sections outside the initial screenshot range (WebGL/lazy-rendered pages). This significantly improves DINOv2 visual embedding coverage. Set to "false" to disable.

Optional environment variables (defaults work out of the box):

MAX_TILES_PER_SECTION (default 20, max 100) -- max tiles per section for multi-tile capture.

BLANK_IMAGE_STDDEV_THRESHOLD (default 5.0) -- stddev threshold for blank image detection.

DUPLICATE_VECTOR_THRESHOLD (default 0.995) -- cosine similarity threshold for vision embedding dedup.

EMBEDDING_IDLE_TIMEOUT_MS (default 30000) -- ONNX Worker VRAM auto-release timer (0 to disable).

DINOV2_MODEL_PATH -- custom DINOv2 ViT-B/14 ONNX model path.

EMBEDDING_CACHE_ENABLED (default true) -- enable/disable the Layout Embedding disk cache (additive opt-out flag; set "false" to write no cache files).

REFTRIX_EMBEDDING_CACHE_ROOT (default /tmp/reftrix-embedding-cache) -- embedding cache root; a root resolving outside os.tmpdir() is rejected by default (fail-closed). Set REFTRIX_EMBEDDING_CACHE_ROOT_ALLOW_FALLBACK=true to instead degrade to the default root with a warning.

Example tools

ReftrixMCP provides 27 MCP tools. Key examples:

• layout.ingest -- fetch a web page, take a screenshot, and extract section patterns
• layout.search -- semantic search over layout sections by natural-language query
• motion.detect -- detect CSS/JS animations with video-mode frame capture
• quality.evaluate -- score design quality on originality, craftsmanship, and contextuality
• page.analyze -- unified analysis: layout + motion + quality + responsive in one call (async via BullMQ), with opt-in Phase 7.5: accessibility audit, performance evaluation, and auto snapshot
• responsive.search -- search responsive analysis results by viewport and breakpoint
• part.search -- semantic search over UI parts with visual (DINOv2) or text embeddings
• part.inspect -- get detailed part info including computed styles, bounding box, and accessibility
• part.compare -- compare 2-5 parts side by side on styles, layout, and interaction

Full tool reference: MCP Tools Guide

Architecture

MCP Client (Claude Desktop / Code)  --stdio-->  MCP Server (<!-- gen:tool-count -->27<!-- /gen:tool-count --> tools, Zod)

+-- Service Layer: Playwright, Sharp+Pixelmatch, DOMPurify +-- ML Layer: ONNX Runtime (multilingual-e5-base + DIN