KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

readme udpate

This commit is contained in:
Mckay Wrigley 2023-03-15 06:20:11 -06:00
parent 48f3f557e1
commit f05390c97d
7 changed files with 81 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
README.md
View File

@ -1 +1,77 @@
# Chatbot UI
# Chatbot UI Pro
An advanced chatbot kit for OpenAI's chat model using Next.js, TypeScript, and Tailwind CSS.
It aims to mimic ChatGPT's interface and functionality.
All conversations are stored locally on your device.
See a [demo]().
![Chatbot UI Pro](./public/screenshot.png)
## Updates
Chatbot UI Pro will be updated over time.
Expect frequent improvements.
## Features
Chatbot UI Pro provides a ChatGPT-like 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`.
Modify the sidebar interface in `components/Sidebar`.
Tweak the system prompt in `utils/index.ts`.
## Deploy
**Vercel**
Host your own live version of Chatbot UI Pro with Vercel.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmckaywrigley%2Fchatbot-ui-pro&env=OPENAI_API_KEY&envDescription=Your%20OpenAI%20API%20Key.%20Chat%20will%20not%20work%20if%20you%20don't%20provide%20it.)
**Replit**
Fork Chatbot UI Pro on Replit [here](https://replit.com/@MckayWrigley/chatbot-ui-pro?v=1).
## Running Locally
**1. Clone Repo**
```bash
git clone https://github.com/mckaywrigley/chatbot-ui-pro.git
```
**2. Install Dependencies**
```bash
npm i
```
**3. Provide OpenAI API Key**
Create a .env.local file in the root of the repo with your OpenAI API Key:
```bash
OPENAI_API_KEY=<YOUR_KEY>
```
**4. Run App**
```bash
npm run dev
```
**5. Use It**
You should be able to start chatting.
## Contact
If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).

2
components/Chat/Chat.tsx
View File

@ -1,9 +1,9 @@
import { Message, OpenAIModel, OpenAIModelNames } from "@/types";
import { FC, useEffect, useRef } from "react";
import { ModelSelect } from "../ModelSelect";
import { ChatInput } from "./ChatInput";
import { ChatLoader } from "./ChatLoader";
import { ChatMessage } from "./ChatMessage";
import { ModelSelect } from "./ModelSelect";
interface Props {
model: OpenAIModel;

0
components/ModelSelect.tsx → components/Chat/ModelSelect.tsx
View File

0
components/Conversations.tsx → components/Sidebar/Conversations.tsx
View File

2
components/Sidebar/Sidebar.tsx
View File

@ -1,7 +1,7 @@
import { Conversation } from "@/types";
import { IconPlus } from "@tabler/icons-react";
import { FC } from "react";
import { Conversations } from "../Conversations";
import { Conversations } from "./Conversations";
import { SidebarSettings } from "./SidebarSettings";
interface Props {

4
pages/index.tsx
View File

@ -175,10 +175,10 @@ export default function Home() {
return (
<>
<Head>
<title>Chatbot UI</title>
<title>Chatbot UI Pro</title>
<meta
name="description"
content="A simple chatbot starter kit for OpenAI's chat model using Next.js, TypeScript, and Tailwind CSS."
content="An advanced chatbot starter kit for OpenAI's chat model using Next.js, TypeScript, and Tailwind CSS."
/>
<meta
name="viewport"

BIN
public/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 474 KiB

After

Width:  |  Height:  |  Size: 368 KiB