| name | e2e-prompt-gen |
| description | Generate prompts targeting multiple action surfaces (Telegram, OpenAI Canvas, MCP Apps, CLI, etc.) |
| version | 1.0.0 |
| dependencies | ["lev-ui-universal","lev-poly"] |
| storage | {"templates":"./templates/","outputs":"./outputs/"} |
E2E Target Prompt Generator
Generate prompts that render across multiple action surfaces using abstract widget definitions.
Overview
This skill bridges lev-ui-universal widget definitions to concrete action surface implementations:
UniversalWidget → ActionSurfaceAdapter → Platform-Specific Output
│ │
│ ├── TelegramAdapter → InlineKeyboard / Mini App
│ ├── OpenAIAdapter → Canvas iframe / GPT App
│ ├── McpAppsAdapter → SEP-1865 HTML
│ ├── CliAdapter → inquirer prompts
│ └── HttpAdapter → JSON API response
Usage
e2e-prompt-gen --surface telegram --widget status-dashboard
e2e-prompt-gen --surface all --widget event-log
cat widget.json | e2e-prompt-gen --surface openai
Supported Action Surfaces
| Surface | Output Format | Constraints |
|---|
telegram | InlineKeyboardMarkup + WebApp URL | 100 buttons max, 64 bytes callback_data |
openai | Canvas iframe HTML + window.openai API | Sandboxed, frame_domains allowlist |
mcp-apps | SEP-1865 compliant HTML | JSON-RPC over postMessage |
discord | Embed + Components | 5 action rows, 25 components max |
cli | inquirer.js prompts | stdin/stdout |
http | JSON response | RESTful |
grpc | Protocol Buffer | lev.ui.v1 schema |
Widget Mapping
Card → Surfaces
{
type: "card",
title: "System Status",
variant: "elevated",
glow: "emerald",
children: [...]
}
StatusBadge → Surfaces
{
type: "status_badge",
status: "active",
label: "Online",
pulse: true
}
ActionButton → Surfaces
{
type: "action_button",
label: "Approve",
action: "task:approve:123",
variant: "primary"
}
Template System
Templates live in ./templates/ and use handlebars syntax:
{{! templates/telegram-mini-app.hbs }}
<!DOCTYPE html>
<html>
<head>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>{{{cyberpunk_css}}}</style>
</head>
<body>
<div class="lev-container">
{{#each widgets}}
{{{render this}}}
{{/each}}
</div>
<script>
Telegram.WebApp.ready();
Telegram.WebApp.MainButton.setText('{{main_button_text}}');
Telegram.WebApp.MainButton.onClick(() => {
Telegram.WebApp.sendData(JSON.stringify({{data}}));
});
</script>
</body>
</html>
Integration with Lev Poly
This skill leverages existing lev poly infrastructure:
lev/core/polyglot-runners/
├── bridge/ # MCP Bridge (WebSocket + JSON-RPC)
├── cli/ # CLI transport
├── src/server/ # HTTP/SSE
├── proto/ # gRPC definitions
└── sdk/typescript # SDK client
MCP Tool Registration
server.registerTool({
name: "render_ui",
description: "Render UniversalWidget to action surface",
inputSchema: {
type: "object",
properties: {
widget: { $ref: "#/definitions/UniversalWidget" },
surface: { enum: ["telegram", "openai", "mcp-apps", "cli", "http"] }
}
},
handler: async ({ widget, surface }) => {
const adapter = getAdapter(surface);
return adapter.render(widget);
}
});
Platform Capabilities Detection
interface PlatformCaps {
has_mouse: boolean;
has_touch: boolean;
has_system_tray: boolean;
has_notifications: boolean;
has_color: boolean;
max_colors: number;
max_buttons?: number;
max_callback_data?: number;
supports_iframe?: boolean;
}
const telegramCaps: PlatformCaps = {
has_mouse: false,
has_touch: true,
has_system_tray: false,
has_notifications: true,
has_color: true,
max_colors: 0,
max_buttons: 100,
max_callback_data: 64,
supports_iframe: true
};
const cliCaps: PlatformCaps = {
has_mouse: false,
has_touch: false,
has_system_tray: ,
: ,
: ,
:
};
Prompt Generation Examples
Generate Status Dashboard Prompt
e2e-prompt-gen --surface telegram --widget status-dashboard
Output:
{
"method": "sendMessage",
"chat_id": "{{chat_id}}",
"text": "System Status",
"reply_markup": {
"inline_keyboard": [
[{ "text": "View Dashboard", "web_app": { "url": "https://lev.app/mini/status" } }],
[{ "text": "Refresh", "callback_data": "status:refresh" }]
]
}
}
Generate OpenAI Canvas Prompt
e2e-prompt-gen --surface openai --widget event-log
Output:
<!DOCTYPE html>
<html>
<head>
<style></style>
<script>
window.addEventListener('message', (e) => {
if (e.data.type === 'events') {
renderEventLog(e.data.events);
}
});
window.openai?.onToolOutput((data) => {
renderEventLog(data.events);
});
</script>
</head>
<body>
<div class="event-log" id="log"></div>
</body>
</html>
Files
e2e-prompt-gen/
├── SKILL.md # This file
├── templates/
│ ├── telegram-mini-app.hbs
│ ├── telegram-inline.hbs
│ ├── openai-canvas.hbs
│ ├── mcp-apps.hbs
│ ├── cli-inquirer.hbs
│ └── http-response.hbs
├── adapters/
│ ├── telegram.ts
│ ├── openai.ts
│ ├── mcp-apps.ts
│ ├── cli.ts
│ └── http.ts
└── outputs/ # Generated prompts cached here
References
