Back to Details

create-interface

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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.
使用
mcp__noetect-ui__render_ui
工具直接在聊天中渲染自定义HTML界面。非常适合表单、图表、表格、仪表盘和交互式小组件。

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)
Tool: mcp__noetect-ui__render_ui
Input:
  html: "<div class='card'><h2>Hello</h2></div>"   # 必填 - HTML内容（仅主体部分，无需<html>包裹）
  title: "My Widget"                                # 可选 - UI上方的标题
  height: 300                                       # 可选 - 固定高度（像素，默认：自动调整）

Theme Integration

主题集成

The UI automatically inherits the app's current theme. Use CSS variables for consistent styling across light/dark modes.
UI会自动继承应用的当前主题。使用CSS变量可在亮色/暗色模式下保持样式一致。

Surface Colors (backgrounds)

表层颜色（背景）

VariableUsage
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
变量用途
var(--surface-primary)
主背景
var(--surface-secondary)
卡片、悬浮表层
var(--surface-tertiary)
嵌套容器
var(--surface-accent)
高亮区域
var(--surface-muted)
柔和背景、代码块

Content Colors (text)

内容颜色（文本）

VariableUsage
var(--content-primary)
Main text
var(--content-secondary)
Secondary text, labels
var(--content-tertiary)
Muted text, placeholders
var(--content-accent)
Highlighted text
变量用途
var(--content-primary)
主文本
var(--content-secondary)
次要文本、标签
var(--content-tertiary)
弱化文本、占位符
var(--content-accent)
高亮文本

Border Colors

边框颜色

VariableUsage
var(--border-default)
Standard borders
var(--border-accent)
Emphasized borders
变量用途
var(--border-default)
标准边框
var(--border-accent)
强调边框

Semantic Colors

语义颜色

VariableUsage
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
变量用途
var(--semantic-primary)
主要操作、链接
var(--semantic-primary-foreground)
主背景上的文本
var(--semantic-destructive)
危险操作、错误提示
var(--semantic-destructive-foreground)
危险背景上的文本
var(--semantic-success)
成功状态
var(--semantic-success-foreground)
成功背景上的文本

Design Tokens

设计令牌

VariableUsage
var(--border-radius)
Standard corner radius
var(--shadow-sm)
Subtle shadow
var(--shadow-md)
Medium shadow
var(--shadow-lg)
Large shadow
变量用途
var(--border-radius)
标准圆角
var(--shadow-sm)
柔和阴影
var(--shadow-md)
中等阴影
var(--shadow-lg)
大阴影

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
  • .text-primary
    - 主文本颜色
  • .text-secondary
    - 次要文本颜色
  • .text-muted
    - 弱化/三级文本颜色
  • .text-accent
    - 高亮文本颜色
  • .text-success
    - 成功色
  • .text-destructive
    - 错误/危险色

Background Classes

背景类

  • .bg-primary
    - Primary surface background
  • .bg-secondary
    - Secondary surface background
  • .bg-muted
    - Muted surface background
  • .bg-primary
    - 主表层背景
  • .bg-secondary
    - 次表层背景
  • .bg-muted
    - 柔和表层背景

Container Classes

容器类

  • .card
    - Styled container with secondary background, border, border-radius, and 16px padding
  • .card
    - 带次背景、边框、圆角和16px内边距的样式化容器

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
以下元素会自动应用默认的主题感知样式：
  • body - 系统字体、14px、主文本颜色、12px内边距
  • a - 主语义颜色
  • button - 次背景、边框、圆角、悬停状态
  • button.primary - 主语义背景搭配前景文本
  • button.destructive - 危险语义背景搭配前景文本
  • input, select, textarea - 主背景、边框、聚焦环
  • table, th, td - 全屏宽度、行底部边框
  • code - 等宽字体、柔和背景、2px/4px内边距
  • pre - 等宽字体、柔和背景、12px内边距、滚动溢出

Auto-Resize Behavior

自动调整大小行为

By default, the UI auto-resizes to fit its content. The iframe:
  1. Measures content height on load
  2. Observes DOM mutations and resizes dynamically
  3. Responds to window resize events
Set a fixed 
height
parameter to disable auto-resize.
默认情况下，UI会自动调整大小以适配内容。iframe会：
  1. 在加载时测量内容高度
  2. 监听DOM变化并动态调整大小
  3. 响应窗口大小变化事件
设置固定的
height
参数可禁用自动调整大小。

Examples

示例

Simple Card

简单卡片

html
<div class="card">
  <h3 style="margin: 0 0 8px 0;">Status</h3>
  <p class="text-secondary" style="margin: 0;">All systems operational</p>
</div>
html
<div class="card">
  <h3 style="margin: 0 0 8px 0;">状态</h3>
  <p class="text-secondary" style="margin: 0;">所有系统正常运行</p>
</div>

Form with Inputs

带输入框的表单

html
<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>
html
<div class="card">
  <h3 style="margin: 0 0 12px 0;">联系我们</h3>
  <input type="text" placeholder="姓名" style="width: 100%; margin-bottom: 8px;">
  <input type="email" placeholder="邮箱" style="width: 100%; margin-bottom: 8px;">
  <textarea placeholder="留言" style="width: 100%; height: 80px; margin-bottom: 12px;"></textarea>
  <button class="primary">发送</button>
</div>

Data Table

数据表格

html
<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>
html
<table>
  <thead>
    <tr><th>名称</th><th>状态</th><th>操作</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>项目1</td>
      <td class="text-success">活跃</td>
      <td><button>编辑</button></td>
    </tr>
    <tr>
      <td>项目2</td>
      <td class="text-muted">非活跃</td>
      <td><button>编辑</button></td>
    </tr>
  </tbody>
</table>

Stats Dashboard

统计仪表盘

html
<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>
html
<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">用户数</div>
  </div>
  <div class="card" style="text-align: center;">
    <div style="font-size: 24px; font-weight: 600;">1.2k</div>
    <div class="text-secondary">事件数</div>
  </div>
  <div class="card" style="text-align: center;">
    <div style="font-size: 24px; font-weight: 600;">99.9%</div>
    <div class="text-secondary">在线率</div>
  </div>
</div>

Interactive with JavaScript

带JavaScript的交互式组件

html
<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>
html
<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
  • UI在沙箱化iframe中渲染，配置为
    allow-scripts allow-forms
  • 无法访问父窗口、localStorage、Cookie或父DOM
  • 脚本仅在iframe内部执行
  • 表单可正常工作，但提交内容仅保留在iframe内
  • 可安全展示用户生成或动态内容