Connecting the Chat component to OpenAI

This tutorial illustrates how to create an OpenAI chatbot using the Chat component within a Skuid page.

Prerequisites

To set up an OpenAI data source, you’ll need to enter your API key. Keys can be generated in the OpenAI user settings screen.

Create an OpenAI data source

  1. Navigate to Data sources.

  2. Click Create.

  3. Set the general information:

    • Type: OpenAI
    • Name: ChatGPT

  4. Click Next.

  5. Set Authentication method to API Key Authentication.

  6. Enter your API key. This can be found in the OpenAI user settings screen.

  7. In the Common request headers section, click the box icon in the object, then click Append.

  8. Add a key-value pair that includes the $Auth merge variable:
    • Key: Authorization
    • Value: Bearer {{$Auth.API_Key}}

  9. Click Save.

Add and connect the Chat component

  1. Create a new Skuid page, or open an existing one.
  2. Add a Chat component to the canvas.
  3. Set the component’s properties:
    • Chat source: Data source response
    • Data source: Select the data source configured above.
    • Language model: Select one of OpenAI’s available models. One of the most common general use models is gpt-4.

The rest of the component’s properties are optional, but can be useful in tailoring your end users’ experience.

Preview the page to see the component’s functionality.