ai-screen-theme-outline.md
11.1 KB
AI-Optimized Screen Theme for Moqui MCP
Concept
Create a specialized Moqui screen theme that outputs AI-optimized JSON instead of HTML, eliminating token waste and enabling rich data delivery.
The Problem
Current MCP flow wastes tokens:
- AI requests screen data
- Screen renders HTML (web-optimized)
- AI parses HTML (token-intensive)
- AI extracts meaning from markup noise
The Solution
AI Screen Theme - outputs structured JSON designed for LLM consumption:
Core Principles
- No HTML markup - pure data
- Structured hierarchy - nested objects
- Rich metadata - context, relationships
- Media references - image URLs, audio links
- Action links - next steps, workflows
- Inventory integration - real-time stock data
Implementation
1. Screen Theme Definition
<!-- screen-theme-ai.xml -->
<screen-theme name="ai-optimized" extends="default">
<render-mode name="ai">
<template><![CDATA[
{
"screenInfo": {
"name": "${screenName}",
"title": "${screenTitle}",
"description": "${screenDescription}",
"context": "${userContext}",
"permissions": "${userPermissions}",
"timestamp": "${nowTimestamp}"
},
"data": {
${screenDataAsJson}
},
"actions": [
${actionLinksAsJson}
],
"media": {
"images": [
${imageUrlsAsJson}
],
"audio": [
${audioUrlsAsJson}
],
"video": [
${videoUrlsAsJson}
]
},
"inventory": {
"available": ${inventoryData},
"locations": ${inventoryLocations},
"leadTimes": ${leadTimeData}
},
"navigation": {
"parentScreens": ${parentScreens},
"subScreens": ${subScreens},
"relatedScreens": ${relatedScreens}
},
"businessLogic": {
"workflows": ${availableWorkflows},
"validations": ${businessRules},
"constraints": ${dataConstraints}
}
}
]]></template>
</render-mode>
</screen-theme>
2. Screen Modifications
<!-- Modified screen for AI output -->
<screen name="ProductCatalog" theme-type="ai-optimized">
<actions>
<script><![CDATA[
// Prepare AI-optimized data structures
def products = []
def inventory = [:]
def media = [:]
// Process products for AI consumption
productList.each { product ->
def productData = [
id: product.productId,
name: product.productName,
description: product.description,
category: product.category,
features: extractFeatures(product),
pricing: [
list: product.price,
sale: product.salePrice,
currency: product.currency
],
availability: [
inStock: product.available,
quantity: product.quantityOnHand,
locations: product.inventoryLocations,
leadTime: product.leadTime
],
media: [
images: product.imageUrls,
videos: product.videoUrls,
documents: product.documentUrls
],
attributes: [
color: product.color,
size: product.size,
weight: product.weight,
specifications: product.specifications
],
relationships: [
category: product.categoryId,
related: product.relatedProducts,
accessories: product.accessories
]
]
products.add(productData)
// Aggregate inventory data
inventory[product.productId] = [
total: product.quantityOnHand,
available: product.availableToPromise,
reserved: product.reservedQuantity,
locations: product.stockLocations
]
}
// Set global context for AI theme
context.screenDataAsJson = new groovy.json.JsonBuilder(products).toString()
context.inventoryData = new groovy.json.JsonBuilder(inventory).toString()
context.imageUrlsAsJson = new groovy.json.JsonBuilder(extractAllImages()).toString()
context.actionLinksAsJson = new groovy.json.JsonBuilder(buildActionLinks()).toString()
]]></script>
</actions>
<widgets>
<!-- AI-optimized product listing -->
<container-list name="products" list="products">
<field-list name="aiProductData">
<field name="id"/>
<field name="name"/>
<field name="description"/>
<field name="pricing"/>
<field name="availability"/>
<field name="media"/>
<field name="attributes"/>
<field name="relationships"/>
</field-list>
</container-list>
</widgets>
</screen>
3. MCP Service Integration
<service verb="execute" noun="ScreenAsAiOptimizedTool" authenticate="true">
<description>Execute screen with AI-optimized JSON output</description>
<in-parameters>
<parameter name="screenPath" required="true"/>
<parameter name="parameters" type="Map"/>
<parameter name="aiMode" type="Boolean" default="true"/>
</in-parameters>
<out-parameters>
<parameter name="result" type="Map"/>
</out-parameters>
<actions>
<script><![CDATA[
import org.moqui.context.ExecutionContext
ExecutionContext ec = context.ec
// Set AI mode flag
ec.context.put("aiMode", aiMode)
ec.context.put("renderMode", "ai")
// Execute screen with AI theme
def screenTest = new org.moqui.mcp.CustomScreenTestImpl(ec.ecfi)
.rootScreen(getRootScreenForPath(screenPath))
.renderMode("ai")
.auth(ec.user.username)
def result = screenTest.render(getRelativePath(screenPath), parameters ?: [:], "POST")
def aiOutput = result.getOutput()
// Parse AI-optimized JSON
def aiData = groovy.json.JsonSlurper().parseText(aiOutput)
// Enhance with MCP-specific metadata
def enhancedResult = [
content: [
[
type: "text",
text: new groovy.json.JsonBuilder(aiData).toString(),
metadata: [
source: "ai-optimized-screen",
screenPath: screenPath,
renderMode: "ai",
timestamp: ec.user.nowTimestamp,
tokenOptimized: true
]
]
],
isError: false
]
result = enhancedResult
]]></script>
</actions>
</service>
Benefits for 9B+ Models
Token Efficiency
- 90% reduction in token usage vs HTML parsing
- Structured data - no parsing overhead
- Rich context - more meaning per token
Enhanced Capabilities
- Inventory images - direct URL references
- Call recordings - audio/video metadata
- Real-time stock - integrated inventory data
- Workflow triggers - actionable next steps
Example AI Output
{
"screenInfo": {
"name": "ProductCatalog",
"title": "Product Catalog",
"context": "sales-user",
"timestamp": "2025-12-11T10:30:00Z"
},
"data": {
"products": [
{
"id": "PROD-001",
"name": "Blue Widget",
"description": "Premium blue widget with advanced features",
"pricing": {
"list": 29.99,
"sale": 24.99,
"currency": "USD"
},
"availability": {
"inStock": true,
"quantity": 150,
"locations": ["WH-01", "WH-02"],
"leadTime": 2
},
"media": {
"images": [
"https://cdn.example.com/products/PROD-001-front.jpg",
"https://cdn.example.com/products/PROD-001-side.jpg"
],
"videos": [
"https://cdn.example.com/products/PROD-001-demo.mp4"
]
},
"attributes": {
"color": "blue",
"size": "medium",
"weight": "2.5kg"
}
}
]
},
"actions": [
{
"type": "create-order",
"label": "Create Order",
"screen": "OrderCreate",
"parameters": ["productId", "quantity"]
},
{
"type": "check-inventory",
"label": "Check Stock",
"screen": "InventoryCheck",
"parameters": ["productId", "location"]
}
],
"inventory": {
"PROD-001": {
"total": 150,
"available": 120,
"reserved": 30,
"locations": {
"WH-01": 80,
"WH-02": 70
}
}
}
}
Implementation Strategy
Phase 1: Theme Development
- Create
screen-theme-ai.xmlwith JSON templates - Modify key screens (Product, Order, Customer) for AI output
- Test with existing MCP interface
Phase 2: Service Enhancement
- Add
aiModeparameter to screen execution service - Implement AI-specific rendering logic
- Integrate with MCP tool discovery
Phase 3: Advanced Features
- Add inventory image integration
- Include call recording metadata
- Implement workflow suggestions
- Add real-time data feeds
For 9B Models
This approach enables smaller models to:
- Process richer data with less token overhead
-
Access multimedia through URL references
- Understand context through structured metadata
- Take actions through clear workflow links
- Scale efficiently without parsing HTML noise
The AI screen theme transforms Moqui from "web interface" to "AI interface" while preserving all security constructs.