Chatbot UI

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

See a demo.

Features

Chatbot UI 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.

Vercel

Host your own live version of Chatbot UI with Vercel.

Replit

Fork Chatbot UI on Replit here.

1. Clone Repo

git clone https://github.com/mckaywrigley/chatbot-ui.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!

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

I'd also love to see what you build with this starter kit - share your projects with me!

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
components		components
pages		pages
public		public
styles		styles
types		types
utils		utils
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
license		license
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json