├── .gitignore
├── public
    └── favicon.ico
├── remix.env.d.ts
├── .eslintrc.js
├── app
    ├── styles.css
    ├── root.tsx
    └── routes
    │   ├── completion.tsx
    │   └── index.tsx
├── remix.config.js
├── tsconfig.json
├── package.json
├── README.md
├── REMIX.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /.cache
4 | /build
5 | /public/build
6 | .env
7 | 
8 | .DS_Store
9 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dalmaer/remix-openai-streaming/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/node" />
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import('eslint').Linter.Config} */
2 | module.exports = {
3 |   extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
4 | };
5 | 


--------------------------------------------------------------------------------
/app/styles.css:
--------------------------------------------------------------------------------
 1 | input,
 2 | button,
 3 | #results {
 4 |   margin: 0.5em;
 5 |   padding: 0.5em;
 6 |   font-size: 2em;
 7 | }
 8 | 
 9 | input {
10 |   width: 90%;
11 | }
12 | 
13 | #readme {
14 |   margin: 1em;
15 |   padding: 0.5em;
16 | }
17 | 


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('@remix-run/dev').AppConfig} */
2 | module.exports = {
3 |   ignoredRouteFiles: ["**/.*"],
4 |   // appDirectory: "app",
5 |   // assetsBuildDirectory: "public/build",
6 |   // serverBuildPath: "build/index.js",
7 |   // publicPath: "/build/",
8 | };
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
 3 |   "compilerOptions": {
 4 |     "lib": ["DOM", "DOM.Iterable", "ES2019"],
 5 |     "isolatedModules": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react-jsx",
 8 |     "moduleResolution": "node",
 9 |     "resolveJsonModule": true,
10 |     "target": "ES2019",
11 |     "strict": true,
12 |     "allowJs": true,
13 |     "forceConsistentCasingInFileNames": true,
14 |     "baseUrl": ".",
15 |     "paths": {
16 |       "~/*": ["./app/*"]
17 |     },
18 | 
19 |     // Remix takes care of building everything in `remix build`.
20 |     "noEmit": true
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "sideEffects": false,
 4 |   "scripts": {
 5 |     "build": "remix build",
 6 |     "dev": "remix dev",
 7 |     "start": "remix-serve build",
 8 |     "typecheck": "tsc"
 9 |   },
10 |   "dependencies": {
11 |     "@remix-run/node": "^1.14.3",
12 |     "@remix-run/react": "^1.14.3",
13 |     "@remix-run/serve": "^1.14.3",
14 |     "isbot": "^3.6.5",
15 |     "openai": "^3.2.1",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "remix-utils": "^6.0.0"
19 |   },
20 |   "devDependencies": {
21 |     "@remix-run/dev": "^1.14.3",
22 |     "@remix-run/eslint-config": "^1.14.3",
23 |     "@types/react": "^18.0.25",
24 |     "@types/react-dom": "^18.0.8",
25 |     "eslint": "^8.27.0",
26 |     "typescript": "^4.8.4"
27 |   },
28 |   "engines": {
29 |     "node": ">=14"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
 1 | import type { LinksFunction, MetaFunction } from "@remix-run/node";
 2 | import {
 3 |   Links,
 4 |   LiveReload,
 5 |   Meta,
 6 |   Outlet,
 7 |   Scripts,
 8 |   ScrollRestoration,
 9 | } from "@remix-run/react";
10 | 
11 | export const meta: MetaFunction = () => ({
12 |   charset: "utf-8",
13 |   title: "Remix OpenAI Streaming Demo",
14 |   viewport: "width=device-width,initial-scale=1",
15 | });
16 | 
17 | import stylesheet from "~/styles.css";
18 | export const links: LinksFunction = () => [
19 |   { rel: "stylesheet", href: stylesheet },
20 | ];
21 | 
22 | export default function App() {
23 |   return (
24 |     <html lang="en">
25 |       <head>
26 |         <Meta />
27 |         <Links />
28 |       </head>
29 |       <body>
30 |         <Outlet />
31 |         <ScrollRestoration />
32 |         <Scripts />
33 |         <LiveReload />
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Remix OpenAI Streaming Example
 2 | 
 3 | This is a minimial example of using Remix with OpenAI's streaming API
 4 | for completions. There are many ways to do this, but this example uses:
 5 | 
 6 | - [OpenAI npm module](https://github.com/openai/openai-node"): The official library. It uses Axios, and you could instead justhit the REST APIs directly.
 7 | - `eventStream` from [remix-utils](https://github.com/sergiodxa/remix-utils) is used to return a Response with the right headers for an SSE.
 8 | - [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) is used to listen for messages from the server. Could also use `useEventSource` from `remix-utils` instead.
 9 | - The index page contains the form which simply sends the input query to a resource route at `/completion`. That resource route does the OpenAI call (using gpt-3.5-turbo but you can change to gpt-4 if you fancy, with `stream:true`)
10 | 
11 | You must set the `OPENAI_API_KEY` environment variable before you `npm run dev`.
12 | 


--------------------------------------------------------------------------------
/REMIX.md:
--------------------------------------------------------------------------------
 1 | # Welcome to Remix!
 2 | 
 3 | - [Remix Docs](https://remix.run/docs)
 4 | 
 5 | ## Development
 6 | 
 7 | From your terminal:
 8 | 
 9 | ```sh
10 | npm run dev
11 | ```
12 | 
13 | This starts your app in development mode, rebuilding assets on file changes.
14 | 
15 | ## Deployment
16 | 
17 | First, build your app for production:
18 | 
19 | ```sh
20 | npm run build
21 | ```
22 | 
23 | Then run the app in production mode:
24 | 
25 | ```sh
26 | npm start
27 | ```
28 | 
29 | Now you'll need to pick a host to deploy it to.
30 | 
31 | ### DIY
32 | 
33 | If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
34 | 
35 | Make sure to deploy the output of `remix build`
36 | 
37 | - `build/`
38 | - `public/build/`
39 | 
40 | ### Using a Template
41 | 
42 | When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
43 | 
44 | ```sh
45 | cd ..
46 | # create a new project, and pick a pre-configured host
47 | npx create-remix@latest
48 | cd my-new-remix-app
49 | # remove the new project's app (not the old one!)
50 | rm -rf app
51 | # copy your app over
52 | cp -R ../my-old-remix-app/app app
53 | ```
54 | 


--------------------------------------------------------------------------------
/app/routes/completion.tsx:
--------------------------------------------------------------------------------
 1 | import { LoaderArgs } from "@remix-run/node";
 2 | import { eventStream } from "remix-utils";
 3 | import { Configuration, OpenAIApi } from "openai";
 4 | 
 5 | let openai = new OpenAIApi(
 6 |   new Configuration({
 7 |     apiKey: process.env.OPENAI_API_KEY,
 8 |   })
 9 | );
10 | 
11 | let processData = function (data: { toString: () => string }, send: Function) {
12 |   const lines = data
13 |     .toString()
14 |     .split("\n")
15 |     .filter((line: string) => line.trim() !== "");
16 | 
17 |   for (const line of lines) {
18 |     const message = line.toString().replace(/^data: /, "");
19 |     if (message === "[DONE]") {
20 |       return; // Stream finished
21 |     }
22 |     try {
23 |       // console.log("Message", message);
24 |       const parsed = JSON.parse(message);
25 |       let delta = parsed.choices[0].delta?.content;
26 |       if (delta) send({ data: delta });
27 |     } catch (error) {
28 |       console.error("Could not JSON parse stream message", message, error);
29 |     }
30 |   }
31 | };
32 | 
33 | export async function loader({ request }: LoaderArgs) {
34 |   let query = new URL(request.url).searchParams.get("query");
35 | 
36 |   console.log(`GET: Completion Loader called with query: ${query}`);
37 | 
38 |   let messages: any[] = [];
39 |   messages.push({
40 |     role: "user",
41 |     content: `Answer the question as best yoyu can.\n\nQuestion: ${query}\n\nAnswer:`,
42 |   });
43 | 
44 |   let response = await openai.createChatCompletion(
45 |     {
46 |       model: "gpt-3.5-turbo", // can change to "gpt-4" if you fancy
47 |       messages: messages,
48 |       temperature: 0,
49 |       max_tokens: 1024,
50 |       stream: true,
51 |     },
52 |     { responseType: "stream" }
53 |   );
54 | 
55 |   return eventStream(request.signal, function setup(send) {
56 |     response.data.on("data", (data: any) => {
57 |       processData(data, send);
58 |     });
59 | 
60 |     return function clear() {};
61 |   });
62 | }
63 | 


--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Form } from "@remix-run/react";
 2 | import { useState } from "react";
 3 | 
 4 | export default function Index() {
 5 |   const [results, setResults] = useState("");
 6 | 
 7 |   const handleFormSubmit = async (event: React.FormEvent) => {
 8 |     event.preventDefault();
 9 | 
10 |     const formData = new FormData(event.target as HTMLFormElement);
11 |     const query = formData.get("query");
12 | 
13 |     const sse = new EventSource(`/completion?query=${query}`);
14 | 
15 |     sse.addEventListener("message", (event) => {
16 |       // console.log("event: ", event);
17 |       setResults((prevResults) => prevResults + event.data);
18 |     });
19 | 
20 |     sse.addEventListener("error", (event) => {
21 |       console.log("error: ", event);
22 |       sse.close();
23 |     });
24 |   };
25 | 
26 |   return (
27 |     <div>
28 |       <Form onSubmit={handleFormSubmit}>
29 |         <input type="text" name="query" placeholder="Enter your query" />
30 |         <button type="submit">Ask</button>
31 |       </Form>
32 | 
33 |       <div id="results">{results}</div>
34 | 
35 |       <div id="readme">
36 |         <h1>Remix OpenAI Streaming Example</h1>
37 |         This is a minimial example of using Remix with OpenAI's streaming API
38 |         for completions. There are many ways to do this, but this example uses:
39 |         <ul>
40 |           <li>
41 |             <a href="https://github.com/openai/openai-node">
42 |               OpenAI npm module
43 |             </a>
44 |             : The official library. It uses Axios, and you could instead just
45 |             hit the REST APIs directly.
46 |           </li>
47 |           <li>
48 |             <code>eventStream</code> from{" "}
49 |             <a href="https://github.com/sergiodxa/remix-utils">remix-utils</a>{" "}
50 |             is used to return a Response with the right headers for an SSE.
51 |           </li>
52 |           <li>
53 |             <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">
54 |               EventSource
55 |             </a>{" "}
56 |             is used to listen for messages from the server. Could also use{" "}
57 |             <code>useEventSource</code> from <code>remix-utils</code> instead.
58 |           </li>
59 |           <li>
60 |             This page contains the form which simply sends the input query to a
61 |             resource route at <code>/completion</code>. That resource route does
62 |             the OpenAI call (using gpt-3.5-turbo but you can change to gpt-4 if
63 |             you fancy, with <code>stream:true</code>)
64 |           </li>
65 |         </ul>
66 |       </div>
67 |     </div>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------