---
sidebar_position: 3
title: "Events"
---
# π Events: Using `__event_emitter__` and `__event_call__` in Open WebUI
Open WebUI's plugin architecture is not just about processing input and producing outputβ**it's about real-time, interactive communication with the UI and users**. To make your Tools, Functions, and Pipes more dynamic, Open WebUI provides a built-in event system via the `__event_emitter__` and `__event_call__` helpers.
This guide explains **what events are**, **how you can trigger them** from your code, and **the full catalog of event types** you can use (including much more than just `"input"`).
---
## π What Are Events?
**Events** are real-time notifications or interactive requests sent from your backend code (Tool, or Function) to the web UI. They allow you to update the chat, display notifications, request confirmation, run UI flows, and more.
- Events are sent using the `__event_emitter__` helper for one-way updates, or `__event_call__` when you need user input or a response (e.g., confirmation, input, etc.).
**Metaphor:**
Think of Events like push notifications and modal dialogs that your plugin can trigger, making the chat experience richer and more interactive.
---
## π Availability
### Native Python Tools & Functions
Events are **fully available** for native Python Tools and Functions defined directly in Open WebUI using the `__event_emitter__` and `__event_call__` helpers.
### External Tools (OpenAPI & MCP)
External tools can emit events via a **dedicated REST endpoint**. Open WebUI passes the following headers to all external tool requests when `ENABLE_FORWARD_USER_INFO_HEADERS=True` is set:
| Header | Description |
|--------|-------------|
| `X-Open-WebUI-Chat-Id` | The chat ID where the tool was invoked |
| `X-Open-WebUI-Message-Id` | The message ID associated with the tool call |
Your external tool can use these headers to emit events back to the UI via:
```
POST /api/v1/chats/{chat_id}/messages/{message_id}/event
```
See [External Tool Events](#-external-tool-events) below for details.
---
## π§° Basic Usage
### Sending an Event
You can trigger an event anywhere inside your Tool, or Function by calling:
```python
await __event_emitter__(
{
"type": "status", # See the event types list below
"data": {
"description": "Processing started!",
"done": False,
"hidden": False,
},
}
)
```
You **do not** need to manually add fields like `chat_id` or `message_id`βthese are handled automatically by Open WebUI.
### Interactive Events
When you need to pause execution until the user responds (e.g., confirm/cancel dialogs, code execution, or input), use `__event_call__`:
```python
result = await __event_call__(
{
"type": "input", # Or "confirmation", "execute"
"data": {
"title": "Please enter your password",
"message": "Password is required for this action",
"placeholder": "Your password here",
},
}
)
# result will contain the user's input value
```
:::tip Configurable Timeout
By default, `__event_call__` waits up to **300 seconds** (5 minutes) for a user response before timing out with an exception. This timeout is configurable via the [`WEBSOCKET_EVENT_CALLER_TIMEOUT`](/reference/env-configuration#websocket_event_caller_timeout) environment variable. Increase this value if your users need more time to fill out forms, make decisions, or complete complex interactions.
:::
---
## π Event Payload Structure
When you emit or call an event, the basic structure is:
```json
{
"type": "event_type", // See full list below
"data": { ... } // Event-specific payload
}
```
Most of the time, you only set `"type"` and `"data"`. Open WebUI fills in the routing automatically.
---
## π Full List of Event Types
Below is a comprehensive table of **all supported `type` values** for events, along with their intended effect and data structure. (This is based on up-to-date analysis of Open WebUI event handling logic.)
| type | When to use | Data payload structure (examples) |
| -------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `status` | Show a status update/history for a message | `{description: ..., done: bool, hidden: bool}` |
| `chat:completion` | Provide a chat completion result | (Custom, see Open WebUI internals) |
| `chat:message:delta`,
`message` | Append content to the current message | `{content: "text to append"}` |
| `chat:message`,
`replace` | Replace current message content completely | `{content: "replacement text"}` |
| `chat:message:files`,
`files` | Set or overwrite message files (for uploads, output) | `{files: [...]}` |
| `chat:title` | Set (or update) the chat conversation title | Topic string OR `{title: ...}` |
| `chat:tags` | Update the set of tags for a chat | Tag array or object |
| `source`,
`citation` | Add a source/citation, or code execution result | For code: See [below.](/features/extensibility/plugin/development/events#source-or-citation-and-code-execution) |
| `notification` | Show a notification ("toast") in the UI | `{type: "info" or "success" or "error" or "warning", content: "..."}` |
| `confirmation`
(needs `__event_call__`) | Ask for confirmation (OK/Cancel dialog) | `{title: "...", message: "..."}` |
| `input`
(needs `__event_call__`) | Request simple user input ("input box" dialog) | `{title: "...", message: "...", placeholder: "...", value: ..., type: "password"}` (type is optional) |
| `execute`
(`__event_call__` or `__event_emitter__`) | Run JavaScript in the user's browser. Use `__event_call__` to get a return value, or `__event_emitter__` for fire-and-forget | `{code: "...javascript code..."}` |
| `chat:message:favorite` | Update the favorite/pin status of a message | `{"favorite": bool}` |
**Other/Advanced types:**
- You can define your own types and handle them at the UI layer (or use upcoming event-extension mechanisms).
### β Details on Specific Event Types
### `status`
Show a status/progress update in the UI:
```python
await __event_emitter__(
{
"type": "status",
"data": {
"description": "Step 1/3: Fetching data...",
"done": False,
"hidden": False,
},
}
)
```
#### The `done` Field
The `done` field controls the **shimmer animation** on the status text in the UI:
| `done` value | Visual effect |
|---|---|
| `false` (or omitted) | Status text has a **shimmer/loading animation** β indicates ongoing processing |
| `true` | Status text appears **static** β indicates the step is complete |
The backend does not inspect `done` at all β it simply saves the value and forwards it to the frontend. The shimmer effect is purely a frontend visual cue.
:::warning Always Emit a Final `done: True`
If you emit status events, always send at least one with `done: True` at the end of your status sequence. Without it, the last status item keeps its shimmer animation indefinitely, making it look like processing never finished β even after the response is complete.
```python
# β
Correct pattern
await __event_emitter__({"type": "status", "data": {"description": "Fetching data...", "done": False}})
# ... do work ...
await __event_emitter__({"type": "status", "data": {"description": "Complete!", "done": True}})
# β οΈ Broken pattern β shimmer never stops
await __event_emitter__({"type": "status", "data": {"description": "Fetching data...", "done": False}})
# ... do work, return result, but never sent done: True
```
:::
#### The `hidden` Field
When `hidden` is `true`, the status is saved to `statusHistory` but **not shown** in the current status display. This is useful for internal status tracking that shouldn't be visible to the user.
Additionally, when `message.content` is empty and the last status has `hidden: true` (or no status exists at all), the frontend shows a skeleton loader instead of the status bar β so hidden statuses don't replace the loading indicator.
---
### `chat:message:delta` or `message`
**Streaming output** (append text):
```python
await __event_emitter__(
{
"type": "chat:message:delta", # or simply "message"
"data": {
"content": "Partial text, "
},
}
)
# Later, as you generate more:
await __event_emitter__(
{
"type": "chat:message:delta",
"data": {
"content": "next chunk of response."
},
}
)
```
---
### `chat:message` or `replace`
**Set (or replace) the entire message content:**
```python
await __event_emitter__(
{
"type": "chat:message", # or "replace"
"data": {
"content": "Final, complete response."
},
}
)
```
---
### `files` or `chat:message:files`
**Attach or update files:**
```python
await __event_emitter__(
{
"type": "files", # or "chat:message:files"
"data": {
"files": [
# Open WebUI File Objects
]
},
}
)
```
---
### `chat:title`
**Update the chat's title:**
```python
await __event_emitter__(
{
"type": "chat:title",
"data": {
"title": "Market Analysis Bot Session"
},
}
)
```
---
### `chat:tags`
**Update the chat's tags:**
```python
await __event_emitter__(
{
"type": "chat:tags",
"data": {
"tags": ["finance", "AI", "daily-report"]
},
}
)
```
---
### `source` or `citation` (and code execution)
**Add a reference/citation:**
```python
await __event_emitter__(
{
"type": "source", # or "citation"
"data": {
# Open WebUI Source (Citation) Object
}
}
)
```
**For code execution (track execution state):**
```python
await __event_emitter__(
{
"type": "source",
"data": {
# Open WebUI Code Source (Citation) Object
}
}
)
```
---
### `notification`
**Show a toast notification:**
```python
await __event_emitter__(
{
"type": "notification",
"data": {
"type": "info", # "success", "warning", "error"
"content": "The operation completed successfully!"
}
}
)
```
---
### `chat:message:favorite`
**Update the favorite/pin status of a message:**
```python
await __event_emitter__(
{
"type": "chat:message:favorite",
"data": {
"favorite": True # or False to unpin
}
}
)
```
**What this does exactly:**
This event forces the Open WebUI frontend to update the "favorite" state of a message in its local cache. Without this emitter, if an **Action Function** modifies the `message.favorite` field in the database directly, the frontend (which maintains its own state) might overwrite your change during its next auto-save cycle. This emitter ensures the UI and database stay perfectly in sync.
:::note Designed for Actions
While this event can technically be emitted from any plugin type (tools, pipes, filters), it is **designed for and meaningful in Actions**. Actions operate on existing messages and can modify the database directly. From a pipe or tool, emitting this event would update the frontend state temporarily, but unless the plugin also wrote to the database, the change would be lost on the next chat auto-save.
:::
**Where it appears:**
* **Message Toolbar**: When set to `True`, the "Heart" icon beneath the message will fill in, indicating it is favorited.
* **Chat Overview**: Favorited messages (pins) are highlighted in the conversation overview, making it easier for users to locate key information later.
#### Example: "Pin Message" Action
For a practical implementation of this event in a real-world plugin, see the **[Pin Message Action on Open WebUI Community](https://openwebui.com/posts/pin_message_action_143594d1)**. This action demonstrates how to toggle the favorite status in the database and immediately sync the UI using the `chat:message:favorite` event.
---
### `confirmation` (**requires** `__event_call__`)
**Show a confirm dialog and get user response:**
```python
result = await __event_call__(
{
"type": "confirmation",
"data": {
"title": "Are you sure?",
"message": "Do you really want to proceed?"
}
}
)
if result: # or check result contents
await __event_emitter__({
"type": "notification",
"data": {"type": "success", "content": "User confirmed operation."}
})
else:
await __event_emitter__({
"type": "notification",
"data": {"type": "warning", "content": "User cancelled."}
})
```
---
### `input` (**requires** `__event_call__`)
**Prompt user for text input:**
```python
result = await __event_call__(
{
"type": "input",
"data": {
"title": "Enter your name",
"message": "We need your name to proceed.",
"placeholder": "Your full name"
}
}
)
user_input = result
await __event_emitter__(
{
"type": "notification",
"data": {"type": "info", "content": f"You entered: {user_input}"}
}
)
```
#### Masked / Password Input
To hide sensitive input (e.g., API keys, passwords), set `type` to `"password"` in the data payload. The input field will be rendered as a masked password input with a show/hide toggle:
```python
result = await __event_call__(
{
"type": "input",
"data": {
"title": "Enter API Key",
"message": "Your API key is required for this integration.",
"placeholder": "sk-...",
"type": "password"
}
}
)
```
:::tip
This uses the same `SensitiveInput` component used for user valve password fields, providing a familiar "eye" icon toggle for showing/hiding the value.
:::
---
### `execute` (works with both `__event_call__` and `__event_emitter__`)
**Run JavaScript directly in the user's browser.**
Unlike `confirmation` and `input`, the `execute` event works with **both** helpers:
| Helper | Behavior | Use when |
|---|---|---|
| `__event_call__` | Runs JS and **waits for the return value** (two-way) | You need the result back in Python (e.g., reading `localStorage`, detecting browser state) |
| `__event_emitter__` | Runs JS **fire-and-forget** (one-way) | You don't need the result (e.g., triggering a file download, manipulating the DOM) |
#### Two-way example (with `__event_call__`)
```python
result = await __event_call__(
{
"type": "execute",
"data": {
"code": "return document.title;",
}
}
)
await __event_emitter__(
{
"type": "notification",
"data": {
"type": "info",
"content": f"Page title: {result}"
}
}
)
```
#### Fire-and-forget example (with `__event_emitter__`)
```python
# Trigger a blob download β no return value needed
try:
await __event_emitter__(
{
"type": "execute",
"data": {
"code": """
(function() {
const blob = new Blob([data], {type: 'application/octet-stream'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.bin';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);
a.remove();
})();
"""
}
}
)
except Exception:
pass
```
:::tip iOS PWA compatibility
On iOS Safari (especially in PWA / standalone mode), using `__event_call__` for blob downloads can fail with a `"TypeError: Load failed"` error β the two-way response channel breaks when the browser processes the download. Using `__event_emitter__` (fire-and-forget) avoids this issue entirely, since no response channel is needed.
If your `execute` code triggers a file download and you don't need a return value, prefer `__event_emitter__` for maximum cross-platform compatibility.
:::
#### How It Works
The `execute` event runs JavaScript **directly in the main page context** using `new Function()`. This means:
- It runs with **full access** to the page's DOM, cookies, localStorage, and session
- It is **not sandboxed** β there are no iframe restrictions
- It can manipulate the Open WebUI interface directly (show/hide elements, read form data, trigger downloads)
- The code runs as an async function, so you can use `await` and `return` a value back to the backend (when using `__event_call__`)
:::tip Frontend Automation
Because `execute` runs in the main page context with full DOM access, you can use it to **automate virtually anything on the Open WebUI frontend**: click buttons, fill input fields, navigate between pages, read page state, trigger downloads, interact with the model selector, submit messages on behalf of the user, and more. Think of it as a remote control for the browser UI β if a user can do it manually, your function can do it programmatically via `execute`.
:::
#### Example: Display a Custom Form
```python
result = await __event_call__(
{
"type": "execute",
"data": {
"code": """
return new Promise((resolve) => {
const overlay = document.createElement('div');
overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:9999';
overlay.innerHTML = `