react-chatgpt

Embedding your chatgpt agent into your react application, option in tailwindcss, from development to release, all in this react-chatgpt project.

Features

• Component library development starter: You can simply use this project as a starter for developing modern react + tailwindcss npm libraries. The project uses tailwindcss and effectively isolates the styles of the library, allowing it to be seamlessly used in both react or react + tailwindcss projects.
• Fancy and customizable UI: Elevate the appearance and experience of your agent by utilizing the tailwindcss framework, which can be easily customized to suit your preferences.
• Universal chatgpt agent: With its versatile design, you can create agents for any purpose by align with your api implementation.
• Keep context: Keep the full rounds of context.
• Infinite conversation: Start new conversation automatically when reach rate limit.
• Out of the box: Built in i18n support, built in disclaimer support, ready to use out of the box.
• Voice interaction: Supports voice input and output, and voice also supports multiple languages.
• Responsive: Optimized for various screen sizes and adapt automatically.
• Chart support: Chart support with Mermaid.

Quick start

1vim ~/.npmrc
2
3//npm.pkg.github.com/:_authToken=<Your Personal Access Token>
4//@mystist:registry=https://npm.pkg.github.com/

1yarn add @mystist/react-chatgpt

For react project:

1import '@mystist/react-chatgpt/dist/style.css'
2
3import { ReactChatGPT } from '@mystist/react-chatgpt'

For nextjs project:

1import '@mystist/react-chatgpt/dist/style.css'
2
3import dynamic from 'next/dynamic'
4
5export const ReactChatGPT = dynamic(() => import('@mystist/react-chatgpt').then((module) => module.ReactChatGPT as any), { ssr: false })

Sample Agent component: ./components/Agent/index.tsx

1import '@mystist/react-chatgpt/dist/style.css'
2
3import dynamic from 'next/dynamic'
4import { useState } from 'react'
5
6export const ReactChatGPT = dynamic(() => import('@mystist/react-chatgpt').then((module) => module.ReactChatGPT as any), { ssr: false })
7
8const DefaultAvatar = () => (
9  <span className="inline-block h-full w-full overflow-hidden rounded-full bg-gray-100">
10    <svg className="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
11      <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
12    </svg>
13  </span>
14)
15
16export default function Index() {
17  const [status, setStatus] = useState('')
18
19  const identifier = '<your identifier>'
20  const lang = 'en'
21
22  return (
23    <>
24      <button onClick={() => setStatus('open')}>
25        <div className="relative h-16 w-16">
26          <DefaultAvatar />
27          <span className="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-400 ring-2 ring-white" />
28        </div>
29      </button>
30
31      {/* @ts-ignore */}
32      {identifier && <ReactChatGPT status={status} setStatus={setStatus} identifier={identifier} lang={lang} />}
33    </>
34  )
35}

Options

• status: The React state represent the opening of the ReactChatGPT component.
• setStatus: The React state set function controls the opening of the ReactChatGPT component.
• identifier: To retrieve the specified data from the API endpoint with this identifier param.
• lang: Specify the language, such as 'en' for English, 'zh' for Chinese, and 'ja' for Japanese.
• overlayMode<'auto'(default) | 'modal' | 'slide-over'>: Specify the overlay mode. The default is 'auto', which will use 'modal' for large screens and 'slide-over' for smaller screens.

API dependencies

Checkout src/lib/requests/index.tsx for the api dependencies.

Be aware that the Configuration api is the basic api to have react-chatgpt up and running: api/configuration?identifier=<your identifier>&lang=<your lang> It should return a Configuration object specs here: src/lib/interfaces/index.tsx

Development

1yarn

1yarn dev

Release

1yarn release