OpenRouter
OpenRouter
Properties used to connect to OpenRouter.
openRouter
- Type:
true| {
model?: string,
models?: string[],
max_tokens?: number,
max_completion_tokens?: number,
stop?: string | string[],
system_prompt?: string,
tools?: OpenRouterTool[],
tool_choice?: OpenRouterToolChoice,
parallel_tool_calls?: boolean,
response_format?: OpenRouterResponseFormat,
reasoning?: OpenRouterReasoning,
function_handler?: FunctionHandler
} - Default: {model: "openai/gpt-4o"}
Connect to OpenRouter's Chat Completion 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 (e.g., "openai/gpt-3.5-turbo").
models is an optional list of fallback model identifiers used in order if the primary model is unavailable.
max_tokens limits the maximum number of tokens in the generated response (1 to model's context length).
max_completion_tokens is the newer alternative to max_tokens for capping the response length.
stop is a string or array of strings at which the model will stop generating further tokens.
system_prompt provides behavioral context and instructions to the model.
tools defines available function declarations for the model to call.
tool_choice controls whether and which tool the model should call.
parallel_tool_calls toggles whether the model may request multiple tool calls in parallel (defaults to true).
response_format constrains the model output (e.g. JSON or a specific JSON schema).
reasoning configures reasoning behavior for models that expose a thinking step.
function_handler enables function calling capabilities for tool use.
Example
- Sample code
- Full code
<deep-chat
directConnection='{
"openRouter": {
"key": "placeholder key",
"model": "openai/gpt-3.5-turbo",
"temperature": 0.7
}
}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openRouter": {
"key": "placeholder key",
"model": "openai/gpt-3.5-turbo",
"temperature": 0.7
}
}'
style="border-radius: 8px"
></deep-chat>
Use stream to stream the AI responses.
Vision Example
Upload images alongside your text prompts for visual understanding. You must use a model with vision capabilities.
- Sample code
- Full code
<deep-chat
directConnection='{
"openRouter": {
"key": "placeholder key",
"model": "openai/gpt-4o"
}
}'
images="true"
camera="true"
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openRouter": {
"key": "placeholder key",
"model": "openai/gpt-4o"
}
}'
images="true"
camera="true"
style="border-radius: 8px"
textInput='{"styles": {"container": {"width": "77%"}}}'
></deep-chat>
When sending images we advise you to set maxMessages to 1 to send less data and reduce costs.
Audio Example
Upload audio files alongside your text prompts for speech understanding. You must use a model with audio capabilities.
- Sample code
- Full code
<deep-chat
directConnection='{
"openRouter": {
"key": "placeholder key",
"model": "openai/gpt-4oo-audio-preview"
}
}'
audio="true"
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
directConnection='{
"openRouter": {
"key": "placeholder key",
"model": "openai/gpt-4oo-audio-preview"
}
}'
audio="true"
style="border-radius: 8px"
></deep-chat>
Tool Calling
OpenRouter supports function calling functionality:
OpenRouterTool
- Type: {
type: "function",
function:{
name: string,
description: string,
parameters: object
}}
Array describing tools that the model may call.
type must be "function" for function tools.
name is the name of the tool function.
description explains what the tool does and when it should be used.
parameters defines the parameters the tool accepts in JSON Schema format.
OpenRouterToolChoice
- Type:
"auto"|"none"|"required"| {
type: "function",
function: {name: string}
}
Controls how the model selects tools.
"auto" lets the model decide when to call a tool.
"none" prevents the model from calling any tool.
"required" forces the model to call at least one tool.
An object form forces the model to call the named function.
OpenRouterResponseFormat
- Type: {
type: "text" | "json_object" | "json_schema",
json_schema?:{
name: string,
description?: string,
schema: object,
strict?: boolean
}
}
Constrains the model's response shape.
type selects the format: plain text, an arbitrary JSON object, or a value matching a JSON Schema.
json_schema is required when type is "json_schema" and describes the desired shape.
OpenRouterReasoning
- Type: {
effort?: "low" | "medium" | "high",
max_tokens?: number,
exclude?: boolean,
enabled?: boolean
}
Configures reasoning behavior for models that support a separate thinking step.
effort is a high-level knob for how much reasoning to perform.
max_tokens caps the token budget allocated to reasoning.
exclude hides the reasoning tokens from the returned response.
enabled toggles reasoning on or off when the model supports it.
FunctionHandler
- Type: (
functionsDetails: FunctionsDetails) =>{response: string}[]|{text: string}
The actual function that the component will call if the model wants to use tools.
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 finalize a response, or return a JSON containing text which will immediately display it in the chat.
Example
- Sample code
- Full code
// using JavaScript for a simplified example
chatElementRef.directConnection = {
openRouter: {
tools: [
{
type: 'function',
function: {
name: 'get_current_weather',
description: 'Get the current weather in a given location',
parameters: {
type: 'object',
properties: {
location: {
type: 'string',
description: 'The city and state, e.g. San Francisco, CA',
},
unit: {type: 'string', enum: ['celsius', 'fahrenheit']},
},
required: ['location'],
},
},
},
],
function_handler: (functionsDetails) => {
return functionsDetails.map((functionDetails) => {
return {
response: getCurrentWeather(functionDetails.arguments),
};
});
},
key: 'placeholder-key',
},
};
// using JavaScript for a simplified example
chatElementRef.directConnection = {
openRouter: {
tools: [
{
type: 'function',
function: {
name: 'get_current_weather',
description: 'Get the current weather in a given location',
parameters: {
type: 'object',
properties: {
location: {
type: 'string',
description: 'The city and state, e.g. San Francisco, CA',
},
unit: {type: 'string', enum: ['celsius', 'fahrenheit']},
},
required: ['location'],
},
},
},
],
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'});
}
}