Skip to main content

Model Context Protocol (MCP) for Takeoff UI

Takeoff UI provides an MCP server so that AI coding assistants can look up component APIs, integration guides, and code examples on the fly — straight from the official documentation.

What is MCP?​

MCP is an open protocol that lets AI assistants call external tools and data sources in a standardized way. Instead of relying on training data that may be outdated, the assistant queries the Takeoff UI MCP server at runtime and gets back verified, structured information.

Why use MCP?​

When you ask an AI assistant about Takeoff UI without MCP, it works from its training data — which can be stale, incomplete, or simply wrong. Common problems include made-up prop names, broken documentation links, and examples that mix conventions from different libraries. With the Takeoff UI MCP server connected, your assistant can:

  • Look up real component APIs — props, events, slots, and tokens come directly from the source, not from memory
  • Return working documentation links — every reference points to a page that actually exists
  • Generate idiomatic code — React, Vue, Angular, Next.js, and Nuxt examples that follow Takeoff UI conventions and naming patterns

Installation and setup​

Pick your IDE below and add the configuration snippet. All examples point to the hosted server — no local installation required.

VS Code (Copilot)​

Open your MCP configuration and add the following:

"mcp": {
  "servers": {
    "takeoff-ui-mcp": {
      "type": "streamable-http",
      "url": "https://takeoffui.turkishtechlab.com/mcp"
    }
  }
}

Make sure Agent mode is enabled for Copilot Chat and add the following to your settings.json:

"chat.mcp.enabled": true,
"chat.mcp.discovery.enabled": true

Cursor / Windsurf​

Open Settings > MCP > Add Server and add the following:

"mcpServers": {
  "takeoff-ui-mcp": {
    "type": "streamable-http",
    "url": "https://takeoffui.turkishtechlab.com/mcp"
  }
}

JetBrains IDEs​

Open Settings > Tools > AI Assistant > Model Context Protocol (MCP) and add a new server:

  • Name: Takeoff UI MCP
  • Type: Streamable HTTP
  • URL: https://takeoffui.turkishtechlab.com/mcp

Click OK and Apply.

Claude Code​

Add the Takeoff UI MCP server via the command line:

claude mcp add takeoff-ui-mcp -t streamable-http https://takeoffui.turkishtechlab.com/mcp

To make it available across all projects, install with user scope:

claude mcp add takeoff-ui-mcp -s user -t streamable-http https://takeoffui.turkishtechlab.com/mcp

Claude Desktop​

Add the following to your Claude Desktop configuration file:

{
  "mcpServers": {
    "takeoff-ui-mcp": {
      "url": "https://takeoffui.turkishtechlab.com/mcp"
    }
  }
}

Continue.dev​

Add the following to your Continue configuration:

mcpServers:
  - name: takeoff-ui-mcp
    type: streamable-http
    url: https://takeoffui.turkishtechlab.com/mcp
Local usage

If you prefer to run the MCP server locally instead of using the hosted version, clone the takeoff-ui-mcp repository and follow the instructions in its README. Then replace the remote URL with a local address (e.g., http://127.0.0.1:8088/mcp) in the configurations above.

After setup​

Once connected, you can start asking your AI assistant Takeoff UI questions and it will automatically call the MCP server to fetch accurate answers. Try something like:

  • "List all available Takeoff UI components"
  • "Show me how to use tk-select with form validation in React"
  • "How do I set up Takeoff UI with Tailwind in a Next.js project?"
  • "Refactor this code to follow Takeoff UI conventions"

Available tools​

Tools are called automatically by the AI assistant when it needs information.

ToolDescription
get-components-listReturns the full list of Takeoff UI components
get-components-infoFetches detailed docs and examples for one or more components
get-tailwind-integrationProvides Tailwind CSS integration guidance (setup, tokens, utilities)
get-framework-integrationProvides framework-specific integration guides (React, Vue, Angular)

Available prompts​

Prompts are pre-built instruction templates that you can trigger explicitly to perform a specific task (e.g., refactoring or Figma-to-code conversion).

PromptDescription
refactor-takeoff-ui-codeRefactors code to align with Takeoff UI best practices
figma-to-codeConverts Figma designs to code using Takeoff UI components

Common issues​

MCP connection errors​

Try using the MCP Inspector to debug the connection:

npx @modelcontextprotocol/inspector

Navigate to http://127.0.0.1:6274 in your browser and set the following parameters:

  • Transport type: Streamable HTTP
  • URL: https://takeoffui.turkishtechlab.com/mcp

Click Connect and wait for the connection to be established. Once connected, you should see the available tools listed. If the list is empty or you cannot connect, check the terminal logs for more details.

MCP is installed but not being used​

Some assistants do not automatically pick up MCP tools unless they are explicitly told to do so. You can fix this by adding a project-level rule that instructs the assistant to prefer the MCP server when answering Takeoff UI questions.

In VS Code, create a file at .github/instructions/takeoff-ui.md with content like the following:

## Takeoff UI — always use the MCP server

When answering questions about Takeoff UI components, styling, or integration:

1. Call "get-components-list" or "get-components-info" to fetch the relevant docs
2. Base your answer on the returned content — do not guess prop names or events
3. Prefer Takeoff UI components (tk-button, tk-input, etc.) over plain HTML

Other IDEs support similar rule files — check your editor's documentation for the expected location.

Other issues​

  • Node version: Ensure you are using Node.js 18 or later
  • Path issues: If using local installation, verify absolute paths in your client configuration
  • Debug logs: For local installations, set LOG_LEVEL=0 in your .env file for verbose output

Related links​