Skip to main content

MCP Server

Takeoff UI MCP Server​

An MCP (Model Context Protocol) server that gives AI assistants structured access to Takeoff UI documentation, component data, and integration guides.

What is MCP?​

Model Context Protocol is an open protocol and SDK that allows AI assistants to call external tools and data sources in a consistent, secure way. This server implements MCP tools and prompts so assistants can answer questions about Takeoff UI and generate code that follows its standards.

What is Takeoff UI?​

Takeoff UI is a comprehensive design system of framework-agnostic web components built with Stencil.js, with official bindings for React, Vue, and Angular, plus a Tailwind CSS plugin. It is developed in a Turborepo monorepo and ships consistent APIs, styles, and documentation across frameworks.

Features​

  • Component discovery and details: List all components and fetch in-depth docs and examples
  • Tailwind CSS integration: Guidance on setup, tokens, typography, spacing, and more
  • Framework integration: React, Vue, Angular, Next.js, Nuxt guides
  • Smart prompts: Figma-to-code and refactoring prompts tailored to Takeoff UI
  • Flexible transports: STDIO, Streamable HTTP, and legacy SSE

Transport options​

  • STDIO (default): Best for local development with desktop assistants
  • Streamable HTTP: Single /mcp endpoint; recommended for HTTP usage
  • SSE (legacy): Backwards compatibility only; not recommended for new setups

Quick start​

Use the hosted version without local installation:

# Using mcp-remote
npx -y mcp-remote https://takeoffui.turkishtechlab.com/mcp

Local install​

git clone https://github.com/turkishtechnology/takeoff-ui-mcp.git
cd takeoff-ui-mcp
npm install
npm run build

Run​

# STDIO (default)
npm start

# Streamable HTTP
npm run start:stream

# SSE (legacy)
npm run start:sse

Default addresses:

  • Main (Streamable HTTP): http://127.0.0.1:3845/mcp
  • SSE events: http://127.0.0.1:3845/sse
  • Health: http://127.0.0.1:3845/health
  • Info: http://127.0.0.1:3845/info

Test the HTTP server​

curl -X POST http://127.0.0.1:3845/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"initialize","id":1}'

curl http://127.0.0.1:3845/health
curl http://127.0.0.1:3845/info

Configuration​

Create .env in the project root (copy from .env.example):

NODE_ENV=development
HOST=127.0.0.1
PORT=3845
# 0=DEBUG, 1=INFO, 2=WARN, 3=ERROR
LOG_LEVEL=1

Client setup​

Continue.dev​

Remote (recommended):

mcpServers:
  - name: takeoff-ui-mcp
    command: npx
    args:
      - "-y"
      - "mcp-remote"
      - "https://takeoffui.turkishtechlab.com/mcp"

Local STDIO:

mcpServers:
  - name: takeoff-ui-mcp
    command: node
    args:
      - /absolute/path/to/takeoff-ui-mcp/dist/index.js

Local HTTP:

mcpServers:
  - name: takeoff-ui-mcp
    type: streamable-http
    url: http://127.0.0.1:3845/mcp

VS Code (Copilot)​

Remote (recommended):

"mcp": {
  "servers": {
    "takeoff-ui-mcp": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://takeoffui.turkishtechlab.com/mcp"]
    }
  }
}

Local STDIO:

"mcp": {
  "servers": {
    "takeoff-ui-mcp": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/takeoff-ui-mcp/dist/index.js"]
    }
  }
}

Local HTTP:

"mcp": {
  "servers": {
    "takeoff-ui-mcp": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Claude Desktop​

STDIO:

{
  "mcpServers": {
    "takeoff-ui-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/takeoff-ui-mcp/dist/index.js"]
    }
  }
}

HTTP:

{
  "mcpServers": {
    "takeoff-ui-mcp": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Tip: To nudge assistants to use this server, add "use takeoff-ui-mcp" to your prompts (for example: "Show Tailwind setup for React — use takeoff-ui-mcp").

Tools​

  • get_components_list: Returns the full list of Takeoff UI components
  • get_component_info: Detailed docs and examples for components
    • Parameters: component (string) or components (string[])
  • get_tailwind_integration: Tailwind integration guidance
    • Parameters: framework, topic
  • get_framework_integration: Framework-specific integration
    • Parameters: framework, topic, complexity, includeExamples

Prompts​

  • refactor_takeoff_ui_code: Refactor code to align with Takeoff UI best practices

    • Parameters:
      • code (string, required)
      • framework? (react | vue | angular)
      • goals? (string[]; e.g., readability, performance, a11y)
      • enforceA11y? (boolean; default true)
      • preferComposition? (boolean; default true)
      • includeTests? (boolean; default false)

  • figma_to_code: Convert Figma designs to code using Takeoff UI with a tool-driven, verifiable process

    • Parameters:
      • figmaUrl (string, URL, required)
      • framework? (react | vue | angular | nextjs | nuxt; default react)
      • includeInteractivity? (boolean; default true)
      • useTypeScript? (boolean; default true)
      • styling? (tailwind | css-modules | styled-components | emotion; default tailwind)
      • accessibility? (boolean; default true)
      • responsiveness? (boolean; default true)
      • fileStructure? (single | multi; default single)

How it works (MCP flow)​

  1. Assistant selects a tool (e.g., get_component_info)
  2. MCP client sends a JSON-RPC request to the server
  3. Server reads curated Takeoff UI docs and returns structured results
  4. Assistant formats and presents the answer

Example request payload:

{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "get_component_info",
    "arguments": { "component": "button" }
  }
}

Development​

Prerequisites: Node.js >= 18

Setup:

npm install
npm run build

# Dev (STDIO)
npm run dev

# Dev (HTTP)
npm run dev:stream

MCP Inspector (browser-based testing):

# With streamable HTTP running
npm run start:stream
npm run inspector
# Inspector UI target: http://127.0.0.1:3845/mcp

Project structure:

src/
├── transports/    # stdio, stream, sse
├── tools/         # MCP tools
├── prompts/       # MCP prompts
├── data/          # Curated Takeoff UI docs and examples
├── utils/         # Logging and helpers
├── types/         # Type definitions
└── index.ts       # Entry point

Scripts:

  • build, watch, dev, start, start:stream, start:sse, inspector, clean

HTTP API (when using Streamable HTTP)​

  • GET /health: Basic status
  • GET /info: Server configuration and endpoints

Troubleshooting​

  • Path issues: Verify absolute paths in client config
  • Node version: Use Node.js 18+
  • Port conflicts: Set PORT in .env
  • Debug logs: Set LOG_LEVEL=0
  • Model Context Protocol: https://modelcontextprotocol.io