├── .eslintrc.cjs ├── .gitignore ├── LICENSE ├── README.md ├── components.json ├── convex ├── _generated │ ├── api.d.ts │ ├── api.js │ ├── dataModel.d.ts │ ├── server.d.ts │ └── server.js ├── helpers.ts ├── ingest │ └── load.ts ├── init.ts ├── messages.ts ├── schema.ts ├── serve.ts └── tsconfig.json ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── screenshot.png ├── src ├── App.tsx ├── aiChat │ ├── CloseIcon.tsx │ ├── InfoCircled.tsx │ ├── SendIcon.tsx │ ├── SizeIcon.tsx │ ├── TrashIcon.tsx │ ├── index.tsx │ └── styles.css ├── components │ ├── typography │ │ ├── code.tsx │ │ └── link.tsx │ └── ui │ │ └── button.tsx ├── index.css ├── lib │ └── utils.tsx ├── main.tsx └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true, node: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:@typescript-eslint/recommended-type-checked", 7 | "plugin:react-hooks/recommended", 8 | ], 9 | ignorePatterns: [ 10 | "dist", 11 | "convex/_generated", 12 | ".eslintrc.cjs", 13 | "tailwind.config.js", 14 | // There are currently ESLint errors in shadcn/ui 15 | "src/components/ui", 16 | ], 17 | parser: "@typescript-eslint/parser", 18 | parserOptions: { 19 | project: true, 20 | tsconfigRootDir: __dirname, 21 | }, 22 | plugins: ["react-refresh"], 23 | rules: { 24 | "react-refresh/only-export-components": [ 25 | "warn", 26 | { allowConstantExport: true }, 27 | ], 28 | 29 | // All of these overrides ease getting into 30 | // TypeScript, and can be removed for stricter 31 | // linting down the line. 32 | 33 | // Allow escaping the compiler 34 | "@typescript-eslint/ban-ts-comment": "error", 35 | 36 | // Allow explicit `any`s 37 | "@typescript-eslint/no-explicit-any": "off", 38 | 39 | // START: Allow implicit `any`s 40 | "@typescript-eslint/no-unsafe-argument": "off", 41 | "@typescript-eslint/no-unsafe-assignment": "off", 42 | "@typescript-eslint/no-unsafe-call": "off", 43 | "@typescript-eslint/no-unsafe-member-access": "off", 44 | "@typescript-eslint/no-unsafe-return": "off", 45 | // END: Allow implicit `any`s 46 | 47 | // Allow async functions without await 48 | // for consistency (esp. Convex `handler`s) 49 | "@typescript-eslint/require-await": "off", 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | !**/glob-import/dir/node_modules 2 | .DS_Store 3 | .idea 4 | *.cpuprofile 5 | *.local 6 | *.log 7 | /.vscode/ 8 | /docs/.vitepress/cache 9 | dist 10 | dist-ssr 11 | explorations 12 | node_modules 13 | playground-temp 14 | temp 15 | TODOs.md 16 | .eslintcache 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright 2024 Convex, Inc. 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AI Chat using OpenAI's Assistants API 2 | 3 | An example of using OpenAI's 4 | [Assistants API](https://platform.openai.com/docs/assistants/overview) to build 5 | an AI chat with context retrieval. 6 | 7 | ![Screenshot of a website with AI chat modal open](./screenshot.png "AI chat UI") 8 | 9 | ## Overview: 10 | 11 | This app demonstrates how you can add a chat bot to an existing website, powered 12 | by Convex and OpenAI's Assistants API. 13 | 14 | - The chat is trigged by a button in [`App.tsx`](./src/App.tsx) 15 | - The chat frontend is all in [`src/aiChat`](./src/aiChat/index.tsx) 16 | - An example of web scraping is in [`convex/ingest`](./convex/ingest/load.ts) 17 | - The assistant initialization and uploading of data is in 18 | [`convex/init.ts`](./convex/init.ts) 19 | - The public endpoints for the backend are in 20 | [`convex/messages.ts`](./convex/messages.ts) 21 | - The answering logic is in [`convex/serve.ts`](./convex/serve.ts) 22 | 23 | ## Running the App 24 | 25 | ``` 26 | npm install 27 | npm run dev 28 | ``` 29 | 30 | This will configure a Convex project if you don't already have one, open the 31 | Convex dashboard and the web app running on `localhost`. 32 | 33 | For the chat itself to work, you must configure the following environment 34 | variables on the Convex dashboard: 35 | 36 | - `OPEN_API_KEY` set to an [OpenAI](https://platform.openai.com/) API key 37 | (should start with `sk-`) 38 | - `ASSISTANT_ID` set to the assitant ID, which you can get from the OpenAI 39 | dashboard or by running 40 | 41 | `npx convex run init:createAssistant` 42 | 43 | # What is Convex? 44 | 45 | [Convex](https://convex.dev) is a hosted backend platform with a built-in 46 | database that lets you write your 47 | [database schema](https://docs.convex.dev/database/schemas) and 48 | [server functions](https://docs.convex.dev/functions) in 49 | [TypeScript](https://docs.convex.dev/typescript). Server-side database 50 | [queries](https://docs.convex.dev/functions/query-functions) automatically 51 | [cache](https://docs.convex.dev/functions/query-functions#caching--reactivity) 52 | and [subscribe](https://docs.convex.dev/client/react#reactivity) to data, 53 | powering a 54 | [realtime `useQuery` hook](https://docs.convex.dev/client/react#fetching-data) 55 | in our [React client](https://docs.convex.dev/client/react). There are also 56 | [Python](https://docs.convex.dev/client/python), 57 | [Rust](https://docs.convex.dev/client/rust), 58 | [ReactNative](https://docs.convex.dev/client/react-native), and 59 | [Node](https://docs.convex.dev/client/javascript) clients, as well as a 60 | straightforward 61 | [HTTP API](https://github.com/get-convex/convex-js/blob/main/src/browser/http_client.ts#L40). 62 | 63 | The database support 64 | [NoSQL-style documents](https://docs.convex.dev/database/document-storage) with 65 | [relationships](https://docs.convex.dev/database/document-ids) and 66 | [custom indexes](https://docs.convex.dev/database/indexes/) (including on fields 67 | in nested objects). 68 | 69 | The [`query`](https://docs.convex.dev/functions/query-functions) and 70 | [`mutation`](https://docs.convex.dev/functions/mutation-functions) server 71 | functions have transactional, low latency access to the database and leverage 72 | our [`v8` runtime](https://docs.convex.dev/functions/runtimes) with 73 | [determinism guardrails](https://docs.convex.dev/functions/runtimes#using-randomness-and-time-in-queries-and-mutations) 74 | to provide the strongest ACID guarantees on the market: immediate consistency, 75 | serializable isolation, and automatic conflict resolution via 76 | [optimistic multi-version concurrency control](https://docs.convex.dev/database/advanced/occ) 77 | (OCC / MVCC). 78 | 79 | The [`action` server functions](https://docs.convex.dev/functions/actions) have 80 | access to external APIs and enable other side-effects and non-determinism in 81 | either our [optimized `v8` runtime](https://docs.convex.dev/functions/runtimes) 82 | or a more 83 | [flexible `node` runtime](https://docs.convex.dev/functions/runtimes#nodejs-runtime). 84 | 85 | Functions can run in the background via 86 | [scheduling](https://docs.convex.dev/scheduling/scheduled-functions) and 87 | [cron jobs](https://docs.convex.dev/scheduling/cron-jobs). 88 | 89 | Development is cloud-first, with 90 | [hot reloads for server function](https://docs.convex.dev/cli#run-the-convex-dev-server) 91 | editing via the [CLI](https://docs.convex.dev/cli). There is a 92 | [dashbord UI](https://docs.convex.dev/dashboard) to 93 | [browse and edit data](https://docs.convex.dev/dashboard/deployments/data), 94 | [edit environment variables](https://docs.convex.dev/production/environment-variables), 95 | [view logs](https://docs.convex.dev/dashboard/deployments/logs), 96 | [run server functions](https://docs.convex.dev/dashboard/deployments/functions), 97 | and more. 98 | 99 | There are built-in features for 100 | [reactive pagination](https://docs.convex.dev/database/pagination), 101 | [file storage](https://docs.convex.dev/file-storage), 102 | [reactive search](https://docs.convex.dev/text-search), 103 | [https endpoints](https://docs.convex.dev/functions/http-actions) (for 104 | webhooks), 105 | [streaming import/export](https://docs.convex.dev/database/import-export/), and 106 | [runtime data validation](https://docs.convex.dev/database/schemas#validators) 107 | for [function arguments](https://docs.convex.dev/functions/args-validation) and 108 | [database data](https://docs.convex.dev/database/schemas#schema-validation). 109 | 110 | Everything scales automatically, and it’s 111 | [free to start](https://www.convex.dev/plans). 112 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/index.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /convex/_generated/api.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated `api` utility. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * Generated by convex@1.5.1. 8 | * To regenerate, run `npx convex dev`. 9 | * @module 10 | */ 11 | 12 | import type { 13 | ApiFromModules, 14 | FilterApi, 15 | FunctionReference, 16 | } from "convex/server"; 17 | import type * as helpers from "../helpers"; 18 | import type * as ingest_load from "../ingest/load"; 19 | import type * as init from "../init"; 20 | import type * as messages from "../messages"; 21 | import type * as serve from "../serve"; 22 | 23 | /** 24 | * A utility for referencing Convex functions in your app's API. 25 | * 26 | * Usage: 27 | * ```js 28 | * const myFunctionReference = api.myModule.myFunction; 29 | * ``` 30 | */ 31 | declare const fullApi: ApiFromModules<{ 32 | helpers: typeof helpers; 33 | "ingest/load": typeof ingest_load; 34 | init: typeof init; 35 | messages: typeof messages; 36 | serve: typeof serve; 37 | }>; 38 | export declare const api: FilterApi< 39 | typeof fullApi, 40 | FunctionReference 41 | >; 42 | export declare const internal: FilterApi< 43 | typeof fullApi, 44 | FunctionReference 45 | >; 46 | -------------------------------------------------------------------------------- /convex/_generated/api.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated `api` utility. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * Generated by convex@1.5.1. 8 | * To regenerate, run `npx convex dev`. 9 | * @module 10 | */ 11 | 12 | import { anyApi } from "convex/server"; 13 | 14 | /** 15 | * A utility for referencing Convex functions in your app's API. 16 | * 17 | * Usage: 18 | * ```js 19 | * const myFunctionReference = api.myModule.myFunction; 20 | * ``` 21 | */ 22 | export const api = anyApi; 23 | export const internal = anyApi; 24 | -------------------------------------------------------------------------------- /convex/_generated/dataModel.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated data model types. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * Generated by convex@1.5.1. 8 | * To regenerate, run `npx convex dev`. 9 | * @module 10 | */ 11 | 12 | import type { DataModelFromSchemaDefinition } from "convex/server"; 13 | import type { DocumentByName, TableNamesInDataModel } from "convex/server"; 14 | import type { GenericId } from "convex/values"; 15 | import schema from "../schema"; 16 | 17 | /** 18 | * The names of all of your Convex tables. 19 | */ 20 | export type TableNames = TableNamesInDataModel; 21 | 22 | /** 23 | * The type of a document stored in Convex. 24 | * 25 | * @typeParam TableName - A string literal type of the table name (like "users"). 26 | */ 27 | export type Doc = DocumentByName< 28 | DataModel, 29 | TableName 30 | >; 31 | 32 | /** 33 | * An identifier for a document in Convex. 34 | * 35 | * Convex documents are uniquely identified by their `Id`, which is accessible 36 | * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids). 37 | * 38 | * Documents can be loaded using `db.get(id)` in query and mutation functions. 39 | * 40 | * IDs are just strings at runtime, but this type can be used to distinguish them from other 41 | * strings when type checking. 42 | * 43 | * @typeParam TableName - A string literal type of the table name (like "users"). 44 | */ 45 | export type Id = GenericId; 46 | 47 | /** 48 | * A type describing your Convex data model. 49 | * 50 | * This type includes information about what tables you have, the type of 51 | * documents stored in those tables, and the indexes defined on them. 52 | * 53 | * This type is used to parameterize methods like `queryGeneric` and 54 | * `mutationGeneric` to make them type-safe. 55 | */ 56 | export type DataModel = DataModelFromSchemaDefinition; 57 | -------------------------------------------------------------------------------- /convex/_generated/server.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated utilities for implementing server-side Convex query and mutation functions. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * Generated by convex@1.5.1. 8 | * To regenerate, run `npx convex dev`. 9 | * @module 10 | */ 11 | 12 | import { 13 | ActionBuilder, 14 | HttpActionBuilder, 15 | MutationBuilder, 16 | QueryBuilder, 17 | GenericActionCtx, 18 | GenericMutationCtx, 19 | GenericQueryCtx, 20 | GenericDatabaseReader, 21 | GenericDatabaseWriter, 22 | } from "convex/server"; 23 | import type { DataModel } from "./dataModel.js"; 24 | 25 | /** 26 | * Define a query in this Convex app's public API. 27 | * 28 | * This function will be allowed to read your Convex database and will be accessible from the client. 29 | * 30 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 31 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 32 | */ 33 | export declare const query: QueryBuilder; 34 | 35 | /** 36 | * Define a query that is only accessible from other Convex functions (but not from the client). 37 | * 38 | * This function will be allowed to read from your Convex database. It will not be accessible from the client. 39 | * 40 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 41 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 42 | */ 43 | export declare const internalQuery: QueryBuilder; 44 | 45 | /** 46 | * Define a mutation in this Convex app's public API. 47 | * 48 | * This function will be allowed to modify your Convex database and will be accessible from the client. 49 | * 50 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 51 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 52 | */ 53 | export declare const mutation: MutationBuilder; 54 | 55 | /** 56 | * Define a mutation that is only accessible from other Convex functions (but not from the client). 57 | * 58 | * This function will be allowed to modify your Convex database. It will not be accessible from the client. 59 | * 60 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 61 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 62 | */ 63 | export declare const internalMutation: MutationBuilder; 64 | 65 | /** 66 | * Define an action in this Convex app's public API. 67 | * 68 | * An action is a function which can execute any JavaScript code, including non-deterministic 69 | * code and code with side-effects, like calling third-party services. 70 | * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive. 71 | * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}. 72 | * 73 | * @param func - The action. It receives an {@link ActionCtx} as its first argument. 74 | * @returns The wrapped action. Include this as an `export` to name it and make it accessible. 75 | */ 76 | export declare const action: ActionBuilder; 77 | 78 | /** 79 | * Define an action that is only accessible from other Convex functions (but not from the client). 80 | * 81 | * @param func - The function. It receives an {@link ActionCtx} as its first argument. 82 | * @returns The wrapped function. Include this as an `export` to name it and make it accessible. 83 | */ 84 | export declare const internalAction: ActionBuilder; 85 | 86 | /** 87 | * Define an HTTP action. 88 | * 89 | * This function will be used to respond to HTTP requests received by a Convex 90 | * deployment if the requests matches the path and method where this action 91 | * is routed. Be sure to route your action in `convex/http.js`. 92 | * 93 | * @param func - The function. It receives an {@link ActionCtx} as its first argument. 94 | * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up. 95 | */ 96 | export declare const httpAction: HttpActionBuilder; 97 | 98 | /** 99 | * A set of services for use within Convex query functions. 100 | * 101 | * The query context is passed as the first argument to any Convex query 102 | * function run on the server. 103 | * 104 | * This differs from the {@link MutationCtx} because all of the services are 105 | * read-only. 106 | */ 107 | export type QueryCtx = GenericQueryCtx; 108 | 109 | /** 110 | * A set of services for use within Convex mutation functions. 111 | * 112 | * The mutation context is passed as the first argument to any Convex mutation 113 | * function run on the server. 114 | */ 115 | export type MutationCtx = GenericMutationCtx; 116 | 117 | /** 118 | * A set of services for use within Convex action functions. 119 | * 120 | * The action context is passed as the first argument to any Convex action 121 | * function run on the server. 122 | */ 123 | export type ActionCtx = GenericActionCtx; 124 | 125 | /** 126 | * An interface to read from the database within Convex query functions. 127 | * 128 | * The two entry points are {@link DatabaseReader.get}, which fetches a single 129 | * document by its {@link Id}, or {@link DatabaseReader.query}, which starts 130 | * building a query. 131 | */ 132 | export type DatabaseReader = GenericDatabaseReader; 133 | 134 | /** 135 | * An interface to read from and write to the database within Convex mutation 136 | * functions. 137 | * 138 | * Convex guarantees that all writes within a single mutation are 139 | * executed atomically, so you never have to worry about partial writes leaving 140 | * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control) 141 | * for the guarantees Convex provides your functions. 142 | */ 143 | export type DatabaseWriter = GenericDatabaseWriter; 144 | -------------------------------------------------------------------------------- /convex/_generated/server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated utilities for implementing server-side Convex query and mutation functions. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * Generated by convex@1.5.1. 8 | * To regenerate, run `npx convex dev`. 9 | * @module 10 | */ 11 | 12 | import { 13 | actionGeneric, 14 | httpActionGeneric, 15 | queryGeneric, 16 | mutationGeneric, 17 | internalActionGeneric, 18 | internalMutationGeneric, 19 | internalQueryGeneric, 20 | } from "convex/server"; 21 | 22 | /** 23 | * Define a query in this Convex app's public API. 24 | * 25 | * This function will be allowed to read your Convex database and will be accessible from the client. 26 | * 27 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 28 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 29 | */ 30 | export const query = queryGeneric; 31 | 32 | /** 33 | * Define a query that is only accessible from other Convex functions (but not from the client). 34 | * 35 | * This function will be allowed to read from your Convex database. It will not be accessible from the client. 36 | * 37 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 38 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 39 | */ 40 | export const internalQuery = internalQueryGeneric; 41 | 42 | /** 43 | * Define a mutation in this Convex app's public API. 44 | * 45 | * This function will be allowed to modify your Convex database and will be accessible from the client. 46 | * 47 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 48 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 49 | */ 50 | export const mutation = mutationGeneric; 51 | 52 | /** 53 | * Define a mutation that is only accessible from other Convex functions (but not from the client). 54 | * 55 | * This function will be allowed to modify your Convex database. It will not be accessible from the client. 56 | * 57 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 58 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 59 | */ 60 | export const internalMutation = internalMutationGeneric; 61 | 62 | /** 63 | * Define an action in this Convex app's public API. 64 | * 65 | * An action is a function which can execute any JavaScript code, including non-deterministic 66 | * code and code with side-effects, like calling third-party services. 67 | * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive. 68 | * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}. 69 | * 70 | * @param func - The action. It receives an {@link ActionCtx} as its first argument. 71 | * @returns The wrapped action. Include this as an `export` to name it and make it accessible. 72 | */ 73 | export const action = actionGeneric; 74 | 75 | /** 76 | * Define an action that is only accessible from other Convex functions (but not from the client). 77 | * 78 | * @param func - The function. It receives an {@link ActionCtx} as its first argument. 79 | * @returns The wrapped function. Include this as an `export` to name it and make it accessible. 80 | */ 81 | export const internalAction = internalActionGeneric; 82 | 83 | /** 84 | * Define a Convex HTTP action. 85 | * 86 | * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object 87 | * as its second. 88 | * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`. 89 | */ 90 | export const httpAction = httpActionGeneric; 91 | -------------------------------------------------------------------------------- /convex/helpers.ts: -------------------------------------------------------------------------------- 1 | import { PaginationResult } from "convex/server"; 2 | import { internal } from "./_generated/api"; 3 | import { Doc, TableNames } from "./_generated/dataModel"; 4 | import { ActionCtx, QueryCtx, internalQuery } from "./_generated/server"; 5 | 6 | export async function paginate( 7 | ctx: ActionCtx, 8 | table: T, 9 | batchSize: number, 10 | callback: (documents: Doc[]) => Promise 11 | ): Promise { 12 | let isDone = false; 13 | let cursor = null; 14 | while (!isDone) { 15 | const result: PaginationResult> = (await ctx.runQuery( 16 | internal.helpers.paginateQuery, 17 | { 18 | table, 19 | cursor, 20 | numItems: batchSize, 21 | } 22 | )) as any; 23 | await callback(result.page); 24 | ({ isDone, continueCursor: cursor } = result); 25 | } 26 | } 27 | 28 | export const paginateQuery = internalQuery( 29 | async ( 30 | ctx: QueryCtx, 31 | args: { table: T; cursor: any; numItems: number } 32 | ) => { 33 | return await ctx.db 34 | .query(args.table) 35 | .paginate({ cursor: args.cursor, numItems: args.numItems }); 36 | } 37 | ); 38 | -------------------------------------------------------------------------------- /convex/ingest/load.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */ 2 | 3 | import { CheerioAPI, load } from "cheerio"; 4 | import { v } from "convex/values"; 5 | import { map } from "modern-async"; 6 | import { internal } from "../_generated/api"; 7 | import { internalAction, internalMutation } from "../_generated/server"; 8 | 9 | export const scrapeSite = internalAction({ 10 | args: { 11 | sitemapUrl: v.string(), 12 | limit: v.optional(v.number()), 13 | }, 14 | handler: async (ctx, { sitemapUrl, limit }) => { 15 | const response = await fetch(sitemapUrl); 16 | const xml = await response.text(); 17 | const $ = load(xml, { xmlMode: true }); 18 | const urls = $("url > loc") 19 | .map((_i, elem) => $(elem).text()) 20 | .get() 21 | .slice(0, limit); 22 | await map(urls, (url) => 23 | ctx.runAction(internal.ingest.load.fetchSingle, { url }) 24 | ); 25 | }, 26 | }); 27 | 28 | export const fetchSingle = internalAction({ 29 | args: { 30 | url: v.string(), 31 | }, 32 | handler: async (ctx, { url }) => { 33 | const response = await fetch(url); 34 | const text = parsePage(await response.text()); 35 | if (text.length > 0) { 36 | await ctx.runMutation(internal.ingest.load.saveDocument, { url, text }); 37 | } 38 | }, 39 | }); 40 | 41 | export const saveDocument = internalMutation( 42 | async (ctx, { url, text }: { url: string; text: string }) => { 43 | const existing = await ctx.db 44 | .query("documents") 45 | .withIndex("byUrl", (q) => q.eq("url", url)) 46 | .unique(); 47 | const newDocument = { url, text, fileId: null }; 48 | if (existing == null) { 49 | await ctx.db.insert("documents", newDocument); 50 | } else if (existing.text !== text) { 51 | await ctx.db.replace(existing._id, newDocument); 52 | } 53 | } 54 | ); 55 | 56 | function parsePage(text: string) { 57 | const $ = load(text); 58 | return parse($, $(".markdown")) 59 | .replace(/(?:\n\s+){3,}/g, "\n\n") 60 | .trim(); 61 | } 62 | 63 | function parse($: CheerioAPI, element: any) { 64 | let result = ""; 65 | 66 | $(element) 67 | .contents() 68 | .each((_, el) => { 69 | // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison 70 | if (el.type === "text") { 71 | result += $(el).text().trim() + " "; 72 | return; 73 | } 74 | const tagName = (el as any).tagName; 75 | switch (tagName) { 76 | case "code": 77 | if ($(el).has("span").length > 0) { 78 | result += 79 | "```\n" + 80 | $(el) 81 | .children() 82 | .map((_, line) => $(line).text()) 83 | .get() 84 | .join("\n") + 85 | "\n```\n"; 86 | return; 87 | } 88 | result += " `" + $(el).text() + "` "; 89 | return; 90 | case "a": { 91 | if ($(el).hasClass("hash-link")) { 92 | return; 93 | } 94 | let href = $(el).attr("href")!; 95 | if (href.startsWith("/")) { 96 | href = "https://docs.convex.dev" + href; 97 | } 98 | result += " [" + $(el).text() + "](" + href + ") "; 99 | return; 100 | } 101 | case "strong": 102 | case "em": 103 | result += " " + $(el).text() + " "; 104 | return; 105 | case "h1": 106 | case "h2": 107 | case "h3": 108 | case "h4": 109 | case "h5": 110 | result += "#".repeat(+tagName.slice(1)) + " " + $(el).text() + "\n\n"; 111 | return; 112 | } 113 | result += parse($, el); 114 | result += "\n\n"; 115 | }); 116 | 117 | return result; 118 | } 119 | -------------------------------------------------------------------------------- /convex/init.ts: -------------------------------------------------------------------------------- 1 | import { 2 | internalAction, 3 | internalMutation, 4 | internalQuery, 5 | } from "./_generated/server"; 6 | import OpenAI from "openai"; 7 | import { internal } from "./_generated/api"; 8 | import { v } from "convex/values"; 9 | import { Id } from "./_generated/dataModel"; 10 | import { map } from "modern-async"; 11 | import { paginate } from "./helpers"; 12 | 13 | export const createAssistant = internalAction({ 14 | args: {}, 15 | handler: async () => { 16 | const openai = new OpenAI(); 17 | const assistant = await openai.beta.assistants.create({ 18 | instructions: 19 | "Answer the user questions based on the provided documents " + 20 | "or report that the question cannot be answered based on " + 21 | "these documents. Keep the answer informative but brief, " + 22 | "do not enumerate all possibilities.", 23 | model: "gpt-4-1106-preview", 24 | tools: [{ type: "retrieval" }], 25 | }); 26 | return assistant.id; 27 | }, 28 | }); 29 | 30 | export const uploadAllDocuments = internalAction({ 31 | args: {}, 32 | handler: async (ctx) => { 33 | await paginate(ctx, "documents", 20, async (documents) => { 34 | await ctx.runAction(internal.init.uploadDocuments, { 35 | documentIds: documents.map((doc) => doc._id), 36 | }); 37 | }); 38 | }, 39 | }); 40 | 41 | export const uploadDocuments = internalAction({ 42 | args: { 43 | documentIds: v.array(v.id("documents")), 44 | }, 45 | handler: async (ctx, { documentIds }) => { 46 | const openai = new OpenAI(); 47 | await map(documentIds, async (documentId) => { 48 | const document = await ctx.runQuery(internal.init.getDocument, { 49 | documentId, 50 | }); 51 | if (document === null || document.fileId !== null) { 52 | return; 53 | } 54 | const { text, url } = document; 55 | const blob = new File([text], fileName(url)); 56 | 57 | const { id: fileId } = await openai.files.create({ 58 | file: blob, 59 | purpose: "assistants", 60 | }); 61 | await openai.beta.assistants.files.create(process.env.ASSISTANT_ID!, { 62 | file_id: fileId, 63 | }); 64 | await ctx.runMutation(internal.init.saveFileId, { documentId, fileId }); 65 | }); 66 | }, 67 | }); 68 | 69 | function fileName(url: string) { 70 | return url.replace(/^.*\/([^/]+)/, "$1") + ".md"; 71 | } 72 | 73 | export const getDocument = internalQuery( 74 | async (ctx, { documentId }: { documentId: Id<"documents"> }) => { 75 | return await ctx.db.get(documentId); 76 | } 77 | ); 78 | 79 | export const saveFileId = internalMutation( 80 | async ( 81 | ctx, 82 | { documentId, fileId }: { documentId: Id<"documents">; fileId: string } 83 | ) => { 84 | await ctx.db.patch(documentId, { fileId }); 85 | } 86 | ); 87 | -------------------------------------------------------------------------------- /convex/messages.ts: -------------------------------------------------------------------------------- 1 | import { v } from "convex/values"; 2 | import { mutation } from "./_generated/server"; 3 | import { query } from "./_generated/server"; 4 | import { internal } from "./_generated/api"; 5 | 6 | export const list = query({ 7 | args: { 8 | sessionId: v.string(), 9 | }, 10 | handler: async (ctx, args) => { 11 | return await ctx.db 12 | .query("messages") 13 | .withIndex("bySessionId", (q) => q.eq("sessionId", args.sessionId)) 14 | .collect(); 15 | }, 16 | }); 17 | 18 | export const send = mutation({ 19 | args: { 20 | message: v.string(), 21 | sessionId: v.string(), 22 | }, 23 | handler: async (ctx, { message, sessionId }) => { 24 | await ctx.db.insert("messages", { 25 | isViewer: true, 26 | text: message, 27 | sessionId, 28 | }); 29 | await ctx.scheduler.runAfter(0, internal.serve.answer, { 30 | sessionId, 31 | message, 32 | }); 33 | }, 34 | }); 35 | 36 | export const clear = mutation({ 37 | args: { 38 | sessionId: v.string(), 39 | }, 40 | handler: async (ctx, args) => { 41 | const messages = await ctx.db 42 | .query("messages") 43 | .withIndex("bySessionId", (q) => q.eq("sessionId", args.sessionId)) 44 | .collect(); 45 | await Promise.all(messages.map((message) => ctx.db.delete(message._id))); 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /convex/schema.ts: -------------------------------------------------------------------------------- 1 | import { defineSchema, defineTable } from "convex/server"; 2 | import { v } from "convex/values"; 3 | 4 | export default defineSchema({ 5 | documents: defineTable({ 6 | url: v.string(), 7 | text: v.string(), 8 | fileId: v.union(v.string(), v.null()), 9 | }).index("byUrl", ["url"]), 10 | messages: defineTable({ 11 | isViewer: v.boolean(), 12 | sessionId: v.string(), 13 | text: v.string(), 14 | }).index("bySessionId", ["sessionId"]), 15 | threads: defineTable({ 16 | sessionId: v.string(), 17 | threadId: v.string(), 18 | }).index("bySessionId", ["sessionId"]), 19 | }); 20 | -------------------------------------------------------------------------------- /convex/serve.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-constant-condition */ 2 | import { v } from "convex/values"; 3 | import { map, sleep } from "modern-async"; 4 | import OpenAI from "openai"; 5 | import { MessageContentText } from "openai/resources/beta/threads/messages/messages"; 6 | import { internal } from "./_generated/api"; 7 | import { 8 | ActionCtx, 9 | internalAction, 10 | internalMutation, 11 | internalQuery, 12 | } from "./_generated/server"; 13 | 14 | export const answer = internalAction({ 15 | args: { 16 | sessionId: v.string(), 17 | message: v.string(), 18 | }, 19 | handler: async (ctx, { sessionId, message }) => { 20 | const openai = new OpenAI(); 21 | 22 | const threadId = await getOrCreateThread(ctx, openai, sessionId); 23 | 24 | const { id: lastMessageId } = await openai.beta.threads.messages.create( 25 | threadId, 26 | { role: "user", content: message } 27 | ); 28 | 29 | const { id: runId } = await openai.beta.threads.runs.create(threadId, { 30 | assistant_id: process.env.ASSISTANT_ID!, 31 | }); 32 | 33 | await pollForAnswer(ctx, { threadId, sessionId, lastMessageId, runId }); 34 | }, 35 | }); 36 | 37 | const getOrCreateThread = async ( 38 | ctx: ActionCtx, 39 | openai: OpenAI, 40 | sessionId: string 41 | ) => { 42 | const thread = await ctx.runQuery(internal.serve.getThread, { sessionId }); 43 | if (thread !== null) { 44 | return thread.threadId; 45 | } 46 | const { id: threadId } = await openai.beta.threads.create(); 47 | await ctx.runMutation(internal.serve.saveThread, { 48 | sessionId, 49 | threadId, 50 | }); 51 | return threadId; 52 | }; 53 | 54 | export const getThread = internalQuery( 55 | async (ctx, { sessionId }: { sessionId: string }) => { 56 | return await ctx.db 57 | .query("threads") 58 | .withIndex("bySessionId", (q) => q.eq("sessionId", sessionId)) 59 | .unique(); 60 | } 61 | ); 62 | 63 | export const saveThread = internalMutation( 64 | async ( 65 | ctx, 66 | { sessionId, threadId }: { sessionId: string; threadId: string } 67 | ) => { 68 | await ctx.db.insert("threads", { sessionId, threadId }); 69 | } 70 | ); 71 | 72 | async function pollForAnswer( 73 | ctx: ActionCtx, 74 | args: { 75 | sessionId: string; 76 | threadId: string; 77 | runId: string; 78 | lastMessageId: string; 79 | } 80 | ) { 81 | const { sessionId, threadId, runId, lastMessageId } = args; 82 | const openai = new OpenAI(); 83 | while (true) { 84 | await sleep(500); 85 | const run = await openai.beta.threads.runs.retrieve(threadId, runId); 86 | switch (run.status) { 87 | case "failed": 88 | case "expired": 89 | case "cancelled": 90 | await ctx.runMutation(internal.serve.addMessage, { 91 | text: "I cannot reply at this time. Reach out to the team on Discord", 92 | sessionId, 93 | }); 94 | return; 95 | case "completed": { 96 | const { data: newMessages } = await openai.beta.threads.messages.list( 97 | threadId, 98 | { after: lastMessageId, order: "asc" } 99 | ); 100 | await map(newMessages, async ({ content }) => { 101 | const text = content 102 | .filter((item): item is MessageContentText => item.type === "text") 103 | .map(({ text }) => text.value) 104 | .join("\n\n"); 105 | await ctx.runMutation(internal.serve.addMessage, { text, sessionId }); 106 | }); 107 | return; 108 | } 109 | } 110 | } 111 | } 112 | 113 | export const addMessage = internalMutation( 114 | async (ctx, { text, sessionId }: { text: string; sessionId: string }) => { 115 | await ctx.db.insert("messages", { 116 | isViewer: false, 117 | text, 118 | sessionId, 119 | }); 120 | } 121 | ); 122 | -------------------------------------------------------------------------------- /convex/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | /* This TypeScript project config describes the environment that 3 | * Convex functions run in and is used to typecheck them. 4 | * You can modify it, but some settings required to use Convex. 5 | */ 6 | "compilerOptions": { 7 | /* These settings are not required by Convex and can be modified. */ 8 | "allowJs": true, 9 | "strict": true, 10 | 11 | /* These compiler options are required by Convex */ 12 | "target": "ESNext", 13 | "lib": ["ES2021", "dom"], 14 | "forceConsistentCasingInFileNames": true, 15 | "allowSyntheticDefaultImports": true, 16 | "module": "ESNext", 17 | "moduleResolution": "Node", 18 | "isolatedModules": true, 19 | "skipLibCheck": true, 20 | "noEmit": true 21 | }, 22 | "include": ["./**/*"], 23 | "exclude": ["./_generated"] 24 | } 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Convex + React (Vite) 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "convex-ai-chat-openai", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "npm-run-all dev:init --parallel dev:frontend dev:backend", 8 | "dev:frontend": "vite --open", 9 | "dev:backend": "convex dev", 10 | "dev:init": "convex dev --until-success && convex dashboard", 11 | "build": "tsc && vite build", 12 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 13 | "preview": "vite preview" 14 | }, 15 | "dependencies": { 16 | "@hookform/resolvers": "^3.3.2", 17 | "@radix-ui/react-accordion": "^1.1.2", 18 | "@radix-ui/react-alert-dialog": "^1.0.5", 19 | "@radix-ui/react-aspect-ratio": "^1.0.3", 20 | "@radix-ui/react-avatar": "^1.0.4", 21 | "@radix-ui/react-checkbox": "^1.0.4", 22 | "@radix-ui/react-collapsible": "^1.0.3", 23 | "@radix-ui/react-context-menu": "^2.1.5", 24 | "@radix-ui/react-dialog": "^1.0.5", 25 | "@radix-ui/react-dropdown-menu": "^2.0.6", 26 | "@radix-ui/react-hover-card": "^1.0.7", 27 | "@radix-ui/react-icons": "^1.3.0", 28 | "@radix-ui/react-label": "^2.0.2", 29 | "@radix-ui/react-menubar": "^1.0.4", 30 | "@radix-ui/react-navigation-menu": "^1.1.4", 31 | "@radix-ui/react-popover": "^1.0.7", 32 | "@radix-ui/react-progress": "^1.0.3", 33 | "@radix-ui/react-radio-group": "^1.1.3", 34 | "@radix-ui/react-scroll-area": "^1.0.5", 35 | "@radix-ui/react-select": "^2.0.0", 36 | "@radix-ui/react-separator": "^1.0.3", 37 | "@radix-ui/react-slider": "^1.1.2", 38 | "@radix-ui/react-slot": "^1.0.2", 39 | "@radix-ui/react-switch": "^1.0.3", 40 | "@radix-ui/react-tabs": "^1.0.4", 41 | "@radix-ui/react-toast": "^1.1.5", 42 | "@radix-ui/react-toggle": "^1.0.3", 43 | "@radix-ui/react-tooltip": "^1.0.7", 44 | "cheerio": "^1.0.0-rc.12", 45 | "class-variance-authority": "^0.7.0", 46 | "clsx": "^2.0.0", 47 | "cmdk": "^0.2.0", 48 | "convex": "^1.5.1", 49 | "date-fns": "^2.30.0", 50 | "modern-async": "^1.1.4", 51 | "openai": "^4.19.0", 52 | "react": "^18.2.0", 53 | "react-day-picker": "^8.9.1", 54 | "react-dom": "^18.2.0", 55 | "react-hook-form": "^7.47.0", 56 | "tailwind-merge": "^1.14.0", 57 | "tailwindcss-animate": "^1.0.7", 58 | "zod": "^3.22.4" 59 | }, 60 | "devDependencies": { 61 | "@types/node": "^20.7.0", 62 | "@types/react": "^18.2.21", 63 | "@types/react-dom": "^18.2.7", 64 | "@typescript-eslint/eslint-plugin": "^6.7.0", 65 | "@typescript-eslint/parser": "^6.7.0", 66 | "@vitejs/plugin-react": "^4.0.4", 67 | "autoprefixer": "^10.4.16", 68 | "eslint": "^8.49.0", 69 | "eslint-plugin-react-hooks": "^4.6.0", 70 | "eslint-plugin-react-refresh": "^0.4.3", 71 | "npm-run-all": "^4.1.5", 72 | "postcss": "^8.4.30", 73 | "tailwindcss": "^3.3.3", 74 | "typescript": "^5.2.2", 75 | "vite": "^4.4.9" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-convex/convex-ai-chat-openai/d4413ec1b0221810983074fd783a8f535336d45a/screenshot.png -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ConvexAiChat } from "@/aiChat"; 2 | import { Link } from "@/components/typography/link"; 3 | import { Button } from "@/components/ui/button"; 4 | 5 | function App() { 6 | return ( 7 |
8 |

9 | AI Chat using OpenAI’s Assistants API 10 |

11 |

Click the button to open the chat window

12 |

13 | ( 19 | 20 | )} 21 | /> 22 |

23 |

24 | Check out{" "} 25 | 26 | Convex docs 27 | 28 |

29 |
30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /src/aiChat/CloseIcon.tsx: -------------------------------------------------------------------------------- 1 | export function CloseIcon({ className }: { className?: string }) { 2 | return ( 3 | 11 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/aiChat/InfoCircled.tsx: -------------------------------------------------------------------------------- 1 | export function InfoCircled({ className }: { className?: string }) { 2 | return ( 3 | 11 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/aiChat/SendIcon.tsx: -------------------------------------------------------------------------------- 1 | export function SendIcon({ className }: { className?: string }) { 2 | return ( 3 | 11 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/aiChat/SizeIcon.tsx: -------------------------------------------------------------------------------- 1 | export function SizeIcon({ className }: { className?: string }) { 2 | return ( 3 | 11 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/aiChat/TrashIcon.tsx: -------------------------------------------------------------------------------- 1 | export function TrashIcon({ className }: { className?: string }) { 2 | return ( 3 | 11 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/aiChat/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | ConvexProvider, 3 | ConvexReactClient, 4 | useMutation, 5 | useQuery, 6 | } from "convex/react"; 7 | import { 8 | FormEvent, 9 | ReactNode, 10 | useCallback, 11 | useEffect, 12 | useMemo, 13 | useRef, 14 | useState, 15 | } from "react"; 16 | import { createPortal } from "react-dom"; 17 | import { api } from "../../convex/_generated/api.js"; 18 | import { CloseIcon } from "./CloseIcon.js"; 19 | import { InfoCircled } from "./InfoCircled.js"; 20 | import { SendIcon } from "./SendIcon.js"; 21 | import { SizeIcon } from "./SizeIcon.js"; 22 | import { TrashIcon } from "./TrashIcon.js"; 23 | 24 | export function ConvexAiChat({ 25 | convexUrl, 26 | infoMessage, 27 | name, 28 | welcomeMessage, 29 | renderTrigger, 30 | }: { 31 | convexUrl: string; 32 | name: string; 33 | infoMessage: ReactNode; 34 | welcomeMessage: string; 35 | renderTrigger: (onClick: () => void) => ReactNode; 36 | }) { 37 | const [hasOpened, setHasOpened] = useState(false); 38 | const [dialogOpen, setDialogOpen] = useState(false); 39 | 40 | const handleCloseDialog = useCallback(() => { 41 | setDialogOpen(false); 42 | }, []); 43 | 44 | return ( 45 | <> 46 | {renderTrigger(() => { 47 | setHasOpened(true); 48 | setDialogOpen(!dialogOpen); 49 | })} 50 | {hasOpened 51 | ? createPortal( 52 | , 60 | document.body 61 | ) 62 | : null} 63 | 64 | ); 65 | } 66 | 67 | export function ConvexAiChatDialog({ 68 | convexUrl, 69 | infoMessage, 70 | isOpen, 71 | name, 72 | welcomeMessage, 73 | onClose, 74 | }: { 75 | convexUrl: string; 76 | infoMessage: ReactNode; 77 | isOpen: boolean; 78 | name: string; 79 | welcomeMessage: string; 80 | onClose: () => void; 81 | }) { 82 | const client = useMemo(() => new ConvexReactClient(convexUrl), [convexUrl]); 83 | 84 | return ( 85 | 86 | 93 | 94 | ); 95 | } 96 | 97 | export function Dialog({ 98 | infoMessage, 99 | isOpen, 100 | name, 101 | welcomeMessage, 102 | onClose, 103 | }: { 104 | infoMessage: ReactNode; 105 | isOpen: boolean; 106 | name: string; 107 | welcomeMessage: string; 108 | onClose: () => void; 109 | }) { 110 | const sessionId = useSessionId(); 111 | const remoteMessages = useQuery(api.messages.list, { sessionId }); 112 | const messages = useMemo( 113 | () => 114 | [{ isViewer: false, text: welcomeMessage, _id: "0" }].concat( 115 | (remoteMessages ?? []) as { 116 | isViewer: boolean; 117 | text: string; 118 | _id: string; 119 | }[] 120 | ), 121 | [remoteMessages, welcomeMessage] 122 | ); 123 | const sendMessage = useMutation(api.messages.send); 124 | const clearMesages = useMutation(api.messages.clear); 125 | 126 | const [expanded, setExpanded] = useState(false); 127 | const [isScrolled, setScrolled] = useState(false); 128 | 129 | const [input, setInput] = useState(""); 130 | 131 | const handleExpand = () => { 132 | setExpanded(!expanded); 133 | setScrolled(false); 134 | }; 135 | 136 | const handleSend = async (event: FormEvent) => { 137 | event.preventDefault(); 138 | await sendMessage({ message: input, sessionId }); 139 | setInput(""); 140 | setScrolled(false); 141 | }; 142 | 143 | const handleClearMessages = async () => { 144 | await clearMesages({ sessionId }); 145 | setScrolled(false); 146 | }; 147 | 148 | const listRef = useRef(null); 149 | 150 | useEffect(() => { 151 | if (isScrolled) { 152 | return; 153 | } 154 | // Using `setTimeout` to make sure scrollTo works on button click in Chrome 155 | setTimeout(() => { 156 | listRef.current?.scrollTo({ 157 | top: listRef.current.scrollHeight, 158 | behavior: "smooth", 159 | }); 160 | }, 0); 161 | }, [messages, isScrolled]); 162 | 163 | return ( 164 |
176 |
177 | 191 | 197 | 203 | 209 |
210 |
{ 214 | setScrolled(true); 215 | }} 216 | > 217 | {remoteMessages === undefined ? ( 218 | <> 219 |
220 |
221 | 222 | ) : ( 223 | messages.map((message) => ( 224 |
225 |
231 | {message.isViewer ? <>You : <>{name}} 232 |
233 | {message.text === "" ? ( 234 |
235 | ) : ( 236 |
247 | {message.text} 248 |
249 | )} 250 |
251 | )) 252 | )} 253 |
254 |
void handleSend(event)} 257 | > 258 | setInput(event.target.value)} 265 | /> 266 | 272 |
273 |
274 | ); 275 | } 276 | 277 | const STORE = (typeof window === "undefined" ? null : window)?.sessionStorage; 278 | const STORE_KEY = "ConvexSessionId"; 279 | 280 | function useSessionId() { 281 | const [sessionId] = useState( 282 | () => STORE?.getItem(STORE_KEY) ?? crypto.randomUUID() 283 | ); 284 | 285 | // Get or set the ID from our desired storage location, whenever it changes. 286 | useEffect(() => { 287 | STORE?.setItem(STORE_KEY, sessionId); 288 | }, [sessionId]); 289 | 290 | return sessionId; 291 | } 292 | -------------------------------------------------------------------------------- /src/aiChat/styles.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/components/typography/code.tsx: -------------------------------------------------------------------------------- 1 | import { se } from "@/lib/utils"; 2 | 3 | export const Code = se( 4 | "code", 5 | "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold" 6 | ); 7 | -------------------------------------------------------------------------------- /src/components/typography/link.tsx: -------------------------------------------------------------------------------- 1 | import { se } from "@/lib/utils"; 2 | import { AnchorHTMLAttributes } from "react"; 3 | 4 | export const Link = se< 5 | HTMLAnchorElement, 6 | AnchorHTMLAttributes 7 | >( 8 | "a", 9 | "font-medium text-primary underline underline-offset-4 hover:no-underline" 10 | ); 11 | -------------------------------------------------------------------------------- /src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Slot } from "@radix-ui/react-slot"; 3 | import { cva, type VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-9 px-4 py-2", 25 | sm: "h-8 rounded-md px-3 text-xs", 26 | lg: "h-10 rounded-md px-8", 27 | icon: "h-9 w-9", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ); 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean; 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button"; 46 | return ( 47 | 52 | ); 53 | } 54 | ); 55 | Button.displayName = "Button"; 56 | 57 | export { Button, buttonVariants }; 58 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 240 10% 3.9%; 9 | 10 | --card: 0 0% 100%; 11 | --card-foreground: 240 10% 3.9%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 240 10% 3.9%; 15 | 16 | --primary: 240 5.9% 10%; 17 | --primary-foreground: 0 0% 98%; 18 | 19 | --secondary: 240 4.8% 95.9%; 20 | --secondary-foreground: 240 5.9% 10%; 21 | 22 | --muted: 240 4.8% 95.9%; 23 | --muted-foreground: 240 3.8% 46.1%; 24 | 25 | --accent: 240 4.8% 95.9%; 26 | --accent-foreground: 240 5.9% 10%; 27 | 28 | --destructive: 0 84.2% 60.2%; 29 | --destructive-foreground: 0 0% 98%; 30 | 31 | --border: 240 5.9% 90%; 32 | --input: 240 5.9% 90%; 33 | --ring: 240 10% 3.9%; 34 | 35 | --radius: 0.5rem; 36 | } 37 | 38 | @media (prefers-color-scheme: dark) { 39 | :root { 40 | --background: 240 10% 3.9%; 41 | --foreground: 0 0% 98%; 42 | 43 | --card: 240 10% 3.9%; 44 | --card-foreground: 0 0% 98%; 45 | 46 | --popover: 240 10% 3.9%; 47 | --popover-foreground: 0 0% 98%; 48 | 49 | --primary: 0 0% 98%; 50 | --primary-foreground: 240 5.9% 10%; 51 | 52 | --secondary: 240 3.7% 15.9%; 53 | --secondary-foreground: 0 0% 98%; 54 | 55 | --muted: 240 3.7% 15.9%; 56 | --muted-foreground: 240 5% 64.9%; 57 | 58 | --accent: 240 3.7% 15.9%; 59 | --accent-foreground: 0 0% 98%; 60 | 61 | --destructive: 0 62.8% 30.6%; 62 | --destructive-foreground: 0 0% 98%; 63 | 64 | --border: 240 3.7% 15.9%; 65 | --input: 240 3.7% 15.9%; 66 | --ring: 240 4.9% 83.9%; 67 | } 68 | } 69 | } 70 | 71 | @layer base { 72 | * { 73 | @apply border-border; 74 | } 75 | body { 76 | @apply bg-background text-foreground; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/lib/utils.tsx: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { ForwardRefRenderFunction, forwardRef } from "react"; 3 | import { twMerge } from "tailwind-merge"; 4 | 5 | export function cn(...inputs: ClassValue[]) { 6 | return twMerge(clsx(inputs)); 7 | } 8 | 9 | // forward refs 10 | export function fr>( 11 | component: ForwardRefRenderFunction 12 | ) { 13 | const wrapped = forwardRef(component); 14 | wrapped.displayName = component.name; 15 | return wrapped; 16 | } 17 | 18 | // styled element 19 | export function se< 20 | T = HTMLElement, 21 | P extends React.HTMLAttributes = React.HTMLAttributes 22 | >(Tag: keyof React.ReactHTML, ...classNames: ClassValue[]) { 23 | const component = fr(({ className, ...props }, ref) => ( 24 | // @ts-expect-error Too complicated for TypeScript 25 | 26 | )); 27 | component.displayName = Tag[0].toUpperCase() + Tag.slice(1); 28 | return component; 29 | } 30 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 5 | theme: { 6 | container: { 7 | center: true, 8 | padding: "2rem", 9 | screens: { 10 | "2xl": "1400px", 11 | }, 12 | }, 13 | extend: { 14 | colors: { 15 | border: "hsl(var(--border))", 16 | input: "hsl(var(--input))", 17 | ring: "hsl(var(--ring))", 18 | background: "hsl(var(--background))", 19 | foreground: "hsl(var(--foreground))", 20 | primary: { 21 | DEFAULT: "hsl(var(--primary))", 22 | foreground: "hsl(var(--primary-foreground))", 23 | }, 24 | secondary: { 25 | DEFAULT: "hsl(var(--secondary))", 26 | foreground: "hsl(var(--secondary-foreground))", 27 | }, 28 | destructive: { 29 | DEFAULT: "hsl(var(--destructive))", 30 | foreground: "hsl(var(--destructive-foreground))", 31 | }, 32 | muted: { 33 | DEFAULT: "hsl(var(--muted))", 34 | foreground: "hsl(var(--muted-foreground))", 35 | }, 36 | accent: { 37 | DEFAULT: "hsl(var(--accent))", 38 | foreground: "hsl(var(--accent-foreground))", 39 | }, 40 | popover: { 41 | DEFAULT: "hsl(var(--popover))", 42 | foreground: "hsl(var(--popover-foreground))", 43 | }, 44 | card: { 45 | DEFAULT: "hsl(var(--card))", 46 | foreground: "hsl(var(--card-foreground))", 47 | }, 48 | }, 49 | borderRadius: { 50 | lg: "var(--radius)", 51 | md: "calc(var(--radius) - 2px)", 52 | sm: "calc(var(--radius) - 4px)", 53 | }, 54 | keyframes: { 55 | "accordion-down": { 56 | from: { height: 0 }, 57 | to: { height: "var(--radix-accordion-content-height)" }, 58 | }, 59 | "accordion-up": { 60 | from: { height: "var(--radix-accordion-content-height)" }, 61 | to: { height: 0 }, 62 | }, 63 | }, 64 | animation: { 65 | "accordion-down": "accordion-down 0.2s ease-out", 66 | "accordion-up": "accordion-up 0.2s ease-out", 67 | }, 68 | }, 69 | }, 70 | plugins: [require("tailwindcss-animate")], 71 | }; 72 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true, 22 | 23 | "baseUrl": ".", 24 | "paths": { 25 | "@/*": ["./src/*"] 26 | } 27 | }, 28 | "references": [{ "path": "./tsconfig.node.json" }] 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import react from "@vitejs/plugin-react"; 3 | import { defineConfig } from "vite"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react()], 8 | resolve: { 9 | alias: { 10 | "@": path.resolve(__dirname, "./src"), 11 | }, 12 | }, 13 | }); 14 | --------------------------------------------------------------------------------