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

• Type: {
       assemblyAI?: {AssemblyAI, APIKey},
       azure?: {Azure, APIKey},
       bigModel?: {BigModel, APIKey},
       claude?: {Claude, APIKey},
       cohere?: {Cohere, APIKey},
       deepSeek?: {DeepSeek, APIKey},
       gemini?: {Gemini, APIKey},
       groq?: {Groq, APIKey},
       huggingFace?: {HuggingFace, APIKey},
       kimi?: {Kimi, APIKey},
       miniMax?: {MiniMax, APIKey},
       mistral?: {Mistral, APIKey},
       ollama?: {Ollama},
       openAI?: {OpenAI, APIKey},
       openRouter?: {OpenRouter, APIKey},
       perplexity?: {Perplexity, APIKey},
       qwen?: {Qwen, APIKey},
       stabilityAI?: {StabilityAI, APIKey},
       together?: {Together, APIKey},
       x?: {X, APIKey}
  }

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

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

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

Validation Example

Sample code

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

Full code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

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

Shared Types

Types used across multiple direct connection services:

FunctionsDetails

• Type: {name: string, arguments: string}[]

Array of objects containing information about the functions that the model wants to call.
name is the name of the target function.
arguments is a stringified JSON containing properties based on the parameters defined for the tool.