Lab 09 Building a Chatbot

RE 519 Data Analytics and Visualization | Autumn 2025

In Lab 9, we will take the advantage of free access to Google’s Gemini and other AI products to process documents and build a simple chatbot.

Setting up Google AI Pro and Flowise

Google provides 1-year free access to its accurate model Gemini 3 Pro and advanced learning tools like NotebookLM, plus 2 TB storage. Please go to Gemini’s student page and get the offer. Note: you have to use your personal Google account instead of your UW or any company account.

We will also need Flowise to build the chatbot. It provides modular building blocks for you to build any agentic systems. Please also register for one account. There are many similar tools, such as Langflow and n8n.

API Key for Gemini

To connect Flowise (or any other AI tool) with Google’s Gemini models, you will need to create an API Key from Google AI Studio.

  1. Go to Google AI Studio and sign in with your personal Google account.
  2. On the left sidebar, click Dashboard, then API Keys.
  3. Click Create API key.
  4. Name your API key and create/choose a project.
  5. Google will generate a API key and we will use it later.
  6. (Optional) You may configure usage limits, API restrictions, or billing. Note: As free-tier users, we have some limits on API usage. You can check rate limit page.

Add Credentials in Flowise

Flowise requires us to add your API keys before using any LLM.

  1. Log in to Flowise and click Credentials on the left sidebar.
  2. Click Add Credential in the upper right corner.
  3. Select Google Generative AI.
  4. Name your credential and paste the API key Google provide.

Build an Assistant

  1. Go to Assistants on the left sidebar and click Custom Assistant.
  2. Add a new assistants and name it as you want.
  3. Select model (ChatGoogleGenerativeAI) and prepare the prompt (using other AI tool to write prompts would be helpful for each complex task).
  4. Connect credential we just added and select a model (in the example, gemini-2.5-flash-lite was used because it’s cheap and fast).
  5. Select temperature.
  6. Select max output tokens.
  7. Top probability / top k approach in generation (decoding) process.
  8. Set up safety, please refer to Google’s doc on safty settings.
  9. Decide whether to turn on thinking, please refer to Google’s doc on Gemini thinking.
  10. [Optional] Knowledge (Document Stores) - Retrieval Augmentation Generation (RAG). For more, please refer to Flowise’s doc on document stores.

Embed into a Website

We can easily add the chat widget to website. Just copy the provided widget script and paste it anywhere between the <body> and </body> tags of your HTML file or anywhere in a Rmd file. The following example adjust the appearance of the chatbox. You can refer to Flowise documentation on embed, or ask AI to adjust the appearance.

<script type="module">
  import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
  Chatbot.init({
    chatflowid: "a0f2417a-9c7b-41b4-8e9f-511ad2a14422",
    apiHost: "https://cloud.flowiseai.com",
    theme: {
      button: {
        backgroundColor: "#4B2E83",   // UW Purple
        right: 30,
        bottom: 50,
        size: "medium"
      },
      chatWindow: {
        title: "Course Agent RE 519",
        titleColor: "#FFFFFF",
        backgroundColor: "#ffffff",
        fontSize: 14,
        welcomeMessage: `Hello! Welcome to RE 519 Data Analytics and Visualization. I can provide information on course content, topics, requirements and gradings, and logistics. Please visit the course website at https://www.yuehaoyu.com/data-analytics-visualization/ for all course information. If you have any further questions, please feel free to ask.`,
        poweredByTextColor: "#F8F8FC",
        botMessage: {
          backgroundColor: "#fbfaff",
          textColor: "#000000"
        },
        userMessage: {
          backgroundColor: "#4B2E83",
          textColor: "#FFFFFF"
        },
        textInput: {
          placeholder: "Type your question",
          backgroundColor: "#ffffff",
          textColor: "#303235",
          sendButtonColor: "#4B2E83",
          maxChars: 100,
          maxCharsWarningMessage:
            "You exceeded the character limit. Please keep inputs under 100 characters."
        },
        footer: {
          textColor: "transparent",
          backgroundColor: "#FFFFFF"
        }
      },
      // Adds global CSS override
      customCSS: `
        .chatbot-container * {
          font-family:  'Avenir', 'Helvetica Neue', sans-serif !important;
        }
        .chatbot-window {
          border-radius: 16px !important;
          box-shadow: 0px 6px 18px rgba(0,0,0,0.12) !important;
        }
        .chatbot-message-bot {
          border-radius: 12px !important;
        }
        .chatbot-message-user {
          border-radius: 12px !important;
        }
        .chatbot-input {
          border-radius: 12px !important;
        }
      `
    }
  })
</script>

Acknowledgement

The materials are developed by Haoyu Yue based materials from Dr. Feiyang Sun at UC San Diego, Siman Ning and Christian Phillips at University of Washington, Dr. Charles Lanfear at University of Cambridge.