├── .changeset ├── README.md └── config.json ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── 1.bug_report.yml │ ├── 2.feature_request.yml │ └── config.yml ├── SECURITY.md ├── dependabot.yml ├── scripts │ └── cleanup-examples-changesets.mjs └── workflows │ ├── ci.yml │ ├── quality.yml │ ├── release-snapshot.yml │ └── release.yml ├── .gitignore ├── .kodiak.toml ├── .npmrc ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── hero.gif └── logo.png ├── examples ├── next-website │ ├── .env.local.example │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── api │ │ │ └── chat │ │ │ │ └── [[...openassistantgpt]] │ │ │ │ └── route.ts │ │ ├── components │ │ │ └── ui │ │ │ │ └── button.tsx │ │ ├── favicon.ico │ │ ├── global.css │ │ ├── layout.tsx │ │ └── page.tsx │ ├── lib │ │ └── utils.ts │ ├── next.config.js │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json ├── website-chatbot-window │ ├── .env.local.example │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── api │ │ │ └── chat │ │ │ │ └── [[...openassistantgpt]] │ │ │ │ └── route.ts │ │ ├── favicon.ico │ │ ├── global.css │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── window │ │ │ ├── button-extension.tsx │ │ │ ├── button.tsx │ │ │ └── page.tsx │ ├── lib │ │ └── utils.ts │ ├── next.config.js │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json └── website-custom-api │ ├── .env.local.example │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── app │ ├── api │ │ └── [assistantId] │ │ │ └── assistant │ │ │ ├── file │ │ │ └── [fileId] │ │ │ │ └── route.ts │ │ │ └── route.ts │ ├── favicon.ico │ ├── global.css │ ├── layout.tsx │ ├── page.tsx │ └── window │ │ └── page.tsx │ ├── next.config.js │ ├── package.json │ ├── postcss.config.js │ ├── tailwind.config.js │ └── tsconfig.json ├── package.json ├── packages ├── assistant │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── assistant-response.test.tsx │ │ ├── assistant-response.ts │ │ ├── assistant │ │ │ ├── file │ │ │ │ └── route.ts │ │ │ ├── route.ts │ │ │ └── upload │ │ │ │ └── route.ts │ │ ├── file-extensions-list.ts │ │ ├── index.ts │ │ └── route-handler.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── turbo.json │ └── vitest.config.js ├── core │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.test.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── turbo.json │ └── vitest.config.js ├── react │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── use-assistant.ts │ │ └── use-assistant.ui.test.tsx │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── turbo.json │ └── vitest.config.js └── ui │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── components │ ├── chat-footer-text.tsx │ ├── chat-header.tsx │ ├── chat-history.tsx │ ├── chat-message-actions.tsx │ ├── chat-message.tsx │ ├── chat.tsx │ ├── empty-placeholder.tsx │ ├── external-link.tsx │ ├── icons.tsx │ ├── markdown.tsx │ ├── preview-attachement.tsx │ └── ui │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── codeblock.tsx │ │ ├── dialog.tsx │ │ ├── dropdown-menu.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── textarea.tsx │ │ ├── toast.tsx │ │ ├── tooltip.tsx │ │ └── use-toast.tsx │ ├── hooks │ ├── use-copy-to-clipboard.ts │ ├── use-enter-submit.ts │ └── use-scroll-to-buttom.ts │ ├── lib │ └── utils.ts │ ├── package.json │ ├── postcss.config.js │ ├── src │ ├── chatbot.test.tsx │ ├── chatbot.ts │ ├── global.css │ └── index.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── turbo.json │ ├── types │ └── attachements.ts │ └── vitest.config.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── tools ├── eslint-config │ ├── CHANGELOG.md │ ├── index.js │ └── package.json └── tsconfig │ ├── CHANGELOG.md │ ├── base.json │ ├── nextjs.json │ ├── node14.json │ ├── package.json │ └── react-library.json ├── turbo.json └── website └── sdk ├── .eslintrc.js ├── .gitignore ├── README.md ├── app ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ├── components.json ├── components ├── features.tsx ├── hero.tsx ├── icons.tsx ├── landing-page.tsx ├── main-nav.tsx ├── mobile-nav.tsx ├── site-footer.tsx ├── tech-carousel.tsx └── ui │ ├── button.tsx │ ├── card.tsx │ └── carousel.tsx ├── config ├── marketing.ts └── site.ts ├── hooks └── use-lock-body.ts ├── lib ├── metadata.ts └── utils.ts ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── public ├── hero.png ├── logo-32-32.png ├── next.svg ├── shadcn.png ├── tailwindcss.png ├── turbo.png └── vercel.svg ├── tailwind.config.ts ├── tsconfig.json └── types └── index.d.ts /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch" 10 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-openassistantgpt` 4 | extends: ['openassistantgpt'], 5 | settings: { 6 | next: { 7 | rootDir: ['apps/*/'], 8 | }, 9 | }, 10 | rules: { 11 | '@next/next/no-html-link-for-pages': ['error', 'website/sdk', 'examples'], 12 | '@next/next/no-html-link-for-pages': [ 13 | 'error', 14 | '@openassistantgpt/assistant', 15 | ], 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/1.bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug report 2 | description: Create a bug report for the OpenAssistantGPT SDK. 3 | labels: [] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | This template is to report bugs for the OpenAsistantGPT SDK. If you need help with your own project, feel free to [start a new thread in our discussions](https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/discussions). 9 | - type: textarea 10 | attributes: 11 | label: Description 12 | description: A detailed description of the bug you are encountering with the SDK, and how other people can reproduce it. This includes helpful information such as the API you are using, the framework and AI provider. 13 | placeholder: | 14 | Reproduction steps... 15 | validations: 16 | required: true 17 | - type: textarea 18 | attributes: 19 | label: Code example 20 | description: Provide an example code snippet that has the problem 21 | placeholder: | 22 | import OpenAI from 'openai'; 23 | import { Chatbot } from '@openassistantgpt/ui'; 24 | ... 25 | - type: textarea 26 | attributes: 27 | label: Additional context 28 | description: | 29 | Any extra information that might help us investigate. 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2.feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Propose a new feature for the OpenAssistantGPT SDK. 3 | labels: [] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | This template is to propose new features for the OpenAssistantGPT SDK. If you need help with your own project, feel free to [start a new thread in our discussions](https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/discussions). 9 | - type: textarea 10 | attributes: 11 | label: Feature Description 12 | description: A detailed description of the feature you are proposing for the SDK. This includes helpful information such as the API you are using, the framework, and AI provider. 13 | placeholder: | 14 | Feature description... 15 | validations: 16 | required: true 17 | - type: textarea 18 | attributes: 19 | label: Use Case 20 | description: Provide a use case where this feature would be beneficial 21 | placeholder: | 22 | Use case... 23 | - type: textarea 24 | attributes: 25 | label: Additional context 26 | description: | 27 | Any extra information that might help us understand your feature request. 28 | placeholder: | 29 | Additional context... 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Ask a question 4 | url: https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/discussions 5 | about: Please ask questions in our discussions forum. 6 | -------------------------------------------------------------------------------- /.github/SECURITY.md: -------------------------------------------------------------------------------- 1 | # Reporting Security Issues 2 | 3 | If you believe you have found a security vulnerability in the OpenAssistantGPT SDK, we encourage you to let us know right away. 4 | 5 | We will investigate all legitimate reports and do our best to quickly fix the problem. 6 | 7 | Email `openassistantgpt@gmail.com` to disclose any security vulnerabilities. 8 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: 'npm' 4 | directory: '/' 5 | schedule: 6 | interval: 'daily' 7 | -------------------------------------------------------------------------------- /.github/scripts/cleanup-examples-changesets.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * `changeset version` updates the version and adds a changelog file in 3 | * the example apps, but we don't want to do that. So this script reverts 4 | * any "version" field changes and deletes the `CHANGELOG.md` file. 5 | * 6 | * Source: https://github.com/TooTallNate/nx.js/blob/main/.github/scripts/cleanup-examples.mjs 7 | */ 8 | 9 | import { 10 | readFileSync, 11 | writeFileSync, 12 | unlinkSync, 13 | readdirSync, 14 | statSync 15 | } from 'node:fs' 16 | import { fileURLToPath } from 'url' 17 | import { join } from 'path' 18 | 19 | const examplesUrl = new URL('../../examples', import.meta.url) 20 | const examplesDir = fileURLToPath(examplesUrl) 21 | 22 | console.log('Cleaning up examples...', examplesDir) 23 | 24 | for (const app of readdirSync(examplesDir)) { 25 | const appPath = join(examplesDir, app) 26 | if (statSync(appPath).isDirectory()) { 27 | const packageJsonPath = join(appPath, 'package.json') 28 | const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8')) 29 | packageJson.version = '0.0.0' 30 | writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n') 31 | 32 | try { 33 | const changelogUrl = new URL(`examples/${app}/CHANGELOG.md`, examplesUrl) 34 | console.log('Deleting', changelogUrl) 35 | unlinkSync(changelogUrl) 36 | } catch (err) { 37 | if (err.code !== 'ENOENT') throw err 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | test: 11 | name: 'Test' 12 | runs-on: ubuntu-latest 13 | env: 14 | TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} 15 | TURBO_TEAM: ${{ vars.TURBO_TEAM }} 16 | strategy: 17 | matrix: 18 | node-version: [20.x] 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v3 22 | 23 | - name: Setup pnpm 24 | uses: pnpm/action-setup@v4 25 | with: 26 | version: 8.6.9 27 | 28 | - name: Use Node.js ${{ matrix.node-version }} 29 | uses: actions/setup-node@v2 30 | with: 31 | node-version: ${{ matrix.node-version }} 32 | cache: 'pnpm' 33 | 34 | - name: Install dependencies 35 | run: pnpm install --frozen-lockfile 36 | 37 | - name: Install Playwright Browsers 38 | run: pnpm exec playwright install --with-deps 39 | 40 | - name: Run tests 41 | run: pnpm test 42 | -------------------------------------------------------------------------------- /.github/workflows/quality.yml: -------------------------------------------------------------------------------- 1 | name: Quality 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | prettier: 11 | name: 'Prettier' 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v3 16 | 17 | - name: Setup pnpm 18 | uses: pnpm/action-setup@v4 19 | with: 20 | version: 8.6.9 21 | 22 | - name: Use Node.js 20 23 | uses: actions/setup-node@v3 24 | with: 25 | node-version: '20' 26 | cache: 'pnpm' 27 | 28 | - name: Install dependencies 29 | run: pnpm install --frozen-lockfile 30 | 31 | - name: Run Prettier check 32 | run: pnpm run prettier-check 33 | 34 | eslint: 35 | name: 'ESLint' 36 | runs-on: ubuntu-latest 37 | steps: 38 | - name: Checkout 39 | uses: actions/checkout@v3 40 | 41 | - name: Setup pnpm 42 | uses: pnpm/action-setup@v4 43 | with: 44 | version: 8.6.9 45 | 46 | - name: Use Node.js 18 47 | uses: actions/setup-node@v3 48 | with: 49 | node-version: '18' 50 | cache: 'pnpm' 51 | 52 | - name: Install dependencies 53 | run: pnpm install --frozen-lockfile 54 | 55 | - name: Run ESLint check 56 | run: pnpm run lint 57 | 58 | types: 59 | name: 'TypeScript' 60 | runs-on: ubuntu-latest 61 | steps: 62 | - name: Checkout 63 | uses: actions/checkout@v3 64 | 65 | - name: Setup pnpm 66 | uses: pnpm/action-setup@v4 67 | with: 68 | version: 8.6.9 69 | 70 | - name: Use Node.js 20 71 | uses: actions/setup-node@v3 72 | with: 73 | node-version: '20' 74 | cache: 'pnpm' 75 | 76 | - name: Install dependencies 77 | run: pnpm install --frozen-lockfile 78 | 79 | - name: Run TypeScript type check 80 | run: pnpm run type-check 81 | -------------------------------------------------------------------------------- /.github/workflows/release-snapshot.yml: -------------------------------------------------------------------------------- 1 | # This workflow lets you manually create snapshot releases 2 | # 3 | # A snapshot release is useful when you want to try out changes on a pull request 4 | # before making a full release and without making a pre release mode. 5 | # 6 | # Problem 7 | # 8 | # This is useful as changesets force pre release mode across all packages in our 9 | # mono repo. When using pre releases then stable releases of all packages are 10 | # blocked until pre release is exited. 11 | # 12 | # What are snapshot releases 13 | # 14 | # To work around this issue we have this workflow. It lets you create a 15 | # once-off release for a specific branch. We call those snapshot releases. 16 | # Snapshot releases are published under the `snapshot` dist-tag and have 17 | # versions like 0.4.0-579bd13f016c7de43a2830340634b3948db358b6-20230913164912, 18 | # which consist of the version that would be generated, the commit hash and 19 | # the timestamp. 20 | # 21 | # How to create a snapshot release 22 | # 23 | # Make sure you have a branch pushed to GitHub, and make sure that branch has 24 | # a changeset committed. You can generate a changeset with "pnpm changeset". 25 | # 26 | # Then open github.com/vercel/ai and click on Actions > Release Snapshot 27 | # Then click "Run workflow" on the right and select the branch you want to 28 | # create a snapshot release for and click the "Run workflow" button. 29 | 30 | name: Release Snapshot 31 | 32 | on: 33 | workflow_dispatch: 34 | 35 | jobs: 36 | release-snapshot: 37 | name: Release Snapshot 38 | runs-on: ubuntu-latest 39 | steps: 40 | - name: Checkout Repo 41 | uses: actions/checkout@v3 42 | with: 43 | fetch-depth: 0 44 | 45 | - name: Setup pnpm 8 46 | uses: pnpm/action-setup@v4 47 | with: 48 | version: 8.6.9 49 | 50 | - name: Setup Node.js 18.x 51 | uses: actions/setup-node@v2 52 | with: 53 | node-version: 18.x 54 | 55 | - name: Add npm auth token to pnpm 56 | run: pnpm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN_ELEVATED}" 57 | env: 58 | NPM_TOKEN_ELEVATED: ${{secrets.NPM_TOKEN_ELEVATED}} 59 | 60 | - name: Install Dependencies 61 | run: pnpm i 62 | 63 | - name: Build 64 | run: pnpm clean && pnpm build 65 | 66 | - name: Add SHORT_SHA env property with commit short sha 67 | run: echo "SHORT_SHA=`echo ${{ github.sha }} | cut -c1-8`" >> $GITHUB_ENV 68 | 69 | - name: Create Snapshot Release 70 | run: | 71 | pnpm changeset version --snapshot ${SHORT_SHA} 72 | pnpm clean-examples 73 | pnpm changeset publish --no-git-tag --tag snapshot 74 | env: 75 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 76 | NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }} 77 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - '.changeset/**' 9 | - '.github/workflows/release.yml' 10 | workflow_dispatch: 11 | 12 | concurrency: ${{ github.workflow }}-${{ github.ref }} 13 | 14 | jobs: 15 | release: 16 | permissions: write-all 17 | name: Release 18 | runs-on: ubuntu-latest 19 | timeout-minutes: 10 20 | steps: 21 | - name: Checkout Repo 22 | uses: actions/checkout@v3 23 | with: 24 | fetch-depth: 0 25 | 26 | - name: Setup pnpm 8 27 | uses: pnpm/action-setup@v4 28 | with: 29 | version: 8.6.9 30 | 31 | - name: Setup Node.js 20.x 32 | uses: actions/setup-node@v2 33 | with: 34 | node-version: 20.x 35 | 36 | - name: Install Dependencies 37 | run: pnpm i 38 | 39 | - name: Create Release Pull Request or Publish to npm 40 | id: changesets 41 | uses: changesets/action@v1 42 | with: 43 | # This expects you to have a script called release which does a build for your packages and calls changeset publish 44 | version: pnpm ci:version 45 | publish: pnpm ci:release 46 | env: 47 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 48 | NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }} 49 | 50 | # - name: Get package version 51 | # id: package-version 52 | # run: echo "version=$(node -p "require('./packages/core/package.json').version")" >> "$GITHUB_OUTPUT" 53 | 54 | # - name: Create Git tag 55 | # run: git tag v${{ steps.package-version.outputs.version }} 56 | 57 | # - name: Push Git tag 58 | # run: git push origin v${{ steps.package-version.outputs.version }} 59 | 60 | # - name: Create GitHub Release 61 | # uses: actions/create-release@v1 62 | # env: 63 | # GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 64 | # with: 65 | # tag_name: v${{ steps.package-version.outputs.version }} 66 | # release_name: Release v${{ steps.package-version.outputs.version }} 67 | # draft: false 68 | # prerelease: false 69 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .turbo 4 | *.log 5 | .next 6 | dist 7 | dist-ssr 8 | *.local 9 | .env 10 | .cache 11 | server/dist 12 | public/dist 13 | .turbo 14 | test-results -------------------------------------------------------------------------------- /.kodiak.toml: -------------------------------------------------------------------------------- 1 | # .kodiak.toml 2 | version = 1 3 | 4 | [merge] 5 | automerge_label = "automerge" 6 | require_automerge_label = false 7 | method = "squash" 8 | delete_branch_on_merge = true 9 | optimistic_updates = false 10 | prioritize_ready_to_merge = true 11 | notify_on_conflict = false 12 | 13 | [merge.message] 14 | title = "pull_request_title" 15 | body = "pull_request_body" 16 | include_pr_number = true 17 | body_type = "markdown" 18 | strip_html_comments = true 19 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers = true 2 | # necessary for a PNPM bug: https://github.com/pnpm/pnpm/issues/5152#issuecomment-1223449173 3 | strict-peer-dependencies = false 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | .nuxt 3 | node_modules 4 | dist 5 | .svelte-kit 6 | .solid 7 | _nuxt 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to the OpenAssistantGPT SDK 2 | 3 | We deeply appreciate your interest in contributing to our repository! Whether you're reporting bugs, suggesting enhancements, improving docs, or submitting pull requests, your contributions help improve the project for everyone. 4 | 5 | ## Reporting Bugs 6 | 7 | If you've encountered a bug in the project, we encourage you to report it to us. Please follow these steps: 8 | 9 | 1. **Check the Issue Tracker**: Before submitting a new bug report, please check our issue tracker to see if the bug has already been reported. If it has, you can add to the existing report. 10 | 2. **Create a New Issue**: If the bug hasn't been reported, create a new issue. Provide a clear title and a detailed description of the bug. Include any relevant logs, error messages, and steps to reproduce the issue. 11 | 3. **Label Your Issue**: If possible, label your issue as a `bug` so it's easier for maintainers to identify. 12 | 13 | ## Suggesting Enhancements 14 | 15 | We're always looking for suggestions to make our project better. If you have an idea for an enhancement, please: 16 | 17 | 1. **Check the Issue Tracker**: Similar to bug reports, please check if someone else has already suggested the enhancement. If so, feel free to add your thoughts to the existing issue. 18 | 2. **Create a New Issue**: If your enhancement hasn't been suggested yet, create a new issue. Provide a detailed description of your suggested enhancement and how it would benefit the project. 19 | 20 | ## Code Contributions 21 | 22 | We welcome your contributions to our code and documentation. Here's how you can contribute: 23 | 24 | ### Setting Up the Repository Locally 25 | 26 | To set up the repository on your local machine, follow these steps: 27 | 28 | 1. **Fork the Repository**: Make a copy of the repository to your GitHub account. 29 | 2. **Clone the Repository**: Clone the repository to your local machine, e.g. using `git clone`. 30 | 3. **Install pnpm**: If you haven't already, install `pnpm`. You can do this by running `npm install -g pnpm` if you're using npm. Alternatively, if you're using Homebrew (Mac), you can run `brew install pnpm`. 31 | 4. **Install Dependencies**: Navigate to the project directory and run `pnpm install` to install all necessary dependencies. 32 | 33 | ### Submitting Pull Requests 34 | 35 | We greatly appreciate your pull requests. Here are the steps to submit them: 36 | 37 | 1. **Create a New Branch**: Initiate your changes in a fresh branch. It's recommended to name the branch in a manner that signifies the changes you're implementing. 38 | 2. **Commit Your Changes**: Ensure your commits are succinct and clear, detailing what modifications have been made and the reasons behind them. 39 | 3. **Push the Changes to Your GitHub Repository**: After committing your changes, push them to your GitHub repository. 40 | 4. **Open a Pull Request**: Propose your changes for review. Furnish a lucid title and description of your contributions. Make sure to link any relevant issues your PR resolves. 41 | 5. **Respond to Feedback**: Stay receptive to and address any feedback or alteration requests from the project maintainers. 42 | 43 | ### Fixing Prettier Issues 44 | 45 | > [!TIP] 46 | > Run `pnpm prettier-fix` before opening a pull request. 47 | 48 | If you encounter any prettier issues, you can fix them by running `pnpm prettier-fix`. This command will automatically fix any formatting issues in your code. 49 | 50 | ### Running the Examples 51 | 52 | 1. run `pnpm install` in the root 53 | 1. run `pnpm build` in the root 54 | 1. `cd examples/next-website` (or another example folder) 55 | 1. Other examples: run `pnpm dev` and go to the browser url 56 | 57 | Thank you for contributing to the OpenAssistantGPT SDK! Your efforts make a significant difference. 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![hero illustration](./assets/hero.gif) 2 | 3 | # OpenAssistantGPT SDK 4 | 5 | This SDK is an extension of the vercel/ai SDK with more features, addapted to our use case and maintained by the OpenAssistantGPT team. 6 | If you want more information about OpenAssistantGPT you can find it [here](https://www.openassistantgpt.io/). 7 | 8 | We also provide our chatbot with our [hosted version](https://www.openassistantgpt.io/), with adavanced analytics, crawling for custom content and advanced security. 9 | 10 | # Deploy example 11 | 12 | Deploy our basic example using [Vercel](https://vercel.com): 13 | 14 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FOpenAssistantGPT%2FOpenAssistantGPT-SDK%2Ftree%2Fmain%2Fexamples%2Fnext-website&env=OPENAI_ASSISTANT_ID,OPENAI_API_KEY&envDescription=Find%20all%20informations%20in%20OpenAI%20Platform.&envLink=https%3A%2F%2Fplatform.openai.com%2F) 15 | 16 | For more information about the example give a look at this [README.md](https://github.com/OpenAssistantGPT/chatbot-sdk/tree/main/examples/next-website#openassistantgpt-sdk-nextjs-and-openai-chat-example). 17 | 18 | All examples 19 | 20 | - [Basic Website](./examples/next-website/README.md) 21 | - [Window Style Integration](./examples/website-chatbot-window/README.md) 22 | - [Custom API](./examples/website-custom-api//README.md) 23 | 24 | # Installation 25 | 26 | You will need Node.js 18+ and pnpm install on your local development machine. 27 | 28 | ```bash 29 | npm install openassistantgpt 30 | ``` 31 | 32 | # Usage 33 | 34 | ## Import Default CSS 35 | 36 | Import the default CSS files to ensure correct styling is applied. For NextJS apps - this should be added to your [layout file](https://github.com/OpenAssistantGPT/chatbot-sdk/blob/main/examples/next-website/app/layout.tsx#L1). 37 | 38 | ``` 39 | import "@openassistantgpt/ui/dist/index.css" 40 | ``` 41 | 42 | ## @openassistantgpt/assistant 43 | 44 | First you need to import our library and configure the POST and GET method. This will setup the backend correctly. 45 | 46 | ```bash 47 | npm install @openassistantgpt/assistant 48 | ``` 49 | 50 | Then you have to setup you environment variables by creating your `.env` file 51 | 52 | ``` 53 | OPENAI_API_KEY=xxxxxxx 54 | OPENAI_ASSISTANT_ID=xxxxxx 55 | ``` 56 | 57 | Once the package is installed and your environment variables are configured create the route file `/api/chat/[[...openassistantgpt]]/route.ts` 58 | 59 | ```js 60 | import { OpenAssistantGPT } from '@openassistantgpt/assistant'; 61 | 62 | // In OpenAssistantGPT handler you must enter your base path. 63 | // The base path is everything before the [[...openassistantgpt]] part of the route. 64 | const httpHandler = new OpenAssistantGPT('/api/chat/').handler; 65 | 66 | export { httpHandler as GET, httpHandler as POST }; 67 | ``` 68 | 69 | ## @openassistantgpt/ui 70 | 71 | First you need to import our library and configure your component to use it. 72 | 73 | ```bash 74 | npm install @openassistantgpt/ui 75 | ``` 76 | 77 | Once the UI package is installed create the `page.tsx` file and configure your chatbot like you want. 78 | 79 | ```js 80 | 'use client'; 81 | 82 | import { OpenAssistantGPTChat, ChatbotConfig } from '@openassistantgpt/ui'; 83 | 84 | export default function ChatPage() { 85 | const chatbot: ChatbotConfig = { 86 | id: '12345', 87 | name: 'OpenAssistantGPT', 88 | 89 | chatTitle: 'Chat with OpenAssistantGPT', 90 | welcomeMessage: 91 | "Welcome to OpenAssistantGPT! 🚀 I'm your AI assistant, crafted using this platform. How may I assist you today?", 92 | chatMessagePlaceHolder: 'Ask us any question...', 93 | 94 | rightToLeftLanguage: false, 95 | 96 | bubbleColor: 'linear-gradient(to top left, #003366, #336699)', 97 | bubbleTextColor: '#FFFFFF', 98 | 99 | chatHeaderBackgroundColor: '#FFFFFF', 100 | chatHeaderTextColor: '#52525b', 101 | 102 | chatbotReplyBackgroundColor: '#e4e4e7', 103 | chatbotReplyTextColor: '#000000', 104 | 105 | userReplyBackgroundColor: '#e4e4e7', 106 | userReplyTextColor: '#000000', 107 | 108 | chatbotLogoURL: 109 | 'https://gwetfkan2dovfoiz.public.blob.vercel-storage.com/search-8jZhOvOBPxuTmohrup5TPvSzrjsyog.png', 110 | chatInputStyle: 'default', 111 | 112 | chatHistoryEnabled: true, 113 | chatFileAttachementEnabled: true, 114 | 115 | displayFooterText: true, 116 | footerLink: 'https://www.openassistantgpt.io', 117 | footerTextName: 'OpenAssistantGPT', 118 | 119 | messageSourceText: '', 120 | withChatMessageIcon: true, 121 | }; 122 | 123 | return ( 124 | 129 | ); 130 | } 131 | ``` 132 | 133 | ## Community 134 | 135 | The OpenAssistantGPT SDK community can be found on [GitHub Discussions](https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/discussions) where you can ask questions, voice ideas, and share your projects with other people. 136 | 137 | ## Contributing 138 | 139 | Contributions to the OpenAssistantGPT SDK are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/blob/main/CONTRIBUTING.md) to make sure you have smooth experience contributing to OpenAssistantGPT SDK. 140 | 141 | ## Authors 142 | 143 | OpenAssistantGPT team members, with contributions from the [Open Source Community](https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/graphs/contributors). 144 | -------------------------------------------------------------------------------- /assets/hero.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenAssistantGPT/chatbot-sdk/cb08d28e43d2e80d0d4d2e732855de02510da872/assets/hero.gif -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenAssistantGPT/chatbot-sdk/cb08d28e43d2e80d0d4d2e732855de02510da872/assets/logo.png -------------------------------------------------------------------------------- /examples/next-website/.env.local.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY=xxxxxxx 2 | OPENAI_ASSISTANT_ID="" 3 | BLOB_READ_WRITE_TOKEN="" -------------------------------------------------------------------------------- /examples/next-website/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['openassistantgpt'], 4 | }; 5 | -------------------------------------------------------------------------------- /examples/next-website/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /examples/next-website/README.md: -------------------------------------------------------------------------------- 1 | # OpenAssistantGPT SDK, Next.js, and OpenAI Chat Example 2 | 3 | This example shows how to use the [OpenAssistantGPT SDK](https://openassistantgpt.io/), [Vercel AI SDK](https://sdk.vercel.ai/docs), [Next.js](https://nextjs.org/) and [OpenAI](https://openai.com) to create a ChatGPT-like AI-powered streaming chat bot. 4 | 5 | ## Deploy your own 6 | 7 | Deploy the example using [Vercel](https://vercel.com?utm_source=github): 8 | 9 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FOpenAssistantGPT%2FOpenAssistantGPT-SDK%2Ftree%2Fmain%2Fexamples%2Fnext-website&env=OPENAI_ASSISTANT_ID,OPENAI_API_KEY&envDescription=Find%20all%20informations%20in%20OpenAI%20Platform.&envLink=https%3A%2F%2Fplatform.openai.com%2F) 10 | 11 | ## How to use 12 | 13 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: 14 | 15 | ```bash 16 | npx create-next-app --example https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/tree/main/examples/next-website next-openassistantgpt-app 17 | ``` 18 | 19 | ```bash 20 | yarn create next-app --example https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/tree/main/examples/next-website next-openassistantgpt-app 21 | ``` 22 | 23 | ```bash 24 | pnpm create next-app --example https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/tree/main/examples/next-website next-openassistantgpt-app 25 | ``` 26 | 27 | To run the example locally you need to: 28 | 29 | 1. Sign up at [OpenAI's Developer Platform](https://platform.openai.com/signup). 30 | 2. Go to [OpenAI's dashboard](https://platform.openai.com/account/api-keys) and create an API KEY. 31 | 3. Set the required OpenAI environment variable as the token value as shown [the example env file](./.env.local.example) but in a new file called `.env.local` 32 | 4. `pnpm install` to install the required dependencies. 33 | 5. `pnpm dev` to launch the development server. 34 | 35 | ## Learn More 36 | 37 | To learn more about OpenAssistantGPT take a look at the following resources: 38 | 39 | - [OpenAssistantGPT](https://www.openassistantgpt.io/) 40 | -------------------------------------------------------------------------------- /examples/next-website/app/api/chat/[[...openassistantgpt]]/route.ts: -------------------------------------------------------------------------------- 1 | import { OpenAssistantGPT } from '@openassistantgpt/assistant'; 2 | 3 | // In OpenAssistantGPT handler you must enter your base path. 4 | // The base path is everything before the [[...openassistantgpt]] part of the route. 5 | const httpHandler = new OpenAssistantGPT('/api/chat/').handler; 6 | 7 | export { httpHandler as GET, httpHandler as POST }; 8 | -------------------------------------------------------------------------------- /examples/next-website/app/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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', 9 | { 10 | variants: { 11 | variant: { 12 | default: 'bg-primary text-primary-foreground hover:bg-primary/90', 13 | destructive: 14 | 'bg-destructive text-destructive-foreground hover:bg-destructive/90', 15 | outline: 16 | 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', 17 | secondary: 18 | 'bg-secondary text-secondary-foreground hover:bg-secondary/80', 19 | ghost: 'hover:bg-accent hover:text-accent-foreground', 20 | link: 'text-primary underline-offset-4 hover:underline', 21 | }, 22 | size: { 23 | default: 'h-10 px-4 py-2', 24 | sm: 'h-9 rounded-md px-3', 25 | lg: 'h-11 rounded-md px-8', 26 | icon: 'h-10 w-10', 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: 'default', 31 | size: 'default', 32 | }, 33 | }, 34 | ); 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes, 38 | VariantProps { 39 | asChild?: boolean; 40 | } 41 | 42 | const Button = React.forwardRef( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : 'button'; 45 | return ( 46 | 51 | ); 52 | }, 53 | ); 54 | Button.displayName = 'Button'; 55 | 56 | export { Button, buttonVariants }; 57 | -------------------------------------------------------------------------------- /examples/next-website/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenAssistantGPT/chatbot-sdk/cb08d28e43d2e80d0d4d2e732855de02510da872/examples/next-website/app/favicon.ico -------------------------------------------------------------------------------- /examples/next-website/app/global.css: -------------------------------------------------------------------------------- 1 | /* src/global.css */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | -------------------------------------------------------------------------------- /examples/next-website/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import '@openassistantgpt/ui/dist/index.css'; 2 | 3 | import { Inter } from 'next/font/google'; 4 | 5 | const inter = Inter({ subsets: ['latin'] }); 6 | 7 | export const metadata = { 8 | title: 'OpenAssistantGPT SDK Example', 9 | description: 'Example of using OpenAssistantGPT SDK in a Next.js website', 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode; 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /examples/next-website/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ChatbotConfig, Message, OpenAssistantGPTChat } from 'openassistantgpt'; 4 | import { useEffect, useState } from 'react'; 5 | import { Button } from './components/ui/button'; 6 | 7 | export default function ChatPage() { 8 | const [count, setMessagesCount] = useState(0); 9 | const [defaultMessage, setDefaultMessage] = useState(''); 10 | 11 | const chatbot: ChatbotConfig = { 12 | id: '12345', 13 | name: 'OpenAssistantGPT', 14 | 15 | chatTitle: 'Chat with OpenAssistantGPT', 16 | welcomeMessage: 17 | "Welcome to OpenAssistantGPT! 🚀 I'm your AI assistant, crafted using this platform. How may I assist you today?", 18 | chatMessagePlaceHolder: 'Ask us any question...', 19 | 20 | rightToLeftLanguage: false, 21 | 22 | bubbleColor: 'linear-gradient(to top left, #003366, #336699)', 23 | bubbleTextColor: '#FFFFFF', 24 | 25 | chatHeaderBackgroundColor: '#FFFFFF', 26 | chatHeaderTextColor: '#52525b', 27 | 28 | chatbotReplyBackgroundColor: '#e4e4e7', 29 | chatbotReplyTextColor: '#000000', 30 | 31 | userReplyBackgroundColor: '#e4e4e7', 32 | userReplyTextColor: '#000000', 33 | 34 | chatbotLogoURL: 35 | 'https://gwetfkan2dovfoiz.public.blob.vercel-storage.com/search-8jZhOvOBPxuTmohrup5TPvSzrjsyog.png', 36 | chatInputStyle: 'default', 37 | 38 | chatHistoryEnabled: true, 39 | chatFileAttachementEnabled: true, 40 | //fontSize: '14px', 41 | displayFooterText: true, 42 | footerLink: 'https://www.openassistantgpt.io', 43 | footerTextName: 'OpenAssistantGPT', 44 | 45 | fontSize: '14px', 46 | 47 | messageSourceText: '', 48 | withChatMessageIcon: true, 49 | }; 50 | 51 | useEffect(() => { 52 | console.log('Messages count:', count); 53 | }, [count]); 54 | 55 | function handleMessagesChange(messages: Message[]) { 56 | setMessagesCount(messages.length); 57 | } 58 | 59 | return ( 60 | 73 | setDefaultMessage('How many chatbot can I created on free plan?') 74 | } 75 | > 76 | How many chatbot can I created on free plan? 77 | 78 | ), 79 | count == 0 && ( 80 | 88 | ), 89 | count == 0 && ( 90 | 100 | ), 101 | count == 0 && ( 102 | 110 | ), 111 | ]} 112 | /> 113 | ); 114 | } 115 | -------------------------------------------------------------------------------- /examples/next-website/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from 'clsx'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /examples/next-website/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | module.exports = nextConfig; 5 | -------------------------------------------------------------------------------- /examples/next-website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-website", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@openassistantgpt/assistant": "^0.2.0", 13 | "@openassistantgpt/react": "^0.3.0", 14 | "@openassistantgpt/ui": "^0.3.0", 15 | "@radix-ui/react-dialog": "^1.1.1", 16 | "@radix-ui/react-icons": "^1.3.0", 17 | "@radix-ui/react-label": "^2.1.0", 18 | "@radix-ui/react-slot": "^1.1.0", 19 | "buffer": "^6.0.3", 20 | "class-variance-authority": "^0.7.0", 21 | "clsx": "^2.1.1", 22 | "lucide-react": "^0.408.0", 23 | "next": "14.2.15", 24 | "openai": "4.69.0", 25 | "openassistantgpt": "latest", 26 | "react": "^18.3.1", 27 | "react-dom": "^18.3.1", 28 | "tailwind-merge": "^2.5.4", 29 | "zod": "3.23.8", 30 | "zod-form-data": "^2.0.2" 31 | }, 32 | "devDependencies": { 33 | "@types/node": "^20.16.11", 34 | "@types/react": "^18.3.11", 35 | "@types/react-dom": "^18.3.1", 36 | "autoprefixer": "^10.4.20", 37 | "eslint": "^7.32.0", 38 | "eslint-config-next": "14.2.5", 39 | "postcss": "^8.4.47", 40 | "tailwindcss": "^3.4.14", 41 | "typescript": "5.1.3" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /examples/next-website/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /examples/next-website/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 5 | './components/**/*.{js,ts,jsx,tsx,mdx}', 6 | './app/**/*.{js,ts,jsx,tsx,mdx}', 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 14 | }, 15 | }, 16 | }, 17 | 18 | plugins: [], 19 | }; 20 | -------------------------------------------------------------------------------- /examples/next-website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/.env.local.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY=xxxxxxx 2 | OPENAI_ASSISTANT_ID="" -------------------------------------------------------------------------------- /examples/website-chatbot-window/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['openassistantgpt'], 4 | }; 5 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/README.md: -------------------------------------------------------------------------------- 1 | # OpenAssistantGPT SDK, Chatbot Window Integration 2 | 3 | This is example shows how to IFRAME our chatbot in a website and use it at different places. 4 | 5 | This example uses [OpenAssistantGPT SDK](https://openassistantgpt.io/), [Vercel AI SDK](https://sdk.vercel.ai/docs), [Next.js](https://nextjs.org/) and [OpenAI](https://openai.com) to create a ChatGPT-like AI-powered streaming chat bot. 6 | 7 | ## Deploy your own 8 | 9 | Deploy the example using [Vercel](https://vercel.com?utm_source=github): 10 | 11 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FOpenAssistantGPT%2FOpenAssistantGPT-SDK%2Ftree%2Fmain%2Fexamples%2Fwebsite-chatbot-window&env=OPENAI_ASSISTANT_ID,OPENAI_API_KEY&envDescription=Find%20all%20informations%20in%20OpenAI%20Platform.&envLink=https%3A%2F%2Fplatform.openai.com%2F) 12 | 13 | ## How to use 14 | 15 | Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: 16 | 17 | ```bash 18 | npx create-next-app --example https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/tree/main/examples/website-chatbot-window next-openassistantgpt-app 19 | ``` 20 | 21 | ```bash 22 | yarn create next-app --example https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/tree/main/examples/website-chatbot-window next-openassistantgpt-app 23 | ``` 24 | 25 | ```bash 26 | pnpm create next-app --example https://github.com/OpenAssistantGPT/OpenAssistantGPT-SDK/tree/main/examples/website-chatbot-window next-openassistantgpt-app 27 | ``` 28 | 29 | To run the example locally you need to: 30 | 31 | 1. Sign up at [OpenAI's Developer Platform](https://platform.openai.com/signup). 32 | 2. Go to [OpenAI's dashboard](https://platform.openai.com/account/api-keys) and create an API KEY. 33 | 3. Set the required OpenAI environment variable as the token value as shown [the example env file](./.env.local.example) but in a new file called `.env.local` 34 | 4. `pnpm install` to install the required dependencies. 35 | 5. `pnpm dev` to launch the development server. 36 | 37 | ## Learn More 38 | 39 | To learn more about OpenAssistantGPT take a look at the following resources: 40 | 41 | - [OpenAssistantGPT](https://www.openassistantgpt.io/) 42 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/api/chat/[[...openassistantgpt]]/route.ts: -------------------------------------------------------------------------------- 1 | import { OpenAssistantGPT } from '@openassistantgpt/assistant'; 2 | 3 | // In OpenAssistantGPT handler you must enter your base path. 4 | // The base path is everything before the [[...openassistantgpt]] part of the route. 5 | const httpHandler = new OpenAssistantGPT('/api/chat/').handler; 6 | 7 | export { httpHandler as GET, httpHandler as POST }; 8 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenAssistantGPT/chatbot-sdk/cb08d28e43d2e80d0d4d2e732855de02510da872/examples/website-chatbot-window/app/favicon.ico -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/global.css: -------------------------------------------------------------------------------- 1 | /* src/global.css */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import '@openassistantgpt/ui/dist/index.css'; 2 | 3 | import { Inter } from 'next/font/google'; 4 | 5 | const inter = Inter({ subsets: ['latin'] }); 6 | 7 | export const metadata = { 8 | title: 'OpenAssistantGPT SDK Example', 9 | description: 'Example of using OpenAssistantGPT SDK in a Next.js website', 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode; 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | export default function Home() { 4 | return ( 5 | <> 6 |

THIS IS MY H1

7 |
15 | 29 |
30 |
THIS IS THE FOOTER
31 |
THIS IS THE FOOTER
32 |
THIS IS THE FOOTER
33 |
THIS IS THE FOOTER
34 |
THIS IS THE FOOTER
35 |
THIS IS THE FOOTER
36 |
THIS IS THE FOOTER
37 |
THIS IS THE FOOTER
38 |
THIS IS THE FOOTER
39 |
THIS IS THE FOOTER
40 |
THIS IS THE FOOTER
41 |
THIS IS THE FOOTER
42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/window/button-extension.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import React from 'react'; 4 | import { Button } from './button'; 5 | 6 | export function SupportInquiry() { 7 | return ( 8 |
9 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /examples/website-chatbot-window/app/window/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { VariantProps, cva } from 'class-variance-authority'; 3 | 4 | import { cn } from '@/lib/utils'; 5 | 6 | const buttonVariants = cva( 7 | 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', 8 | { 9 | variants: { 10 | variant: { 11 | default: 'bg-primary text-primary-foreground hover:bg-primary/90', 12 | destructive: 13 | 'bg-destructive text-destructive-foreground hover:bg-destructive/90', 14 | outline: 15 | 'border border-input hover:bg-accent hover:text-accent-foreground', 16 | secondary: 17 | 'bg-secondary text-secondary-foreground hover:bg-secondary/80', 18 | ghost: 'hover:bg-accent hover:text-accent-foreground', 19 | link: 'underline-offset-4 hover:underline text-primary', 20 | nothing: '', 21 | }, 22 | size: { 23 | default: 'h-10 py-2 px-4', 24 | sm: 'h-9 px-3 rounded-md', 25 | lg: 'h-11 px-8 rounded-md', 26 | icon: 'size-9', 27 | xs: 'size-3', 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 | 41 | const Button = React.forwardRef( 42 | ({ className, variant, size, ...props }, ref) => { 43 | return ( 44 | 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /packages/ui/components/empty-placeholder.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | import { Icons } from '@/components/icons'; 5 | 6 | interface EmptyPlaceholderProps extends React.HTMLAttributes {} 7 | 8 | export function EmptyPlaceholder({ 9 | className, 10 | children, 11 | ...props 12 | }: EmptyPlaceholderProps) { 13 | return ( 14 |
21 |
22 | {children} 23 |
24 |
25 | ); 26 | } 27 | 28 | interface EmptyPlaceholderIconProps 29 | extends Partial> { 30 | name: string; 31 | } 32 | 33 | EmptyPlaceholder.Icon = function EmptyPlaceHolderIcon({ 34 | name, 35 | className, 36 | ...props 37 | }: EmptyPlaceholderIconProps) { 38 | const Icon: any = Icons[name]; 39 | 40 | if (!Icon) { 41 | return null; 42 | } 43 | 44 | return ( 45 |
46 | 50 |
51 | ); 52 | }; 53 | 54 | interface EmptyPlacholderTitleProps 55 | extends React.HTMLAttributes {} 56 | 57 | EmptyPlaceholder.Title = function EmptyPlaceholderTitle({ 58 | className, 59 | ...props 60 | }: EmptyPlacholderTitleProps) { 61 | return ( 62 |

63 | ); 64 | }; 65 | 66 | interface EmptyPlacholderDescriptionProps 67 | extends React.HTMLAttributes {} 68 | 69 | EmptyPlaceholder.Description = function EmptyPlaceholderDescription({ 70 | className, 71 | ...props 72 | }: EmptyPlacholderDescriptionProps) { 73 | return ( 74 |

81 | ); 82 | }; 83 | -------------------------------------------------------------------------------- /packages/ui/components/external-link.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export function ExternalLink({ 4 | href, 5 | children, 6 | }: { 7 | href: string; 8 | children: React.ReactNode; 9 | }) { 10 | return ( 11 | 16 | {children} 17 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/ui/components/icons.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | AlertTriangle, 3 | ArrowRight, 4 | ChevronLeft, 5 | ChevronRight, 6 | Command, 7 | CreditCard, 8 | File, 9 | FileText, 10 | HelpCircle, 11 | Image, 12 | Laptop, 13 | Loader2, 14 | Moon, 15 | MoreVertical, 16 | Pizza, 17 | Plus, 18 | Settings, 19 | SunMedium, 20 | Trash, 21 | User, 22 | X, 23 | BotIcon, 24 | FolderClosed, 25 | LayoutDashboard, 26 | Key, 27 | Coins, 28 | ArrowUp, 29 | CheckCheck, 30 | ArrowDown, 31 | Import, 32 | BadgePlus, 33 | Copy, 34 | Download, 35 | Send, 36 | Loader, 37 | RefreshCcw, 38 | Paperclip, 39 | Lock, 40 | } from 'lucide-react'; 41 | 42 | export const Icons: any = { 43 | arrowDown: ArrowDown, 44 | lock: Lock, 45 | document: File, 46 | paperclip: Paperclip, 47 | reload: RefreshCcw, 48 | loading: Loader, 49 | send: Send, 50 | download: Download, 51 | copy: Copy, 52 | badgeplus: BadgePlus, 53 | import: Import, 54 | logo: Command, 55 | folder: FolderClosed, 56 | dashboard: LayoutDashboard, 57 | close: X, 58 | key: Key, 59 | checkcheck: CheckCheck, 60 | coin: Coins, 61 | spinner: Loader2, 62 | chevronLeft: ChevronLeft, 63 | chevronRight: ChevronRight, 64 | trash: Trash, 65 | post: FileText, 66 | page: File, 67 | media: Image, 68 | settings: Settings, 69 | billing: CreditCard, 70 | ellipsis: MoreVertical, 71 | add: Plus, 72 | bot: BotIcon, 73 | warning: AlertTriangle, 74 | user: User, 75 | arrowRight: ArrowRight, 76 | arrowUp: ArrowUp, 77 | help: HelpCircle, 78 | pizza: Pizza, 79 | sun: SunMedium, 80 | moon: Moon, 81 | laptop: Laptop, 82 | }; 83 | -------------------------------------------------------------------------------- /packages/ui/components/markdown.tsx: -------------------------------------------------------------------------------- 1 | import { FC, memo } from 'react'; 2 | import ReactMarkdown, { Options } from 'react-markdown'; 3 | 4 | export const MemoizedReactMarkdown: FC = memo( 5 | ReactMarkdown, 6 | (prevProps, nextProps) => 7 | prevProps.children === nextProps.children && 8 | prevProps.className === nextProps.className, 9 | ); 10 | -------------------------------------------------------------------------------- /packages/ui/components/preview-attachement.tsx: -------------------------------------------------------------------------------- 1 | import { Attachment } from '@/types/attachements'; 2 | import { LoaderIcon } from 'lucide-react'; 3 | 4 | export const PreviewAttachment = ({ 5 | attachment, 6 | isUploading = false, 7 | }: { 8 | attachment: Attachment; 9 | isUploading?: boolean; 10 | }) => { 11 | const { name, url, contentType } = attachment; 12 | 13 | return ( 14 |

15 |
16 | {contentType ? ( 17 | contentType.startsWith('image') ? ( 18 | // eslint-disable-next-line @next/next/no-img-element 19 | {name 27 | ) : ( 28 |
29 | ) 30 | ) : ( 31 |
32 | )} 33 | 34 | {isUploading && ( 35 |
36 | 37 |
38 | )} 39 |
40 | 41 |
{name}
42 |
43 | ); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/ui/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { VariantProps, cva } from 'class-variance-authority'; 3 | 4 | import { cn } from '@/lib/utils'; 5 | 6 | const buttonVariants = cva( 7 | 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', 8 | { 9 | variants: { 10 | variant: { 11 | default: 'bg-primary text-primary-foreground hover:bg-primary/90', 12 | destructive: 13 | 'bg-destructive text-destructive-foreground hover:bg-destructive/90', 14 | outline: 15 | 'border border-input hover:bg-accent hover:text-accent-foreground', 16 | secondary: 17 | 'bg-secondary text-secondary-foreground hover:bg-secondary/80', 18 | ghost: 'hover:bg-accent hover:text-accent-foreground', 19 | link: 'underline-offset-4 hover:underline text-primary', 20 | nothing: '', 21 | }, 22 | size: { 23 | default: 'h-10 py-2 px-4', 24 | sm: 'h-9 px-3 rounded-md', 25 | lg: 'h-11 px-8 rounded-md', 26 | icon: 'py-1 px-1', 27 | xs: '', 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 | 41 | const Button = React.forwardRef( 42 | ({ className, variant, size, ...props }, ref) => { 43 | return ( 44 | 106 | 115 | 116 | 117 | 138 | {value} 139 | 140 | 141 | ); 142 | }); 143 | CodeBlock.displayName = 'CodeBlock'; 144 | 145 | export { CodeBlock }; 146 | -------------------------------------------------------------------------------- /packages/ui/components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import * as DialogPrimitive from '@radix-ui/react-dialog'; 5 | import { Cross2Icon } from '@radix-ui/react-icons'; 6 | 7 | import { cn } from '@/lib/utils'; 8 | 9 | const Dialog = DialogPrimitive.Root; 10 | 11 | const DialogTrigger = DialogPrimitive.Trigger; 12 | 13 | const DialogPortal = DialogPrimitive.Portal; 14 | 15 | const DialogClose = DialogPrimitive.Close; 16 | 17 | const DialogOverlay = React.forwardRef< 18 | React.ElementRef, 19 | React.ComponentPropsWithoutRef 20 | >(({ className, ...props }, ref) => ( 21 | 29 | )); 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; 31 | 32 | const DialogContent = React.forwardRef< 33 | React.ElementRef, 34 | React.ComponentPropsWithoutRef 35 | >(({ className, children, ...props }, ref) => ( 36 | 37 | 38 | 46 | {children} 47 | 48 | 49 | Close 50 | 51 | 52 | 53 | )); 54 | DialogContent.displayName = DialogPrimitive.Content.displayName; 55 | 56 | const DialogHeader = ({ 57 | className, 58 | ...props 59 | }: React.HTMLAttributes) => ( 60 |
67 | ); 68 | DialogHeader.displayName = 'DialogHeader'; 69 | 70 | const DialogFooter = ({ 71 | className, 72 | ...props 73 | }: React.HTMLAttributes) => ( 74 |
81 | ); 82 | DialogFooter.displayName = 'DialogFooter'; 83 | 84 | const DialogTitle = React.forwardRef< 85 | React.ElementRef, 86 | React.ComponentPropsWithoutRef 87 | >(({ className, ...props }, ref) => ( 88 | 96 | )); 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName; 98 | 99 | const DialogDescription = React.forwardRef< 100 | React.ElementRef, 101 | React.ComponentPropsWithoutRef 102 | >(({ className, ...props }, ref) => ( 103 | 108 | )); 109 | DialogDescription.displayName = DialogPrimitive.Description.displayName; 110 | 111 | export { 112 | Dialog, 113 | DialogPortal, 114 | DialogOverlay, 115 | DialogTrigger, 116 | DialogClose, 117 | DialogContent, 118 | DialogHeader, 119 | DialogFooter, 120 | DialogTitle, 121 | DialogDescription, 122 | }; 123 | -------------------------------------------------------------------------------- /packages/ui/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ); 21 | }, 22 | ); 23 | Input.displayName = 'Input'; 24 | 25 | export { Input }; 26 | -------------------------------------------------------------------------------- /packages/ui/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import * as LabelPrimitive from '@radix-ui/react-label'; 5 | import { VariantProps, cva } from 'class-variance-authority'; 6 | 7 | import { cn } from '@/lib/utils'; 8 | 9 | const labelVariants = cva( 10 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 11 | ); 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 |