AI导哈

Webasyst开发AI工具

为Webasyst框架提供的AI辅助开发工具，支持创建应用、插件、主题和配置。

  • by emmy-design
  • JavaScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 emmy-design/webasyst-mcp

使用说明

Webasyst MCP服务器

适用于克劳德桌面和光标。 此存储库是面向Claude/Cursor的Webasyst MCP服务器。

非官方项目。 此MCP服务器由社区维护，不隶属于Webasyst、不受Webasyst认可或赞助。

如果您使用Codex，请使用Codex first服务器： emmy设计/webasyst codex mcp.

MCP（模型上下文协议）服务器 Webasyst 框架。通过AI界面为应用程序、插件、主题和配置提供开发工具。

📝 注： 文件主要是俄文的。

MCP（Model Context Protocol）框架服务器 Webasyst提供通过AI接口开发应用程序、插件、主题和配置的工具。

非正式草案。 MCP服务器由社区维护，不是WebAssyst的官方产品。

通过AI创建WebAssist项目

使用Claude Desktop和Cursor创建应用程序、插件、设计主题和WebAssyst UI 2.0后端接口。此MCP服务器为AI助理提供结构化工具，用于学习webasyst的本地安装、生成框架、读取真实的UI示例并在修订后验证模板。

该项目是基于WebAssyst开发的：在创建后端UI时，它必须基于WebAssyst UI 2.0的真实模式。 wa-apps/ui/templates/actions/component/，而不是Bootstrap、Tailwind或随机的第三方设计系统。

这是给谁的？

  • 对于在WebAssist下创建应用程序、插件、小部件、主题和Shop脚本扩展的开发人员。
  • 对于希望通过AI助手快速原型WebAssistant功能但不偏离平台结构和协议的web编码器。
  • 对于需要将产品创意转换为设置、表格、表单、对话框和本地化后端UI的团队。
  • 对于需要重复工件的WebASYST集成程序，UI 2.0提示和基本结果验证。

5分钟内第一个插件

  1. 安装MCP服务器并将其连接到Claude Desktop或Cursor。
  2. 打开本地WebAssist项目。
  3. 请AI助手创建插件、设置页面或UI组件。
  4. 在UI任务之前，请使用WebAssyst UI 2.0上下文。
  5. 编辑后，请检查模板是否符合WebAssyst UI 2.0。

插件示例

Создай плагин Shop-Script "loyalty" со страницей настроек на Webasyst UI 2.0

Перед правкой backend-страницы посмотри реальные примеры Webasyst UI для fields, table, button и dialog

Сделай форму настроек плагина через .fields, .button и стандартные паттерны Webasyst UI 2.0

Проверь этот Smarty-шаблон на совместимость с Webasyst UI 2.0 и исправь проблемы

Создай виджет для приложения Site с локализацией и frontend assets

Сгенерируй структуру приложения Webasyst для прототипа CRM

Адаптируй этот экран под реальные компоненты dropdown и dialog из wa-apps/ui

Подготовь релизный архив плагина после базовой проверки структуры и локализации

开发标准

重要的是： 开始工作前一定要了解一下 开发标准 检查前，请使用检查表： PR_CHECKLIST.md

可能性

应用程序管理

  • 获取所有应用程序的列表
  • 附件详细信息
  • 创建新应用程序结构

使用插件

  • 每个应用程序的插件列表
  • 关于特定插件的信息
  • 创建新插件的结构

主题管理

  • 应用程序可用主题列表
  • 关于主题的信息

配置

  • 系统配置
  • 路由配置
  • 应用程序设置

CLI接口

  • 通过cli webasyst执行命令
  • 开发任务自动化

安装

选项1：通过NPM（推荐）

npm install -g webasyst-mcp-server

备选案文2：源代码

  1. 克隆存储库：

    git clone https://github.com/emmy-design/webasyst-mcp.git
cd webasyst-mcp

  2. 建立依赖关系：

    npm install

  3. 使文件可执行：

    chmod +x webasyst-mcp.js

使用

启动服务器

npm start

与Claude Desktop集成

将以下配置添加到文件中 claude_desktop_config.json:

{
  "mcpServers": {
    "webasyst": {
      "command": "node",
      "args": ["/путь/к/вашему/проекту/webasyst-mcp/webasyst-mcp.js"],
      "env": {}
    }
  }
}

可用工具

资料

  • list_webasyst_apps 应用程序（include_system）
  • get_app_info 应用程序详细信息（app_id）
  • list_app_plugins, get_plugin_info -应用程序插件（app_id，plugin_id）。
  • list_app_themes, list_app_widgets 应用程序主题/小部件（app_id）
  • get_routing_config 路由（app_id可选）
  • get_system_config 系统配置。
  • run_webasyst_cli -发射 cli.php （命令，args）。

创建（基本）

  • create_app_structure, create_plugin_structure.
  • create_action, create_model, create_theme, create_widget （仪表板）。
  • create_generic_app -应用程序在任意路径中。

网站

  • create_site_plugin, create_site_widget, create_site_block, create_site_theme.

商店

  • create_shop_plugin, create_shop_theme, create_shop_report.
  • create_shipping_plugin （插件/运输）， create_payment_plugin （wa插件/支付）。

用户界面

  • enable_webasyst_ui 连接UI 2.0
  • create_ui_component -表格/形状/模拟器等。

SEO与分析

  • setup_seo_optimization, analyze_project.
  • generate_po_template, compile_mo, check_project_compliance, prepare_release_bundle.

开发运维

  • generate_nginx_vhost, generate_htaccess.

使用示例

与Claude Desktop集成后，可以使用以下命令：

Покажи мне все приложения Webasyst

Создай новое приложение с ID "myapp" и названием "Мое приложение"

Покажи информацию о приложении "shop"

Создай плагин "analytics" для приложения "shop" с названием "Аналитика продаж"

项目结构

webasyst-mcp/
├── webasyst-mcp.js    # Основной файл MCP сервера
├── package.json       # Конфигурация npm пакета
├── README.md          # Документация
└── node_modules/      # Зависимости (после npm install)

要求

  • Node.js>=18.0.0
  • 具有正确目录结构的webasyst项目
  • 项目目录中的读/写权限

设计师的特点

此MCP服务器对于使用WebAssist的设计师和产品经理特别有用：

  • 简单的接口：所有命令都通过Claude中的自然语言执行
  • 自动化：使用一个命令创建应用程序和插件结构
  • 安全：所有更改仅存储在本地Git中
  • 直觉：不需要深入的PHP知识-足够基本的HTML/CSS理解
  • UI 指南：WebAssyst UI 2.0的使用指南（请参阅） 用户界面_内容_参考.md)
  • 本地化：WebAssyst本地化规则和标准（见下文）。 位置指南.md)

接口样式化（UI 2.0）

强制性要求：

创建接口时，始终使用：

  1. 组件 wa-apps/ui/ -现成模板和示例
  2. 年级 wa-content/css/wa/wa-2.0.css -基本系统样式
  3. CSS变量 而不是硬编码的颜色

  • 哪里看例子: wa-apps/ui/templates/actions/component/

    如果没有安装UI应用程序，请使用安装程序安装它（?module=store&action=product&slug=ui)

  • 基本样式: wa-content/css/wa/wa-2.0.css

  • 完整组件目录: 用户界面_内容_参考.md

  • Чек-листPR: PR_CHECKLIST.md

  • 组件快速导航:

    • 开关: switch.html, toggle.html
    • 选项卡和下拉列表: dropdown.html, inputs.html
    • 表: table.html, tablebox.html
    • 卡片: card.html
    • 砖网: bricks.html
    • 下载和进展: loading.html, spinner.html, progressbar.html
    • 对话框和滑动面板: dialog.html, drawer.html, tooltip.html

  • 连接基本UI样式:

{include file="ui_wrapper.html"}

在Layout中手动：

<link rel="stylesheet" href="{$wa_app_static_url}wa-ui-variables.css">
  • 建议:
    • 对于JS，请尝试搜索软件元素 id而不是在课堂上。
    • 尽量减少自定义样式；使用CSS变量UI 2.0
    • 依赖于从文件到文件的现成标记 wa-apps/ui/templates/actions/component/

更多信息： 用户界面_内容_参考.md

支持

如果您有任何问题或问题：

  1. 验证您是否在WebAssyst项目的根目录中
  2. 确保Node.js已安装并具有18+
  3. 检查项目文件的访问权限

作者

  • 弗拉德·阿尔希波夫 创建者和主要开发者

该项目使用人工智能助手（Claude，Cursor）创建。

致谢

该项目是根据官方材料创建的。 Webasyst:

参与制定

我们欢迎对该项目的贡献！见E/CN.4/Sub.2/2000/SR.1。 贡献.md 细节。

许可证

MIT License（英语：MIT License）文件 许可证

相关 MCP