Add UI Component
design_add_componentAdd a UI component such as hero, navbar, or card to the design canvas. Configure variant and props, nest under parent, and see changes in real-time on the client dashboard.
Instructions
Add a UI component to the design canvas. The component will appear in the client dashboard in real-time.
Component types: hero, navbar, card, card_grid, button, form, text_section, image, cta, footer, stats, timeline, pricing, testimonial, faq, feature_list, banner, tabs, accordion, carousel, modal, sidebar, breadcrumb, pagination, progress, badge, avatar
Each type has variants:
hero: 'centered', 'split', 'fullbleed'
navbar: 'simple', 'with_cta', 'mega'
card: 'product', 'feature', 'article', 'profile'
card_grid: '2col', '3col', '4col'
button: 'primary', 'secondary', 'ghost'
cta: 'centered', 'split', 'banner'
Args:
type (string): Component type
variant (string, optional): Component variant
props (object, optional): Component properties (title, subtitle, text, image_url, items, etc.)
parent_id (string, optional): Parent component ID for nesting
Examples:
design_add_component(type="hero", variant="centered", props={"title": "夏季大促", "subtitle": "精选商品5折起", "button_text": "立即抢购"})
design_add_component(type="card_grid", variant="3col", props={"items": [{...}, {...}, {...}]})
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | Component type (hero, navbar, card, card_grid, button, form, text_section, image, cta, footer, stats, timeline, pricing, testimonial, faq, feature_list, banner, tabs, accordion, carousel, modal, sidebar, breadcrumb, pagination, progress, badge, avatar) | |
| props | No | Component properties | |
| variant | No | Component variant | |
| parent_id | No | Parent component ID for nesting |