Create Interface
Render custom HTML interfaces directly in chat using the mcp__noetect-ui__render_ui tool. Perfect for forms, charts, tables, dashboards, and interactive widgets.
Tool Usage
Tool: mcp__noetect-ui__render_ui Input: html: "<div class='card'><h2>Hello</h2></div>" # Required - HTML content (body only, no <html> wrapper) title: "My Widget" # Optional - header above the UI height: 300 # Optional - fixed height in pixels (default: auto-resize)
Theme Integration
The UI automatically inherits the app's current theme. Use CSS variables for consistent styling across light/dark modes.
Surface Colors (backgrounds)
Variable Usage
var(--surface-primary)
Main background
var(--surface-secondary)
Cards, elevated surfaces
var(--surface-tertiary)
Nested containers
var(--surface-accent)
Highlighted areas
var(--surface-muted)
Subtle backgrounds, code blocks
Content Colors (text)
Variable Usage
var(--content-primary)
Main text
var(--content-secondary)
Secondary text, labels
var(--content-tertiary)
Muted text, placeholders
var(--content-accent)
Highlighted text
Border Colors
Variable Usage
var(--border-default)
Standard borders
var(--border-accent)
Emphasized borders
Semantic Colors
Variable Usage
var(--semantic-primary)
Primary actions, links
var(--semantic-primary-foreground)
Text on primary background
var(--semantic-destructive)
Destructive actions, errors
var(--semantic-destructive-foreground)
Text on destructive background
var(--semantic-success)
Success states
var(--semantic-success-foreground)
Text on success background
Design Tokens
Variable Usage
var(--border-radius)
Standard corner radius
var(--shadow-sm)
Subtle shadow
var(--shadow-md)
Medium shadow
var(--shadow-lg)
Large shadow
Built-in Utility Classes
Text Classes
-
.text-primary
-
Main text color
-
.text-secondary
-
Secondary text color
-
.text-muted
-
Muted/tertiary text color
-
.text-accent
-
Accent text color
-
.text-success
-
Success color
-
.text-destructive
-
Error/destructive color
Background Classes
-
.bg-primary
-
Primary surface background
-
.bg-secondary
-
Secondary surface background
-
.bg-muted
-
Muted surface background
Container Classes
- .card
- Styled container with secondary background, border, border-radius, and 16px padding
Pre-styled Elements
These elements have default theme-aware styles applied automatically:
-
body - System font, 14px, primary text color, 12px padding
-
a - Primary semantic color
-
button - Secondary background, border, border-radius, hover state
-
button.primary - Primary semantic background with foreground text
-
button.destructive - Destructive semantic background with foreground text
-
input, select, textarea - Primary background, border, focus ring
-
table, th, td - Full width, border-bottom on rows
-
code - Monospace font, muted background, 2px/4px padding
-
pre - Monospace font, muted background, 12px padding, overflow scroll
Auto-Resize Behavior
By default, the UI auto-resizes to fit its content. The iframe:
-
Measures content height on load
-
Observes DOM mutations and resizes dynamically
-
Responds to window resize events
Set a fixed height parameter to disable auto-resize.
Examples
Simple Card
<div class="card"> <h3 style="margin: 0 0 8px 0;">Status</h3> <p class="text-secondary" style="margin: 0;">All systems operational</p> </div>
Form with Inputs
<div class="card"> <h3 style="margin: 0 0 12px 0;">Contact</h3> <input type="text" placeholder="Name" style="width: 100%; margin-bottom: 8px;"> <input type="email" placeholder="Email" style="width: 100%; margin-bottom: 8px;"> <textarea placeholder="Message" style="width: 100%; height: 80px; margin-bottom: 12px;"></textarea> <button class="primary">Send</button> </div>
Data Table
<table> <thead> <tr><th>Name</th><th>Status</th><th>Actions</th></tr> </thead> <tbody> <tr> <td>Item 1</td> <td class="text-success">Active</td> <td><button>Edit</button></td> </tr> <tr> <td>Item 2</td> <td class="text-muted">Inactive</td> <td><button>Edit</button></td> </tr> </tbody> </table>
Stats Dashboard
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;"> <div class="card" style="text-align: center;"> <div style="font-size: 24px; font-weight: 600;">128</div> <div class="text-secondary">Users</div> </div> <div class="card" style="text-align: center;"> <div style="font-size: 24px; font-weight: 600;">1.2k</div> <div class="text-secondary">Events</div> </div> <div class="card" style="text-align: center;"> <div style="font-size: 24px; font-weight: 600;">99.9%</div> <div class="text-secondary">Uptime</div> </div> </div>
Interactive with JavaScript
<div class="card"> <div id="count" style="font-size: 32px; text-align: center; margin-bottom: 12px;">0</div> <div style="display: flex; gap: 8px; justify-content: center;"> <button onclick="update(-1)">−</button> <button class="primary" onclick="update(1)">+</button> </div> </div> <script> let count = 0; function update(delta) { count += delta; document.getElementById('count').textContent = count; } </script>
Security Notes
-
UI renders in a sandboxed iframe with allow-scripts allow-forms
-
No access to parent window, localStorage, cookies, or parent DOM
-
Scripts execute within the iframe only
-
Forms work but submissions stay within the iframe
-
Safe for displaying user-generated or dynamic content