Skip to main content

Direct Connection

Deep Chat is preconfigured to connect to popular AI APIs right out of the box.
Depending on the service you choose component assets such as buttons and intro panel will automatically be changed to suit the chosen service. Their configuration can still be overwitten manually.

Video demo
caution

The directConnection and key properties are intended to be used for prototyping purposes ONLY and should not be deployed to a public website as their values can be accessed in the browser. Before going live, switch to using the connect property to connect to your server. Read more about this in Connect and check examples.

directConnection​

Types​

Shared types for the directConnection property.

APIKey​

  • Type: {key?: string, validateKeyProperty?: boolean}

These object properties are used to load up the chat view without the user having to insert the API key.
key is the target service's API key required for authentication.
validateKeyProperty is used to validate the value that is set for the key property. This will render a loading circle before the chat view is loaded up during the validation period.

caution

This object is intended to be used for prototyping purposes ONLY and should not be deployed to an environment as it can be accessed in the browser. Before going live, use the connect property in combination with your own service to safely use your key there. Read more about this in Connect and check examples.

Key Example​

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
></deep-chat>

Validation Example​

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "validateKeyProperty": true,
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
></deep-chat>