{"_id":"@21st-sdk/react","_rev":"7-198e41cdc538d994b1ed3840e867cb94","name":"@21st-sdk/react","dist-tags":{"latest":"0.2.3"},"versions":{"0.1.2":{"name":"@21st-sdk/react","version":"0.1.2","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@21st-sdk/react@0.1.2","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://an.dev","dist":{"shasum":"df80a7d07eca53eed1c7a91303bbcd41dfc881a5","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.1.2.tgz","fileCount":76,"integrity":"sha512-pQf+IAaHDv2ua4EdBlN4+N4+WyFsdg2ak/vQn/Ojp39JyTrE4xdwB1psmdgPu9k2n0j7qi7WC0HHfvSXdJlQkw==","signatures":[{"sig":"MEUCIQDl2XspI0wtfEBaCjAIUxHa4ACbwkSYtusGiO/7Kl1AfQIgCQ6d1FXQ2SudjQIfXSh4TdUHyVGb5UBsBTrjIrb2y9Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3751507},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"gitHead":"b2f01d90864243f791cba8222a90e1ebe07a87ce","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.0","motion":"^12.0.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.2_1772764455157_0.489367103898253","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@21st-sdk/react","version":"0.1.3","keywords":["react","ai","agent","chat","ai-sdk","an","an.dev","components","ui"],"license":"MIT","_id":"@21st-sdk/react@0.1.3","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"8e2504d56c28999c88534e8b513fae4b24e34dc0","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.1.3.tgz","fileCount":77,"integrity":"sha512-4Lpf8N/mM5Cx83muY/BTqabrPqFZgTwPDkhdYfkgbfdH+tzcYL041igkGV7jfHkLhiGQhovV41+p4IRGRpQYfg==","signatures":[{"sig":"MEYCIQDwDjxo5ZwzrAOKVFGyDhJOxr9OPE4dpO5JaZFLuAlOZQIhAIHAAzmFsvRKNu1YXradkGfLsCZXaUfUsQ6bspLz10Vu","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3756267},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"gitHead":"b2f01d90864243f791cba8222a90e1ebe07a87ce","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"React components for An AI agent chat UIs","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.0","motion":"^12.0.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.3_1772767115483_0.7264677099278081","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@21st-sdk/react","version":"0.1.4","keywords":["react","ai","agent","chat","ai-sdk","21st","21st.dev","components","ui"],"license":"MIT","_id":"@21st-sdk/react@0.1.4","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"2018a788f7f7c1ef65632b4d1a955c1a2b6ba729","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.1.4.tgz","fileCount":77,"integrity":"sha512-e3KXIiuW6ujij2412dWbI6Vswoqd/ULqF1+Ska2LmkDT9Dte+6bn7qR8WNaop7UrCWvruWxNY2nvptHHjBhGSQ==","signatures":[{"sig":"MEUCIEj+f95VKM54p2CyayzetTTpGwLiQXNsEWnOvuVI+IppAiEA/leeyFFXNgBhliBXy0lrLhmE+wP1FhzGtS6o/xGRC/o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3760859},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"gitHead":"4ead7130be5aad18d4ab31eafe7f7392ea95fc3d","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"React components for 21st Agents chat UIs","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.0","motion":"^12.0.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.4_1772829832176_0.6722495134995219","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@21st-sdk/react","version":"0.2.0","keywords":["react","ai","agent","chat","ai-sdk","21st","21st.dev","components","ui"],"license":"MIT","_id":"@21st-sdk/react@0.2.0","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"e1909a0124a9344e2c6ccf41e743a376f1a5ab4a","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.2.0.tgz","fileCount":78,"integrity":"sha512-ezv/tsYKZawfXNQZ/Kbvy0ddJ5t+Z11cxR637dGYQlLKLCVw2+CUr53mbuyJGsOMHw+6gMi15jduFPHGqZ+PDg==","signatures":[{"sig":"MEQCIGs+XQ4AITe5/CeHaHYR0hgDlKSEfb5DXMFOHq86zYL/AiAc4DvPQgwxzkXM0wcftM1ueIdH/4xzTr2Sei+Fo76RJw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3816857},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"gitHead":"42a4e1b9d6b9feb249a80fd710a9a135a58b34ad","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"React components for 21st Agents chat UIs","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.0","motion":"^12.0.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.0_1773255342447_0.3164578562321583","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@21st-sdk/react","version":"0.2.1","keywords":["react","ai","agent","chat","ai-sdk","21st","21st.dev","components","ui"],"license":"MIT","_id":"@21st-sdk/react@0.2.1","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"d5156dc8a91633bb06189af82eb5c3f80c9065c3","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.2.1.tgz","fileCount":78,"integrity":"sha512-SJvjmQ+WKezZ1jeLItckklyL5ydap/JlsIEaFiuxkXH5EcZIFyL7r2INucABvtFclOFQ3miL4+aXE2CbPtdMIQ==","signatures":[{"sig":"MEUCIQCAPpDzJP+ROX5X+WqYUDPEh40/izcVo0jKf1errRcQ9wIgFjSckUy8RYWTvDmSogFjGRNOjznvDJZaKBCFwoAVv3o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3818157},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"gitHead":"693a495edfe463b94c5994e1198ba92b66e56d59","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"React components for 21st Agents chat UIs","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.0","motion":"^12.0.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.1_1773270331063_0.007124939932314334","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@21st-sdk/react","version":"0.2.2","keywords":["react","ai","agent","chat","ai-sdk","21st","21st.dev","components","ui"],"license":"MIT","_id":"@21st-sdk/react@0.2.2","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"a0c9211621973937b0a4cd7fca5f33ca715a5180","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.2.2.tgz","fileCount":78,"integrity":"sha512-1xFxrKmwuQmdHP+bfKrzzxi2iYnxyHg760wsaiv6SeLZqcmGtlDmDfxmv6Sl3PAWVxp3WOGyFahknPReMIVFfA==","signatures":[{"sig":"MEYCIQCFUpAroTAZHo6mCSOO/M7GJj48z9nf0Yb3E4Nx5jqJgwIhAKOoEiI8gTyjNS6wWWtKENHGyFnutMDJgokWIpRNF84s","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3819257},"main":"./dist/index.cjs","type":"module","_from":"file:21st-sdk-react-0.2.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_resolved":"/private/var/folders/kr/b86wdv7x4fjc3x184c6t_bb40000gn/T/b51dc23588291580bf4adbcced03e8a6/21st-sdk-react-0.2.2.tgz","_integrity":"sha512-1xFxrKmwuQmdHP+bfKrzzxi2iYnxyHg760wsaiv6SeLZqcmGtlDmDfxmv6Sl3PAWVxp3WOGyFahknPReMIVFfA==","_npmVersion":"10.8.2","description":"React components for 21st Agents chat UIs","directories":{"doc":"./docs"},"sideEffects":["./dist/styles.css"],"_nodeVersion":"20.19.6","dependencies":{"clsx":"^2.1.0","motion":"^12.0.0","remark-gfm":"^4.0.0","lucide-react":"^0.460.0","react-markdown":"^10.0.0","tailwind-merge":"^2.5.0","react-syntax-highlighter":"^15.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ai":"^5.0.0","tsup":"^8.0.0","react":"^19.0.0","postcss":"^8.4.0","react-dom":"^19.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","@types/react":"^19.0.0","autoprefixer":"^10.4.0","@ai-sdk/react":"^2.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0"},"peerDependencies":{"ai":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.2_1773929943222_0.529375285297085","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@21st-sdk/react","version":"0.2.3","license":"MIT","description":"React components for 21st Agents chat UIs","homepage":"https://21st.dev/agents","publishConfig":{"access":"public"},"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"}},"./styles.css":"./dist/styles.css","./styles/index.css":"./styles/index.css"},"directories":{"doc":"./docs"},"keywords":["react","ai","agent","chat","ai-sdk","21st","21st.dev","components","ui"],"sideEffects":["./dist/styles.css"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0","ai":"^5.0.0"},"dependencies":{"motion":"^12.0.0","clsx":"^2.1.0","tailwind-merge":"^2.5.0","react-markdown":"^10.0.0","remark-gfm":"^4.0.0","react-syntax-highlighter":"^15.0.0","lucide-react":"^0.460.0"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@types/react-syntax-highlighter":"^15.0.0","react":"^19.0.0","react-dom":"^19.0.0","@ai-sdk/react":"^2.0.0","ai":"^5.0.0","tsup":"^8.0.0","typescript":"^5.4.5","tailwindcss":"^3.4.0","postcss":"^8.4.0","autoprefixer":"^10.4.0"},"scripts":{"build":"tsup && tailwindcss -i styles/index.css -o dist/styles.css --minify","dev":"tsup --watch","lint":"tsc --noEmit"},"_id":"@21st-sdk/react@0.2.3","_integrity":"sha512-acv6b8Qq4oYXc9doRDoqGxyLPSs+yNEyZlKyP2fL6qp4+VKFUQ6k10oPt922+EE3RfoeMKEDQK+YSZV2565uCQ==","_resolved":"/private/var/folders/kr/b86wdv7x4fjc3x184c6t_bb40000gn/T/6b1dd80edf3fd506f6ed0d677fa0c8af/21st-sdk-react-0.2.3.tgz","_from":"file:21st-sdk-react-0.2.3.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-acv6b8Qq4oYXc9doRDoqGxyLPSs+yNEyZlKyP2fL6qp4+VKFUQ6k10oPt922+EE3RfoeMKEDQK+YSZV2565uCQ==","shasum":"f5ded0ca83d95f3acc0414249d3e9b4ea9cff7e0","tarball":"https://registry.npmjs.org/@21st-sdk/react/-/react-0.2.3.tgz","fileCount":78,"unpackedSize":3819257,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDH49x5K5LRcsiIdduYUCh3hrDT3iV2AXRQch3gGSy97gIgMeXRkaz3jy6Hy8TGnStzpOHbnmiAIbF34rwFExF8Pq4="}]},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.2.3_1773930007003_0.5098144690502611"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T02:34:15.043Z","modified":"2026-03-19T14:20:07.355Z","0.1.2":"2026-03-06T02:34:15.420Z","0.1.3":"2026-03-06T03:18:35.736Z","0.1.4":"2026-03-06T20:43:52.365Z","0.2.0":"2026-03-11T18:55:42.670Z","0.2.1":"2026-03-11T23:05:31.381Z","0.2.2":"2026-03-19T14:19:03.414Z","0.2.3":"2026-03-19T14:20:07.186Z"},"license":"MIT","homepage":"https://21st.dev/agents","keywords":["react","ai","agent","chat","ai-sdk","21st","21st.dev","components","ui"],"description":"React components for 21st Agents chat UIs","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"readme":"# @21st-sdk/react\n\nReact components for building AI agent chat UIs powered by [21st Agents](https://21st.dev/agents). Drop-in chat interface with tool renderers, theming, and full customization.\n\nBuilt on [Vercel AI SDK v5](https://sdk.vercel.ai) — no custom hooks or state management. Just components.\n\n## Install\n\n```bash\nnpm install @21st-sdk/react ai @ai-sdk/react\n```\n\n## Quick Start\n\n```tsx\n\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { AgentChat, createAgentChat } from \"@21st-sdk/react\";\nimport \"@21st-sdk/react/styles.css\";\nimport { useMemo } from \"react\";\n\nexport default function Chat() {\n  const chat = useMemo(\n    () =>\n      createAgentChat({\n        agent: \"your-agent-slug\",\n        getToken: async () => \"your_an_sk_token\",\n      }),\n    [],\n  );\n\n  const { messages, sendMessage, status, stop, error } = useChat({ chat });\n\n  return (\n    <AgentChat\n      messages={messages}\n      onSend={(msg) =>\n        sendMessage({\n          parts: [{ type: \"text\", text: msg.content }],\n        })\n      }\n      status={status}\n      onStop={stop}\n      error={error}\n    />\n  );\n}\n```\n\nThat's it. You get a full chat UI with message rendering, tool visualization, auto-scroll, and streaming — all wired to your deployed agent.\n\n## Customization\n\nFour levels of customization, from simple to full control:\n\n### 1. Theme tokens\n\nApply a theme JSON from the [Playground](https://21st.dev/agents/playground):\n\n```tsx\n<AgentChat theme={playgroundTheme} colorMode=\"dark\" />\n```\n\n### 2. Class overrides\n\nOverride styles per element:\n\n```tsx\n<AgentChat\n  classNames={{\n    root: \"rounded-2xl border\",\n    messageList: \"px-8\",\n    inputBar: \"bg-gray-50\",\n    userMessage: \"bg-blue-100\",\n  }}\n/>\n```\n\n### 3. Slot components\n\nSwap sub-components entirely:\n\n```tsx\n<AgentChat\n  slots={{\n    InputBar: MyCustomInput,\n    UserMessage: MyUserBubble,\n    ToolRenderer: MyToolRenderer,\n  }}\n/>\n```\n\n### 4. Individual components\n\nBuild from scratch with individual imports:\n\n```tsx\nimport { MessageList, InputBar, ToolRenderer } from \"@21st-sdk/react\";\n```\n\n## CSS\n\nImport the stylesheet once in your app:\n\n```tsx\nimport \"@21st-sdk/react/styles.css\";\n```\n\nNo Tailwind peer dependency required — CSS is pre-compiled. All elements have stable `an-*` class names for custom styling:\n\n```css\n.an-root { }\n.an-message-list { }\n.an-user-message { }\n.an-assistant-message { }\n.an-input-bar { }\n.an-send-button { }\n.an-tool-bash { }\n.an-tool-edit { }\n/* ... */\n```\n\n## API Reference\n\n### `createAgentChat(options)`\n\nCreates an AI SDK `Chat` instance pointed at the relay API.\n\n```ts\ncreateAgentChat({\n  agent: string;           // Agent slug from your dashboard\n  getToken: () => Promise<string>;  // Returns your an_sk_ API key\n  apiUrl?: string;         // Default: \"https://relay.an.dev\"\n  projectId?: string;      // Session persistence key\n  onFinish?: () => void;\n  onError?: (error: Error) => void;\n})\n```\n\nReturns a standard `Chat<UIMessage>` — pass it to `useChat({ chat })`.\n\n### `<AgentChat />`\n\nDrop-in chat component.\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `messages` | `UIMessage[]` | From `useChat()` |\n| `onSend` | `(msg) => void` | Send handler |\n| `status` | `ChatStatus` | `\"ready\" \\| \"submitted\" \\| \"streaming\" \\| \"error\"` |\n| `onStop` | `() => void` | Stop generation |\n| `error` | `Error` | Error to display |\n| `theme` | `ChatTheme` | Theme from playground |\n| `colorMode` | `\"light\" \\| \"dark\" \\| \"auto\"` | Color mode |\n| `classNames` | `Partial<ChatClassNames>` | Per-element CSS overrides |\n| `slots` | `Partial<ChatSlots>` | Component swapping |\n| `className` | `string` | Root element class |\n| `style` | `CSSProperties` | Root element style |\n| `modelSelector` | `{ models, activeModelId?, onModelChange? }` | Model picker (for custom backends) |\n| `attachments` | `{ onAttach?, images?, files? }` | File attachment support |\n\n### `applyTheme(element, theme, colorMode?)`\n\nManually inject CSS variables from a playground theme JSON.\n\n### Components\n\n| Component | Description |\n|-----------|-------------|\n| `MessageList` | Auto-scrolling message container with grouping |\n| `UserMessage` | User message bubble |\n| `AssistantMessage` | Assistant response with parts routing |\n| `StreamingMarkdown` | Markdown renderer with syntax highlighting |\n| `InputBar` | Text input with send/stop buttons |\n| `MessageActions` | Copy button |\n| `ToolRenderer` | Routes tool parts to the correct component |\n\n### Tool Components\n\n| Component | Renders |\n|-----------|---------|\n| `BashTool` | Terminal commands with output |\n| `EditTool` | File edits with diff display |\n| `WriteTool` | File creation |\n| `SearchTool` | Web search results |\n| `TodoTool` | Task checklists |\n| `PlanTool` | Step-by-step plans |\n| `TaskTool` | Sub-agent tasks |\n| `McpTool` | MCP protocol calls |\n| `ThinkingTool` | Reasoning/thinking indicator |\n| `GenericTool` | Fallback for unknown tools |\n\n## Theme Type\n\n```ts\ninterface ChatTheme {\n  theme: Record<string, string>;  // Shared: font, spacing, accent\n  light: Record<string, string>;  // Light mode CSS vars\n  dark: Record<string, string>;   // Dark mode CSS vars\n}\n```\n\n## Model Selection\n\nThe SDK exports pre-defined model constants for convenience:\n\n```ts\nimport { CLAUDE_MODELS, DEFAULT_MODEL_ID } from \"@21st-sdk/react\"\nimport type { ModelOption, ClaudeModelId } from \"@21st-sdk/react\"\n```\n\n> **Note:** When using `createAgentChat()` with the relay, the model is set server-side in the agent config. The `modelSelector` prop is for building UIs with custom backends.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}