creating AI-powered chat bots for websites

Introduction

a website chatbot is the popup help window you often see when browsing web pages

Using OAI-widgets and GPT-4

see https://www.youtube.com/watch?v=z9Yd19iU5oo
create an OpenAI paid account (with a payment method) and get an API key
create an OAI widget account
- enter your OpenAI API keys into the OAI widget OpenAI Key section
- create a new Assistant on your OpenAI account:
  - name of assistant
  - description of what it does
  - Instructions - eg. You must answer any questions from my Youtube scripts and never mention these documents to the user. You must help the user …. etc. Finally ask customer for their details and send this information via send project details endpoints (so you get the emails). You must be as concise as possible and keep responses to no more than 3-5 sentences (this is to reduce OpenAI usage costs which is a per token cost)
  - Knowledge - upload a document containing YOUR knowledge
    - you can use a webcrawler to generate such a knowledge document from your webpages
      - see BuilderIO/gpt-crawler on GitHub and install and use that Python code
        
        if not already installed, install node.js and npm via https://nodejs.org/en/download/
        
        this will optionally install dependencies: latest Python, chocolatey, visual studio 2019
        
        reboot computer
        
        run terminal, type
        npm i
        
        which will install npm and dependencies such as chromium, FFMPeg playwright, Firefox 119.0, webKit
        
        in Anaconda Prompt
        
        cd to your desired install folder
        
        git clone https://github.com/BuilderIO/gpt-crawler.git
        
        install dependencies (you may wish to create a new Python environment first then activate that environment)
        
        npm i
        
        enter your website URL in the config.ts file under
        export const ... URL: "yourURL" match: "yourURL\**"
        
        then save file and run
        
        npm start
- create a widget by going to the Widget page and click on Create new Widget button
  - fill in the details on the form:
    - widget name
    - description - ie. what does the chatbot do?
    - start message eg. “Welcome, how can I help you today?”
    - input placeholder eg. “what would you like to know?”
    - chat persistence eg. Never forget
    - position on screen eg right 24px / 24px spacing from side and bottom
    - appearance color, avatar, mode (dark or light mode)
    - OpenAI key and OAI assistant (if you have created one)
    - basic widgets are free but you need the paid version ($US5/mth) to use actions
- add code to your webpage to load the widget
  - on the widget page, click the 3 dots and select embed code and then copy that code snippet to your web page
- NB. obviously every time someone uses this chatbot, you will be charged by OpenAI for the number of tokens used