Skip to main content
Batoi UIF Docs

MCP Support

Build MCP-ready Batoi UIF screens while keeping privileged tools, credentials, authorization, and audit on the governed backend.

Version 3.0.0 Version 3 active maintenance Reviewed Aug 11, 2026 Next review Nov 11, 2026
Start Reading Open GitHub Report documentation issue

Owner: Batoi Engineering Reviewed by: Batoi UIF Maintainers Source revision: b2f3478

Start FastLoad UIF in server-rendered pages and initialize declarative behavior. Chart SupportReview native SVG chart types, Flint mappings, and deferred advanced charts. Micro AppsBuild contained app surfaces that live inside larger Batoi routes. AI and MCPDesign approval UI while privileged tool execution stays server-side.
Browse Batoi UIF Documentation MCP Support
On this page

MCP Support

Batoi UIF is MCP-ready at the interface layer. It provides browser-native surfaces for AI and Model Context Protocol workflows, while the MCP server and privileged tool execution stay on the governed backend.

Use this model for Batoi RAD pages, Build workspaces, Micro Apps, dashboards, approval flows, and documentation-backed AI assistants.

Open the Batoi UIF MCP Preview to test safe chart, component, dashboard, and markup draft outputs.

Architecture

Batoi UIF MCP Boundary UI renders intent and evidence. Tools execute only through governed backend policy. AI Host MCP client prompt context tool requests batoi-uif MCP Server resources prompts validation tools governed drafts Batoi Backend auth policy credentials audit Browser with Batoi UIF: approval cards, previews, warnings, results, and audit timelines

Supported UI Surfaces

  • data-uif="ai-action" for AI-assisted controls and generated output panels
  • data-uif="tool-approval" for approval review before a governed backend action
  • Prompt panels for request editing and confirmation
  • Streaming text surfaces for progressive responses
  • Policy check summaries for warnings and blocked actions
  • Result cards for completed validation, generation, and draft work
  • Audit timelines for request, approval, execution, result, and failure evidence
  • Chart and spec previews for dependency-free dashboard generation

MCP Server Capabilities

The public MCP support scope is read-only and low-risk:

  • documentation resources
  • schema resources
  • safe generation prompts
  • component and chart discovery tools
  • chart spec validation
  • Flint-compatible chart conversion
  • data-uif-* markup validation
  • dependency-free markup generation

Draft creation, source changes, publishing, deployments, email, payments, and database operations require authenticated backend workflows, explicit approval, policy checks, rate limits, idempotency keys, and audit records.

Security Model

Browser UI is not authorization.

Approval confirmation is not authorization.

The backend must still authenticate the user, authorize the operation, validate the input, enforce policy, rate-limit the request, write audit records, and keep credentials server-side.

Do not run these operations from the browser:

  • database access
  • file writes
  • GitHub commits
  • deployments
  • email sending
  • payment actions
  • MCP server invocation
  • credential handling
  • permission decisions
  • authoritative audit logging

Public Read-Only Endpoint

The public read-only endpoint supports early MCP discovery and validation:

/resources/uif-mcp

The endpoint supports JSON-RPC style requests for read-only resources, prompts, and tools. It does not expose private customer data, credentials, database writes, filesystem writes, deployments, email, or payment actions.

Use the hosted preview surface for safe chart, component, dashboard, and markup draft checks:

/resources/uif-mcp-preview

Open the hosted preview.

Example tool discovery request:

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Example chart validation request:

{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "uif.validate_chart_spec",
    "arguments": {
      "spec": {
        "chartType": "Line Chart",
        "encodings": {
          "x": {"field": "quarter"},
          "y": {"field": "revenue"}
        }
      },
      "data": [
        {"quarter": "Q1", "revenue": 120},
        {"quarter": "Q2", "revenue": 180}
      ]
    }
  }
}

Tool Approval Markup

Use Batoi UIF to render the approval surface. Send the user's decision to a governed backend endpoint, then let the backend make the authorization and execution decision.

<section
  data-uif="tool-approval"
  data-uif-request-id="req_123"
  data-uif-tool="uif.generate_chart_markup"
  data-uif-risk="low"
  data-uif-title="Generate chart markup">
  <p>Review the generated chart markup before inserting it into a governed draft.</p>
  <button type="button" data-uif-action="approve">Approve</button>
  <button type="button" data-uif-action="reject">Reject</button>
</section>

Browser events should be treated as user intent only:

{
  "requestId": "req_123",
  "tool": "uif.generate_chart_markup",
  "risk": "low",
  "decision": "approve",
  "payload": {},
  "clientTimestamp": "2026-07-04T00:00:00.000Z"
}

Chart Validation Example

Use data-uif="chart" for generated chart markup:

<div
  data-uif="chart"
  data-uif-chart-type="line"
  data-uif-data='[{"label":"Q1","value":120},{"label":"Q2","value":180}]'
  data-uif-chart-options='{"title":"Quarterly revenue"}'>
</div>

For Flint-compatible inputs, validate or convert the chart spec through the server boundary before rendering it in a preview.

Implementation Path

PhaseScopeAcceptance
0Public docs and security modelDevelopers can explain that UI renders in the browser and tools execute on the server
1Read-only MCP resources, prompts, and validatorsMCP clients can discover and validate without side effects
2Chart and markup generationGenerated output is dependency-free and warning-aware
3Governed draft workflowAuthenticated drafts have preview URLs and audit records
4Optional high-risk actionsWrite-like tools require explicit approval, role checks, policy, dry-run, audit, and rollback or review