{"id":"05595fb1-5fcf-472c-a941-9b2ddd76e428","entityType":"agent","slug":"clawhub-okaris-widgets-ui","name":"Widgets Ui","canonicalUrl":"https://www.xpersona.co/agent/clawhub-okaris-widgets-ui","canonicalPath":"/agent/clawhub-okaris-widgets-ui","generatedAt":"2026-10-14T05:37:55.553Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T21:00:20.781Z","emptyReason":null},"description":"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu... Skill: Widgets Ui Owner: okaris Summary: Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu... Tags: latest:0.1.5 Version history: v0.1.5 | 2026-02-18T08:31:37.630Z | auto - Added comprehensive documentation (SKILL.md) detailing all supported widget types, usage examples, and action handling. - Included quick st","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 994 downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s1737xapsjy8k5qnagtfyf5nrx85t72x:widgets-ui","sourceUrl":"https://clawhub.ai/okaris/widgets-ui","homepage":"https://clawhub.ai/okaris/skills/widgets-ui","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/okaris/widgets-ui","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/okaris/skills/widgets-ui","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T21:00:20.781Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T21:00:20.781Z","emptyReason":null},"stars":null,"forks":null,"downloads":994,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"0.1.5","tractionLabel":"994 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T21:00:20.720Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T21:00:20.781Z","lastCrawledAt":"2026-10-11T21:00:20.720Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T21:00:20.720Z","lastVerifiedAt":null,"highlights":[{"version":"0.1.5","createdAt":"2026-02-18T08:31:37.630Z","changelog":"- Added comprehensive documentation (SKILL.md) detailing all supported widget types, usage examples, and action handling. - Included quick start instructions for integrating widgets in React/Next.js via ui.inference.sh. - Listed available layout, typography, interactive, and display widget types with configuration samples. - Provided example widgets for flight cards and forms. - Documented available background gradients and how to use them. - Linked to related skills and external documentation for further reference.","fileCount":2,"zipByteSize":2144},{"version":"0.1.0","createdAt":"2026-02-06T07:40:38.128Z","changelog":"widgets-ui 0.1.0 - Initial release introducing a declarative JSON-to-React/Next.js UI widget renderer. - Supports dynamic forms, cards, buttons, layouts, selects, inputs, checkboxes, badges, icons, and more. - Easily render interactive UIs from agent responses or structured JSON data. - Quick integration via npx and shadcn. - Includes example usage, schema references, and links to related agent and UI skills.","fileCount":2,"zipByteSize":2079}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1737xapsjy8k5qnagtfyf5nrx85t72x:widgets-ui","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-14T05:37:55.553Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-okaris-widgets-ui/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T21:00:20.781Z","emptyReason":null},"readme":"Skill: Widgets Ui\n\nOwner: okaris\n\nSummary: Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu...\n\nTags: latest:0.1.5\n\nVersion history:\n\nv0.1.5 | 2026-02-18T08:31:37.630Z | auto\n\n- Added comprehensive documentation (SKILL.md) detailing all supported widget types, usage examples, and action handling.\n- Included quick start instructions for integrating widgets in React/Next.js via ui.inference.sh.\n- Listed available layout, typography, interactive, and display widget types with configuration samples.\n- Provided example widgets for flight cards and forms.\n- Documented available background gradients and how to use them.\n- Linked to related skills and external documentation for further reference.\n\nv0.1.0 | 2026-02-06T07:40:38.128Z | auto\n\nwidgets-ui 0.1.0\n\n- Initial release introducing a declarative JSON-to-React/Next.js UI widget renderer.\n- Supports dynamic forms, cards, buttons, layouts, selects, inputs, checkboxes, badges, icons, and more.\n- Easily render interactive UIs from agent responses or structured JSON data.\n- Quick integration via npx and shadcn.\n- Includes example usage, schema references, and links to related agent and UI skills.\n\nArchive index:\n\nArchive v0.1.5: 2 files, 2144 bytes\n\nFiles: SKILL.md (4948b), _meta.json (129b)\n\nFile v0.1.5:SKILL.md\n\n---\nname: widgets-ui\ndescription: \"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets,\"  dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui\n---\n\n# Widget Renderer\n\nDeclarative UI from JSON via [ui.inference.sh](https://ui.inference.sh).\n\n![Widget Renderer](https://cloud.inference.sh/u/33sqbmzt3mrg2xxphnhw5g5ear/01kah2rcteycyxw8ffmtpq1zec.png)\n\n## Quick Start\n\n```bash\nnpx shadcn@latest add https://ui.inference.sh/r/widgets.json\n```\n\n## Basic Usage\n\n```tsx\nimport { WidgetRenderer } from \"@/registry/blocks/widgets/widget-renderer\"\nimport type { Widget, WidgetAction } from \"@/registry/blocks/widgets/types\"\n\nconst widget: Widget = {\n  type: 'ui',\n  title: 'My Widget',\n  children: [\n    { type: 'text', value: 'Hello World' },\n    { type: 'button', label: 'Click me', onClickAction: { type: 'click' } },\n  ],\n}\n\n<WidgetRenderer\n  widget={widget}\n  onAction={(action, formData) => console.log(action, formData)}\n/>\n```\n\n## Widget Types\n\n### Layout\n\n```json\n{ \"type\": \"row\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"col\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"box\", \"background\": \"gradient-ocean\", \"padding\": 4, \"radius\": \"lg\", \"children\": [...] }\n```\n\n### Typography\n\n```json\n{ \"type\": \"title\", \"value\": \"Heading\", \"size\": \"2xl\", \"weight\": \"bold\" }\n{ \"type\": \"text\", \"value\": \"Body text\", \"variant\": \"bold\" }\n{ \"type\": \"caption\", \"value\": \"Small text\" }\n{ \"type\": \"label\", \"value\": \"Field label\", \"fieldName\": \"email\" }\n```\n\n### Interactive\n\n```json\n{ \"type\": \"button\", \"label\": \"Submit\", \"variant\": \"default\", \"onClickAction\": { \"type\": \"submit\" } }\n{ \"type\": \"input\", \"name\": \"email\", \"placeholder\": \"Enter email\" }\n{ \"type\": \"textarea\", \"name\": \"message\", \"placeholder\": \"Your message\" }\n{ \"type\": \"select\", \"name\": \"plan\", \"options\": [{ \"value\": \"pro\", \"label\": \"Pro\" }] }\n{ \"type\": \"checkbox\", \"name\": \"agree\", \"label\": \"I agree\", \"defaultChecked\": false }\n```\n\n### Display\n\n```json\n{ \"type\": \"badge\", \"label\": \"New\", \"variant\": \"secondary\" }\n{ \"type\": \"icon\", \"iconName\": \"check\", \"size\": \"lg\" }\n{ \"type\": \"image\", \"src\": \"https://...\", \"alt\": \"Image\", \"width\": 100, \"height\": 100 }\n{ \"type\": \"divider\" }\n```\n\n## Example: Flight Card\n\n```tsx\nconst flightWidget: Widget = {\n  type: 'ui',\n  children: [\n    {\n      type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [\n        {\n          type: 'row', justify: 'between', children: [\n            {\n              type: 'col', gap: 1, children: [\n                { type: 'caption', value: 'departure' },\n                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },\n              ]\n            },\n            { type: 'icon', iconName: 'plane', size: 'lg' },\n            {\n              type: 'col', gap: 1, align: 'end', children: [\n                { type: 'caption', value: 'arrival' },\n                { type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },\n              ]\n            },\n          ]\n        },\n      ]\n    },\n  ],\n}\n```\n\n## Example: Form\n\n```tsx\nconst formWidget: Widget = {\n  type: 'ui',\n  title: 'Contact Form',\n  asForm: true,\n  children: [\n    {\n      type: 'col', gap: 3, children: [\n        { type: 'input', name: 'name', placeholder: 'Your name' },\n        { type: 'input', name: 'email', placeholder: 'Email address' },\n        { type: 'textarea', name: 'message', placeholder: 'Message' },\n        { type: 'button', label: 'Send', variant: 'default', onClickAction: { type: 'submit' } },\n      ]\n    },\n  ],\n}\n```\n\n## Gradients\n\n| Name | Description |\n|------|-------------|\n| `gradient-ocean` | Blue teal gradient |\n| `gradient-sunset` | Orange pink gradient |\n| `gradient-purple` | Purple gradient |\n| `gradient-cool` | Cool blue gradient |\n| `gradient-midnight` | Dark blue gradient |\n\n## Handling Actions\n\n```tsx\nconst handleAction = (action: WidgetAction, formData?: WidgetFormData) => {\n  switch (action.type) {\n    case 'submit':\n      console.log('Form data:', formData)\n      break\n    case 'click':\n      console.log('Button clicked')\n      break\n  }\n}\n```\n\n## Related Skills\n\n```bash\n# Full agent component\nnpx skills add inference-sh/skills@agent-ui\n\n# Chat UI blocks\nnpx skills add inference-sh/skills@chat-ui\n\n# Tool UI\nnpx skills add inference-sh/skills@tools-ui\n```\n\n## Documentation\n\n- [Widgets Overview](https://inference.sh/docs/agents/widgets/overview) - Understanding widgets\n- [Widget Schema](https://inference.sh/docs/agents/widgets/schema) - Widget JSON structure\n- [Agents That Generate UI](https://inference.sh/blog/ux/generative-ui) - Building generative UIs\n\nComponent docs: [ui.inference.sh/blocks/widgets](https://ui.inference.sh/blocks/widgets)\n\nFile v0.1.5:_meta.json\n\n{\n  \"ownerId\": \"kn7c1hgfycdfnrf5w8mp3pf1jd808pjv\",\n  \"slug\": \"widgets-ui\",\n  \"version\": \"0.1.5\",\n  \"publishedAt\": 1771403497630\n}\n\nArchive v0.1.0: 2 files, 2079 bytes\n\nFiles: SKILL.md (4869b), _meta.json (129b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: widgets-ui\ndescription: |\n  Declarative UI widgets from JSON for React/Next.js from ui.inference.sh.\n  Render rich interactive UIs from structured agent responses.\n  Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes.\n  Use for: agent-generated UIs, dynamic forms, data display, interactive cards.\n  Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets,\n  dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui\n---\n\n# Widget Renderer\n\nDeclarative UI from JSON via [ui.inference.sh](https://ui.inference.sh).\n\n## Quick Start\n\n```bash\nnpx shadcn@latest add https://ui.inference.sh/r/widgets.json\n```\n\n## Basic Usage\n\n```tsx\nimport { WidgetRenderer } from \"@/registry/blocks/widgets/widget-renderer\"\nimport type { Widget, WidgetAction } from \"@/registry/blocks/widgets/types\"\n\nconst widget: Widget = {\n  type: 'ui',\n  title: 'My Widget',\n  children: [\n    { type: 'text', value: 'Hello World' },\n    { type: 'button', label: 'Click me', onClickAction: { type: 'click' } },\n  ],\n}\n\n<WidgetRenderer\n  widget={widget}\n  onAction={(action, formData) => console.log(action, formData)}\n/>\n```\n\n## Widget Types\n\n### Layout\n\n```json\n{ \"type\": \"row\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"col\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"box\", \"background\": \"gradient-ocean\", \"padding\": 4, \"radius\": \"lg\", \"children\": [...] }\n```\n\n### Typography\n\n```json\n{ \"type\": \"title\", \"value\": \"Heading\", \"size\": \"2xl\", \"weight\": \"bold\" }\n{ \"type\": \"text\", \"value\": \"Body text\", \"variant\": \"bold\" }\n{ \"type\": \"caption\", \"value\": \"Small text\" }\n{ \"type\": \"label\", \"value\": \"Field label\", \"fieldName\": \"email\" }\n```\n\n### Interactive\n\n```json\n{ \"type\": \"button\", \"label\": \"Submit\", \"variant\": \"default\", \"onClickAction\": { \"type\": \"submit\" } }\n{ \"type\": \"input\", \"name\": \"email\", \"placeholder\": \"Enter email\" }\n{ \"type\": \"textarea\", \"name\": \"message\", \"placeholder\": \"Your message\" }\n{ \"type\": \"select\", \"name\": \"plan\", \"options\": [{ \"value\": \"pro\", \"label\": \"Pro\" }] }\n{ \"type\": \"checkbox\", \"name\": \"agree\", \"label\": \"I agree\", \"defaultChecked\": false }\n```\n\n### Display\n\n```json\n{ \"type\": \"badge\", \"label\": \"New\", \"variant\": \"secondary\" }\n{ \"type\": \"icon\", \"iconName\": \"check\", \"size\": \"lg\" }\n{ \"type\": \"image\", \"src\": \"https://...\", \"alt\": \"Image\", \"width\": 100, \"height\": 100 }\n{ \"type\": \"divider\" }\n```\n\n## Example: Flight Card\n\n```tsx\nconst flightWidget: Widget = {\n  type: 'ui',\n  children: [\n    {\n      type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [\n        {\n          type: 'row', justify: 'between', children: [\n            {\n              type: 'col', gap: 1, children: [\n                { type: 'caption', value: 'departure' },\n                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },\n              ]\n            },\n            { type: 'icon', iconName: 'plane', size: 'lg' },\n            {\n              type: 'col', gap: 1, align: 'end', children: [\n                { type: 'caption', value: 'arrival' },\n                { type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },\n              ]\n            },\n          ]\n        },\n      ]\n    },\n  ],\n}\n```\n\n## Example: Form\n\n```tsx\nconst formWidget: Widget = {\n  type: 'ui',\n  title: 'Contact Form',\n  asForm: true,\n  children: [\n    {\n      type: 'col', gap: 3, children: [\n        { type: 'input', name: 'name', placeholder: 'Your name' },\n        { type: 'input', name: 'email', placeholder: 'Email address' },\n        { type: 'textarea', name: 'message', placeholder: 'Message' },\n        { type: 'button', label: 'Send', variant: 'default', onClickAction: { type: 'submit' } },\n      ]\n    },\n  ],\n}\n```\n\n## Gradients\n\n| Name | Description |\n|------|-------------|\n| `gradient-ocean` | Blue teal gradient |\n| `gradient-sunset` | Orange pink gradient |\n| `gradient-purple` | Purple gradient |\n| `gradient-cool` | Cool blue gradient |\n| `gradient-midnight` | Dark blue gradient |\n\n## Handling Actions\n\n```tsx\nconst handleAction = (action: WidgetAction, formData?: WidgetFormData) => {\n  switch (action.type) {\n    case 'submit':\n      console.log('Form data:', formData)\n      break\n    case 'click':\n      console.log('Button clicked')\n      break\n  }\n}\n```\n\n## Related Skills\n\n```bash\n# Full agent component\nnpx skills add inference-sh/agent-skills@agent-ui\n\n# Chat UI blocks\nnpx skills add inference-sh/agent-skills@chat-ui\n\n# Tool UI\nnpx skills add inference-sh/agent-skills@tools-ui\n```\n\n## Documentation\n\n- [Widgets Overview](https://inference.sh/docs/agents/widgets/overview) - Understanding widgets\n- [Widget Schema](https://inference.sh/docs/agents/widgets/schema) - Widget JSON structure\n- [Agents That Generate UI](https://inference.sh/blog/ux/generative-ui) - Building generative UIs\n\nComponent docs: [ui.inference.sh/blocks/widgets](https://ui.inference.sh/blocks/widgets)\n\nFile v0.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn7c1hgfycdfnrf5w8mp3pf1jd808pjv\",\n  \"slug\": \"widgets-ui\",\n  \"version\": \"0.1.0\",\n  \"publishedAt\": 1770363638128\n}","readmeExcerpt":"Skill: Widgets Ui Owner: okaris Summary: Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu... Tags: latest:0.1.5 Version history: v0.1.5 | 2026-02-18T08:31:37.630Z | auto - Added comprehensive documentation (SKILL.md) detailing all supported widget types, usage examples, and action handling. - Included quick st","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"npx shadcn@latest add https://ui.inference.sh/r/widgets.json"},{"language":"tsx","snippet":"import { WidgetRenderer } from \"@/registry/blocks/widgets/widget-renderer\"\nimport type { Widget, WidgetAction } from \"@/registry/blocks/widgets/types\"\n\nconst widget: Widget = {\n  type: 'ui',\n  title: 'My Widget',\n  children: [\n    { type: 'text', value: 'Hello World' },\n    { type: 'button', label: 'Click me', onClickAction: { type: 'click' } },\n  ],\n}\n\n<WidgetRenderer\n  widget={widget}\n  onAction={(action, formData) => console.log(action, formData)}\n/>"},{"language":"json","snippet":"{ \"type\": \"row\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"col\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"box\", \"background\": \"gradient-ocean\", \"padding\": 4, \"radius\": \"lg\", \"children\": [...] }"},{"language":"json","snippet":"{ \"type\": \"title\", \"value\": \"Heading\", \"size\": \"2xl\", \"weight\": \"bold\" }\n{ \"type\": \"text\", \"value\": \"Body text\", \"variant\": \"bold\" }\n{ \"type\": \"caption\", \"value\": \"Small text\" }\n{ \"type\": \"label\", \"value\": \"Field label\", \"fieldName\": \"email\" }"},{"language":"json","snippet":"{ \"type\": \"button\", \"label\": \"Submit\", \"variant\": \"default\", \"onClickAction\": { \"type\": \"submit\" } }\n{ \"type\": \"input\", \"name\": \"email\", \"placeholder\": \"Enter email\" }\n{ \"type\": \"textarea\", \"name\": \"message\", \"placeholder\": \"Your message\" }\n{ \"type\": \"select\", \"name\": \"plan\", \"options\": [{ \"value\": \"pro\", \"label\": \"Pro\" }] }\n{ \"type\": \"checkbox\", \"name\": \"agree\", \"label\": \"I agree\", \"defaultChecked\": false }"},{"language":"json","snippet":"{ \"type\": \"badge\", \"label\": \"New\", \"variant\": \"secondary\" }\n{ \"type\": \"icon\", \"iconName\": \"check\", \"size\": \"lg\" }\n{ \"type\": \"image\", \"src\": \"https://...\", \"alt\": \"Image\", \"width\": 100, \"height\": 100 }\n{ \"type\": \"divider\" }"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: widgets-ui\ndescription: \"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets,\"  dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui\n---\n\n# Widget Renderer\n\nDeclarative UI from JSON via [ui.inference.sh](https://ui.inference.sh).\n\n![Widget Renderer](https://cloud.inference.sh/u/33sqbmzt3mrg2xxphnhw5g5ear/01kah2rcteycyxw8ffmtpq1zec.png)\n\n## Quick Start\n\n```bash\nnpx shadcn@latest add https://ui.inference.sh/r/widgets.json\n```\n\n## Basic Usage\n\n```tsx\nimport { WidgetRenderer } from \"@/registry/blocks/widgets/widget-renderer\"\nimport type { Widget, WidgetAction } from \"@/registry/blocks/widgets/types\"\n\nconst widget: Widget = {\n  type: 'ui',\n  title: 'My Widget',\n  children: [\n    { type: 'text', value: 'Hello World' },\n    { type: 'button', label: 'Click me', onClickAction: { type: 'click' } },\n  ],\n}\n\n<WidgetRenderer\n  widget={widget}\n  onAction={(action, formData) => console.log(action, formData)}\n/>\n```\n\n## Widget Types\n\n### Layout\n\n```json\n{ \"type\": \"row\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"col\", \"gap\": 2, \"children\": [...] }\n{ \"type\": \"box\", \"background\": \"gradient-ocean\", \"padding\": 4, \"radius\": \"lg\", \"children\": [...] }\n```\n\n### Typography\n\n```json\n{ \"type\": \"title\", \"value\": \"Heading\", \"size\": \"2xl\", \"weight\": \"bold\" }\n{ \"type\": \"text\", \"value\": \"Body text\", \"variant\": \"bold\" }\n{ \"type\": \"caption\", \"value\": \"Small text\" }\n{ \"type\": \"label\", \"value\": \"Field label\", \"fieldName\": \"email\" }\n```\n\n### Interactive\n\n```json\n{ \"type\": \"button\", \"label\": \"Submit\", \"variant\": \"default\", \"onClickAction\": { \"type\": \"submit\" } }\n{ \"type\": \"input\", \"name\": \"email\", \"placeholder\": \"Enter email\" }\n{ \"type\": \"textarea\", \"name\": \"message\", \"placeholder\": \"Your message\" }\n{ \"type\": \"select\", \"name\": \"plan\", \"options\": [{ \"value\": \"pro\", \"label\": \"Pro\" }] }\n{ \"type\": \"checkbox\", \"name\": \"agree\", \"label\": \"I agree\", \"defaultChecked\": false }\n```\n\n### Display\n\n```json\n{ \"type\": \"badge\", \"label\": \"New\", \"variant\": \"secondary\" }\n{ \"type\": \"icon\", \"iconName\": \"check\", \"size\": \"lg\" }\n{ \"type\": \"image\", \"src\": \"https://...\", \"alt\": \"Image\", \"width\": 100, \"height\": 100 }\n{ \"type\": \"divider\" }\n```\n\n## Example: Flight Card\n\n```tsx\nconst flightWidget: Widget = {\n  type: 'ui',\n  children: [\n    {\n      type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [\n        {\n          type: 'row', justify: 'between', children: [\n            {\n              type: 'col', gap: 1, children: [\n                { type: 'caption', value: 'departure' },\n                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },\n              ]\n            },\n            { type: 'icon', iconName: 'plane', size: 'lg' },\n     "},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7c1hgfycdfnrf5w8mp3pf1jd808pjv\",\n  \"slug\": \"widgets-ui\",\n  \"version\": \"0.1.5\",\n  \"publishedAt\": 1771403497630\n}"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu... Skill: Widgets Ui Owner: okaris Summary: Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, bu... Tags: latest:0.1.5 Version history: v0.1.5 | 2026-02-18T08:31:37.630Z | auto - Added comprehensive documentation (SKILL.md) detailing all supported widget types, usage examples, and action handling. - Included quick st","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":653,"uniquenessScore":56,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T21:00:20.781Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T21:00:20.781Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-14T05:37:55.553Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}