UI & Governance Tools

These tools handle the presentation layer and the audit trail — how data gets shown to users, and how every action gets recorded.

---

canvas_editor — No-Code Dashboards

The Canvas Editor programmatically generates dashboards and reports. Use it from within Functions to build rich visual outputs without writing frontend code.

Available Components

Component	Description
chart	Line, bar, pie, and area charts bound to data
table	Tabular data display with sorting and filtering
metric_card	Single-value KPI cards
mermaid	Diagrams rendered from Mermaid syntax
pdf	Embedded PDF viewer
canvas_collector	Aggregates multiple Canvases into a single view

Data Binding

Bind data to components using content prefixes:

• sql: — inline SQL query, executed at render time
• json: — raw JSON data
• exec_ref: — an Execution Reference from a previous tool call (recommended for data integrity)

# Create a dashboard from a SQL query result
orders_ref = default_api.sql_client(
    operation="execute_sql",
    credentials="warehouse-creds",
    sql="SELECT product, SUM(revenue) as total FROM orders GROUP BY product"
)

default_api.canvas_editor(
    operation="create",
    title="Revenue by Product",
    components=[
        {"type": "chart", "content": f"exec_ref:{orders_ref.get('ref_id')}"},
        {"type": "table", "content": f"exec_ref:{orders_ref.get('ref_id')}"}
    ]
)

Tip: Using Execution References (exec_ref) instead of raw JSON ensures data integrity — the system resolves the data at render time, preventing truncation or hallucination during transcription.

---

app — Interactive React Applications

For more complex UIs beyond what Canvas can provide, the app tool builds interactive React applications.

Tech Stack

• React (JSX) with Tailwind CSS for styling
• Lucide icons for consistent iconography
• Recharts for data visualization

Key Features

• Data Binding — connect React props directly to search_artifacts queries or sql_client results
• Sandboxing — apps run in secure iframes, preventing cross-Dimension data leakage
• Interactivity — full React state management for forms, filters, and real-time updates

Note: Use canvas_editor for standard dashboards and reports. Reserve app for interactive workflows that need custom UI logic — forms, multi-step wizards, or complex filtering interfaces.

---

work_orders — Audit & Governance

Every tool call and AI turn in MyAi is recorded as a Work Order. The work_orders tool gives you programmatic access to this audit trail.

Operations

Operation	Purpose
get_conversation	Review the full conversation log for a specific session
get_turn_payload	Inspect exactly what the AI saw and did during a specific execution turn
find_by_status	Real-time monitoring — find active, completed, or failed work orders
find_by_attunement	Filter work orders by their Attunement (SLA) context

Why This Matters

• Compliance — full traceability of every automated action
• Debugging — inspect exactly what data a function received and what it returned
• Monitoring — real-time visibility into running Workflows and agent activity

# Find all failed work orders in the last 24 hours
failed = default_api.work_orders(
    operation="find_by_status",
    status="failed"
)
for wo in failed.get("work_orders", []):
    print(f"Failed: {wo.get('id')} — {wo.get('description')}")

---

Learn More

• System Tools Overview — How all the tools fit together.
• Reliability & Limitations — How Work Orders and the trust model keep the system accountable.