[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EE98NQPRETXTJ2AVWJ4HVH":3,"skill-same:01M6EE98NQPRETXTJ2AVWJ4HVH":53},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":37,"updatedAt":38,"install":39,"resources":52},"01M6EE98NQPRETXTJ2AVWJ4HVH","ag-ui",null,"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\u002FTerminalSkills\u002Fskills\u002Fag-ui\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25],"ui","ag","ag ui","2026-11-10 10:12:30",false,"# AG-UI — Agent-User Interaction Protocol\n\nYou are an expert in AG-UI (Agent-User Interaction Protocol), the open standard by CopilotKit for connecting AI agents to frontend UIs. You help developers stream agent actions, tool calls, state updates, and text generation to React components in real-time — enabling rich agent UIs where users see what the agent is thinking, doing, and can intervene at any step.\n\n## Core Capabilities\n\n### AG-UI Server (Agent Events)\n\n```typescript\n\u002F\u002F server\u002Fagent.ts — Stream agent events to UI\nimport { AgentServer, EventStream } from \"@ag-ui\u002Fserver\";\n\nconst server = new AgentServer();\n\nserver.onRequest(async (request, stream: EventStream) => {\n  const { messages, context } = request;\n\n  \u002F\u002F Emit thinking state\n  stream.emitStateUpdate({ status: \"thinking\", progress: 0 });\n\n  \u002F\u002F Stream text generation\n  stream.emitTextStart();\n  for (const word of \"I'll analyze your data now.\".split(\" \")) {\n    stream.emitTextDelta(word + \" \");\n    await sleep(50);\n  }\n  stream.emitTextEnd();\n\n  \u002F\u002F Emit tool call\n  stream.emitToolCallStart(\"search_database\", { query: context.userQuery });\n  const results = await searchDatabase(context.userQuery);\n  stream.emitToolCallEnd(\"search_database\", results);\n  stream.emitStateUpdate({ status: \"analyzing\", progress: 50 });\n\n  \u002F\u002F Stream analysis\n  stream.emitTextStart();\n  const analysis = await generateAnalysis(results);\n  for await (const chunk of analysis) {\n    stream.emitTextDelta(chunk);\n  }\n  stream.emitTextEnd();\n\n  \u002F\u002F Custom state for UI rendering\n  stream.emitStateUpdate({\n    status: \"complete\",\n    progress: 100,\n    charts: [{ type: \"bar\", data: results.chartData }],\n    suggestions: [\"Run deeper analysis\", \"Export to CSV\", \"Schedule report\"],\n  });\n\n  stream.end();\n});\n```\n\n### AG-UI React Client\n\n```tsx\nimport { useAgent, AgentProvider } from \"@ag-ui\u002Freact\";\n\nfunction App() {\n  return (\n    \u003CAgentProvider url=\"https:\u002F\u002Fapi.example.com\u002Fagent\">\n      \u003CAgentChat \u002F>\n    \u003C\u002FAgentProvider>\n  );\n}\n\nfunction AgentChat() {\n  const { messages, state, sendMessage, isStreaming, toolCalls } = useAgent();\n\n  return (\n    \u003Cdiv className=\"flex flex-col h-screen\">\n      {\u002F* Agent state visualization *\u002F}\n      {state.status === \"thinking\" && (\n        \u003Cdiv className=\"bg-blue-50 p-3 rounded-lg animate-pulse\">\n          ? Agent is thinking... ({state.progress}%)\n          \u003Cprogress value={state.progress} max={100} \u002F>\n        \u003C\u002Fdiv>\n      )}\n\n      {\u002F* Tool calls (show what agent is doing) *\u002F}\n      {toolCalls.map((tc) => (\n        \u003Cdiv key={tc.id} className=\"bg-gray-50 p-2 rounded text-sm\">\n          ? \u003Cstrong>{tc.name}\u003C\u002Fstrong>: {tc.status === \"running\" ? \"Working...\" : \"Done\"}\n          {tc.result && \u003Cpre className=\"mt-1\">{JSON.stringify(tc.result, null, 2)}\u003C\u002Fpre>}\n        \u003C\u002Fdiv>\n      ))}\n\n      {\u002F* Messages *\u002F}\n      {messages.map((msg) => (\n        \u003Cdiv key={msg.id} className={msg.role === \"user\" ? \"text-right\" : \"text-left\"}>\n          \u003Cp>{msg.content}\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      ))}\n\n      {\u002F* Dynamic UI from agent state *\u002F}\n      {state.charts?.map((chart, i) => (\n        \u003CChart key={i} type={chart.type} data={chart.data} \u002F>\n      ))}\n\n      {state.suggestions && (\n        \u003Cdiv className=\"flex gap-2\">\n          {state.suggestions.map((s) => (\n            \u003Cbutton key={s} onClick={() => sendMessage(s)} className=\"px-3 py-1 bg-blue-100 rounded\">\n              {s}\n            \u003C\u002Fbutton>\n          ))}\n        \u003C\u002Fdiv>\n      )}\n\n      {\u002F* Input *\u002F}\n      \u003Cform onSubmit={(e) => { e.preventDefault(); sendMessage(input); }}>\n        \u003Cinput placeholder=\"Ask anything...\" disabled={isStreaming} \u002F>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Installation\n\n```bash\nnpm install @ag-ui\u002Freact @ag-ui\u002Fserver\n```\n\n## Best Practices\n\n1. **State streaming** — Emit state updates for progress, status, UI components; users see agent's thought process\n2. **Tool call transparency** — Show tool calls in real-time; builds trust, helps debugging\n3. **Suggestions** — Emit suggestion buttons after responses; guide users to next actions\n4. **Custom UI** — Use state updates to render charts, tables, forms; richer than plain text\n5. **Human-in-the-loop** — Emit confirmation requests before destructive actions; users approve or reject\n6. **Progress tracking** — Emit progress percentages for long tasks; prevent user anxiety\n7. **Framework agnostic** — AG-UI protocol works with any agent backend (LangGraph, CrewAI, custom)\n8. **CopilotKit integration** — AG-UI powers CopilotKit; use CopilotKit for higher-level React components\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fag-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":7,"skillName":5,"commands":40,"prompt":50,"zipAvailable":51},[41,44,47],{"tool":42,"command":43},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill ag-ui",{"tool":45,"command":46},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill ag-ui",{"tool":48,"command":49},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill ag-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fag-ui\u002FSKILL.md",true,[],[54,68,78,87,93,100],{"skillNo":55,"name":56,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":64,"publishedAt":26},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[59],{"categoryNo":60,"categoryName":61,"taxonomyType":62,"taxonomyTypeDesc":63},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[65,66,67],"model","model hierarchy","model hierarchy skill",{"skillNo":69,"name":70,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":74,"publishedAt":26},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[73],{"categoryNo":60,"categoryName":61,"taxonomyType":62,"taxonomyTypeDesc":63},[75,76,77],"MCP","zoom","zoom mcp",{"skillNo":79,"name":80,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":26},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[84,85,86,76],"sdk","zoom apps sdk","apps",{"skillNo":88,"name":89,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":26},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[89],{"skillNo":94,"name":95,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":99,"publishedAt":26},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[98],{"categoryNo":60,"categoryName":61,"taxonomyType":62,"taxonomyTypeDesc":63},[95],{"skillNo":101,"name":102,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":26},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[102]]