MCP Server

TF Design includes a Model Context Protocol (MCP) server that exposes your design projects to external coding agents. This enables workflows like "build this design in my app" or "match these styles" without manual export.

What the MCP Server Does

The MCP server is launched by the Desktop app as a stdio process. It exposes read-only tools that let external agents query your design files and active context.

Exposed Tools

Tool	Description
search_files	Search across all project files by pattern or name
get_file	Read the contents of a specific file in a project
get_artifact	Retrieve a generated artifact's content
get_active_context	Get the currently open project and file

Active Context

The get_active_context tool returns whatever project and file you have open in the Desktop app right now. As you switch projects or open a file, the active context updates automatically.

This means a coding agent in another repository can:

1. Read the design you are currently viewing in TF Design.
2. Use it as a reference to implement the design in code.
3. Match styles, copy layouts, or extract design tokens.

Registering the MCP Server

The MCP server must be registered per-client. The Desktop app must be running for the MCP server to function.

To register with a coding agent:

1. Ensure the ToothFairyAI Desktop app is running and a project is open in TF Design.
2. Get the MCP install info from the Desktop app (Settings → MCP Server → Show Install Info).
3. Add the MCP server configuration to your coding agent's config file.
4. Restart the coding agent to pick up the new MCP server.

Read-Only by Design

The MCP server is read-only — it cannot create, modify, or delete files. External agents can read design files and artifacts but cannot change them. This prevents unintended modifications from external tools.

Use Cases

Implement a Design in Your App

1. Generate a landing page in TF Design.
2. Open the design in the preview.
3. In your coding agent (e.g. TF Code), ask: "Implement the design from my active TF Design context in this React project."
4. The coding agent reads the artifact via get_active_context and generates matching code.

Match Styles Across Projects

1. Open a design system in TF Design.
2. In your coding agent, ask: "Read the active design system and apply its tokens to my stylesheet."
3. The agent reads the DESIGN.md via get_file and maps the tokens to your project.

Search Across Design Projects

1. In your coding agent, ask: "Search my TF Design projects for any pricing page artifacts."
2. The agent calls search_files with a pricing pattern.
3. Results are returned with file paths and content snippets.

Internal Endpoints

The following endpoints are exposed by the running Desktop app's embedded runtime for in-app tools and the agent:

Endpoint	Method	Description
/api/active	POST / GET	Set or get the active project and file
/api/mcp/install-info	GET	Get MCP server installation instructions