Skip to main content

MCP Server Overview

The Widget Builder includes a built-in MCP Server (Model Context Protocol) that allows AI assistants to interact directly with your Widget Builder account. This means you can use tools like Claude Desktop, Cursor, Windsurf, or any other MCP-compatible client to create, edit, and manage widgets through natural conversation.

What is MCP?​

The Model Context Protocol (MCP) is an open standard that enables AI applications to connect to external tools and data sources. Think of it as a universal plug that lets AI assistants "reach into" services like the Widget Builder to perform actions on your behalf.

What can the MCP Server do?​

With the Widget Builder MCP Server, an AI assistant can:

  • List your widgets — View all custom and built-in widgets in your account
  • Create new widgets — Generate complete widget HTML with Handlebars templates and Tailwind CSS
  • Update existing widgets — Modify templates, form fields, variables, and translations
  • Delete widgets — Remove widgets that are no longer needed
  • Test-render templates — Validate Handlebars templates server-side without a browser
  • Browse documentation — Access the complete widget building guide including all Handlebars helpers, form field types, and best practices

How does it work?​

┌─────────────────┐         ┌─────────────────┐         ┌─────────────┐
│  AI Assistant    │  MCP    │  Widget Builder  │         │  Your       │
│  (Claude, etc.) │ ◄─────► │  MCP Server      │ ◄─────► │  Widgets    │
└─────────────────┘         └─────────────────┘         └─────────────┘
  1. You generate an API token in the Widget Builder app
  2. You configure your AI assistant (MCP client) with the token
  3. The AI assistant connects to the MCP Server using the token
  4. You ask the AI to create or manage widgets through natural language

Security​

  • Token-based authentication — Each MCP connection requires a dedicated API token
  • Scoped permissions — Tokens can be restricted to read-only, write, or render access
  • Client isolation — Each token is tied to your account; AI agents can only access your widgets
  • Revocable — Tokens can be revoked instantly from the Widget Builder app
  • No plaintext storage — Only hashed tokens are stored in the database

Next steps​

  1. Generate an API Token — Create your first MCP API token
  2. Configure your MCP Client — Connect Claude Desktop, Cursor, or another client
  3. Available Tools — Explore all tools the MCP Server provides