Skip to main content

​
Hello World: Calculator App

This example walks through creating a simple calculator app using SuperModel’s zero-inference architecture. You’ll see how routing and UI generation work via MCP sampling.

​
User Request

Input: “Show me a calculator” This simple request triggers SuperModel’s layered architecture to route the request and generate an interactive calculator interface.

​
Step 1: Request Routing via Sampling

SuperModel’s gateway doesn’t decide which tool to use - it asks the client’s LLM: 
{
  "method": "sampling/createMessage",
  "params": {
    "messages": [{
      "role": "user",
      "content": {
        "type": "text",
        "text": "User request: 'Show me a calculator'\n\nAvailable tools:\n- calculator-ui: Interactive calculator with basic arithmetic operations\n- form-builder-ui: Dynamic form generation and validation\n- data-viz-ui: Charts and data visualization\n- product-search-ui: E-commerce product search interface\n\nWhich tool should handle this request? Return JSON with tool name and any relevant parameters."
      }
    }],
    "systemPrompt": "You are a routing assistant. Analyze the user request and return JSON: {\"tool\": \"tool-name\", \"params\": {...}}"
  }
}
Zero Inference Cost: The gateway server made no LLM API calls. The client’s LLM handled the routing decision.

​
Step 2: Tool Selection & Execution

Based on the routing response, SuperModel selects the calculator-ui tool and executes it with the provided parameters. 
// Gateway routes to calculator tool
const selectedTool = gateway.getTool('calculator-ui');
const result = await selectedTool.execute({
  type: 'basic',
  operations: ['add', 'subtract', 'multiply', 'divide']
}, context);

​
Step 3: UI Generation via Sampling

The calculator tool uses MCP sampling to generate the actual UI component: 
{
  "method": "sampling/createMessage",
  "params": {
    "messages": [{
      "role": "user",
      "content": {
        "type": "text",
        "text": "Create an AG-UI calculator component with the following requirements:\n\n- Buttons for numbers 0-9\n- Operation buttons: +, -, *, /, =\n- Clear button (C) and clear all (CA)\n- Display screen showing current number and result\n- Professional, clean design\n- Use AG-UI event system for all button interactions\n\nGenerate a complete React component that follows AG-UI patterns for event handling."
      }
    }],
    "systemPrompt": "You are an expert React developer specializing in AG-UI components. Generate clean, functional code with proper event handlers for the AG-UI protocol.",
    "maxTokens": 1500
  }
}
Zero Inference Cost: Again, the calculator tool made no LLM API calls. The client’s LLM generated the entire UI component.

​
Step 4: Resource Packaging

The calculator tool packages the generated component as an MCP-UI resource: 
// Tool packages the generated UI
const uiResource = {
  type: 'resource',
  resource: {
    uri: 'ui://calculator/calc-001',
    mimeType: 'application/vnd.mcp-ui.ag-ui',
    text: generatedCalculatorComponent
  }
};

​
Step 5: Final Response

SuperModel returns the complete response to the client: 
{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [
      {
        "type": "text",
        "text": "Here's your calculator! It includes all basic arithmetic operations with a clean, professional interface."
      },
      {
        "type": "resource",
        "resource": {
          "uri": "ui://calculator/calc-001",
          "mimeType": "application/vnd.mcp-ui.ag-ui",
          "text": "function Calculator() { /* component code */ }"
        }
      }
    ]
  }
}

​
What Just Happened?

1

Zero Server Inference

The server made zero LLM API calls. All reasoning (routing + generation) happened on the client via MCP sampling.
2

Intelligent Routing

Client’s LLM correctly identified that “Show me a calculator” should route to the calculator-ui tool.
3

Dynamic UI Generation

Client’s LLM generated a complete, functional React component with proper AG-UI event handling.
4

Interactive Result

User receives a fully functional calculator that works immediately in their MCP client.

​
AG-UI Event Handling

The generated calculator includes proper AG-UI event handling: 
// Number button clicks
window.parent.postMessage({
  type: 'ag-ui-event',
  eventType: 'USER_INPUT',
  payload: { action: 'number_input', value: 7 }
}, '*');

// Operation button clicks  
window.parent.postMessage({
  type: 'ag-ui-event',
  eventType: 'TOOL_CALL',
  payload: { 
    action: 'operation',
    operation: '+',
    current_value: 42
  }
}, '*');

// Calculation completion
window.parent.postMessage({
  type: 'ag-ui-event',
  eventType: 'CALCULATION_COMPLETE',
  payload: { result: 49, operation: '+' }
}, '*');

​
Cost Analysis

Traditional Approach:
  • Routing decision: $0.02
  • UI generation: $0.08
  • Total: $0.10 per calculator request
SuperModel Approach:
  • Server costs: $0.00
  • Client handles all LLM work
  • Total: $0.00 per calculator request
Savings: 100% cost reduction

​
Try It Yourself

Want to implement this example? Here’s the complete setup:

Quick Start Guide

Follow our step-by-step guide to set up SuperModel and create this calculator.

​
Next Examples

Multi-App Workflow

See how context flows between multiple specialized UI apps.

Context Handoff

Learn how apps share context for seamless user experiences.