{"id":13901313,"url":"https://github.com/SpellcraftAI/nextjs-openai","last_synced_at":"2025-07-17T21:33:02.855Z","repository":{"id":65896640,"uuid":"591337195","full_name":"SpellcraftAI/nextjs-openai","owner":"SpellcraftAI","description":"Hooks and components for working with OpenAI streams.","archived":false,"fork":false,"pushed_at":"2023-05-12T10:35:28.000Z","size":830,"stargazers_count":238,"open_issues_count":4,"forks_count":18,"subscribers_count":6,"default_branch":"canary","last_synced_at":"2024-11-18T04:43:31.492Z","etag":null,"topics":["nextjs","openai"],"latest_commit_sha":null,"homepage":"https://nextjs-openai.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SpellcraftAI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-01-20T14:10:56.000Z","updated_at":"2024-10-18T12:05:23.000Z","dependencies_parsed_at":"2024-01-16T22:23:36.724Z","dependency_job_id":"3c196f62-f582-4869-9e49-1bac3af94e0e","html_url":"https://github.com/SpellcraftAI/nextjs-openai","commit_stats":null,"previous_names":[],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpellcraftAI%2Fnextjs-openai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpellcraftAI%2Fnextjs-openai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpellcraftAI%2Fnextjs-openai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpellcraftAI%2Fnextjs-openai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SpellcraftAI","download_url":"https://codeload.github.com/SpellcraftAI/nextjs-openai/tar.gz/refs/heads/canary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226305326,"owners_count":17603792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","openai"],"created_at":"2024-08-06T21:01:11.226Z","updated_at":"2024-11-25T09:31:14.094Z","avatar_url":"https://github.com/SpellcraftAI.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","NextJS"],"sub_categories":["OpenAI"],"readme":"# OpenAI for Next.js\n\n[**Github**](https://github.com/SpellcraftAI/nextjs-openai) |\n[**NPM**](https://npmjs.com/package/nextjs-openai) |\n[**Demo**](https://nextjs-openai.vercel.app) |\n[**Docs**](https://nextjs-openai.vercel.app/docs)\n\nAdds hooks and components for working with OpenAI streams.\n\n\u003cimg width=\"600\"\nsrc=\"https://github.com/SpellcraftAI/nextjs-openai/raw/master/public/nextjs-openai-demo.gif\"\u003e\n\n### Installation\n\n`nextjs-openai` includes frontend tools, and `openai-streams` includes tools for\nworking with OpenAI streams in your API Routes.\n\n```bash\nyarn add nextjs-openai openai-streams\n\n# -or-\n\nnpm i --save nextjs-openai openai-streams\n```\n\n### Hooks\n\n`useBuffer()` and `useTextBuffer()` are used to load an incrementing buffer of\ndata (and text) from a given URL.\n\n```tsx\nimport { useTextBuffer } from \"nextjs-openai\";\n\nexport default function Demo() {\n  const { buffer, refresh, cancel, done } = useTextBuffer({ \n    url: \"/api/demo\"\n  });\n  \n  return (\n    \u003cdiv\u003e\n      \u003cStreamingText buffer={buffer} fade={600} /\u003e\n      \u003cbutton onClick={refresh} disabled={!done}\u003eRefresh\u003c/button\u003e\n      \u003cbutton onClick={cancel} disabled={done}\u003eCancel\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Components\n\n`\u003cStreamingText\u003e` and `\u003cStreamingTextURL\u003e` render text from a stream buffer\nusing a fade-in animation.\n\n```tsx\nimport { StreamingTextURL } from \"nextjs-openai\";\n\nexport default function Demo() {\n  return (\n    \u003cStreamingTextURL \n      url=\"/api/demo\" \n      fade={600} \n      throttle={100} \n    /\u003e\n  );\n}\n```\n\n### Sending data and advanced usage\n\nIf you would like to change the type of network request made with\n`\u003cStreamingTextURL\u003e` or the `useBuffer()` and `useTextBuffer()` hooks, you can\nset the `{ method, data }` options.\n\n`{ data }` is sent as the POST request body by default. To use a GET request,\nset `{ method = \"GET\" }` and manually set the URL search params on `{ url }`.\n\n\u003csub\u003eSee\n[`src/pages/index.tsx`](https://github.com/SpellcraftAI/nextjs-openai/blob/master/src/pages/index.tsx)\nfor a live example.\u003c/sub\u003e\n\n#### With `\u003cStreamingTextURL\u003e`\n\n```tsx\nimport { StreamingTextURL } from \"nextjs-openai\";\n\nexport default function Home() {\n  const [data, setData] = useState({ name: \"John\" });\n  // ...\n  return (\n    \u003cStreamingTextURL url=\"/api/demo\" data={data}\u003e\n  );\n}\n```\n\n#### With `useTextBuffer()`\n\n```tsx\nimport { useTextBuffer, StreamingText } from \"nextjs-openai\";\n\nexport default function Home() {\n  const [data, setData] = useState({ name: \"John\" });\n  const { buffer, refresh, cancel } = useTextBuffer({\n    url: \"/api/demo\",\n    throttle: 100,\n    data,\n    /**\n     * Optional: Override params for `fetch(url, params)`.\n     */\n    options: {\n      headers: {\n        // ...\n      }\n    }\n  });\n  // ...\n  return (\n    \u003cStreamingText buffer={buffer}\u003e\n  );\n}\n```\n\n### API Routes\n\nUse `openai-streams` to work with streams in your API Routes.\n\n#### Edge Runtime\n\n```ts\nimport { OpenAI } from \"openai-streams\";\n\nexport default async function handler() {\n  const stream = await OpenAI(\n    \"completions\",\n    {\n      model: \"text-davinci-003\",\n      prompt: \"Write a happy sentence.\\n\\n\",\n      max_tokens: 25\n    },\n  );\n\n  return new Response(stream);\n}\n\nexport const config = {\n  runtime: \"edge\"\n};\n```\n\n#### Node \u003c18\n\nIf you are not using Edge Runtime, import the `NodeJS.Readable` version from\n`openai-streams/node`.\n\n```ts\nimport type { NextApiRequest, NextApiResponse } from \"next\";\nimport { OpenAI } from \"openai-streams/node\";\n\nexport default async function test (_: NextApiRequest, res: NextApiResponse) {\n  const stream = await OpenAI(\n    \"completions\",\n    {\n      model: \"text-davinci-003\",\n      prompt: \"Write a happy sentence.\\n\\n\",\n      max_tokens: 25\n    }\n  );\n\n  stream.pipe(res);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSpellcraftAI%2Fnextjs-openai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSpellcraftAI%2Fnextjs-openai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSpellcraftAI%2Fnextjs-openai/lists"}