mckaywrigley/chatbot-ui-lite

A simple chatbot starter kit for OpenAI's chat model using Next.js, TypeScript, and Tailwind CSS.

Chatbot UI Lite

A simple chatbot starter kit for OpenAI's chat model using Next.js, TypeScript, and Tailwind CSS.

See a demo.

For an advanced version, see Chatbot UI.

Features

Chatbot UI Lite provides a simple, fully-functional chat interface that you can use to start building your own chatbot apps powered by OpenAI.

It has everything you need to hit the ground running.

Modify the chat interface in components/Chat.

Tweak the system prompt in utils/index.ts.

Tweak the assistant prompt in pages/index.tsx.

Deploy

Vercel

Host your own live version of Chatbot UI Lite with Vercel.

Replit

Fork Chatbot UI on Replit here.

Running Locally

1. Clone Repo

git clone https://github.com/mckaywrigley/chatbot-ui-lite.git

2. Install Dependencies

npm i

3. Provide OpenAI API Key

Create a .env.local file in the root of the repo with your OpenAI API Key:

OPENAI_API_KEY=<YOUR_KEY>

4. Run App

npm run dev

5. Start Building

You should be able to start chatting with the bot.

Now, go build the app into whatever kind of chatbot you want!

Contact

If you have any questions, feel free to reach out to me on Twitter.

chatbot-ui-lite's Issues

Error "The keyword 'interface' is reserved" trying to use chat component in another project

I created a new project with:

npx create-next-app@latest

Installed this repo as a dependency:

npm install mckaywrigley/chatbot-ui-lite#main

In the file pages/index.tsx I added this line on top:

import { Chat } from "ai-chatbot-starter/components/Chat/Chat";

Then I inserted the component in the HTML of the home function:

        <Chat
        />

When I run the code (npm run dev) I get this error:

./node_modules/ai-chatbot-starter/components/Chat/Chat.tsx
Module parse failed: The keyword 'interface' is reserved (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { ResetChat } from "./ResetChat";
| 
> interface Props {
|   messages: Message[];
|   loading: boolean;

Sometimes I get a similar error in ResetChat.tsx.

I suppose there is a configuration issue in my project or in this one, but I the few solutions I found on Google didn't work for me.

Also, I'm not sure this repo is ready to be imported into other projects.

Groq api

Please add groq api support

data retain again and again

#Data retain again
When i am ask the question Chatbot UI , question pass in payload and when i am ask again new question, question again pas in payload and i saw the payload question and answer all are storing in payload. Its too heavy for chatbot ui.

Note: payload retain data again and again.

#Check this
{"model":"gpt-3.5-turbo","messages":[{"role":"system","content":"You are a helpful, friendly, assistant."},{"role":"assistant","content":"Hi there! I'm Chatbot UI, an AI assistant. I can help you with things like answering questions, providing information, and helping with tasks. How can I help you?"},{"role":"user","content":"what is a machine learning"},{"role":"assistant","content":"Machine learning is a type of artificial intelligence (AI) that allows computer systems to automatically learn and improve from experience without being explicitly programmed. It involves the use of algorithms and statistical models to enable computers to learn from data, identify patterns, and make predictions or decisions based on that data. Machine learning is used in a wide range of applications, including image recognition, natural language processing, fraud detection, and recommendation systems."},{"role":"user","content":"what is a mlflow"}],"max_tokens":800,"temperature":0,"stream":true}

GPT-4

How do I change the model from 3.5 to 4?

How to deploy it to my own domain?

Hello, thank you very much for your code! I would like to deploy this app to my domain, but I don't know how to do it. Do you know of any simple methods, such as using Cloudflare?

How can i change API BASE URL?

Create a version for Nuxt?

Looks very nice! Can you create a version for Nuxt? https://nuxt.com/

front end stuck

I tried to start the sever in local using npm run dev, but somehow the front end always stuck at https://github.com/mckaywrigley/chatbot-ui/blob/main/pages/index.tsx#L24. I tried to add logging, and it just never return in the fetch of /api/chat. Do you know why?