MCP UI工作室
MCP-UI接口、ChatGPT应用程序和MCP应用程序的可视化开发环境
🚀 现场演示
可视化构建生产就绪的MCP-UI处理程序，交互式测试，并立即导出。
特性
🎨 模板库
浏览并选择 预构建的组件模板 包括：
- 表单：联系表单、登录表单
- 表格：具有排序和过滤功能的交互式数据表
- 卡片：带有图像和动作的卡片库
- 图表：分析图表和指标
👁️ 实时沙盒预览
- 实时组件渲染
- 交互式测试环境
- 带预览和代码的拆分窗格视图
- 响应式布局测试
💻 摩纳哥编辑整合
- 专业的代码编辑经验
- TypeScript、Python和Ruby的语法高亮显示
- 代码结构可视化
- JSON模式验证
🚀 多语言导出
以三种语言导出MCP-UI组件：
- TypeScript：适用于Node.js和Deno MCP服务器
- python：适用于基于Python的MCP服务器
- 红宝石：适用于基于Ruby的MCP服务器
🌉 框架桥
在不同UI框架之间转换：
- Shadcn用户界面→ MCP-UI转换（即将推出）
- 组件结构转换
- 道具映射和翻译
🎯 可视化组件生成器
- 组件树结构
- 属性编辑器面板
- 带有MCP-UI小部件的组件面板
- 拖放界面（即将推出）
技术栈
- Next.js 14 -带有App Router的React框架
- TypeScript -类型安全开发
- Tailwind CSS -实用性优先的造型
- shadcn/ui -高质量的UI组件
- 摩纳哥编辑器 -VS代码编辑器
- Lucide反应 -美丽的图标
入门指南
先决条件
- Node.js 18+
- npm或纱线
安装
# Clone the repository
git clone https://github.com/d-barletta/mcp-ui-studio.git
cd mcp-ui-studio
# Install dependencies
npm install
# Run the development server
npm run dev打开 http://localhost:3000 查看应用程序。
生产大楼
# Create an optimized production build
npm run build
# Start the production server
npm start用法
1.浏览模板
首先浏览主页上的模板库。单击任何模板卡以在工作室中打开它。
2.查看实时预览
查看通过交互式控件实时渲染的组件。当您进行更改时，预览会立即更新。
3.编辑组件结构
切换到“代码编辑器”选项卡，使用集成的Monaco编辑器修改MCP-UI组件结构。
4.出口代码
导航到“导出”选项卡以：
- 选择你的目标语言（TypeScript、Python或Ruby）
- 复制生成的代码
- 下载处理程序文件
5.与您的MCP服务器集成
获取导出的代码，并将其直接集成到MCP服务器实现中。
发展
- 目前处于非常初始的阶段
路线图
- \[\]实时协同编辑
- \[\]组件版本控制和历史记录
- \[\]模板市场
- \[\]高级拖放构建器
- \[\]组件测试框架
- \[\]与流行的MCP服务器集成
- \[\]主题定制
- \[\]从现有代码导入
- \[\]组件库管理
贡献
欢迎投稿！请随时提交拉取请求。
许可证
MIT许可证-有关详细信息，请参阅许可证文件。