layui-mcp-server

v1.1.0

Published

5 days ago

MCP Server for Layui Framework, layuiAdmin and LayIM - 提供 Layui 组件文档、layuiAdmin 开发指南和 LayIM 聊天系统的查询服务

0High
0Medium
0Low

ycathi

layui layuiadmin layim webim chat mcp model-context-protocol ai llm assistant documentation

Layui MCP Server

MCP Server for Layui Framework, layuiAdmin and LayIM - 为 AI 助手提供 Layui 组件文档、layuiAdmin 开发指南和 LayIM 聊天系统的结构化查询接口。

功能特性

方法一：`get-layui-docs`

Layui 文档查询（统一入口），遵循学习路径：

| action | 用途 | 参数 | |--------|------|------| | overview | 概览与快速上手（首次使用必看） | 无 | | core | 核心功能（底层方法、模块系统、组件构建器） | 无 | | component | 组件查询（API、属性、事件、示例） | names: 组件名数组 | | dom | 组件 DOM 结构模板 | names: 组件名数组 |

方法二：`get-admin-guide`

layuiAdmin 开发指南（统一入口），遵循学习路径：

| action | 用途 | 参数 | |--------|------|------| | overview | 概览与快速上手（首次使用必看） | 无 | | config | 全局配置 | section: 配置项名 | | methods | 基础方法 | module: 模块名 | | routes | 路由规则和跳转方法 | 无 | | templates | 动态模板语法 | 无 | | menu | 侧边菜单数据格式 | 无 | | auth | 登录与接口鉴权流程 | 无 |

方法三：`get-layim-docs` 🆕

LayIM 聊天系统文档（统一入口），遵循学习路径：

| action | 用途 | 参数 | |--------|------|------| | overview | 概览与快速上手（首次使用必看） | 无 | | api | API 方法、属性、事件 | 无 | | init | 初始化数据格式 | 无 | | content | 内容解析器语法（Markdown） | 无 | | examples | 示例代码 | 无 | | dom | DOM 结构模板 | 无 | | websocket | WebSocket 集成示例 | 无 | | ai | AI 对话模式示例 | 无 | | tools | 工具栏扩展 | 无 | | theme | 主题设置 | 无 | | faces | 颜文字表情库（36个） | 无 | | callback | 回调函数设置 | 无 |

安装方式

方式一：npm 全局安装（推荐）

npm install -g layui-mcp-server

方式二：npx 直接使用

无需安装，直接使用：

npx layui-mcp-server

方式三：本地开发

git clone https://github.com/your-username/layui-mcp-server.git
cd layui-mcp-server
npm install
npm run build

IDE 配置指南

Claude Desktop 配置

编辑 Claude Desktop 配置文件：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

全局安装方式配置：

{
  "mcpServers": {
    "layui": {
      "command": "layui-mcp-server"
    }
  }
}

npx 方式配置：

{
  "mcpServers": {
    "layui": {
      "command": "npx",
      "args": ["layui-mcp-server"]
    }
  }
}

本地开发方式配置：

{
  "mcpServers": {
    "layui": {
      "command": "node",
      "args": ["/path/to/layui-mcp-server/dist/index.js"]
    }
  }
}

Cursor IDE 配置

在项目根目录创建 .cursor/mcp.json：

{
  "mcpServers": {
    "layui": {
      "command": "npx",
      "args": ["layui-mcp-server"]
    }
  }
}

Windsurf IDE 配置

编辑 ~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "layui": {
      "command": "npx",
      "args": ["layui-mcp-server"]
    }
  }
}

Trae IDE 配置

在项目根目录创建 .trae/mcp.json：

{
  "mcpServers": {
    "layui": {
      "command": "npx",
      "args": ["layui-mcp-server"]
    }
  }
}

VS Code + Cline 配置

在 VS Code 设置中配置 Cline MCP：

{
  "cline.mcpServers": {
    "layui": {
      "command": "npx",
      "args": ["layui-mcp-server"]
    }
  }
}

Zed Editor 配置

编辑 ~/.config/zed/settings.json：

{
  "mcp_servers": {
    "layui": {
      "command": "npx",
      "args": ["layui-mcp-server"]
    }
  }
}

使用示例

Layui 学习路径

用户：帮我了解 Layui

AI 调用：get-layui-docs({ action: "overview" })
返回：Layui 简介、核心概念、快速上手指南

用户：Layui 怎么配置和加载模块？

AI 调用：get-layui-docs({ action: "core" })
返回：底层方法、模块系统、组件构建器的完整文档

用户：layer 弹窗怎么用？

AI 调用：get-layui-docs({ action: "component", names: ["layer"] })
返回：layer 组件的 API、属性、事件和示例代码

用户：form 表单的 HTML 结构是什么？

AI 调用：get-layui-docs({ action: "dom", names: ["form"] })
返回：form 组件的 DOM 结构模板

layuiAdmin 学习路径

用户：帮我了解 layuiAdmin

AI 调用：get-admin-guide({ action: "overview" })
返回：layuiAdmin 简介、架构设计、快速上手指南

用户：layuiAdmin 如何发送请求？

AI 调用：get-admin-guide({ action: "methods", module: "admin" })
返回：admin.req() 等方法的详细说明和示例

用户：layuiAdmin 的路由是怎么配置的？

AI 调用：get-admin-guide({ action: "routes" })
返回：路由规则、解析方法和跳转方式

LayIM 学习路径 🆕

用户：帮我了解 LayIM 聊天系统

AI 调用：get-layim-docs({ action: "overview" })
返回：LayIM 简介、功能特性、快速上手指南

用户：LayIM 怎么创建聊天窗口？

AI 调用：get-layim-docs({ action: "api" })
返回：layim.chat() 等所有 API 方法的详细说明

用户：LayIM 如何对接 WebSocket？

AI 调用：get-layim-docs({ action: "websocket" })
返回：WebSocket 实时通讯集成示例

用户：LayIM 如何对接 AI 大模型？

AI 调用：get-layim-docs({ action: "ai" })
返回：AI 对话模式和流式输出示例

用户：LayIM 支持哪些表情？

AI 调用：get-layim-docs({ action: "faces" })
返回：36 个颜文字表情列表

已收录组件（共 53 个）

扩展组件 🆕

| 组件名 | 标题 | 描述 | |--------|------|------| | layim | WebIM 聊天系统 | 网页端聊天系统，支持好友/群聊/AI对话、WebSocket、流式输出 |

核心类

| 组件名 | 标题 | 描述 | |--------|------|------| | base | 底层方法 | Layui 核心 API，包含全局配置、模块管理、本地存储、设备检测等 | | modules | 模块系统 | Layui 轻量级模块规范，包含模块定义、使用、扩展等功能 | | component | 组件构建器 | 2.10+ 新增，用于构建统一 API 规范的组件 |

交互类

| 组件名 | 标题 | 描述 | |--------|------|------| | layer | 弹出层 | 弹出层组件，集众多弹层功能为一体 | | upload | 上传组件 | 文件上传前端交互逻辑 | | dropdown | 下拉菜单 | 多功能通用下拉菜单组件 |

表单类

| 组件名 | 标题 | 描述 | |--------|------|------| | form | 表单组件 | 包含输入框、选择框、复选框等表单项组件 | | input | 输入框 | 文本输入框，支持清除、密码显示等点缀 | | textarea | 多行输入框 | 多行文本输入 | | select | 选择框 | 下拉选择，支持搜索、分组、多选 | | checkbox | 复选框 | 多选场景，支持标签风格 | | switch | 开关 | 两种状态切换 | | radio | 单选框 | 单选场景 | | number | 数字输入框 | 数字输入，支持增减按钮 | | slider | 滑块组件 | 拖拽选值的交互性组件 | | rate | 评分组件 | 用于等级展示或评价类操作 | | colorpicker | 颜色选择器 | 颜色快捷选择，支持 hex/rgb/rgba | | laydate | 日期时间 | 日期选择、时间选择、范围选择 | | transfer | 穿梭框 | 多选场景，数据左右穿梭移动 |

展示类

| 组件名 | 标题 | 描述 | |--------|------|------| | table | 表格 | 数据列表展示，支持分页、排序、筛选 | | laypage | 分页 | 分页条展示 | | tree | 树组件 | 树形结构数据展示 | | treetable | 树形表格 | 树形结构数据表格展示 | | carousel | 轮播组件 | 跑马灯/轮播交互场景 | | progress | 进度条 | 任务完成进度、加载状态展示 | | badge | 徽章 | 数字、状态标识展示 | | timeline | 时间线 | 历史记录、发展历程展示 | | code | 代码预览 | 代码区块修饰和效果预览 | | fixbar | 固定条 | 固定在页面一侧的工具条 | | blockquote | 引用 | 引用块，用于文章引用、评论 | | fieldset | 字段集 | 表单或内容分组 | | hr | 水平线 | 内容分隔线 |

导航类

| 组件名 | 标题 | 描述 | |--------|------|------| | nav | 导航菜单 | 水平导航和垂直导航 | | menu | 基础菜单 | 垂直导航菜单替代方案 | | tabs | 标签页 | 加强型标签页组件（2.10+） | | tab | 选项卡 | 原版选项卡组件（element 子集） | | breadcrumb | 面包屑 | 页面层级位置显示 |

布局类

| 组件名 | 标题 | 描述 | |--------|------|------| | element | 页面元素 | 导航菜单、标签页、折叠面板、进度条等 | | panel | 面板 | 普通面板、卡片面板、折叠面板集合 | | card | 卡片面板 | 卡片式内容展示 | | collapse | 折叠面板 | 内容折叠展示 | | layout | 框体布局 | 中后台管理系统大布局方案 | | grid | 栅格布局 | 响应式栅格系统，12列布局 |

基础类

| 组件名 | 标题 | 描述 | |--------|------|------| | button | 按钮 | 多种按钮主题、尺寸、圆角样式 | | icon | 图标 | 192 个常用图标字体 | | anim | 动画 | CSS3 动画效果 | | class | 公共类 | 布局、边距、背景色、文字样式等公共 class | | color | 通用颜色 | 主色调、辅色调、中色调颜色系统 |

数据类

| 组件名 | 标题 | 描述 | |--------|------|------| | flow | 流加载 | 滚动按需加载 |

工具类

| 组件名 | 标题 | 描述 | |--------|------|------| | util | 工具模块 | 倒计时、时间格式化、HTML转义等 | | laytpl | 模板引擎 | 数据与视图分离的模板引擎 |

其他

| 组件名 | 标题 | 描述 | |--------|------|------| | theme | 主题 | 亮色/暗色主题切换 |

开发

# 开发模式（监听文件变化）
npm run dev

# 构建
npm run build

# 运行
npm start

扩展更多组件

组件文档已拆分为独立文件，位于 src/data/layui/components/ 目录。

添加新组件

在 src/data/layui/components/ 目录下创建新文件，如 my-component.ts：

import { LayuiComponent } from '../../../types/index.js';

export const myComponentComponent: LayuiComponent = {
  name: 'my-component',
  title: '组件标题',
  category: '分类',
  description: '组件描述',
  api: {
    methods: [
      {
        name: '方法名',
        description: '方法描述',
        params: [
          { name: '参数名', type: '类型', description: '参数描述', required: true }
        ],
        returns: '返回值类型',
        example: '使用示例'
      }
    ],
    properties: [
      { name: '属性名', type: '类型', default: '默认值', description: '属性描述' }
    ],
    events: [
      { name: '事件名', description: '事件描述', callback: '回调函数签名' }
    ]
  },
  examples: [
    {
      title: '示例标题',
      code: '示例代码',
      description: '示例描述'
    }
  ],
  dom: 'DOM结构模板（可选）'
};

在 src/data/layui/components/index.ts 中导入并添加：

import { myComponentComponent } from './my-component.js';

export const components: LayuiComponent[] = [
  // ... 现有组件
  myComponentComponent
];

修改现有组件

直接编辑对应的组件文件即可，如修改表格组件：src/data/layui/components/table.ts

许可证

MIT