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

curl -fsSL https://bun.sh/install | bash

2. Run Setup

bun setup

This registers QBIC in your Cursor's MCP config.

3. Start WebSocket Hub

bun socket

4. Launch MCP Server

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