With this project you can use "Chatbot-UI" as user interface for your Rivet projects! This allows you to create complex LLM based processes (e.g. a teachable assistant) in a visual programming interface and interact with it via a beautiful chat UI. Chatbot-UI also keeps all the conversation history, so we do not need to care about that!
Features:
- Creates an OpenAI SDK compatible API for any rivet project
- Captures streaming output from a configured node
- Streams the output
- Transforms messages, before sending them to the rivet graph
- Beautiful Chat-UI (provided by Chatbot-UI)
- Chatbot-UI features: Multiple chats with conversation history, Integrated RAG etc.
- Added plugin support as well as access to environment variables (see #3 Additional features)
- Free Github account (https://github.com/join)
- Free Supabase account (https://supabase.com/)
- Free railway account (https://railway.app/)
Click the button above or go to https://railway.app/template/XjMVyQ?referralCode=Bc2Iiw and click "Deploy Now"
Watch my youtube video explaining the process:
Note: Written instructions can be found on the lower part of the template page
For simplicity all is explained for Visual Studio Code. You can of course run it in other IDEs.
- Install Visual Studio Code: https://code.visualstudio.com/download
- Install node.js + node package manager: https://nodejs.org/en/download/ (in the install process, make sure you also install npm package manager!)
- Install Github: https://desktop.github.com/
- Open terminal or command line
- Enter
git clone https://github.com/ai-made-approachable/rivet-chat-api.git
- Open the folder in Visual Studio Code (File -> Open Folder)
- Open "Terminal -> New Terminal" and enter
npm install - Go to /.vscode/ folder
- Rename "launch_sample.json" to "launch.json"
- Open "launch.json" and replace the value for OPEN_API_KEY with your OpenAI Key
Just press "Run -> Start Debugging" in Visual Studio Code. Continue with the "Chat setup". The URLs displayed are the endpoints to connect the chat to rivet-chat-api.
- Make sure your project file has an input of type "chat-message" and array checked (Type: chat-message[])
- Rename all "Chat" nodes you want to have streaming output to "output"
- Select a main graph in "Project" settings
- Add your file into the /rivet folder and remember the filename
If you want to use plugins, you need to import and register them first in graphManager.ts
Example for mongoDB Plugin
import rivetMongoDbPlugin from 'rivet-plugin-mongodb';
import * as Rivet from '@ironclad/rivet-node';
Rivet.globalRivetNodeRegistry.registerPlugin(rivetMongoDbPlugin(Rivet));
We are using "Chatbot-UI" as it is a very user friendly UI (similiar to ChatGPTs UI): https://github.com/mckaywrigley/chatbot-ui
- Install Docker: https://docs.docker.com/engine/install/
Note: This installation is a bit long, but it is a one time thing!
- Open terminal (MacOs) or command line (Windows)
git clone https://github.com/mckaywrigley/chatbot-ui.git- Navigate into the folder of the repository
cd chatbot-ui - Install dependencies
npm install - Install superbase:
npm install supabase - Make sure Docker is running
- Start Supabase
supabase start - Create file .env.local
cp .env.local.example .env.local - Open ".env.local" in Visual Studio Code (in chatbot-ui root folder)
- Get the required values by running
supabase status - Copy "API URL" value and insert it into "NEXT_PUBLIC_SUPABASE_URL"
- Copy "anon key" and insert it into "NEXT_PUBLIC_SUPABASE_ANON_KEY"
- Open
supabase/migrations/20240108234540_setup.sqlfile - Replace "service_role_key" with the value from
supabase statusand save
Note: Also see instructions on: https://github.com/mckaywrigley/chatbot-ui
- Make sure Docker is running
- Navigate to your "chatbot-ui" folder
- Enter
npm run chat - Navigate to the URL shown to you, usually: http://localhost:3000
- When you start "chatbot-ui" for the first time enter e-mail + password (don't worry, all stays locally on your pc)
- In the sidebar press on "Models" (Stars-Icon) and on "New Model"
- Enter any name
- Add the name of your graph e.g. "example.rivet-project" as model
- Enter
http://localhost:3100/as Base URL - Enter anything as API key
- Open the model selection in the top-right corner and select your custom model
- Have fun chatting
All environment variables are automatically available via the context node.
When you boot up the application, it will tell which plugins are supported and what environment variables need to set to make them work. As this might change often, this is easier than trying to keep this readme up-to-date.
Example:
Available Plugins and Required Environment Variables:
-----------------------------------------------------
Plugin: chroma
Activate with env var: USE_CHROMADB_PLUGIN (set to 'true' to enable)
Required env var for databaseUri: CHROMA_DATABASE_URI
-----------------------------------------------------
Note: I did not test every plugin if it works. Please contact me if there are issues.
You can send data to an "raise event" node with id "debugger" to log the data to the console. This is useful if you run the graphs in the cloud.
Generally you can potentially use any node as output, but currently only nodes that either stream the output (chat nodes) or provide a clear output value (e.g. text node, object node) are supported. All nodes that shall be made available need to be renamed to "output"
Non-Streaming output will still be streamed (but very quickly) by the rivet-chat-api for a better user experience.
If you are using the API from another domain you might run into CORS errors. To fix this you can add ACCESS_CONTROL_ALLOW_ORIGIN to the environment variables (e.g. "*")