Chatbot UI

This is forked from Chatbot UI, an open source chat UI for AI models.

Running Locally

Please make sure you update the node.js to the latest version.

1. Clone Repo

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

2. Install Dependencies

npm i

3. Provide Pipeline Endpoint and Bearer Token

Create a .env.local file in the root of the repo with your pipeline endpoint and bearer token:

NEXT_PUBLIC_API_ENDPOINT=YOUR_ENDPOINT
NEXT_PUBLIC_BEARER_TOKEN=YOUR_TOKEN

4. Run App

There are two methods to run the application: using npm or Docker.

Using npm

To run the app with npm, execute the following command in your terminal:

npm run dev

This will start the application.

Using Docker

Alternatively, you can run the app using Docker. Follow these steps:

1. Create a docker image

Build a docker image by running the following command:

docker build .

2. Run the Docker Image

After you have successfully built the Docker image, you can run it using either its image ID or SHA256 digest.

docker run -p 3000:3000 {imageId/sha256}

Now you can run the chatbot at localhost:3000.

5. Use It

You should be able to start chatting. For better experience, please go to "Settings" -> "Theme" and select "light mode".

Customize UI

This interface allows users to personalize various aspects of their chatbot's appearance, including text elements and color schemes. Follow these steps to tailor your chatbot to your preferences.

1. Customizing Text Elements

You can modify the following text elements:

• Chatbot Title
• Chatbot Name

To make these changes:

• Navigate to the root folder of your project.
• Open the file named constants.config.js.
• Edit the values as shown in the example below:

const CONSTANTS = {
    chatbotTitle: "Chatbot Title",
    chatbotName: "Chatbot Name",
};

module.exports = CONSTANTS;

2. Customizing Color Scheme

You can adjust the color schemes for:

• Chatbot Name
• Sidebar
• Search Bar
• Conversation Box

To customize the colors:

• Go to the root folder of your project.
• Open the file tailwind.config.js.
• Locate the theme key and modify the color values under the colors and textColor sections as needed.

Here is an example:

// Additional code may be present above or below this snippet
  theme: {
    extend: {
      colors: {
        'sidebar': '#07224E',
        'conversation': '#53709E',
        'searchbar': '#141B38',
      },
      textColor: {
        'primary': '#1C3194',
      }
    },
  },
// Additional code may be present above or below this snippet