From 6906343e9fcbd952c72d5b4cfb744060d304c610 Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Thu, 25 Sep 2025 21:58:54 +0200
Subject: [PATCH] Update development.mdx
---
docs/features/plugin/tools/development.mdx | 100 +++++++++++++++++++++
1 file changed, 100 insertions(+)
diff --git a/docs/features/plugin/tools/development.mdx b/docs/features/plugin/tools/development.mdx
index 381fd980..d7fb975d 100644
--- a/docs/features/plugin/tools/development.mdx
+++ b/docs/features/plugin/tools/development.mdx
@@ -289,6 +289,106 @@ async def test_function(
```
+### Rich UI Element Embedding
+
+Both External and Built-In Tools now support rich UI element embedding, allowing tools to return HTML content and interactive iframes that display directly within chat conversations. This feature enables tools to provide sophisticated visual interfaces, interactive widgets, charts, dashboards, and other rich web content.
+
+When a tool returns an `HTMLResponse` with the appropriate headers, the content will be embedded as an interactive iframe in the chat interface rather than displayed as plain text.
+
+#### Basic Usage
+
+To embed HTML content, your tool should return an `HTMLResponse` with the `Content-Disposition: inline` header:
+
+```python
+from fastapi.responses import HTMLResponse
+
+def create_visualization_tool(self, data: str) -> HTMLResponse:
+ """
+ Creates an interactive data visualization that embeds in the chat.
+
+ :param data: The data to visualize
+ """
+ html_content = """
+
+
+
+ Data Visualization
+
+
+
+
+
+
+
+ """
+
+ headers = {"Content-Disposition": "inline"}
+ return HTMLResponse(content=html_content, headers=headers)
+```
+
+#### Advanced Features
+
+The embedded iframes support auto-resizing and include configurable security settings. The system automatically handles:
+
+- **Auto-resizing**: Embedded content automatically adjusts height based on its content
+- **Cross-origin communication**: Safe message passing between the iframe and parent window
+- **Security sandbox**: Configurable security restrictions for embedded content
+
+#### Security Considerations
+
+When embedding external content, several security options can be configured through the UI settings:
+
+- `iframeSandboxAllowForms`: Allow form submissions within embedded content
+- `iframeSandboxAllowSameOrigin`: Allow same-origin requests (use with caution)
+- `iframeSandboxAllowPopups`: Allow popup windows from embedded content
+
+#### Use Cases
+
+Rich UI embedding is perfect for:
+
+- **Interactive dashboards**: Real-time data visualization and controls
+- **Form interfaces**: Complex input forms with validation and dynamic behavior
+- **Charts and graphs**: Interactive plotting with libraries like Plotly, D3.js, or Chart.js
+- **Media players**: Video, audio, or interactive media content
+- **Custom widgets**: Specialized UI components for specific tool functionality
+- **External integrations**: Embedding content from external services or APIs
+
+#### External Tool Example
+
+For external tools served via HTTP endpoints:
+
+```python
+@app.post("/tools/dashboard")
+async def create_dashboard():
+ html = """
+
+
System Dashboard
+
+
+
+
+ """
+
+ return HTMLResponse(
+ content=html,
+ headers={"Content-Disposition": "inline"}
+ )
+```
+
+The embedded content automatically inherits responsive design and integrates seamlessly with the chat interface, providing a native-feeling experience for users interacting with your tools.
+
## External packages
In the Tools definition metadata you can specify custom packages. When you click `Save` the line will be parsed and `pip install` will be run on all requirements at once.