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

Remote usage (recommended)

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)

Assistant selects a tool (e.g., get_component_info)
MCP client sends a JSON-RPC request to the server
Server reads curated Takeoff UI docs and returns structured results
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

Takeoff UI MCP Server​

What is MCP?​

What is Takeoff UI?​

Features​

Transport options​

Quick start​

Remote usage (recommended)​

Local install​

Run​

Test the HTTP server​

Configuration​

Client setup​

Continue.dev​

VS Code (Copilot)​

Claude Desktop​

Tools​

Prompts​

How it works (MCP flow)​

Development​

HTTP API (when using Streamable HTTP)​

Troubleshooting​

Related Links​