Open WebUI

Open WebUI

Properties used to connect to Open WebUI.

openWebUI

• Type: true | {
       model?: string,
       system_prompt?: string,
       tool_ids?: string[],
       tools?: object[],
       function_handler?: FunctionHandler,
       files?: {type: "file"|"collection"; id: string}[]
  }
• Default: {model: "llama3.2"}

Connect to Open WebUI's Chat Completions 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. This should match a model available in your Open WebUI instance.
system_prompt provides behavioral context and instructions to the model.
tool_ids are IDs of tools configured in Open WebUI that should be available to the model.
tools array of function definitions that the model can call.
function_handler enables function calling capabilities for tool use.
files array of file or collection references from the Open WebUI knowledge base.

Example

Sample code

<deep-chat
  directConnection='{
    "openWebUI": {
      "key": "placeholder key",
      "model": "llama3.2:latest"
    }
  }'
></deep-chat>

Full code

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

<deep-chat
  directConnection='{
    "openWebUI": {
      "key": "placeholder key",
      "model": "llama3.2:latest"
    }
  }'
  style="border-radius: 8px"
></deep-chat>

info

Use stream to stream the AI responses.

Custom URL Example

By default, the connection uses http://localhost:3000/api/chat/completions. You can specify a custom URL using the connect property:

Sample code

<deep-chat
  directConnection='{"openWebUI": true}'
  connect='{"url": "https://your-openwebui-instance.com/api/chat/completions"}'
></deep-chat>

Full code

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

<deep-chat
  directConnection='{
    "openWebUI": {"key": "placeholder key"}
  }'
  connect='{"url": "https://your-openwebui-instance.com/api/chat/completions"}'
  style="border-radius: 8px"
></deep-chat>

Tool Calling

Open WebUI supports tool calling functionality:

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

// using JavaScript for a simplified example

chatElementRef.directConnection = {
  openWebUI: {
    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),
        };
      });
    },
  },
};

Full code

// using JavaScript for a simplified example

chatElementRef.directConnection = {
  openWebUI: {
    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'});
  }
}