{"_id":"@21st-sdk/nextjs","_rev":"4-89dd848e7580a916c25e80c18317007e","name":"@21st-sdk/nextjs","dist-tags":{"latest":"0.0.11"},"versions":{"0.0.8":{"name":"@21st-sdk/nextjs","version":"0.0.8","keywords":["nextjs","react","ai","agent","chat","ai-sdk","an","an.dev"],"license":"MIT","_id":"@21st-sdk/nextjs@0.0.8","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://an.dev","dist":{"shasum":"60ed0e65effa43691241d7ee1630e705f8e32b25","tarball":"https://registry.npmjs.org/@21st-sdk/nextjs/-/nextjs-0.0.8.tgz","fileCount":25,"integrity":"sha512-EK9rwNzvi48Unv3cdHKbIcaxaKBLixgxhwexPKnKkUI+mZ22VJgFSr8g3b0X0GPa1Lg1khCDw0JewOYy8VMGwA==","signatures":[{"sig":"MEQCIEVR0qgJBLTfQGe4hkZYL5pSbKlHA5vB4eD7WtD83ZmWAiBKVMjJvI9/34L7wBvPHS0raHel0b9jtenEv4OA+upo2w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42727},"type":"module","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}}},"gitHead":"b2f01d90864243f791cba8222a90e1ebe07a87ce","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"Next.js integration for AN AI agent chat — server-side token handler","directories":{"doc":"./docs"},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"^15.0.0","tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.4.5","@types/react":"^19.0.0","@21st-sdk/react":"workspace:*"},"peerDependencies":{"ai":"^5.0.0","next":">=14.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0","@21st-sdk/react":"^0.0.5"},"_npmOperationalInternal":{"tmp":"tmp/nextjs_0.0.8_1772764480818_0.6265343989100487","host":"s3://npm-registry-packages-npm-production"}},"0.0.9":{"name":"@21st-sdk/nextjs","version":"0.0.9","keywords":["nextjs","react","ai","agent","chat","ai-sdk","an","an.dev"],"license":"MIT","_id":"@21st-sdk/nextjs@0.0.9","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"ab3d8c2671d8b6f611f1b437385367b35cb2d536","tarball":"https://registry.npmjs.org/@21st-sdk/nextjs/-/nextjs-0.0.9.tgz","fileCount":25,"integrity":"sha512-gRha+f/t/8S9H8SBJE4JwIP+qzsj67weSPHnnE0mbx5UFtodCxQXFA9a2XXDflsGHPEVU3A4xKWRp+EfJWlPrA==","signatures":[{"sig":"MEYCIQDD3U0F/vTFyPs+y0yB3qTOlREzmqYWrmGOr3fcmZoSzgIhANRyUiOaYYX9LEvBLPwaxq8qiFZY4jScxeDRTQcOZqmn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42815},"type":"module","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}}},"gitHead":"b2f01d90864243f791cba8222a90e1ebe07a87ce","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"Next.js integration for An AI agent chat","directories":{"doc":"./docs"},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"^15.0.0","tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.4.5","@types/react":"^19.0.0","@21st-sdk/react":"workspace:*"},"peerDependencies":{"ai":"^5.0.0","next":">=14.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0","@21st-sdk/react":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/nextjs_0.0.9_1772767120713_0.5025199911101095","host":"s3://npm-registry-packages-npm-production"}},"0.0.10":{"name":"@21st-sdk/nextjs","version":"0.0.10","keywords":["nextjs","react","ai","agent","chat","ai-sdk","21st","21st.dev"],"license":"MIT","_id":"@21st-sdk/nextjs@0.0.10","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"homepage":"https://21st.dev/agents","dist":{"shasum":"f46e1e249a867d3beda506533d624c2d12a4dbc3","tarball":"https://registry.npmjs.org/@21st-sdk/nextjs/-/nextjs-0.0.10.tgz","fileCount":25,"integrity":"sha512-Ww7stQya2H0nIbSyBflHOi3UiD8KKt1vvPc9yIeASwbRABHxLjyd5u+ZGSPesC/AB95fqYqyGpBtEHzw6MiUBQ==","signatures":[{"sig":"MEYCIQDG7WrDNBqEJT3T6RmhQ6LuKiEIVKMgrrLgKJpN/J7V7wIhAPLhKlPBSnVfvCCmI6dtk68adsPUeNWqSdW+ooV25TtB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43570},"type":"module","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}}},"gitHead":"4ead7130be5aad18d4ab31eafe7f7392ea95fc3d","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup","prepack":"cp -r ../docs ./docs","postpack":"rm -rf ./docs"},"_npmUser":{"name":"danverr","email":"ddmaryakhin@mail.ru"},"_npmVersion":"10.8.2","description":"Next.js integration for 21st Agents chat","directories":{"doc":"./docs"},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"^15.0.0","tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.4.5","@types/react":"^19.0.0","@21st-sdk/react":"workspace:*"},"peerDependencies":{"ai":"^5.0.0","next":">=14.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0","@21st-sdk/react":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/nextjs_0.0.10_1772829841141_0.003435952525410624","host":"s3://npm-registry-packages-npm-production"}},"0.0.11":{"name":"@21st-sdk/nextjs","version":"0.0.11","license":"MIT","description":"Next.js integration for 21st Agents chat","homepage":"https://21st.dev/agents","publishConfig":{"access":"public"},"type":"module","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}}},"directories":{"doc":"./docs"},"keywords":["nextjs","react","ai","agent","chat","ai-sdk","21st","21st.dev"],"peerDependencies":{"next":">=14.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@ai-sdk/react":"^2.0.0","@21st-sdk/react":"^0.1.4","ai":"^5.0.0"},"devDependencies":{"@types/react":"^19.0.0","next":"^15.0.0","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.0.0","typescript":"^5.4.5","@21st-sdk/react":"0.2.3"},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"tsc --noEmit"},"_id":"@21st-sdk/nextjs@0.0.11","_integrity":"sha512-PV5DYLPFyRqW+MOH0pkGeZR08hba/0LnSK4oyYFCDWLOuxkXOQK8YUxhHTABwRywP66YYhkdeK8sfP0NlPEYmQ==","_resolved":"/private/var/folders/kr/b86wdv7x4fjc3x184c6t_bb40000gn/T/2fca6b527601fee274eb70dd2fdde337/21st-sdk-nextjs-0.0.11.tgz","_from":"file:21st-sdk-nextjs-0.0.11.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-PV5DYLPFyRqW+MOH0pkGeZR08hba/0LnSK4oyYFCDWLOuxkXOQK8YUxhHTABwRywP66YYhkdeK8sfP0NlPEYmQ==","shasum":"9e90e61d6e6df1454fa6b46a36d49fdbd514398b","tarball":"https://registry.npmjs.org/@21st-sdk/nextjs/-/nextjs-0.0.11.tgz","fileCount":25,"unpackedSize":46232,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCDQgdUbqqyqAoLD2N+S7n6QoyZ/4At436gQgi3PhSJhwIhANKgGJkIBtCtA19id/ua1v12yFMo1lmV/Qv/YvPmIr9/"}]},"_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/nextjs_0.0.11_1775580155814_0.724305314167419"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T02:34:40.702Z","modified":"2026-04-07T16:42:36.106Z","0.0.8":"2026-03-06T02:34:40.971Z","0.0.9":"2026-03-06T03:18:40.878Z","0.0.10":"2026-03-06T20:44:01.292Z","0.0.11":"2026-04-07T16:42:35.958Z"},"license":"MIT","homepage":"https://21st.dev/agents","keywords":["nextjs","react","ai","agent","chat","ai-sdk","21st","21st.dev"],"description":"Next.js integration for 21st Agents chat","maintainers":[{"name":"danverr","email":"ddmaryakhin@mail.ru"},{"name":"bunasq","email":"realsergeybunas@gmail.com"}],"readme":"# @21st-sdk/nextjs\n\nNext.js integration for [21st Agents](https://21st.dev/agents) AI agent chat. Provides a server-side token handler so your API key never reaches the client.\n\n## Install\n\n```bash\nnpm install @21st-sdk/nextjs @21st-sdk/react ai @ai-sdk/react\n```\n\n## Quick Start\n\n### 1. Set your API key\n\n```env\n# .env.local\nAPI_KEY_21ST=an_sk_your_key_here\n```\n\nGet your API key from [the API keys page](https://21st.dev/agents/api-keys).\n\n### 2. Create the token route (one line)\n\n```ts\n// app/api/agent/token/route.ts\nimport { createTokenHandler } from \"@21st-sdk/nextjs/server\"\n\nexport const POST = createTokenHandler({\n  apiKey: process.env.API_KEY_21ST!,\n})\n```\n\n### 3. Use in your page\n\n```tsx\n// app/page.tsx\n\"use client\"\n\nimport { useChat } from \"@ai-sdk/react\"\nimport { AgentChat, createAgentChat } from \"@21st-sdk/nextjs\"\nimport \"@21st-sdk/react/styles.css\"\nimport { useMemo } from \"react\"\n\nexport default function Chat() {\n  const chat = useMemo(\n    () => createAgentChat({\n      agent: \"your-agent-slug\",\n      tokenUrl: \"/api/agent/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({ parts: [{ type: \"text\", text: msg.content }] })\n      }\n      status={status}\n      onStop={stop}\n      error={error}\n    />\n  )\n}\n```\n\nThat's it. Your `an_sk_` API key stays on the server. The client only receives short-lived JWTs.\n\n## How It Works\n\n```\nBrowser                     Your Next.js Server              Relay\n  |                                |                            |\n  |-- POST /api/agent/token ------>|                            |\n  |                                |-- POST /v1/tokens -------->|\n  |                                |   (with an_sk_ key)        |\n  |                                |<-- { token, expiresAt } ---|\n  |<-- { token, expiresAt } ------|                            |\n  |                                                             |\n  |-- POST /v1/chat/:agent ------(with short-lived JWT)------->|\n  |<-- streaming response -----(SSE)---------------------------|\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}