Webflow设计器控制协议服务器

Webflow MCP服务器

这是一个用于控制Webflow Designer的模型上下文协议（MCP）服务器，由Cloudflare的代理SDK提供支持。

特性

• 29个Webflow设计器工具：创建元素、管理文本内容、应用CSS类、使用组件等
• 前端桥：将MCP客户端（如Cursor）连接到Webflow Designer扩展
• 有状态的连接：使用Cloudflare持久对象进行持久状态管理
• 命令队列系统：处理MCP服务器和前端之间的异步通信
• CORS已启用：已完全配置浏览器兼容性

可用工具

该服务器为Webflow Designer提供了29个工具，包括：

网元管理

• create_element -创建新元素（剖面、分区块、标题等）
• get_selected_element -获取当前所选元素的详细信息
• set_selected_element -按ID选择元素
• remove_element -移除一个元素
• get_all_elements -列出页面上的所有元素

文本内容

• set_text_content -设置元素的文本内容
• get_text_content -获取元素的文本内容

CSS类

• create_semantic_class -使用样式创建新的CSS类
• apply_semantic_class -将类应用于元素
• update_semantic_class -更新现有类
• list_semantic_classes -列出可用课程

组件和资产

• create_component_instance -创建组件实例
• list_components -列出可用组件
• upload_asset -上传图像和其他资产
• set_image_asset -设置图像源

还有更多。..

端点

• /sse -MCP客户端的SSE连接
• /mcp/bridge/events -前端网桥轮询端点
• /mcp/command-result -命令结果提交
• /status -服务器状态
• /health -健康检查

发展

npm install
npm run dev

部署

npm run deploy

与Webflow设计器扩展一起使用

1. 在浏览器中安装Webflow Designer扩展
2. 开放式Webflow设计器
3. 扩展将自动连接到此MCP服务器
4. 使用MCP客户端（例如Cursor）控制Webflow Designer

建筑

此服务器使用Cloudflare的代理SDK和持久对象进行有状态连接和持久命令队列。桥接架构允许MCP客户端和Webflow Designer扩展之间的异步通信。