QBIC

# QBIC: Multi-Agent Programming Across Creative Tools **QBIC** is a next-generation agent orchestration framework that enables intelligent agents to control and coordinate actions across creative and technical tools in real time using the **Model Context Protocol (MCP)**. It allows developers and AI systems to construct **natural language-driven workflows**, where tools like **Figma**, **Cursor**, **IDE environments**, and more can be interconnected through a shared protocol layer. Agents communicate via MCP to query context, modify content, and trigger multi-step actions across systems—bridging the gap between intent, interface, and execution. While QBIC is a broad framework, we currently demonstrate one of its abilities: **controlling Figma design workflows through Cursor's AI assistant**, showcasing how dialogue-based programming can manipulate layout, text, components, and annotations. This is just one application—QBIC is designed for far more. --- ## 🧠 Core Capabilities ### 🔄 Cross-Application Agent Orchestration * Seamlessly connect agents to tools like Figma, IDEs, code editors, and design systems * Trigger context-aware operations without manual GUI interaction * Maintain synchronized, multi-domain system state across connected tools ### 💬 Natural Language to System Execution * Parse conversational instructions into structured actions * Create or modify content (e.g., UI, code, metadata) through composable tools * Chain logical operations across different platforms from a single agent ### 🧩 Modular MCP Tool Interface * Expose each tool as a declarative command surface via MCP * Define tasks, introspection points, creation utilities, and response hooks * Enable agent-to-agent and agent-to-environment negotiation via shared context ### 🧪 Use Case Demonstration (Figma + Cursor) In our featured demo: * Cursor connects to QBIC via MCP * Cursor receives user dialogue and issues MCP commands * Figma plugin reacts to tool-level operations such as: * `create_rectangle`, `create_text`, `scan_text_nodes` * `set_multiple_text_contents`, `get_reactions`, `create_connections` This scenario illustrates **design automation**, but similar logic applies to **document generation**, **IDE manipulation**, or **task automation**. --- ## 🧬 Architecture Overview QBIC consists of: * **MCP Server** (`src/qbic_mcp/`) — Core server for executing structured MCP commands and managing tool schemas * **Plugin Layer** (`src/cursor_mcp_plugin/` as Figma example) — Tool-specific bridges that expose runtime controls and state * **WebSocket Message Hub** (`src/socket.ts`) — Event pipe for real-time messaging between agents and connected environments --- ## ⚡ Example Prompts & Agent Workflows * "Generate a 3-section homepage with hero, features, and footer." * Agent synthesizes layout in Figma using component tools * "Replace all placeholder copy with production text." * Batch edit through `scan_text_nodes` and `set_multiple_text_contents` * "Convert prototype connections into FigJam-style connectors." * Agent parses `get_reactions`, styles connections, and applies `create_connections` * "Scan all design annotations and classify them." * Combines `get_annotations` with structured metadata tagging --- ## 🚀 Getting Started ### 1. Install Bun ```bash curl -fsSL https://bun.sh/install | bash ``` ### 2. Run Setup ```bash bun setup ``` This registers QBIC in your Cursor's MCP config. ### 3. Start WebSocket Hub ```bash bun socket ``` ### 4. Launch MCP Server ```bash bunx qbic-mcp ``` ### 5. Load Figma Plugin (Development Mode) * Figma → Plugins → Development → Link Existing Plugin * Select `src/cursor_mcp_plugin/manifest.json` --- ## 🔧 MCP Tool Categories ### Structural Access * `get_document_info`, `get_selection`, `get_node_info`, `read_my_design` ### Content Operations * `create_rectangle`, `create_text`, `create_frame` * `set_text_content`, `set_multiple_text_contents` ### Annotation & Metadata * `get_annotations`, `set_annotation`, `set_multiple_annotations` * `annotation_conversion_strategy` ### Layout Management * `set_layout_mode`, `set_padding`, `set_item_spacing` * `set_layout_sizing`, `resize_node` ### Visual Editing * `set_fill_color`, `set_stroke_color`, `set_corner_radius` * `clone_node`, `delete_multiple_nodes` ### Prototype Conversion * `get_reactions`, `create_connections`, `set_default_connector` ### Utility Tools * `export_node_as_image` * Strategy prompts like `design_strategy`, `reaction_to_connector_strategy` --- ## 🧠 Philosophy: What is QBIC? QBIC is not a plugin. It is a **multi-agent, cross-environment automation platform** built on standard protocols. It empowers: * AI assistants to act as real operational collaborators * Developers to define intent → execution bridges using common schemas * Teams to standardize multi-tool automation across creative workflows Whether it's Figma today or VSCode, Photoshop, or Slack tomorrow — **QBIC aims to become the protocol layer of agent-centric creation.** --- ## 📜 License MIT License