Give your tools an interface.

01 — OVERVIEWWhat it is

An MCP tool returns data; a widget decides how that data looks. The Widget Builder at builder.appramp.dev connects to any of your AppRamp MCP servers, reads the tools it exposes, and generates a complete UI widget from a plain-language prompt — a weather card, an order table, a status dashboard. Deployed widgets are served through the same MCP endpoint (resources/read), so clients that support the Apps SDK render them automatically alongside the tool result.

02 — SETUPBefore you start

1. An AppRamp account. The builder requires the same sign-in as the dashboard. Signing in on either subdomain signs you in on both.
2. An MCP server. Create one from the dashboard (New MCP server, paste an OpenAPI spec). Its endpoint URL is what the builder connects to.

03 — CONNECTConnecting a server

Paste your MCP endpoint into the connect screen. It has the shape:

https://mcp-gateway.appramp.dev/{workspace}/{api}/{env}

The builder calls tools/list and shows every tool with its input schema. Recently used endpoints are remembered, and the ?gateway=… deep link from the dashboard auto-connects.

04 — GENERATEGenerating a widget

1. Pick a tool from the connected server.
2. Fetch sample data (optional but recommended) — the builder calls the tool once so the AI sees real field names and values instead of guessing from the schema.
3. Describe the widget. Say what to show and how: “A card with the current temperature large, the city name above it, and wind speed below in a muted row.”
4. Generate. The AI produces a widget configuration, validates it, and renders a live preview.

Prompts work best when they name the fields that matter, state the visual hierarchy (what is large, what is secondary), and mention the tone (minimal, playful, corporate). Five theme presets are built in: glass, minimal, bold, corporate, playful.

05 — REFINEPreview & editing

The preview pane simulates desktop, tablet, and phone widths. Two ways to refine:

• Chat refinement — ask for changes in plain language (“make the temperature blue, add a sunrise row”) and the AI edits the configuration.
• The JSON editor — the full widget configuration is editable by hand; re-render applies it instantly.

Widgets bind to live tool output with a template syntax:

{{toolOutput.current.temp_c}}
{{toolOutput.items[0].name}}
{{toolOutput.location.city}}

In preview, bindings resolve against the sample data. In production, they resolve against the real tool result at render time.

06 — DEPLOYDeploying

Deploy publishes the widget to edge storage, versioned per tool. From that moment your MCP endpoint serves it to clients through resources/list and resources/read — no extra hosting, no client configuration. Re-deploying creates a new version and moves the “latest” pointer; ChatGPT and other Apps-SDK clients pick it up on their next call.

07 — REFERENCEComponent reference

Generated widgets compose from a fixed library of 28 components — the AI selects and arranges them, and you can rearrange freely in the editor.

Group	Components
Display	metric-card, data-table, detail-panel, status-badge, chart, progress-bar, timeline, image-card, comparison-table, stat-group, list-item, avatar, tag-group, empty-state, skeleton
Interactive	button, button-group, input, select, search-box, toggle, checkbox-group
Layout	stack-layout, split-panel, grid, tabs, accordion, card, modal, alert

08 — REFERENCETroubleshooting

Symptom	Cause & fix
Sign-in screen keeps appearing	The builder requires an AppRamp account. Sign in with the same Google, GitHub, or email account you use on the dashboard.
Tool not found when generating	The endpoint compiled without that operation — check the import report on the dashboard, or re-import with more HTTP methods allowed.
Preview renders but fields are empty	A binding path does not match the tool output. Fetch sample data and compare the paths in the JSON editor against the real response.
Generation fails repeatedly	Very large schemas can exceed the model context. Try a more specific prompt, or a tool with a smaller response.
Widget not visible in ChatGPT	Confirm the widget is deployed (not just previewed) and that your client supports the Apps SDK resource flow.

Something else not working? Write to support@appramp.dev.