[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EVCNHHZ695233XSMP4XB9Z":3,"skill-same:01M6EVCNHHZ695233XSMP4XB9Z":83},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M6EVCNHHZ695233XSMP4XB9Z","agent-ui",null,"\"Batteries-included agent component for React\u002FNext.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent,\"  agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Fagent-ui\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"agent ui","ui","loop","form","human in the loop","react agent","widgets","batteries","human","drop","next","assistant","Tools","streaming","shadcn","capabilities","copilot","component","react","agentic","2026-11-10 10:12:30",false,"---\nname: agent-ui\ndescription: \"\\\"Batteries-included agent component for React\u002FNext.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent,\\\"  agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop\"\n---\n\n# Agent Component\n\nBatteries-included agent component from [ui.inference.sh](https:\u002F\u002Fui.inference.sh).\n\n![Agent Component](https:\u002F\u002Fcloud.inference.sh\u002Fapp\u002Ffiles\u002Fu\u002F4mg21r6ta37mpaz6ktzwtt8krr\u002F01kgvftp7hb8wby7z66fvs9asd.jpeg)\n\n## Quick Start\n\n```bash\n# Install the agent component\nnpx shadcn@latest add https:\u002F\u002Fui.inference.sh\u002Fr\u002Fagent.json\n\n# Add the SDK for the proxy route\nnpm install @inferencesh\u002Fsdk\n```\n\n## Setup\n\n### 1. API Proxy Route (Next.js)\n\n```typescript\n\u002F\u002F app\u002Fapi\u002Finference\u002Fproxy\u002Froute.ts\nimport { route } from '@inferencesh\u002Fsdk\u002Fproxy\u002Fnextjs';\nexport const { GET, POST, PUT } = route;\n```\n\n### 2. Environment Variable\n\n```bash\n# .env.local\nINFERENCE_API_KEY=inf_...\n```\n\n### 3. Use the Component\n\n```tsx\nimport { Agent } from \"@\u002Fregistry\u002Fblocks\u002Fagent\u002Fagent\"\n\nexport default function Page() {\n  return (\n    \u003CAgent\n      proxyUrl=\"\u002Fapi\u002Finference\u002Fproxy\"\n      agentConfig={{\n        core_app: { ref: 'openrouter\u002Fclaude-haiku-45@0fkg6xwb' },\n        description: 'a helpful ai assistant',\n        system_prompt: 'you are helpful.',\n      }}\n    \u002F>\n  )\n}\n```\n\n## Features\n\n| Feature | Description |\n|---------|-------------|\n| Runtime included | No backend logic needed |\n| Tool lifecycle | Pending, progress, approval, results |\n| Human-in-the-loop | Built-in approval flows |\n| Widgets | Declarative JSON UI from agent responses |\n| Streaming | Real-time token streaming |\n| Client-side tools | Tools that run in the browser |\n\n## Client-Side Tools Example\n\n```tsx\nimport { Agent } from \"@\u002Fregistry\u002Fblocks\u002Fagent\u002Fagent\"\nimport { createScopedTools } from \".\u002Fblocks\u002Fagent\u002Flib\u002Fclient-tools\"\n\nconst formRef = useRef\u003CHTMLFormElement>(null)\nconst scopedTools = createScopedTools(formRef)\n\n\u003CAgent\n  proxyUrl=\"\u002Fapi\u002Finference\u002Fproxy\"\n  config={{\n    core_app: { ref: 'openrouter\u002Fclaude-haiku-45@0fkg6xwb' },\n    tools: scopedTools,\n    system_prompt: 'You can fill forms using scan_ui and fill_field tools.',\n  }}\n\u002F>\n```\n\n## Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `proxyUrl` | string | API proxy endpoint |\n| `name` | string | Agent name (optional) |\n| `config` | AgentConfig | Agent configuration |\n| `allowFiles` | boolean | Enable file uploads |\n| `allowImages` | boolean | Enable image uploads |\n\n## Related Skills\n\n```bash\n# Chat UI building blocks\nnpx skills add inference-sh\u002Fskills@chat-ui\n\n# Declarative widgets from JSON\nnpx skills add inference-sh\u002Fskills@widgets-ui\n\n# Tool lifecycle UI\nnpx skills add inference-sh\u002Fskills@tools-ui\n```\n\n## Documentation\n\n- [Agents Overview](https:\u002F\u002Finference.sh\u002Fdocs\u002Fagents\u002Foverview) - Building AI agents\n- [Agent SDK](https:\u002F\u002Finference.sh\u002Fdocs\u002Fapi\u002Fagent\u002Foverview) - Programmatic agent control\n- [Human-in-the-Loop](https:\u002F\u002Finference.sh\u002Fdocs\u002Fruntime\u002Fhuman-in-the-loop) - Approval flows\n- [Agents That Generate UI](https:\u002F\u002Finference.sh\u002Fblog\u002Fux\u002Fgenerative-ui) - Building generative UIs\n- [Agent UX Patterns](https:\u002F\u002Finference.sh\u002Fblog\u002Fux\u002Fagent-ux-patterns) - Best practices\n\nComponent docs: [ui.inference.sh\u002Fblocks\u002Fagent](https:\u002F\u002Fui.inference.sh\u002Fblocks\u002Fagent)\n","# Agent Component\n\nBatteries-included agent component from [ui.inference.sh](https:\u002F\u002Fui.inference.sh).\n\n![Agent Component](https:\u002F\u002Fcloud.inference.sh\u002Fapp\u002Ffiles\u002Fu\u002F4mg21r6ta37mpaz6ktzwtt8krr\u002F01kgvftp7hb8wby7z66fvs9asd.jpeg)\n\n## Quick Start\n\n```bash\n# Install the agent component\nnpx shadcn@latest add https:\u002F\u002Fui.inference.sh\u002Fr\u002Fagent.json\n\n# Add the SDK for the proxy route\nnpm install @inferencesh\u002Fsdk\n```\n\n## Setup\n\n### 1. API Proxy Route (Next.js)\n\n```typescript\n\u002F\u002F app\u002Fapi\u002Finference\u002Fproxy\u002Froute.ts\nimport { route } from '@inferencesh\u002Fsdk\u002Fproxy\u002Fnextjs';\nexport const { GET, POST, PUT } = route;\n```\n\n### 2. Environment Variable\n\n```bash\n# .env.local\nINFERENCE_API_KEY=inf_...\n```\n\n### 3. Use the Component\n\n```tsx\nimport { Agent } from \"@\u002Fregistry\u002Fblocks\u002Fagent\u002Fagent\"\n\nexport default function Page() {\n  return (\n    \u003CAgent\n      proxyUrl=\"\u002Fapi\u002Finference\u002Fproxy\"\n      agentConfig={{\n        core_app: { ref: 'openrouter\u002Fclaude-haiku-45@0fkg6xwb' },\n        description: 'a helpful ai assistant',\n        system_prompt: 'you are helpful.',\n      }}\n    \u002F>\n  )\n}\n```\n\n## Features\n\n| Feature | Description |\n|---------|-------------|\n| Runtime included | No backend logic needed |\n| Tool lifecycle | Pending, progress, approval, results |\n| Human-in-the-loop | Built-in approval flows |\n| Widgets | Declarative JSON UI from agent responses |\n| Streaming | Real-time token streaming |\n| Client-side tools | Tools that run in the browser |\n\n## Client-Side Tools Example\n\n```tsx\nimport { Agent } from \"@\u002Fregistry\u002Fblocks\u002Fagent\u002Fagent\"\nimport { createScopedTools } from \".\u002Fblocks\u002Fagent\u002Flib\u002Fclient-tools\"\n\nconst formRef = useRef\u003CHTMLFormElement>(null)\nconst scopedTools = createScopedTools(formRef)\n\n\u003CAgent\n  proxyUrl=\"\u002Fapi\u002Finference\u002Fproxy\"\n  config={{\n    core_app: { ref: 'openrouter\u002Fclaude-haiku-45@0fkg6xwb' },\n    tools: scopedTools,\n    system_prompt: 'You can fill forms using scan_ui and fill_field tools.',\n  }}\n\u002F>\n```\n\n## Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `proxyUrl` | string | API proxy endpoint |\n| `name` | string | Agent name (optional) |\n| `config` | AgentConfig | Agent configuration |\n| `allowFiles` | boolean | Enable file uploads |\n| `allowImages` | boolean | Enable image uploads |\n\n## Related Skills\n\n```bash\n# Chat UI building blocks\nnpx skills add inference-sh\u002Fskills@chat-ui\n\n# Declarative widgets from JSON\nnpx skills add inference-sh\u002Fskills@widgets-ui\n\n# Tool lifecycle UI\nnpx skills add inference-sh\u002Fskills@tools-ui\n```\n\n## Documentation\n\n- [Agents Overview](https:\u002F\u002Finference.sh\u002Fdocs\u002Fagents\u002Foverview) - Building AI agents\n- [Agent SDK](https:\u002F\u002Finference.sh\u002Fdocs\u002Fapi\u002Fagent\u002Foverview) - Programmatic agent control\n- [Human-in-the-Loop](https:\u002F\u002Finference.sh\u002Fdocs\u002Fruntime\u002Fhuman-in-the-loop) - Approval flows\n- [Agents That Generate UI](https:\u002F\u002Finference.sh\u002Fblog\u002Fux\u002Fgenerative-ui) - Building generative UIs\n- [Agent UX Patterns](https:\u002F\u002Finference.sh\u002Fblog\u002Fux\u002Fagent-ux-patterns) - Best practices\n\nComponent docs: [ui.inference.sh\u002Fblocks\u002Fagent](https:\u002F\u002Fui.inference.sh\u002Fblocks\u002Fagent)\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Fagent-ui",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill agent-ui",{"tool":69,"command":70},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill agent-ui",{"tool":72,"command":73},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill agent-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Fagent-ui\u002FSKILL.md",true,[77],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"skill-report.json","REFERENCE","参考文档",8695,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Fagent-ui\u002Fskill-report.json",[84,94,104,113,119,126],{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":49},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[89],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[91,92,93],"model","model hierarchy","model hierarchy skill",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":100,"publishedAt":49},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[99],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[101,102,103],"MCP","zoom","zoom mcp",{"skillNo":105,"name":106,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":49},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[110,111,112,102],"sdk","zoom apps sdk","apps",{"skillNo":114,"name":115,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":49},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[115],{"skillNo":120,"name":121,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":125,"publishedAt":49},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[124],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[121],{"skillNo":127,"name":128,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":49},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[128]]