Content
# 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
Connection Info
You Might Also Like
markitdown
Python tool for converting files and office documents to Markdown.
Fetch
Retrieve and process content from web pages by converting HTML into markdown format.
oh-my-opencode
Background agents · Curated agents like oracle, librarians, frontend...
chatbox
User-friendly Desktop Client App for AI Models/LLMs (GPT, Claude, Gemini, Ollama...)
continue
Continue is an open-source project for seamless server management.
semantic-kernel
Build and deploy intelligent AI agents with Semantic Kernel's orchestration...