{"_id":"@agentai/appsdk","_rev":"6-992f4728e21ca5206727ef3a52bd188c","name":"@agentai/appsdk","dist-tags":{"latest":"1.3.1"},"versions":{"1.1.0":{"name":"@agentai/appsdk","version":"1.1.0","keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","_id":"@agentai/appsdk@1.1.0","maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"homepage":"https://agent.ai/appsdk","bugs":{"url":"https://github.com/agentai/appsdk/issues"},"dist":{"shasum":"79c3c74b88ade0c3e84cc2bbfd63750ffbb51b32","tarball":"https://registry.npmjs.org/@agentai/appsdk/-/appsdk-1.1.0.tgz","fileCount":10,"integrity":"sha512-oCVqqYc3fHhnbMPDxZ8tzVKfdtVCYIb4YUmor2DnGWuasFfIpP2wlz5r8Eky+mqY3NnUYX037ZDC3woySZnGDQ==","signatures":[{"sig":"MEUCIGxIID3nAaBQl4mzQPERQMWnwWm4sz9iV2R53nLrQSohAiEAvZA38VmbpWkq9YD/b+RW6qzKSJYFS5fJLxBw7XoGjTw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":577646},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./theme":{"import":"./dist/theme.json","require":"./dist/theme.json"},"./styles":"./dist/styles.css"},"gitHead":"3217d88392785ffc2103653568dfd58fc3353721","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .js,.jsx,.ts,.tsx","test":"echo \"No tests yet\" && exit 0","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"andreioprisan","email":"andrei@oprisan.com"},"repository":{"url":"git+https://github.com/agentai/appsdk.git","type":"git"},"_npmVersion":"9.6.7","description":"Agent.ai App SDK - React components for building AI agent interfaces","directories":{},"sideEffects":["*.css"],"_nodeVersion":"18.17.1","dependencies":{"react-icons":"^5.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","eslint":"^8.0.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@chakra-ui/react":"^3.0.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@chakra-ui/react":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/appsdk_1.1.0_1765143562108_0.6796029652206432","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@agentai/appsdk","version":"1.2.0","keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","_id":"@agentai/appsdk@1.2.0","maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"homepage":"https://agent.ai/appsdk","bugs":{"url":"https://github.com/agentai/appsdk/issues"},"dist":{"shasum":"e46853277d57f7e88b4902bb06f55141f650c10d","tarball":"https://registry.npmjs.org/@agentai/appsdk/-/appsdk-1.2.0.tgz","fileCount":10,"integrity":"sha512-i5uwl8tU3VHULhQ1YR5hkB2mO/RH95F/yG3kLlyKYHS1MmRhI2wq9hr44FC2h/sjMrTmqeGxrzFolVrbJET6og==","signatures":[{"sig":"MEYCIQCTkHmuKUDiwMdR72/9x+6jPyNRtyCRJfqpTT8PPc2WPwIhAMV2iiN1/Ig8pgoOK5vQnrl7T56kGccDy1fHGJokOrCG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":665103},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./theme":{"import":"./dist/theme.json","require":"./dist/theme.json"},"./styles":"./dist/styles.css"},"gitHead":"4bb0ebe245adf80c6d1080479fc3553a995eea15","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .js,.jsx,.ts,.tsx","test":"echo \"No tests yet\" && exit 0","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"andreioprisan","email":"andrei@oprisan.com"},"repository":{"url":"git+https://github.com/agentai/appsdk.git","type":"git"},"_npmVersion":"9.6.7","description":"Agent.ai App SDK - React components for building AI agent interfaces","directories":{},"sideEffects":["*.css"],"_nodeVersion":"18.17.1","dependencies":{"react-icons":"^5.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","eslint":"^8.0.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@chakra-ui/react":"^3.0.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@chakra-ui/react":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/appsdk_1.2.0_1765150359213_0.4750218495873675","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@agentai/appsdk","version":"1.2.1","keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","_id":"@agentai/appsdk@1.2.1","maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"homepage":"https://agent.ai/appsdk","bugs":{"url":"https://github.com/agentai/appsdk/issues"},"dist":{"shasum":"a297f6725d0db67bf12765026ddcd662ff7bddf3","tarball":"https://registry.npmjs.org/@agentai/appsdk/-/appsdk-1.2.1.tgz","fileCount":10,"integrity":"sha512-nu+3tDhHAnbZuHDAvpS2ob64GH8xKMh+JDl+G341TupgMIgfw/nUCk8ch0IJ8mz1kKxEHyIzLHkg4o7VEY9YbQ==","signatures":[{"sig":"MEUCIE9DlgUCKIFyq7McSxjN2R424Qh0qFKIRHlwgyDXEORgAiEA33QcqmCyg2/FTC7p6vQ7pkD/HW7oV0W1pSzzdNcA5MA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":676014},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./theme":{"import":"./dist/theme.json","require":"./dist/theme.json"},"./styles":"./dist/styles.css"},"gitHead":"4bb0ebe245adf80c6d1080479fc3553a995eea15","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .js,.jsx,.ts,.tsx","test":"echo \"No tests yet\" && exit 0","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"andreioprisan","email":"andrei@oprisan.com"},"repository":{"url":"git+https://github.com/agentai/appsdk.git","type":"git"},"_npmVersion":"9.6.7","description":"Agent.ai App SDK - React components for building AI agent interfaces","directories":{},"sideEffects":["*.css"],"_nodeVersion":"18.17.1","dependencies":{"react-icons":"^5.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","eslint":"^8.0.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@emotion/react":"^11.0.0","@chakra-ui/react":"^3.0.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@emotion/react":">=11.0.0","@chakra-ui/react":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/appsdk_1.2.1_1765151828659_0.21901216083197617","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@agentai/appsdk","version":"1.2.2","keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","_id":"@agentai/appsdk@1.2.2","maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"homepage":"https://agent.ai/appsdk","bugs":{"url":"https://github.com/agentai/appsdk/issues"},"dist":{"shasum":"34cd297c41fef1b04591120509478ada8c0bf84c","tarball":"https://registry.npmjs.org/@agentai/appsdk/-/appsdk-1.2.2.tgz","fileCount":10,"integrity":"sha512-fau80Lq/73yu1Z4R1tKtN3GOuvx2xOoOQLwe1RUzq+3B4nO8vOIRVU7ZeP7nd92YfMky7bwwOJDyVxxSw7+10w==","signatures":[{"sig":"MEUCIHqWLaeH0egFDb1nDC6tFUIVN/q/SnQcB/aKu9dYf0fkAiEAv/BuBmNVlS7JIqrWH5xnXsc2yTe7Ysb9/0854o6/fBQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":723806},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./theme":{"import":"./dist/theme.json","require":"./dist/theme.json"},"./styles":"./dist/styles.css"},"gitHead":"4bb0ebe245adf80c6d1080479fc3553a995eea15","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .js,.jsx,.ts,.tsx","test":"echo \"No tests yet\" && exit 0","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"andreioprisan","email":"andrei@oprisan.com"},"repository":{"url":"git+https://github.com/agentai/appsdk.git","type":"git"},"_npmVersion":"9.6.7","description":"Agent.ai App SDK - React components for building AI agent interfaces","directories":{},"sideEffects":["*.css"],"_nodeVersion":"18.17.1","dependencies":{"react-icons":"^5.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","eslint":"^8.0.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@emotion/react":"^11.0.0","@chakra-ui/react":"^3.0.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@emotion/react":">=11.0.0","@chakra-ui/react":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/appsdk_1.2.2_1765153180256_0.7800549257576519","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@agentai/appsdk","version":"1.3.0","keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","_id":"@agentai/appsdk@1.3.0","maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"homepage":"https://agent.ai/appsdk","bugs":{"url":"https://github.com/agentai/appsdk/issues"},"dist":{"shasum":"ed102b8bcdda36469af92ecdc9bd1d7d4d445f67","tarball":"https://registry.npmjs.org/@agentai/appsdk/-/appsdk-1.3.0.tgz","fileCount":10,"integrity":"sha512-uF4GtzpEDtG8CdwRfSEAodqEeK4hUzsC+c74BZJTzZgfN+llWuGmHgSiD9aLyACRFOEeGLPtWerMRQX6J6EeWw==","signatures":[{"sig":"MEUCIQCJfZ/Cal83eGUdSm0fFjoRgGWxFgbm5eftQIZcpoiGkAIgc/It7/uxbgjhG8n9BsqhV7WIrWHqR2RMcICMuiZOzsQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":936837},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./theme":{"import":"./dist/theme.json","require":"./dist/theme.json"},"./styles":"./dist/styles.css"},"gitHead":"4bb0ebe245adf80c6d1080479fc3553a995eea15","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .js,.jsx,.ts,.tsx","test":"echo \"No tests yet\" && exit 0","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"andreioprisan","email":"andrei@oprisan.com"},"repository":{"url":"git+https://github.com/agentai/appsdk.git","type":"git"},"_npmVersion":"9.6.7","description":"Agent.ai App SDK - React components for building AI agent interfaces","directories":{},"sideEffects":["*.css"],"_nodeVersion":"18.17.1","dependencies":{"react-icons":"^5.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","eslint":"^8.0.0","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@emotion/react":"^11.0.0","@chakra-ui/react":"^3.0.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@emotion/react":">=11.0.0","@chakra-ui/react":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/appsdk_1.3.0_1765157264594_0.9639976393172851","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"@agentai/appsdk","version":"1.3.1","description":"Agent.ai App SDK - React components for building AI agent interfaces","author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","homepage":"https://agent.ai/appsdk","repository":{"type":"git","url":"git+https://github.com/agentai/appsdk.git"},"bugs":{"url":"https://github.com/agentai/appsdk/issues"},"keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./theme":{"import":"./dist/theme.json","require":"./dist/theme.json"},"./styles":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src --ext .js,.jsx,.ts,.tsx","typecheck":"tsc --noEmit","prepublishOnly":"npm run build","clean":"rm -rf dist","test":"echo \"No tests yet\" && exit 0"},"peerDependencies":{"@chakra-ui/react":">=3.0.0","@emotion/react":">=11.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"react-icons":"^5.0.0"},"devDependencies":{"@chakra-ui/react":"^3.0.0","@emotion/react":"^11.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","eslint":"^8.0.0","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.0","typescript":"^5.0.0"},"engines":{"node":">=18.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"gitHead":"a544af066c3d718262e60aea3edc11499b041a96","_id":"@agentai/appsdk@1.3.1","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-45XAfOG4XeeqtdeMex+H8Rv0yMqNNe61W7vusH43tqHpIq15IRrLU3G2DXoJa2lGe7k+2YnHNnzw93SfgfqpYw==","shasum":"98ad7b3fc031256b1713e8f3fabc827feff77f9f","tarball":"https://registry.npmjs.org/@agentai/appsdk/-/appsdk-1.3.1.tgz","fileCount":10,"unpackedSize":940260,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGNioq4uMRSMgF/T1x2zelJwYEIp7gmShhUMLOAoJVYXAiBvQ/Bv4l0xJrcBAz1dySQhkp52wFWs6xtjaS/GtETLLA=="}]},"_npmUser":{"name":"andreioprisan","email":"andrei@oprisan.com"},"directories":{},"maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/appsdk_1.3.1_1765160193377_0.3848258039580432"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-07T21:39:22.028Z","modified":"2025-12-08T02:16:33.822Z","1.1.0":"2025-12-07T21:39:22.289Z","1.2.0":"2025-12-07T23:32:39.429Z","1.2.1":"2025-12-07T23:57:08.848Z","1.2.2":"2025-12-08T00:19:40.456Z","1.3.0":"2025-12-08T01:27:44.798Z","1.3.1":"2025-12-08T02:16:33.596Z"},"bugs":{"url":"https://github.com/agentai/appsdk/issues"},"author":{"name":"Agent.ai","email":"andrei@agent.ai"},"license":"MIT","homepage":"https://agent.ai/appsdk","keywords":["react","components","ui","agent","ai","agent.ai","chakra-ui","design-system"],"repository":{"type":"git","url":"git+https://github.com/agentai/appsdk.git"},"description":"Agent.ai App SDK - React components for building AI agent interfaces","maintainers":[{"name":"andreioprisan","email":"andrei@oprisan.com"}],"readme":"# @agentai/appsdk\n\nThe official React component library for building AI agent interfaces with [Agent.ai](https://agent.ai).\n\n[![npm version](https://img.shields.io/npm/v/@agentai/appsdk.svg)](https://www.npmjs.com/package/@agentai/appsdk)\n[![license](https://img.shields.io/npm/l/@agentai/appsdk.svg)](https://github.com/agentai/appsdk/blob/main/LICENSE)\n\n## Features\n\n- 🎨 **Pre-built Components** - Production-ready UI components matching Agent.ai's design system\n- 🤖 **Agent Integration** - Built-in API fetching for Agent.ai agents\n- 🎯 **Fully Typed** - Complete TypeScript support\n- 🎛️ **Themeable** - Customize colors, branding, and styling\n- 📱 **Responsive** - Mobile-first design with graceful degradation\n- ♿ **Accessible** - WCAG 2.1 AA compliant\n\n## Installation\n\n```bash\nnpm install @agentai/appsdk @chakra-ui/react @emotion/react\n```\n\nor\n\n```bash\nyarn add @agentai/appsdk @chakra-ui/react @emotion/react\n```\n\nor\n\n```bash\npnpm add @agentai/appsdk @chakra-ui/react @emotion/react\n```\n\n## Quick Start\n\n### 1. Set up your App with ChakraProvider\n\n```jsx\n// App.jsx\nimport { ChakraProvider } from '@chakra-ui/react';\nimport { AgentAIAgentPage, AgentAIButton } from '@agentai/appsdk';\n\nexport default function App() {\n  return (\n    <ChakraProvider>\n      <AgentAIAgentPage\n        agentHeaderConfig={{\n          agentId: 'flux-image-generator', // Auto-fetches from API!\n        }}\n      >\n        <AgentAIButton variant=\"primary\">\n          Run Agent\n        </AgentAIButton>\n      </AgentAIAgentPage>\n    </ChakraProvider>\n  );\n}\n```\n\nThat's it! The `AgentAIAgentPage` automatically includes:\n\n- Site header with navigation\n- Agent header with auto-fetched agent data\n- Your custom content\n- Site footer\n\n## Components\n\n### Layout Components\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAIHeader` | Site navigation header with auth states |\n| `AgentAIFooter` | Site footer with branding and links |\n| `AgentAIPageCard` | Full-page card layout |\n| `AgentAICard` | Content card container |\n\n### Agent Components\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAIAgentPage` | Complete page shell for agent interfaces |\n| `AgentAIAgentHeader` | Agent info display with auto-fetch |\n| `AgentAIAgentAvatar` | Agent icon with CDN optimization |\n\n### Navigation Components\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAITabs` | Horizontal tabbed navigation |\n| `AgentAIVerticalTabs` | Vertical sidebar navigation |\n\n### Form Components\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAIButton` | Styled buttons with variants |\n| `AgentAIInput` | Text inputs with validation |\n| `AgentAISelect` | Dropdown selects |\n| `AgentAISwitch` | Toggle switches |\n\n### Display Components\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAIAvatar` | User avatars |\n| `AgentAIPopover` | Popover primitives |\n\n### Data Display Components (v1.3.0)\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAISection` | Section wrapper with colored accent underline |\n| `AgentAIStatCard` | Stat cards for KPIs and metrics |\n| `AgentAIMetricCard` | Large metric display with accent border |\n| `AgentAIStatGrid` | Responsive grid for stat cards |\n| `AgentAIPill` | Clickable pill/chip component |\n| `AgentAITagCard` | Card with grouped tags |\n| `AgentAISuggestionPills` | Suggestion pills row |\n| `AgentAIInfoBanner` | Status banner with action |\n| `AgentAITimeline` | Timeline for news/events |\n| `AgentAIDataTable` | Simple data table |\n| `AgentAIBarChart` | CSS-based bar chart |\n| `AgentAISearchInput` | Search input with suggestions |\n\n### Feedback Components\n\n| Component | Description |\n|-----------|-------------|\n| `AgentAIAlert` | Alert/notification with status types |\n| `AgentAIInfoBanner` | Status banner with icon and action |\n\n## Live Data Fetching\n\nThe `AgentAIAgentHeader` component can automatically fetch agent data from the Agent.ai API:\n\n```jsx\nimport { ChakraProvider } from '@chakra-ui/react';\nimport { AgentAIAgentHeader } from '@agentai/appsdk';\nimport { Card } from '@chakra-ui/react';\n\nfunction AgentDisplay() {\n  return (\n    <ChakraProvider>\n      <Card.Root>\n        {/* Just pass the agentId - data is fetched automatically! */}\n        <AgentAIAgentHeader\n          agentId=\"flux-image-generator\"\n          onAgentLoaded={(agent) => console.log('Loaded:', agent.name)}\n          onAgentError={(error) => console.error('Error:', error)}\n        />\n      </Card.Root>\n    </ChakraProvider>\n  );\n}\n```\n\nOr use the fetch function directly in your code:\n\n```jsx\nimport { fetchAgentFromAPI } from '@agentai/appsdk';\n\nasync function loadAgent() {\n  const agent = await fetchAgentFromAPI('flux-image-generator');\n  console.log(agent.name, agent.description, agent.executions);\n}\n```\n\n## Custom Authentication\n\nIntegrate your own authentication flow (OAuth, SSO, partner APIs) with the header:\n\n```jsx\nimport { ChakraProvider } from '@chakra-ui/react';\nimport { AgentAIHeader } from '@agentai/appsdk';\n\nfunction App() {\n  const { user, login, logout, loading } = useAuth(); // Your auth hook\n\n  // Transform your user object to SDK format\n  const headerUser = user ? {\n    name: user.display_name,\n    picture: user.avatar_url,\n    username: user.email?.split('@')[0],\n  } : null;\n\n  return (\n    <ChakraProvider>\n      <AgentAIHeader\n        user={headerUser}\n        onLogin={login}                    // Your custom login handler\n        onSignup={() => login({ hint: 'signup' })}\n        onLogout={logout}\n        useCustomAuth={true}               // Use callbacks, not URL navigation\n        isAuthLoading={loading}            // Show loading state\n        showLogin={!loading && !user}\n        showSignup={!loading && !user}\n        loginLabel=\"Log In\"                // Custom button text\n        signupLabel=\"Get Started\"\n      />\n    </ChakraProvider>\n  );\n}\n```\n\n### Custom Auth Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `onLogin` | `() => void` | Custom login handler |\n| `onSignup` | `() => void` | Custom signup handler |\n| `useCustomAuth` | `boolean` | Use callbacks instead of URL navigation |\n| `isAuthLoading` | `boolean` | Show loading state on auth buttons |\n| `loginLabel` | `string` | Custom login button text |\n| `signupLabel` | `string` | Custom signup button text |\n\n## Theming\n\nCustomize the theme by passing a theme object:\n\n```jsx\nimport { ChakraProvider } from '@chakra-ui/react';\nimport { AgentAIHeader, AgentAIFooter, defaultTheme } from '@agentai/appsdk';\n\nconst customTheme = {\n  ...defaultTheme,\n  colors: {\n    ...defaultTheme.colors,\n    primary: '#your-brand-color',\n  },\n  branding: {\n    name: 'Your Company',\n    logoLight: '/your-logo.svg',\n  },\n};\n\nfunction App() {\n  return (\n    <ChakraProvider>\n      <AgentAIHeader theme={customTheme} />\n      <main>{/* Your content */}</main>\n      <AgentAIFooter theme={customTheme} />\n    </ChakraProvider>\n  );\n}\n```\n\n### Theme Structure\n\n```json\n{\n  \"colors\": {\n    \"primary\": \"#d96c4f\",\n    \"background\": {\n      \"header\": \"#0A1B22\",\n      \"page\": \"#f5f5f5\"\n    }\n  },\n  \"branding\": {\n    \"name\": \"agent.ai\",\n    \"logoLight\": \"/logo-light.svg\",\n    \"logoDark\": \"/logo-dark.svg\"\n  },\n  \"navigation\": {\n    \"links\": [...]\n  },\n  \"footer\": {\n    \"description\": \"...\",\n    \"resources\": [...]\n  }\n}\n```\n\n## Complete Example\n\n```jsx\n// App.jsx - Root component with ChakraProvider\nimport { ChakraProvider } from '@chakra-ui/react';\nimport ImageGeneratorAgent from './ImageGeneratorAgent';\n\nexport default function App() {\n  return (\n    <ChakraProvider>\n      <ImageGeneratorAgent />\n    </ChakraProvider>\n  );\n}\n```\n\n```jsx\n// ImageGeneratorAgent.jsx - Agent page component\nimport { useState } from 'react';\nimport { \n  AgentAIAgentPage,\n  AgentAIInput,\n  AgentAIButton \n} from '@agentai/appsdk';\n\nexport default function ImageGeneratorAgent() {\n  const [prompt, setPrompt] = useState('');\n  const [isRunning, setIsRunning] = useState(false);\n  const [user, setUser] = useState(null); // or your auth state\n\n  const handleLogout = () => {\n    setUser(null);\n    // Your logout logic\n  };\n\n  const handleRun = async () => {\n    setIsRunning(true);\n    try {\n      // Your agent execution logic here\n      console.log('Running with prompt:', prompt);\n    } finally {\n      setIsRunning(false);\n    }\n  };\n\n  return (\n    <AgentAIAgentPage\n      headerConfig={{\n        user: user,\n        onLogout: handleLogout,\n      }}\n      agentHeaderConfig={{\n        agentId: 'flux-image-generator', // Auto-fetches agent data!\n      }}\n    >\n      <AgentAIInput\n        label=\"Image Description\"\n        placeholder=\"Describe the image you want to generate...\"\n        value={prompt}\n        onChange={(e) => setPrompt(e.target.value)}\n        isRequired\n      />\n      \n      <AgentAIButton\n        variant=\"primary\"\n        onClick={handleRun}\n        isLoading={isRunning}\n        loadingText=\"Generating...\"\n      >\n        Generate Image\n      </AgentAIButton>\n    </AgentAIAgentPage>\n  );\n}\n```\n\n## Documentation\n\nFull documentation is available at [agent.ai/appsdk](https://agent.ai/appsdk).\n\n## Requirements\n\n- React 18+\n- Chakra UI 3+\n- Emotion (required by Chakra UI)\n\n## License\n\nMIT © [Agent.ai](https://agent.ai)\n\n## Links\n\n- [Documentation](https://agent.ai/appsdk)\n- [GitHub](https://github.com/agentai/appsdk)\n- [NPM](https://www.npmjs.com/package/@agentai/appsdk)\n- [Agent.ai](https://agent.ai)\n","readmeFilename":"README.md"}