figma-console-mcp 1.2.5 → 1.4.0

package/README.md

@@ -1,9 +1,11 @@
 # Figma Console MCP Server
 
 [![MCP](https://img.shields.io/badge/MCP-Compatible-blue)](https://modelcontextprotocol.io/)
+[![npm](https://img.shields.io/npm/v/figma-console-mcp)](https://www.npmjs.com/package/figma-console-mcp)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Documentation](https://img.shields.io/badge/docs-docs.figma--console--mcp.southleft.com-0D9488)](https://docs.figma-console-mcp.southleft.com)
 
-> **Model Context Protocol server** that provides AI assistants with **real-time console access, visual debugging, design system extraction, and design creation** for Figma.
+> **Your design system as an API.** Model Context Protocol server that bridges design and development—giving AI assistants complete access to Figma for **extraction**, **creation**, and **debugging**.
 
 ## What is this?
 
@@ -516,6 +518,59 @@ The **Figma Desktop Bridge** plugin enables powerful capabilities:
 
 ---
 
+## 🧩 MCP Apps (Experimental)
+
+Figma Console MCP includes support for **MCP Apps** — rich interactive UI experiences that render directly inside any MCP client that supports the [MCP Apps protocol extension](https://github.com/anthropics/anthropic-cookbook/tree/main/misc/model_context_protocol/ext-apps). Built with the official [`@modelcontextprotocol/ext-apps`](https://www.npmjs.com/package/@modelcontextprotocol/ext-apps) SDK.
+
+> **What are MCP Apps?** Traditional MCP tools return text or images to the AI. MCP Apps go further — they render interactive HTML interfaces inline in the chat, allowing users to browse, filter, and interact with data directly without consuming AI context.
+
+### Token Browser
+
+The first MCP App is the **Token Browser** — an interactive design token explorer.
+
+**Usage:** Ask Claude to "browse design tokens" or "show me the design tokens" for any Figma file.
+
+**Features:**
+- Browse all tokens organized by collection with expandable sections
+- Filter by type (Colors, Numbers, Strings) and search by name/description
+- Per-collection mode columns (Light, Dark, Custom) matching Figma's Variables panel
+- Color swatches, alias resolution, and click-to-copy on any value
+- Works without Enterprise plan via Desktop Bridge (local mode)
+
+**Enabling MCP Apps:**
+
+MCP Apps are gated behind an environment variable. Add to your MCP config:
+
+```json
+{
+  "mcpServers": {
+    "figma-console-local": {
+      "command": "node",
+      "args": ["/path/to/figma-console-mcp/dist/local.js"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
+        "ENABLE_MCP_APPS": "true"
+      }
+    }
+  }
+}
+```
+
+> **Note:** MCP Apps require an MCP client with [ext-apps protocol](https://github.com/anthropics/anthropic-cookbook/tree/main/misc/model_context_protocol/ext-apps) support (e.g. Claude Desktop). This feature is experimental and the protocol may evolve.
+
+### Future MCP Apps Roadmap
+
+The Token Browser is the first of several planned MCP Apps:
+
+- **Component Gallery** — Visual browser for searching and previewing components with variant exploration
+- **Style Inspector** — Interactive panel for exploring color, text, and effect styles with live previews
+- **Variable Diff Viewer** — Side-by-side comparison of token values across modes and branches
+- **Design System Dashboard** — Overview of your design system health with coverage metrics
+
+The architecture supports adding new apps with minimal boilerplate — each app is a self-contained module with its own server-side tool registration and client-side UI.
+
+---
+
 ## 🚀 Advanced Topics
 
 - **[Setup Guide](docs/SETUP.md)** - Complete setup guide for all MCP clients
@@ -593,7 +648,8 @@ MIT - See [LICENSE](LICENSE) file for details.
 
 ## 🔗 Links
 
-- 📖 [Full Documentation](docs/)
+- 📚 **[Documentation Site](https://docs.figma-console-mcp.southleft.com)** — Complete guides, tutorials, and API reference
+- 📖 [Local Docs](docs/) — Documentation source files
 - 🐛 [Report Issues](https://github.com/southleft/figma-console-mcp/issues)
 - 💬 [Discussions](https://github.com/southleft/figma-console-mcp/discussions)
 - 🌐 [Model Context Protocol](https://modelcontextprotocol.io/)