ReftrixMCP

What TKMD/ReftrixMCP MCP server does

TKMD/ReftrixMCP MCP server turns web pages into structured design knowledge that an MCP client can query. It analyzes page sections such as heroes, feature areas, and calls to action, then extracts layout, grid, and typography information. The system also examines CSS and JavaScript motion, captures animation frames, evaluates design quality, and identifies responsive behavior.

The resulting data can be searched by meaning or visual similarity. Search covers layout, motion, narrative, background, responsive, and UI-part patterns. A unified search combines several pattern types, while image search uses DINOv2 embeddings to find visually similar designs. Preference profiles can use feedback sessions to rerank results for a user.

How it works

Playwright loads and captures target pages. Large sections can be divided into tiles, and blank-image checks can trigger additional captures for lazy-loaded or otherwise unrendered content. Vision-assisted analysis uses Ollama with the llama3.2-vision model.

Layout results can be post-processed by merging or splitting sections according to their type, heading, and height. The server can convert analyzed sections into React, Vue, or plain HTML and match available motion patterns. Page analysis jobs are handled asynchronously, with workers automatically forked when the MCP server starts. Redis supports job handling, rate limiting, and related runtime services.

Setup and configuration

TKMD/ReftrixMCP MCP server requires Node.js 20 or newer, pnpm 10 or newer, Docker with Docker Compose, Playwright's Chromium browser, and Ollama. The standard setup starts PostgreSQL 18 with pgvector and Redis, runs database migrations and seed data, builds the project, installs Chromium, and downloads the DINOv2 model. The multilingual embedding cache can also be checked with the supplied package command.

Ollama must be installed, started, and loaded with llama3.2-vision. Configure DATABASE_URL and REDIS_URL for the database and Redis services. OLLAMA_BASE_URL is read by the MCP server, while OLLAMA_HOST is read by the worker; keep them aligned when Ollama uses a non-default address. The MCP client launches the compiled Node entry point. The README provides a Claude Desktop configuration using the node command and the built server path.

Tools and capabilities

The documented MCP surface contains 40 tools across layout, motion, quality, page, narrative, background, responsive, preference, part, style, brief, system, search, design, data, audit, embedding, accessibility, performance, and report areas. Supported operations include:

• Extracting sections, grids, typography, and UI parts.
• Detecting animations and measuring layout-shift behavior.
• Scoring originality, craftsmanship, and contextuality.
• Searching design knowledge semantically, across services, or by image.
• Profiling preferences and reranking results from feedback.
• Generating React, Vue, or HTML from analyzed sections.

Limitations and notes

The server depends on several local services and models rather than being a standalone executable. Analysis quality and available capabilities depend on Playwright rendering, the Ollama vision model, embedding models, PostgreSQL, and Redis being configured correctly. GPU acceleration is optional; the setup uses a CPU fallback by default. The repository is licensed under AGPL-3.0-only. A BullMQ dashboard is available for monitoring asynchronous page-analysis jobs on port 21080.