@mcp/ui组件
用于MCP UI的可组合web组件库 点亮设计用于与MCP（模型上下文协议）接口轻松组合和集成。
特性
- 🧩 可组合 -设计用于无缝协作的组件
- 🎨 主题可 -CSS自定义属性，便于自定义
- 🌙 深色模式 -内置深色主题支持
- ♿ 可访问的 -ARIA属性和键盘导航
- 📦 树可以摇动 -只导入您需要的内容
- 🔧 TypeScript -包括完整的类型定义
安装
npm install @mcp/ui-components快速开始
// Import all components
import '@mcp/ui-components';
// Or import specific components
import '@mcp/ui-components/primitives';
import '@mcp/ui-components/layout';
import '@mcp/ui-components/feedback';
import '@mcp/ui-components/data-display';Click Me
Card Title
Card content goes here.
组件
原语
| 组件 | 描述 |
|---|---|
| `` | 带变体的按钮：主要、次要、轮廓、重影、破坏性 |
| `` | 带有标签、辅助文本和错误状态的文本输入 |
| `` | 支持自动调整大小的多行文本输入 |
| `` | 具有多种变体的身份徽章 |
| `` | 内置图标的SVG图标组件 |
布局
| 组件 | 描述 |
|---|---|
| `` | 灵活的堆叠布局（垂直/水平） |
| `` | 垂直堆叠（简写） |
| `` | 水平堆叠（简写） |
| `` | 带页眉/页脚插槽的卡片容器 |
| `` | CSS网格布局组件 |
| `` | 带可选标签的视觉分隔符 |
反馈
| 组件 | 描述 |
|---|---|
| `` | 警报消息（信息、成功、警告、错误） |
| `` | 加载旋转器 |
| `` | 加载带有消息的覆盖层 |
| `` | 进度条（确定/不确定） |
| `` | 正在加载占位符 |
数据显示
| 组件 | 描述 |
|---|---|
| `` | 带有语法高亮提示的代码块 |
| `` | 键值列表容器 |
| `` | 键值对项目 |
| `` | 列出容器 |
| `` | 带插槽的列表项 |
| `` | 空状态占位符 |
例子
按钮变体
Primary
Secondary
Outline
Ghost
Delete
Loading...表单布局
Submit
带有动作的卡片
MCP Server
Connected
Disconnect
View Tools
加载状态
MCP工具响应显示
get_weather
Success
{
"location": "San Francisco",
"temperature": 68,
"conditions": "Partly Cloudy"
}
主题化
组件使用CSS自定义属性进行主题化。在您的应用程序中覆盖它们：
:root {
/* Primary color */
--mcp-color-primary: #6366f1;
--mcp-color-primary-hover: #4f46e5;
/* Spacing */
--mcp-space-4: 1rem;
/* Border radius */
--mcp-radius-md: 0.375rem;
/* Typography */
--mcp-font-family: 'Inter', system-ui, sans-serif;
}
/* Dark mode */
[data-theme="dark"] {
--mcp-color-background: #0f172a;
--mcp-color-foreground: #f8fafc;
}控制器
用于管理组件状态的可重用逻辑：
异步控制器
import { AsyncController } from '@mcp/ui-components/controllers';
class MyElement extends LitElement {
private _async = new AsyncController(this);
async fetchData() {
await this._async.run(async (signal) => {
const response = await fetch('/api/data', { signal });
return response.json();
});
}
render() {
if (this._async.isPending) return html``;
if (this._async.isError) return html`${this._async.error}`;
return html`
${this._async.data}
`;
}
}FormFieldController
import { FormFieldController, validators } from '@mcp/ui-components/controllers';
class MyForm extends LitElement {
private _email = new FormFieldController(this, [
validators.required(),
validators.email(),
]);
render() {
return html`
this._email.setValue(e.detail.value)}
@blur=${() => this._email.touch()}
>
`;
}
}发展
# Install dependencies
npm install
# Start dev server
npm run dev
# Build
npm run build
# Type check
npm run build许可证
麻省理工学院