A2A Server: Active (App page builder) MCP Server: Tools Ready (e_6aeaeef3...) API Client: Authorized (6aeaedcf...) Tenant: unifyapps-dev.modhs.med.sa

Autonomous Design System & Interface Controller for UnifyApps

Empowering external AI coding agents (Antigravity, Claude, Cursor, Copilot) to construct, style, and package enterprise UI directly inside UnifyApps—with zero manual drag-and-drop toil, surgical block-scoped CSS isolation, and 100% brand fidelity.

Launch Live Interactive Simulator Explore Tri-Layer Architecture

Global Layout Side Effects

Strict [data-block-id] Scoping

10x

Faster Component Delivery

Prompt-to-AST Synthesis

100%

Brand Token Compliance

Saudi MOD Green & Gold

Universal

Cross-App Reusability

One-click Module Packaging

System Architecture

The Tri-Layer Integration Engine

Connecting AI tooling to UnifyApps through three complementary protocols: REST APIs, Model Context Protocol (MCP), and Agent-to-Agent (A2A) negotiation.

API Gateway

OAuth2 / Bearer

Client: Antigravity-Agent-Bridge
ID: 6aeaedcf41af9153531ebb1f

The foundational enterprise authorization bridge. Enables authenticated CRUD on tenant workspaces, page metadata, JSON AST components, custom connectors, and publishing states.

Tenant Workspace Management
Direct AST Serialization & Persistence
Access Profiles & Activity Auditing

Endpoint: /p/0/api-platform/clients

MCP Server

JSON-RPC / SSE

Server: Antigravity-Unify-MCP
ID: e_6aeaeef394cbd46d9f75d981

The direct AI context interface. Exposes platform tools directly into the reasoning loop of LLMs so agents can query the canvas, locate block IDs, and write Monaco CSS.

Tool: unify_get_page_blocks()
Tool: unify_apply_scoped_css()
Tool: unify_set_html_attributes()

Endpoint: /p/0/mcp-servers/tools

A2A Multi-Agent

Active / Deployed

Server: Antigravity-Unify-A2A
Agent: App page builder (e_69b267...)

Agent-to-Agent protocol integration. External AI delegates complex UI page layout, responsive columns, and data source wiring directly to UnifyApps' internal builder agent.

Get Agent Card (.well-known)
Handle JSON-RPC Invocations
Real-time Streaming Responses

Collection: 6aeaf23341af9153531ebb24

Live Interactive Playground

Surgical Block-Scoped Styling Engine

Experience how the agent injects CSS into Monaco scoped exclusively to [data-block-id='...'], guaranteeing zero layout side effects on the surrounding application.

UNIFYAPPS AST TREE LIVE

body

stack173

filters

b_cvQmi

• viewToggle

• contentTable

Target Component:

Name: filters

Block ID: b_cvQmi

Status: Scoped Active

Monaco Editor • Custom CSS

Scoping: Strict

✓ Changes synced to UnifyApps AST

Live Preview Isolated

LTR

Adjacent Component ✓ Zero Leakage

Page Header / Navigation Unaffected

Target: [data-block-id='b_cvQmi'] Scoped Active

Data Table Preview

Rows and styles retain default UnifyApps theme without global font distortion.

Computed Border: 1.6px solid #125939

Standard Operating Procedure

Step-by-Step Execution Guide

From developer prompt to a published, brand-compliant, reusable module across any UnifyApps project.

API Gateway Client Authorization

OAuth2

Authenticate using the registered client Antigravity-Agent-Bridge (ID: 6aeaedcf41af9153531ebb1f) to obtain a Bearer Token for tenant API calls.

curl -X POST https://unifyapps-dev.modhs.med.sa/oauth/token \
-d "client_id=6aeaedcf41af9153531ebb1f" \
-d "grant_type=client_credentials"

Connect External AI Agent via MCP

Model Context Protocol

Configure the MCP server Antigravity-Unify-MCP in your AI tool (Antigravity, Cursor, Claude) to query live canvas AST and tools.

// Call MCP Tool
const { blocks } = await mcp.callTool('unify_get_page_blocks', {
appId: 'media-center-app',
pageSlug: 'myspace'
});

Delegate Layout Generation via A2A

A2A Protocol

Send a natural language layout request to the deployed A2A server Antigravity-Unify-A2A. UnifyApps' built-in App page builder generates the component tree.

POST /p/0/api-platform/collections/6aeaf23341af9153531ebb24/HandleJSONRPC
{ "method": "build_component", "params": { "prompt": "Create filter bar with search & date picker" } }

Surgical Block-Scoped CSS Injection

Zero Leakage

Inject custom CSS into Monaco scoped exclusively to [data-block-id='...'] and configure HTML attributes (dir="rtl").

[data-block-id='filters'] {
  background: #f8fafc;
  border: 1.6px solid #125939; /* Saudi MOD Green */
  border-radius: 12px;
}

Package as Reusable Cross-App Module

One-Click Reuse

Convert the validated block into a UnifyApps Template Component (appearing alongside DGA_Carousal). Every app across the organization can now drag-and-drop the pre-styled component.

unify_package_as_module({ blockId: 'filters', name: 'MODHS_Universal_FilterBar' });

AI Tool Setup

Configure Any AI Tool

Copy-paste ready configuration files for your favorite AI coding environment.

~/.gemini/antigravity/mcp/unifyapps.json

{
  "name": "unifyapps",
  "command": "node",
  "args": [
    "./scratch/unifyapps_bridge.js",
    "--mcp"
  ],
  "env": {
    "UNIFY_BASE_URL": "https://unifyapps-dev.modhs.med.sa",
    "UNIFY_CLIENT_ID": "6aeaedcf41af9153531ebb1f"
  }
}

.cursor/mcp.json

{
  "mcp.servers": {
    "unifyapps": {
      "type": "command",
      "command": "node",
      "args": ["./scratch/unifyapps_bridge.js", "--mcp"],
      "env": {
        "UNIFY_BASE_URL": "https://unifyapps-dev.modhs.med.sa",
        "UNIFY_CLIENT_ID": "6aeaedcf41af9153531ebb1f"
      }
    }
  }
}

claude_desktop_config.json

{
  "mcpServers": {
    "unifyapps-controller": {
      "command": "node",
      "args": ["C:/path/to/unifyapps_bridge.js", "--mcp"],
      "env": {
        "UNIFY_BASE_URL": "https://unifyapps-dev.modhs.med.sa",
        "UNIFY_CLIENT_ID": "6aeaedcf41af9153531ebb1f"
      }
    }
  }
}

.vscode/settings.json

{
  "github.copilot.advanced": {
    "mcpServers": {
      "unifyapps": {
        "command": "node",
        "args": ["./scratch/unifyapps_bridge.js", "--mcp"],
        "env": {
          "UNIFY_BASE_URL": "https://unifyapps-dev.modhs.med.sa",
          "UNIFY_CLIENT_ID": "6aeaedcf41af9153531ebb1f"
        }
      }
    }
  }
}

Custom Integrations

Custom Connectors in UnifyApps

Native support for custom REST endpoints, authentication flows, webhooks, and actions.

Authentication Types Supported

✓ OAuth 2.0 (Auth Code, Client Credentials, Refresh Flow)
✓ Access Token / Bearer Token
✓ API Key (Header or Query Param injection)
✓ Basic Auth & Custom HTTP Headers

Actions & Realtime Triggers

✓ REST Actions (GET, POST, PUT, DELETE, PATCH)
✓ Webhooks (Ingest real-time incoming events)
✓ Polling Triggers (Periodic delta sync)
✓ Automatic MCP Tool Conversion (Export actions to LLM tools)