Code Monkey home page Code Monkey logo

chatbot-ui's Introduction

Chatbot UI

The open-source AI chat app for everyone.

Chatbot UI

Demo

View the latest demo here.

Official Hosted Version

Check back soon for an official hosted version of Chatbot UI.

Official Desktop App

Check back soon for an official desktop app for Chatbot UI. Just click download & start chatting - no setup required.

Support

If you find Chatbot UI useful, please consider sponsoring me to support my open-source work :)

Legacy Code

Chatbot UI was recently updated to its 2.0 version.

The code for 1.0 can be found on the legacy branch.

Updating

In your terminal at the root of your local Chatbot UI repository, run:

npm run update

Local Quickstart

Follow these steps to get your own Chatbot UI instance running locally.

You can watch the full video tutorial here.

1. Clone the repo

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

2. Install dependencies

Open a terminal in the root directory of your local Chatbot UI repository and run:

npm install

3. Install Supabase & run locally

Why Supabase?

Previously, we used local browser storage to store data. However, this was not a good solution for a few reasons:

  • Security issues
  • Limited storage
  • Limits multi-modal use cases

We now use Supabase because it's easy to use, it's open-source, it's Postgres, and it has a free tier for hosted instances.

We will support other providers in the future to give you more options.

1. Install Docker

You will need to install Docker to run Supabase locally. You can download it here for free.

2. Install Supabase CLI

MacOS/Linux

brew install supabase/tap/supabase

Window

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

3. Start Supabase

In your terminal at the root of your local Chatbot UI repository, run:

supabase start

4. Fill in secrets

1. Environment variables

In your terminal at the root of your local Chatbot UI repository, run:

cp .env.local.example .env.local

Get the required values by running:

supabase status

Note: Use API URL from supabase status for NEXT_PUBLIC_SUPABASE_URL

Now go to your .env.local file and fill in the values.

If the environment variable is set, it will disable the input in the user settings.

2. SQL setup

In the 1st migration file supabase/migrations/20240108234540_setup.sql you will need to replace 2 values with the values you got above:

  • project_url (line 53): http://supabase_kong_chatbotui:8000 (default) can remain unchanged if you don't change your project_id in the config.toml file
  • service_role_key (line 54): You got this value from running supabase status

This prevents issues with storage files not being deleted properly.

5. Install Ollama (optional for local models)

Follow the instructions here.

6. Run app locally

In your terminal at the root of your local Chatbot UI repository, run:

npm run chat

Your local instance of Chatbot UI should now be running at http://localhost:3000.

You can view your backend GUI at http://localhost:54323/project/default/editor.

Hosted Quickstart

Follow these steps to get your own Chatbot UI instance running in the cloud.

Video tutorial coming soon.

1. Follow local quickstart

Repeat steps 1-4 in "Local Quickstart" above.

You will want separate repositories for your local and hosted instances.

Create a new repository for your hosted instance of Chatbot UI on GitHub and push your code to it.

2. Set up backend with Supabase

1. Create a new project

Go to Supabase and create a new project.

2. Get project values

Once you are in the project dashboard, click on the "Project Settings" icon tab on the far bottom left.

Here you will get the values for the following environment variables:

  • Project Ref: Found in "General settings" as "Reference ID"

  • Project ID: Found in the URL of your project dashboard (Ex: https://supabase.com/dashboard/project/<YOUR_PROJECT_ID>/settings/general)

While still in "Settings" click on the "API" text tab on the left.

Here you will get the values for the following environment variables:

  • Project URL: Found in "API Settings" as "Project URL"

  • Anon key: Found in "Project API keys" as "anon public"

  • Service role key: Found in "Project API keys" as "service_role" (Reminder: Treat this like a password!)

3. Configure auth

Next, click on the "Authentication" icon tab on the far left.

In the text tabs, click on "Providers" and make sure "Email" is enabled.

We recommend turning off "Confirm email" for your own personal instance.

4. Connect to hosted db

Open up your repository for your hosted instance of Chatbot UI.

In the 1st migration file supabase/migrations/20240108234540_setup.sql you will need to replace 2 values with the values you got above:

  • project_url (line 53): Use the Project URL value from above
  • service_role_key (line 54): Use the Service role key value from above

Now, open a terminal in the root directory of your local Chatbot UI repository. We will execute a few commands here.

Login to Supabase by running:

supabase login

Next, link your project by running the following command with the "Project Ref" and "Project ID" you got above:

supabase link --project-ref <project-id>

Your project should now be linked.

Finally, push your database to Supabase by running:

supabase db push

Your hosted database should now be set up!

3. Set up frontend with Vercel

Go to Vercel and create a new project.

In the setup page, import your GitHub repository for your hosted instance of Chatbot UI.

In environment variables, add the following from the values you got above:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • NEXT_PUBLIC_OLLAMA_URL (only needed when using local Ollama models; default: http://localhost:11434)

You can also add API keys as environment variables.

  • OPENAI_API_KEY
  • AZURE_OPENAI_API_KEY
  • AZURE_OPENAI_ENDPOINT
  • AZURE_GPT_45_VISION_NAME

For the full list of environment variables, refer to the '.env.local.example' file. If the environment variables are set for API keys, it will disable the input in the user settings.

Click "Deploy" and wait for your frontend to deploy.

Once deployed, you should be able to use your hosted instance of Chatbot UI via the URL Vercel gives you.

Contributing

We are working on a guide for contributing.

Issues

We are trying to restrict "Issues" to actual issues related to the codebase.

If you are having issues with things like setup, please refer to the "Discussions" page.

Issues unrelated to the codebase will be likely be closed immediately.

Contact

Message Mckay on Twitter/X

chatbot-ui's People

Contributors

mckaywrigley avatar mikodin avatar gijigae avatar im-calvin avatar gitgitgogogo avatar francofantini avatar berniecr avatar dino1729 avatar martianingreen avatar hikafeng avatar k-kit avatar sebiweise avatar tim13246879 avatar younes-io avatar burnworks avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.