{"_id":"@aevatar/kit-react","_rev":"5-4cfe7a73bd4606da0710a7db11a3b485","name":"@aevatar/kit-react","dist-tags":{"latest":"1.2.1"},"versions":{"0.3.0":{"name":"@aevatar/kit-react","version":"0.3.0","keywords":["aevatar","react","hooks","components","ui","agent"],"_id":"@aevatar/kit-react@0.3.0","maintainers":[{"name":"potterf","email":"potter.sun@aelf.io"}],"homepage":"https://github.com/aevatar/aevatarkit-ui#readme","bugs":{"url":"https://github.com/aevatar/aevatarkit-ui/issues"},"dist":{"shasum":"e410aed4d68a0bf3798679b57ca7d4ed210fc60f","tarball":"https://registry.npmjs.org/@aevatar/kit-react/-/kit-react-0.3.0.tgz","fileCount":10,"integrity":"sha512-2ycETSmxLPlP0KxoY04I6A8b+mlx/lDzsFJ9kA4TPhL9AigUcpPCSQtapJhUsoYHJ7WlNt6UkvbXuCK/FlELYA==","signatures":[{"sig":"MEYCIQD2gT8NhiwqJmSSFF9I8iiWzGZ2TY9b00oBTGroC8XvlAIhAOcVcqPIQkiwH8sqbpHFcq6eJtoBhBIw3D43BzfwLJ1h","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1263650},"main":"./dist/index.js","_from":"file:aevatar-kit-react-0.3.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./src/a2ui/styles/globals.css"},"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"potterf","email":"potter.sun@aelf.io"},"_resolved":"/private/var/folders/d9/bmbzh5n14v7byzn_zznk3gr80000gn/T/d170e46431b28e12f80702be06f5661f/aevatar-kit-react-0.3.0.tgz","_integrity":"sha512-2ycETSmxLPlP0KxoY04I6A8b+mlx/lDzsFJ9kA4TPhL9AigUcpPCSQtapJhUsoYHJ7WlNt6UkvbXuCK/FlELYA==","repository":{"url":"git+https://github.com/aevatar/aevatarkit-ui.git","type":"git","directory":"packages/kit-react"},"_npmVersion":"10.7.0","description":"React components and hooks for AevatarKit SDK","directories":{},"_nodeVersion":"18.20.3","dependencies":{"clsx":"^2.1.1","3dmol":"^2.5.3","tailwind-merge":"^2.5.2","@aevatar/kit-a2ui":"0.3.0","@aevatar/kit-core":"0.3.0","@aevatar/kit-types":"0.3.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@aevatar/kit-protocol":"0.3.0","@radix-ui/react-label":"^2.1.0","@radix-ui/react-toast":"^1.2.1","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-dialog":"^1.1.1","@radix-ui/react-select":"^2.1.1","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-popover":"^1.1.1","@radix-ui/react-tooltip":"^1.1.2","@radix-ui/react-checkbox":"^1.1.1","@radix-ui/react-progress":"^1.1.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.0","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-radio-group":"^1.2.0","@radix-ui/react-alert-dialog":"^1.1.1","@radix-ui/react-dropdown-menu":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","vitest":"^2.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/kit-react_0.3.0_1767689141365_0.2757444965202869","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@aevatar/kit-react","version":"1.0.0","keywords":["aevatar","react","hooks","components","ui","agent"],"_id":"@aevatar/kit-react@1.0.0","maintainers":[{"name":"potterf","email":"potter.sun@aelf.io"}],"homepage":"https://github.com/aevatar/aevatarkit-ui#readme","bugs":{"url":"https://github.com/aevatar/aevatarkit-ui/issues"},"dist":{"shasum":"e4dc249e7604dda4c296e0325c071353fa280593","tarball":"https://registry.npmjs.org/@aevatar/kit-react/-/kit-react-1.0.0.tgz","fileCount":10,"integrity":"sha512-nE7w3aJ7BlN3QJXaBW7tIHuaaJZSEEGSE0dAr4WTjDL0Glp+jmeQ07/oFFuQf7dEaLSOlWsG/W+TmY5Qo7LAWA==","signatures":[{"sig":"MEYCIQDKkIx62ck4kY88I7m/BMgobmYI96EBePoL4m5nUqOgYQIhANLteC4kXRbt3MDs6OJa6JCO9ziUnb8gHSWAewzmHCLV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1263702},"main":"./dist/index.js","_from":"file:aevatar-kit-react-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./src/a2ui/styles/globals.css"},"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"potterf","email":"potter.sun@aelf.io"},"_resolved":"/private/var/folders/d9/bmbzh5n14v7byzn_zznk3gr80000gn/T/8501518520469edc878035610d89838b/aevatar-kit-react-1.0.0.tgz","_integrity":"sha512-nE7w3aJ7BlN3QJXaBW7tIHuaaJZSEEGSE0dAr4WTjDL0Glp+jmeQ07/oFFuQf7dEaLSOlWsG/W+TmY5Qo7LAWA==","repository":{"url":"git+https://github.com/aevatar/aevatarkit-ui.git","type":"git","directory":"packages/kit-react"},"_npmVersion":"10.7.0","description":"React components and hooks for AevatarKit SDK","directories":{},"_nodeVersion":"18.20.3","dependencies":{"clsx":"^2.1.1","3dmol":"^2.5.3","tailwind-merge":"^2.5.2","@aevatar/kit-a2ui":"1.0.0","@aevatar/kit-core":"1.0.0","@aevatar/kit-types":"0.3.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@aevatar/kit-protocol":"1.0.0","@radix-ui/react-label":"^2.1.0","@radix-ui/react-toast":"^1.2.1","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-dialog":"^1.1.1","@radix-ui/react-select":"^2.1.1","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-popover":"^1.1.1","@radix-ui/react-tooltip":"^1.1.2","@radix-ui/react-checkbox":"^1.1.1","@radix-ui/react-progress":"^1.1.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.0","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-radio-group":"^1.2.0","@radix-ui/react-alert-dialog":"^1.1.1","@radix-ui/react-dropdown-menu":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","vitest":"^2.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/kit-react_1.0.0_1767757710643_0.025347062603001014","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@aevatar/kit-react","version":"1.1.0","keywords":["aevatar","react","hooks","components","ui","agent"],"_id":"@aevatar/kit-react@1.1.0","maintainers":[{"name":"potterf","email":"potter.sun@aelf.io"}],"homepage":"https://github.com/aevatar/aevatarkit-ui#readme","bugs":{"url":"https://github.com/aevatar/aevatarkit-ui/issues"},"dist":{"shasum":"94a9a11bcc86b78d2ca1c2f2b66fc7d89249a562","tarball":"https://registry.npmjs.org/@aevatar/kit-react/-/kit-react-1.1.0.tgz","fileCount":10,"integrity":"sha512-Lb4L3MRWLFxs3N3Htm15jXejxjLoSaRECGlEwLXLj8MtSjphRKwjqlEV9WEI0KUYs8O/ZgngyJQBZ5Na0HFsdA==","signatures":[{"sig":"MEYCIQC2QSbeRheBqSpsqAm5H223AOwOuYyZtvlJfjz1DSE1RQIhAK2rXilk0fOAeBsu3EqENgfPtAB+H59d9h3EgKE5wgMp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1263702},"main":"./dist/index.js","_from":"file:aevatar-kit-react-1.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./src/a2ui/styles/globals.css"},"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"potterf","email":"potter.sun@aelf.io"},"_resolved":"/private/var/folders/d9/bmbzh5n14v7byzn_zznk3gr80000gn/T/4709f556e8c6344718fbfa382d5598e4/aevatar-kit-react-1.1.0.tgz","_integrity":"sha512-Lb4L3MRWLFxs3N3Htm15jXejxjLoSaRECGlEwLXLj8MtSjphRKwjqlEV9WEI0KUYs8O/ZgngyJQBZ5Na0HFsdA==","repository":{"url":"git+https://github.com/aevatar/aevatarkit-ui.git","type":"git","directory":"packages/kit-react"},"_npmVersion":"10.7.0","description":"React components and hooks for AevatarKit SDK","directories":{},"_nodeVersion":"18.20.3","dependencies":{"clsx":"^2.1.1","3dmol":"^2.5.3","tailwind-merge":"^2.5.2","@aevatar/kit-a2ui":"1.1.0","@aevatar/kit-core":"1.1.0","@aevatar/kit-types":"1.1.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@aevatar/kit-protocol":"1.1.0","@radix-ui/react-label":"^2.1.0","@radix-ui/react-toast":"^1.2.1","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-dialog":"^1.1.1","@radix-ui/react-select":"^2.1.1","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-popover":"^1.1.1","@radix-ui/react-tooltip":"^1.1.2","@radix-ui/react-checkbox":"^1.1.1","@radix-ui/react-progress":"^1.1.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.0","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-radio-group":"^1.2.0","@radix-ui/react-alert-dialog":"^1.1.1","@radix-ui/react-dropdown-menu":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","vitest":"^2.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/kit-react_1.1.0_1767769302746_0.2607662279549028","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@aevatar/kit-react","version":"1.2.0","keywords":["aevatar","react","hooks","components","ui","agent"],"_id":"@aevatar/kit-react@1.2.0","maintainers":[{"name":"potterf","email":"potter.sun@aelf.io"}],"homepage":"https://github.com/aevatar/aevatarkit-ui#readme","bugs":{"url":"https://github.com/aevatar/aevatarkit-ui/issues"},"dist":{"shasum":"d028df771b03c690b733440d274867069fef0597","tarball":"https://registry.npmjs.org/@aevatar/kit-react/-/kit-react-1.2.0.tgz","fileCount":10,"integrity":"sha512-3lVmoX84TiyyMay/nSknYpp6PU5nSHxdDaoDSU9RJuq2KAHDuFsyyOKca6+PpL2BVB4E7/DqT667RtnH4vfPUg==","signatures":[{"sig":"MEQCIGmw5RFIWqTsQxxqtVjmu0uVWSe48oCueEQK897KMSL5AiApdfTHVXeQt/bcXkcEf3jOmUP0TnRyfD58SzrW3THN5g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1263702},"main":"./dist/index.js","_from":"file:aevatar-kit-react-1.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./src/a2ui/styles/globals.css"},"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"potterf","email":"potter.sun@aelf.io"},"_resolved":"/private/var/folders/d9/bmbzh5n14v7byzn_zznk3gr80000gn/T/51be903b5e24685eda4d50015e547904/aevatar-kit-react-1.2.0.tgz","_integrity":"sha512-3lVmoX84TiyyMay/nSknYpp6PU5nSHxdDaoDSU9RJuq2KAHDuFsyyOKca6+PpL2BVB4E7/DqT667RtnH4vfPUg==","repository":{"url":"git+https://github.com/aevatar/aevatarkit-ui.git","type":"git","directory":"packages/kit-react"},"_npmVersion":"10.7.0","description":"React components and hooks for AevatarKit SDK","directories":{},"_nodeVersion":"18.20.3","dependencies":{"clsx":"^2.1.1","3dmol":"^2.5.3","tailwind-merge":"^2.5.2","@aevatar/kit-a2ui":"1.2.0","@aevatar/kit-core":"1.2.0","@aevatar/kit-types":"1.1.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@aevatar/kit-protocol":"1.2.0","@radix-ui/react-label":"^2.1.0","@radix-ui/react-toast":"^1.2.1","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-dialog":"^1.1.1","@radix-ui/react-select":"^2.1.1","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-popover":"^1.1.1","@radix-ui/react-tooltip":"^1.1.2","@radix-ui/react-checkbox":"^1.1.1","@radix-ui/react-progress":"^1.1.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.0","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-radio-group":"^1.2.0","@radix-ui/react-alert-dialog":"^1.1.1","@radix-ui/react-dropdown-menu":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.2.0","vitest":"^2.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/kit-react_1.2.0_1768204663458_0.4093190002580991","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@aevatar/kit-react","version":"1.2.1","description":"React components and hooks for AevatarKit SDK","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./src/a2ui/styles/globals.css"},"dependencies":{"3dmol":"^2.5.3","@radix-ui/react-accordion":"^1.2.0","@radix-ui/react-alert-dialog":"^1.1.1","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-checkbox":"^1.1.1","@radix-ui/react-dialog":"^1.1.1","@radix-ui/react-dropdown-menu":"^2.1.1","@radix-ui/react-label":"^2.1.0","@radix-ui/react-popover":"^1.1.1","@radix-ui/react-progress":"^1.1.0","@radix-ui/react-radio-group":"^1.2.0","@radix-ui/react-select":"^2.1.1","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@radix-ui/react-toast":"^1.2.1","@radix-ui/react-tooltip":"^1.1.2","class-variance-authority":"^0.7.0","clsx":"^2.1.1","tailwind-merge":"^2.5.2","@aevatar/kit-a2ui":"1.2.1","@aevatar/kit-protocol":"1.2.1","@aevatar/kit-types":"1.2.1","@aevatar/kit-core":"1.2.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.0","typescript":"^5.3.0","vitest":"^2.0.0"},"repository":{"type":"git","url":"git+https://github.com/aevatar/aevatarkit-ui.git","directory":"packages/kit-react"},"homepage":"https://github.com/aevatar/aevatarkit-ui#readme","publishConfig":{"access":"public"},"keywords":["aevatar","react","hooks","components","ui","agent"],"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","clean":"rm -rf dist","test":"vitest"},"_id":"@aevatar/kit-react@1.2.1","bugs":{"url":"https://github.com/aevatar/aevatarkit-ui/issues"},"_integrity":"sha512-MrzOacS2bV5eXB1/soOo7H1YE+GDHAb4sV4jJrVhSW2FTOdb3ViFPq6O6j9lPBZEwd4A7xYh9517gbDJRoP9Qg==","_resolved":"/private/var/folders/d9/bmbzh5n14v7byzn_zznk3gr80000gn/T/d408474971741b93a2c306b999a2a0dc/aevatar-kit-react-1.2.1.tgz","_from":"file:aevatar-kit-react-1.2.1.tgz","_nodeVersion":"18.20.3","_npmVersion":"10.7.0","dist":{"integrity":"sha512-MrzOacS2bV5eXB1/soOo7H1YE+GDHAb4sV4jJrVhSW2FTOdb3ViFPq6O6j9lPBZEwd4A7xYh9517gbDJRoP9Qg==","shasum":"b2e2ba86953e4fe390cd5aa26dfe535094359198","tarball":"https://registry.npmjs.org/@aevatar/kit-react/-/kit-react-1.2.1.tgz","fileCount":10,"unpackedSize":1263702,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCWRCHMUG7niBVcTG8VW+zwSvZdIFn1s8Df2IWivzoGIQIhAME7pYrDd6PgD2f85u/cR6bA7Z5Hr6E9zVS/lG7rL4Ul"}]},"_npmUser":{"name":"potterf","email":"potter.sun@aelf.io"},"directories":{},"maintainers":[{"name":"potterf","email":"potter.sun@aelf.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kit-react_1.2.1_1768983992991_0.9010087330725995"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-06T08:45:41.236Z","modified":"2026-01-21T08:26:33.300Z","0.3.0":"2026-01-06T08:45:41.543Z","1.0.0":"2026-01-07T03:48:30.883Z","1.1.0":"2026-01-07T07:01:42.954Z","1.2.0":"2026-01-12T07:57:43.622Z","1.2.1":"2026-01-21T08:26:33.155Z"},"bugs":{"url":"https://github.com/aevatar/aevatarkit-ui/issues"},"homepage":"https://github.com/aevatar/aevatarkit-ui#readme","keywords":["aevatar","react","hooks","components","ui","agent"],"repository":{"type":"git","url":"git+https://github.com/aevatar/aevatarkit-ui.git","directory":"packages/kit-react"},"description":"React components and hooks for AevatarKit SDK","maintainers":[{"name":"potterf","email":"potter.sun@aelf.io"}],"readme":"# @aevatar/kit-react\n\n> React components and hooks for AevatarKit SDK\n\n## Overview\n\nThis package provides React bindings for the AevatarKit SDK, including a context provider, hooks for state management, and pre-built UI components.\n\n## Installation\n\n```bash\npnpm add @aevatar/kit-react\n```\n\n## Features\n\n- 🎣 **Hooks** - React hooks for all SDK functionality\n- 🎨 **Components** - Pre-built Chat, Timeline, and common UI\n- 🔄 **Context** - Global state management via React Context\n- 💅 **Themeable** - CSS variables for customization\n\n## Quick Start\n\n```tsx\nimport {\n  AevatarProvider,\n  useSession,\n  ChatPanel,\n} from '@aevatar/kit-react';\n\nfunction App() {\n  return (\n    <AevatarProvider client={{ baseUrl: 'http://localhost:5001' }}>\n      <ChatView />\n    </AevatarProvider>\n  );\n}\n\nfunction ChatView() {\n  const { session, createSession } = useSession();\n  \n  useEffect(() => {\n    createSession();\n  }, []);\n  \n  return <ChatPanel placeholder=\"Type a message...\" />;\n}\n```\n\n## Context\n\n### AevatarProvider\n\nWraps your app and provides SDK context:\n\n```tsx\nimport { AevatarProvider } from '@aevatar/kit-react';\n\nfunction App() {\n  return (\n    <AevatarProvider\n      client={{\n        baseUrl: 'http://localhost:5001',\n        apiKey: 'optional',\n        timeout: 30000,\n      }}\n      autoConnect={true}\n    >\n      {children}\n    </AevatarProvider>\n  );\n}\n```\n\n**Props:**\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `client` | `ClientOptions \\| AevatarClient` | required | Client config or instance |\n| `autoConnect` | `boolean` | `true` | Auto-connect on mount |\n| `children` | `ReactNode` | required | Child components |\n\n## Hooks\n\n### useAevatar\n\nAccess the root context:\n\n```tsx\nconst {\n  client,\n  connectionStatus,\n  activeSession,\n  setActiveSession,\n  isReady,\n  error,\n} = useAevatar();\n```\n\n### useSession\n\nSession management:\n\n```tsx\nconst {\n  session,           // SessionInstance | null\n  state,             // SessionState | null\n  messages,          // AgUiMessage[]\n  isLoading,         // boolean\n  createSession,     // (options?) => Promise<SessionInstance>\n  sendMessage,       // (content: string) => Promise<void>\n  closeSession,      // () => Promise<void>\n} = useSession();\n\n// Create session\nawait createSession({ config: { agentId: 'my-agent' } });\n\n// Send message\nawait sendMessage('Hello!');\n```\n\n### useRun\n\nRun execution:\n\n```tsx\nconst {\n  run,        // RunInstance | null\n  status,     // RunStatus | null\n  steps,      // StepInfo[]\n  isRunning,  // boolean\n  startRun,   // (input?) => Promise<RunInstance>\n  stopRun,    // () => Promise<void>\n} = useRun();\n```\n\n### useMessages\n\nMessage streaming:\n\n```tsx\nconst {\n  messages,           // AgUiMessage[]\n  streamingMessage,   // { id: string, content: string } | null\n  isStreaming,        // boolean\n} = useMessages();\n\n// Render messages\nmessages.map((msg) => (\n  <div key={msg.id} className={msg.role}>\n    {msg.content}\n  </div>\n));\n\n// Show streaming indicator\n{isStreaming && <span>Typing...</span>}\n```\n\n### useEventStream\n\nRaw event access:\n\n```tsx\nconst {\n  latestEvent,  // AgUiEvent | null\n  events,       // AgUiEvent[] (last 100)\n  subscribe,    // (callback) => Unsubscribe\n} = useEventStream();\n\n// Subscribe to specific events\nuseEffect(() => {\n  return subscribe((event) => {\n    if (event.type === 'STEP_STARTED') {\n      console.log('Step:', event.stepName);\n    }\n  });\n}, [subscribe]);\n```\n\n### useProgress\n\nProgress tracking (Aevatar extension):\n\n```tsx\nconst {\n  progress,  // AevatarProgressEvent | null\n  percent,   // number (0-100)\n  phase,     // string | null\n  isActive,  // boolean\n} = useProgress();\n\n// Render progress\n{isActive && (\n  <div>\n    <span>{phase}</span>\n    <progress value={percent} max={100} />\n  </div>\n)}\n```\n\n### useConnection\n\nConnection status:\n\n```tsx\nconst {\n  status,       // ConnectionStatus\n  isConnected,  // boolean\n  connect,      // () => Promise<void>\n  disconnect,   // () => void\n} = useConnection();\n```\n\n## Components\n\n### Chat Components\n\n**ChatPanel** - Complete chat UI:\n\n```tsx\n<ChatPanel\n  className=\"my-chat\"\n  placeholder=\"Ask anything...\"\n  showLoading={true}\n  onSend={(content) => console.log('Sent:', content)}\n/>\n```\n\n**MessageList** - Message display:\n\n```tsx\n<MessageList messages={messages} />\n```\n\n**MessageBubble** - Single message:\n\n```tsx\n<MessageBubble\n  role=\"assistant\"\n  content=\"Hello! How can I help?\"\n/>\n```\n\n**InputArea** - Message input:\n\n```tsx\n<InputArea\n  placeholder=\"Type a message...\"\n  disabled={isRunning}\n  onSend={(content) => sendMessage(content)}\n/>\n```\n\n### Timeline Components\n\n**TimelineView** - Execution timeline:\n\n```tsx\n<TimelineView\n  steps={steps}\n  showDetails={true}\n/>\n```\n\n**StepCard** - Single step:\n\n```tsx\n<StepCard\n  step={step}\n  isActive={step.status === 'running'}\n/>\n```\n\n**StreamingText** - Streaming text display:\n\n```tsx\n<StreamingText\n  content={streamingMessage?.content ?? ''}\n  isStreaming={isStreaming}\n/>\n```\n\n### Common Components\n\n**ConnectionStatus** - Connection indicator:\n\n```tsx\n<ConnectionStatus showLabel />\n// Shows: 🟢 Connected | 🟡 Connecting | 🔴 Error\n```\n\n**ProgressBar** - Progress display:\n\n```tsx\n<ProgressBar value={50} showLabel />\n```\n\n**LoadingSpinner** - Loading indicator:\n\n```tsx\n<LoadingSpinner size={24} />\n```\n\n## File Structure\n\n```\nsrc/\n├── index.ts              # Re-exports all\n├── context/\n│   ├── AevatarContext.ts # Context definition\n│   └── AevatarProvider.tsx # Provider component\n├── hooks/\n│   ├── useAevatar.ts     # Root context hook\n│   ├── useSession.ts     # Session management\n│   ├── useRun.ts         # Run execution\n│   ├── useMessages.ts    # Message streaming\n│   ├── useEventStream.ts # Event access\n│   ├── useProgress.ts    # Progress tracking\n│   └── useConnection.ts  # Connection status\n└── components/\n    ├── chat/\n    │   ├── ChatPanel.tsx\n    │   ├── MessageList.tsx\n    │   ├── MessageBubble.tsx\n    │   └── InputArea.tsx\n    ├── timeline/\n    │   ├── TimelineView.tsx\n    │   ├── StepCard.tsx\n    │   └── StreamingText.tsx\n    └── common/\n        ├── ConnectionStatus.tsx\n        ├── ProgressBar.tsx\n        └── LoadingSpinner.tsx\n```\n\n## Theming\n\nCustomize with CSS variables:\n\n```css\n:root {\n  --aevatar-primary: #6366f1;\n  --aevatar-background: #ffffff;\n  --aevatar-surface: #f8fafc;\n  --aevatar-text: #1e293b;\n  --aevatar-text-muted: #64748b;\n  --aevatar-border: #e2e8f0;\n  --aevatar-success: #22c55e;\n  --aevatar-warning: #f59e0b;\n  --aevatar-error: #ef4444;\n  --aevatar-radius: 8px;\n}\n\n/* Dark mode */\n[data-theme=\"dark\"] {\n  --aevatar-background: #0f172a;\n  --aevatar-surface: #1e293b;\n  --aevatar-text: #f8fafc;\n  --aevatar-text-muted: #94a3b8;\n  --aevatar-border: #334155;\n}\n```\n\n## Dependencies\n\n- `@aevatar/kit-types` - Type definitions\n- `@aevatar/kit-protocol` - Protocol layer\n- `@aevatar/kit-core` - Core logic\n- `react` (peer) - React 18+\n- `react-dom` (peer) - React DOM 18+\n\n## Design Principles\n\n1. **Hooks First** - All logic accessible via hooks\n2. **Components Optional** - Use hooks with custom UI\n3. **Themeable** - CSS variables for styling\n4. **Accessible** - ARIA labels, keyboard navigation\n\n## Related Packages\n\n- [`@aevatar/kit-types`](../kit-types) - Type definitions\n- [`@aevatar/kit-protocol`](../kit-protocol) - Protocol layer\n- [`@aevatar/kit-core`](../kit-core) - Core logic\n- [`@aevatar/kit`](../kit) - Main package\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}