OpenAI
OpenAI
Properties used to connect to OpenAI.
openAI
- Type: {
chat?: Chat,
realtime?: OpenAIRealtime,
completions?: Completions,
images?: Images,
textToSpeech?: TextToSpeech,
speechToText?: SpeechToText
} - Default: {chat: true}
Service Types
Chat
- Type:
true| {
model?: string,
instructions?: string,
background?: boolean,
max_output_tokens?: number,
reasoning?: {effort?: string, summary?: string},
safety_identifier?: string,
service_tier?: string,
store?: boolean,
temperature?: number,
top_p?: number,
truncation?: string,
conversation?: boolean | string,
conversationLoadLimit?: number,
ChatFunctions
} - Default: {model: "gpt-5.4"}
Connect to OpenAI's new Responses API. You can set this property to true or configure it using an object:
model is the name of the model to be used by the API. Check /v1/responses for more.
instructions guides the model on desired responses (equivalent to system message).
background indicates whether to run the response generation in the background.
max_output_tokens is the maximum number of output tokens for a response.
reasoning enables reasoning mode with optional effort level and summary configuration.
safety_identifier is an identifier for safety monitoring.
service_tier specifies the service tier to use.
store indicates whether to store the conversation.
temperature is used for sampling; between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused.
top_p is an alternative to sampling with temperature, where the model considers the results of the tokens with top probability mass. So 0.1 means only the tokens
comprising the top 10% probability mass are considered.
truncation defines how to handle context length limits.
conversation enables conversation mode. Set to true to create a new conversation or provide a conversation id string to continue an existing one.
conversationLoadLimit limits the number of previous messages loaded when using conversation mode (default: 50).
ChatFunctions encompasses properties used for function calling.
Basic Example
- Sample code
- Full code
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"chat": {"instructions": "Assist me with anything you can", "max_output_tokens": 2000}
}
}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"chat": {"max_output_tokens": 2000, "instructions": "Assist me with anything you can"}
}
}'
style="border-radius: 8px"
></deep-chat>
Use stream to stream the AI responses.
When using conversation, the returned MessageContent contains a hidden property called _sessionId which
is the conversation id that can be used to continue the conversation on a new session.
Files Example
You can send image and audio files in your conversation. Make sure you are using the correct model for each by checking model modalities.
- Sample code
- Full code
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"chat": {"model": "gpt-4.1"}
}}'
images="true"
camera="true"
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"chat": {"model": "gpt-4.1"}
}}'
images="true"
camera="true"
style="border-radius: 8px"
textInput='{"styles": {"container": {"width": "77%"}}}'
></deep-chat>
When sending files we advise you to set maxMessages to 1 to send less data and reduce costs.
microphone is not supported for audio chat, instead we recommend using the realtime sts API.
Images
Connect to OpenAI's Images API.
Set this property to true or use either of the Dall-e-2 or Dall-e-3 objects.
You can automatically call any of the following three APIs by combining different inputs:
- Create Image - Send text.
- Create Image Variation - Upload and send an image with no text.
- Create Image Edit - Upload an image and add text. You can also upload a second image to be used as a mask.
Example
- Sample code
- Full code
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"images": {"n": 1, "size": "1024x1024", "response_format": "url"}
}
}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"images": {"n": 2, "size": "1024x1024", "response_format": "url"}
}
}'
style="border-radius: 8px"
></deep-chat>
Dall-e-2
- Type: {
model?: "dall-e-2",
n?: number,
size?:"256x256"|"512x512"|"1024x1024",
response_format?:"url"|"b64_json",
user?: number
} - Default: {model: "dall-e-2", size: "1024x1024"}
model is the name of the specific model to be used by the API.
n is the number of images to generate. Ranges between 1 and 10.
size is the pixel dimensions of the generated images.
response_format is the format in which the generated images are returned.
user is a unique identifier representing your end-user, which can help OpenAI to monitor and detect abuse. More info can be found here.
Dall-e-3
- Type: {
model: "dall-e-3",
size?:"1024x1024"|"1792x1024"|"1024x1792",
response_format?:"url"|"b64_json",
user?: number
} - Default: {size: "1024x1024"}
model is the name of the specific model to be used by the API.
size is the pixel dimensions of the generated images.
response_format is the format in which the generated images are returned.
user is a unique identifier representing your end-user, which can help OpenAI to monitor and detect abuse. More info can be found here.
TextToSpeech
- Type:
true| {
model?: string,
voice?: string,
speed?: number
} - Default: {model: "tts-1", voice: "alloy", speed: 1}
Connect to OpenAI's Text To Speech API.
You can set this property to true or configure it using an object:
model defines the target model used by the API. Check /v1/audio/speech for more.
voice is the name of the voice used in the generated audio.
speed defines speed of the generated audio. It accepts a value between 0.25 and 4.0.
Example
- Sample code
- Full code
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"textToSpeech": {"voice": "echo"}
}
}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"textToSpeech": {"voice": "echo"}
}
}'
style="border-radius: 8px"
></deep-chat>
SpeechToText
- Type:
true| {
model?: "whisper-1",
temperature?: number,
language?: string,
type?:"transcription" | "translation"
} - Default: {model: "whisper-1", type: "transcription"}
Connect to OpenAI's Speech To Text API.
You can set this property to true or configure it using an object:
model is the name of the model to use. "whisper-1" is currently the only one available.
temperature is used for sampling; between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused.
language is the language used the input audio. Supplying the input language in ISO-639-1 format will improve accuracy and latency. (Only used for transcription based API).
type is used to toggle between the transcription and the translation APIs.
Note that translation can only attempt to translate audio into English.
Example
- Sample code
- Full code
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"speechToText": {"model": "whisper-1", "temperature": 0.3, "language": "en", "type": "transcription"}
}
}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openAI": {
"key": "placeholder key",
"audio": {"model": "whisper-1", "temperature": 0.3, "language": "en", "type": "transcription"}
}
}'
style="border-radius: 8px"
></deep-chat>
Functions
Examples for OpenAI's Function Calling features:
Chat Functions
- Type: {
tools: Tools,
tool_choice?:"auto"|{type: "function", function: {name: string}},
function_handler: FunctionHandler
}
Configure the responses API to call your functions via the OpenAI Function calling API.
This is particularly useful if you want the model to analyze user's requests, check whether a function should be called, extract the relevant information
from their text and return it all in a standardized response for you to act on.
tools defines the functions that the model can signal to call based on the user's text.
tool_choice controls which (if any) function should be called.
function_handler is the actual function that is called with the model's instructions.
- Sample code
- Full code
// using JavaScript for a simplified example
chatElementRef.directConnection = {
openAI: {
chat: {
tools: [
{
type: 'function',
name: 'get_current_weather',
description: 'Get the current weather in a given location',
parameters: {
type: 'object',
properties: {
location: {
type: 'string',
description: 'City and country e.g. Bogotá, Colombia',
},
units: {
type: 'string',
enum: ['celsius', 'fahrenheit'],
description: 'Units the temperature will be returned in.',
},
},
required: ['location', 'units'],
additionalProperties: false,
},
strict: true,
},
],
function_handler: (functionsDetails) => {
return functionsDetails.map((functionDetails) => {
return {
response: getCurrentWeather(functionDetails.arguments),
};
});
},
},
key: 'placeholder-key',
},
};
// using JavaScript for a simplified example
chatElementRef.directConnection = {
openAI: {
chat: {
tools: [
{
type: 'function',
name: 'get_current_weather',
description: 'Get the current weather in a given location',
parameters: {
type: 'object',
properties: {
location: {
type: 'string',
description: 'City and country e.g. Bogotá, Colombia',
},
units: {
type: 'string',
enum: ['celsius', 'fahrenheit'],
description: 'Units the temperature will be returned in.',
},
},
required: ['location', 'units'],
additionalProperties: false,
},
strict: true,
},
],
function_handler: (functionsDetails) => {
return functionsDetails.map((functionDetails) => {
return {
response: getCurrentWeather(functionDetails.arguments),
};
});
},
},
key: 'placeholder-key',
},
};
function getCurrentWeather(location) {
location = location.toLowerCase();
if (location.includes('tokyo')) {
return JSON.stringify({location, temperature: '10', unit: 'celsius'});
} else if (location.includes('san francisco')) {
return JSON.stringify({location, temperature: '72', unit: 'fahrenheit'});
} else {
return JSON.stringify({location, temperature: '22', unit: 'celsius'});
}
}
Tools
- Type: {
type: "function",
name: string,
description?: string,
parameters: JSONSchema,
strict: true
}[]
An array describing tools that the model may call.
type should be set to "function".
name is the name of a function.
description is used by the model to understand what the function does and when it should be called.
parameters are arguments that the function accepts defined in a JSON Schema (see example above).
strict enables strict mode for function calling.
Checkout the following guide for more about function calling.
FunctionHandler
- Type: (
functionsDetails: FunctionsDetails) =>{response: string}[]|{text: string}
The actual function that the component will call if the model wants a response from tools functions.
functionsDetails contains information about what tool functions should be called.
This function should either return an array of JSONs containing a response property for each tool function (in the same order as in
functionsDetails) which will feed it back into the model to finalise a response, or return a JSON containing
text which will immediately display it in the chat and not send any details to the model.