---
name: eggapi-dynamic-ui
description: Show the user a small form page instead of asking many questions in chat - compose it from EggAPI's pre-built components with one short JSON description (render_ui), let the user fill it in inside the client or in a browser, then continue from their real input and results. Use when an image or video request needs several choices (product image, brand, selling points, placement, style, model, size, duration, cost), or when the user asks for a form, page, panel or UI (表单、界面、面板、填写页).
---

# EggAPI dynamic UI

The component contract and the full protocol are served by EggAPI itself; this skill only says when and how to use them. Reply in the user's language and label fields in that language.

## Tools

The EggAPI MCP server (usually named `eggapi`) provides `get_ui_catalog`, `render_ui`, `update_ui`, `get_ui_state`, `set_ui_values` and `run_ui_action`. Without MCP, the `eggapi` CLI does the same with `eggapi ui catalog|create|update|state|set|run|wait --json` (API key in `EGGAPI_API_KEY`). If neither is available, send the user to https://eggapi.ai/docs/dynamic-ui.

## Workflow

1. Call `get_ui_catalog` once per conversation. For a starting point pass `example` (`ad_image`, `product_main_image`, `image_to_video`), then adapt it: examples are references, not templates to pick from.
2. Write the smallest page that covers the request: only the fields you still need, grouped in sections, a `model_picker` (or a fixed model) with prices, a `cost_estimate` and a `generate_button` bound to one `generate` action, plus `task_status` and `image_gallery` or `video_preview`. Pre-fill anything the conversation already tells you with `values`.
3. Call `render_ui`. If it returns `SCHEMA_INVALID`, fix each listed path and call again.
4. Always give the user `browser_url` (it works on any device signed in to their EggAPI account). If `ui_mode` is `embedded`, the page is also shown in the conversation.
5. Wait for the user. When they say they are done, call `get_ui_state` and continue from the real values, outputs and costs. Do not poll in a loop.
6. For changes ("add a copy field", "switch to a video ad", "hide the model choice"), send the complete new page to `update_ui` with `base_revision` = the latest `schema_revision`, keeping existing ids so input is preserved. To hide the model choice, bind the action's `model` to `{"value": "<current model id>"}` and remove the picker. Tell the user what `reconcile.reset` or `reconcile.removed` lists.
7. Without a browser (SSH, headless): read `fields` from `get_ui_state`, ask for the missing ones in chat, save them with `set_ui_values`.
8. Paid generation starts only from the page's button, or from `run_ui_action` after the user explicitly agreed to `estimated_cost_usd`; pass that amount as `expected_cost_usd`. Use a new `submission_id` per request and reuse it when retrying. If the run returns `estimate_changed`, show the new estimate and ask again.

## Never

- Write HTML, CSS, React or any code for the page, install dependencies, start servers or run browser tests.
- Put API keys or other secrets in a page, its values or a link.
- Call `run_ui_action` because a page is complete: completeness is not consent.