diff --git a/README.md b/README.md index 8109f21..5d01a2c 100644 --- a/README.md +++ b/README.md @@ -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= +``` + +**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). diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index b716340..e111c11 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -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; diff --git a/components/ModelSelect.tsx b/components/Chat/ModelSelect.tsx similarity index 100% rename from components/ModelSelect.tsx rename to components/Chat/ModelSelect.tsx diff --git a/components/Conversations.tsx b/components/Sidebar/Conversations.tsx similarity index 100% rename from components/Conversations.tsx rename to components/Sidebar/Conversations.tsx diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index 4c6898e..acef3f4 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -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 { diff --git a/pages/index.tsx b/pages/index.tsx index 7a6e05e..36ce03c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -175,10 +175,10 @@ export default function Home() { return ( <> - Chatbot UI + Chatbot UI Pro