Loading...
Loading...
Renders interactive HTML interfaces in chat using the render_ui tool. Use when the user asks to display UI, create a widget, show a form, render a chart, build an interface, or display interactive content.
npx skill4agent add cdeistopened/opened-vault create-interfacemcp__noetect-ui__render_uiTool: 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)| Variable | Usage |
|---|---|
| Main background |
| Cards, elevated surfaces |
| Nested containers |
| Highlighted areas |
| Subtle backgrounds, code blocks |
| Variable | Usage |
|---|---|
| Main text |
| Secondary text, labels |
| Muted text, placeholders |
| Highlighted text |
| Variable | Usage |
|---|---|
| Standard borders |
| Emphasized borders |
| Variable | Usage |
|---|---|
| Primary actions, links |
| Text on primary background |
| Destructive actions, errors |
| Text on destructive background |
| Success states |
| Text on success background |
| Variable | Usage |
|---|---|
| Standard corner radius |
| Subtle shadow |
| Medium shadow |
| Large shadow |
.text-primary.text-secondary.text-muted.text-accent.text-success.text-destructive.bg-primary.bg-secondary.bg-muted.cardheight<div class="card">
<h3 style="margin: 0 0 8px 0;">Status</h3>
<p class="text-secondary" style="margin: 0;">All systems operational</p>
</div><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><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><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><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>allow-scripts allow-forms