Which integrations are available for this server?

Integrates with GitLab to enable searching code, reading files, listing merge requests, and comparing branches, used for diagnosing errors and tracing call chains in page designer projects.

How do I use PageDesignerMcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@PageDesignerMcp Explain error MDPD-1001" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

PageDesignerMcp

by yanghaiyong

Overview Schema Related Servers Score Discussions

JavaScript

Remote

PageDesignerMcp

天工页面设计器 MCP Server + Agent。面向 tiangong-mdt-page（后端）和 tiangong-front-page（前端）两个 GitLab 项目，提供代码诊断、配置推荐、知识搜索等能力。

所有代码访问通过 GitLab API，不依赖本地文件路径。

一、架构总览

┌─────────────────────────────────────────────────────────────────────┐
│                    L1 · MCP Server (工具层)                          │
│                                                                     │
│  src/index.js                                                        │
│  ├── 基于 @modelcontextprotocol/sdk 标准实现                          │
│  ├── 通过 stdio 与 MCP 客户端通信                                    │
│  └── 注册 8 个领域工具                                               │
│       ├── knowledge-only: recommend_config, query_knowledge,         │
│       │                   parse_stacktrace                           │
│       └── gitlab-dependent: diagnose_error, trace_callchain,         │
│                             trace_callgraph, query_dbtable,          │
│                             diagnose_frontend                        │
│         └── 通过 src/gitlab-client.js 访问 GitLab API                 │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                    L2 · Agent (行为层)                                │
│                                                                     │
│  knowledge/page-designer/AGENTS.md                                   │
│  ├── 定义 AI 角色: "你是天工页面设计器领域专家"                        │
│  ├── 工作流: 配置引导 → 错误诊断 → 知识查询 → 路由表                   │
│  ├── 8 个 MCP 工具的调用方法和示例                                    │
│  ├── 4 条标准推理链 (Chain-of-Thought)                                │
│  └── 答案质量门控 (自检清单 + 强制规则)                               │
│                                                                     │
├─────────────────────────────────────────────────────────────────────┤
│                    L3 · Knowledge (知识库)                            │
│                                                                     │
│  knowledge/page-designer/docs/  (30+ 文档)                          │
│  ├── domain-model/     ← 领域模型: 页面/组件/字段/按钮/规则/变量      │
│  ├── enums/            ← 枚举: 50+ 组件类型/动作类型/状态           │
│  ├── scenarios/        ← 场景模板: 列表/表单/审批/仪表盘/子表        │
│  ├── frontend-knowledge/ ← 前端: Store/渲染/注册/事件中心/映射      │
│  ├── flows/            ← 核心流程: 元数据分析/页面保存                │
│  ├── exception/        ← 错误码: MDPD-xxxx 完整参考                  │
│  ├── code-knowledge/   ← API 端点清单                               │
│  └── ...               ← 更多: 限制层/事件系统/SaaS/合并机制         │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Related MCP server: gitlab-api

二、目录结构

PageDesignerMcp/
├── src/                              ← MCP Server 核心
│   ├── index.js                      ← 入口: 工具注册 + 协议处理
│   └── gitlab-client.js              ← GitLab API 客户端
│
├── knowledge/page-designer/          ← 页面设计器领域知识库
│   ├── AGENTS.md                     ← Agent 行为指令 (399 行)
│   ├── SKILL.md                      ← 技能元数据
│   └── docs/                         ← 30+ 领域文档
│       ├── domain-model/             ← 9 篇: 页面/组件/字段/按钮/规则/变量
│       ├── enums/                    ← 9 篇: 组件类型/动作/状态等枚举
│       ├── scenarios/                ← 6 篇: 场景模板 + 推荐引擎
│       ├── frontend-knowledge/       ← 10 篇: Store/渲染/注册/事件
│       ├── flows/                    ← 2 篇: 元数据分析/页面保存
│       ├── exception/                ← 1 篇: 错误码参考
│       ├── code-knowledge/           ← 1 篇: API 端点
│       ├── best-practices/           ← 1 篇: 最佳实践
│       ├── notes/                    ← 1 篇: 代码注解
│       └── ...                       ← 其他: 调试/故障排查/限制层
│
├── .opencode/                        ← OpenCode 注册
│   ├── agents/page-designer.md       ← Agent 自动激活配置
│   └── skills/page-designer/SKILL.md ← Skill 手动加载配置
│
├── opencode.json                     ← 项目级 OpenCode 配置
├── package.json                      ← npm 包 (bin: page-designer-mcp)
└── README.md

三、三层详解

L1: MCP Server (`src/index.js`)

属性	值
协议	MCP (Model Context Protocol)
SDK	`@modelcontextprotocol/sdk` v1.30.0 + `@modelcontextprotocol/server` v2.0.0
传输	Stdio (newline-delimited JSON)
启动方式	`node src/index.js`
包名	`page-designer-mcp`
版本	3.0.0

8 个工具:

工具	数据源	用途
`recommend_config`	本地知识库	按意图推荐页面配置
`query_knowledge`	本地知识库	搜索知识库文档
`parse_stacktrace`	纯解析	解析 Java 堆栈
`diagnose_error`	GitLab API	搜索错误码的代码引用
`trace_callchain`	GitLab API	追踪类/方法调用链
`trace_callgraph`	GitLab API	绘制调用层级图
`query_dbtable`	GitLab API	查询数据库表实体定义
`diagnose_frontend`	GitLab API + 知识库	诊断前端问题

L1: GitLab API Client (`src/gitlab-client.js`)

所有需要访问远程代码的工具的共享依赖。

const client = new GitLabClient({
    token: process.env.GITLAB_TOKEN,
    baseUrl: process.env.GITLAB_URL,
});

// 能力
await client.searchCode(project, query)     // 搜索代码
await client.getFile(project, path, ref)     // 读取文件
await client.getRawFile(project, path, ref)  // 原始文件
await client.listFiles(project, dir, ref)    // 列出目录
await client.listMRs(project, opts)          // MR 列表
await client.getMRChanges(project, iid)      // MR 变更
await client.compare(project, from, to)      // 分支比较
await client.blame(project, path, ref)       // 代码追溯

认证: GitLab Personal Access Token，scope 需要 read_api + read_repository。

L2: Agent Behavior (`knowledge/page-designer/AGENTS.md`)

定义 AI 在页面设计器领域的完整行为:

配置引导对话流: 识别意图 → 澄清 → 推荐配置 → 输出清单
错误诊断工作流: 症状分类 → 工具调用 → 根因定位 → 修复建议
答案质量标准: 引用来源、具体定位、可执行
快速路由表: 8 种用户输入的自动路由
多步推理链: 4 条标准 Chain-of-Thought 模板
质量门控: 自检清单

L3: Knowledge Base (`knowledge/page-designer/docs/`)

30+ 文档涵盖:

领域模型: 页面实体、组件树、字段来源、按钮动作、UI规则
枚举: 50+ 组件类型、按钮动作、页面状态、布局类型
场景模板: 列表页、表单页、审批页、仪表盘、子页面
前端知识: Store架构、渲染流程、组件注册、事件中心
核心流程: 14 个 Scene Handler 链、页面保存时序
错误码: MDPD-xxxx-xxxx 完整参考

四、数据流

场景 A: 页面配置咨询

用户: "我要做采购订单审批页"
  ↓
AGENTS.md 路由匹配 → 场景: 配置引导
  ↓
Agent 调用 recommend_config("采购订单审批")
  ↓
MCP Server:
  → 分析意图关键词 ("审批")
  → pageType=APPROVAL
  → 读取 knowledge/page-designer/docs/scenarios/approval-page.md
  → 返回组件骨架 + 增强功能
  ↓
Agent 输出配置清单给用户

场景 B: 错误诊断

用户: "保存报 COMPONENT_JSON_TOO_LARGE"
  ↓
AGENTS.md 路由匹配 → 错误诊断
  ↓
Step 1: Agent 调用 diagnose_error({errorCode: "COMPONENT_JSON_TOO_LARGE"})
  → MCP Server: 查错误码文档 + GitLab API 搜索后端代码
  → 返回错误定义 + 抛出位置
  ↓
Step 2: Agent 调用 query_knowledge("componentJson 大小限制")
  → 搜索知识库文档
  → 返回优化建议
  ↓
Agent 综合输出诊断结果

五、环境变量

变量	必须	默认	说明
`GITLAB_TOKEN`	✅	-	GitLab Personal Access Token
`GITLAB_URL`	❌	https://open-gitlab.going-link.com	GitLab 实例地址
`MDT_PROJECT`	❌	operation-apaas/tiangong-mdt-page	后端项目路径
`FRONT_PROJECT`	❌	operation-apaas/tiangong-front-page	前端项目路径
`MDT_BRANCH`	❌	master	后端默认分支
`FRONT_BRANCH`	❌	master	前端默认分支

六、配置 MCP 客户端

OpenCode (全局)

// ~/.config/opencode/opencode.jsonc
{
  "mcp": {
    "page-designer": {
      "type": "local",
      "command": ["node", "/path/to/PageDesignerMcp/src/index.js"],
      "enabled": true,
      "env": {
        "GITLAB_TOKEN": "glpat-xxxx",
        "GITLAB_URL": "https://open-gitlab.going-link.com",
        "MDT_PROJECT": "operation-apaas/tiangong-mdt-page",
        "FRONT_PROJECT": "operation-apaas/tiangong-front-page"
      }
    }
  }
}

Claude Code / Cursor / VS Code

// .vscode/mcp.json 或 claude_desktop_config.json
{
  "mcpServers": {
    "page-designer": {
      "command": "node",
      "args": ["/path/to/PageDesignerMcp/src/index.js"],
      "env": {
        "GITLAB_TOKEN": "glpat-xxxx",
        "GITLAB_URL": "https://open-gitlab.going-link.com",
        "MDT_PROJECT": "operation-apaas/tiangong-mdt-page",
        "FRONT_PROJECT": "operation-apaas/tiangong-front-page"
      }
    }
  }
}

七、与旧架构对比

维度	旧 (AIKnowledgePackage)	新 (PageDesignerMcp)
MCP 协议	手写 JSON-RPC (Content-Length)	`@modelcontextprotocol/sdk` (标准)
代码访问	`grep /mnt/d/.../tiangong-mdt-page/`	`GitLabClient.searchCode()`
路径依赖	写死本地绝对路径	环境变量 + GitLab API
分发方式	只能本地 `node script.js`	可 `npx -y` (npm 包)
Agent 激活	`.opencode/agents/page-designer.md`	同上 (已迁移)
知识库	`knowledge/page-designer-agent/`	`knowledge/page-designer/`

八、路线图

Phase	任务	状态
A1	GitLab API 客户端	✅ 完成
A2	MCP Server 入口 (8 工具)	✅ 完成
A3	知识库迁移 (30+ 文档)	✅ 完成
A4	OpenCode 注册配置	✅ 完成
B1	工具拆分为独立模块 `src/tools/`	⏳ 待做
B2	添加 GitLab 基础工具 (搜索/文件/MR)	⏳ 待做
B3	迁移 tg-* 知识库建立多领域 Agent	⏳ 待做
B4	npx 发布	⏳ 待做
C1	Agent 行为升级 (路由表+推理链)	⏳ 待做
C2	测试框架 + QA 测试集	⏳ 待做

九、开发

# 安装依赖
npm install

# 启动 MCP Server
node src/index.js

# 测试初始化握手
printf '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}\n{"jsonrpc":"2.0","id":2,"method":"notifications/initialized","params":{}}\n{"jsonrpc":"2.0","id":3,"method":"tools/list","params":{}}\n' | node src/index.js

# 测试工具调用
printf '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}\n{"jsonrpc":"2.0","id":2,"method":"notifications/initialized","params":{}}\n{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"recommend_config","arguments":{"intent":"采购订单审批"}}}\n' | node src/index.js

# 查看日志
tail -f /tmp/page-designer-mcp.log

十、GitLab Token 获取

访问 https://open-gitlab.going-link.com/-/profile/personal_access_tokens
创建 Token，scope 选择 read_api + read_repository
设置为 GITLAB_TOKEN 环境变量

Install Server

license - not found

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/yanghaiyong/PageDesignerMcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

PageDesignerMcp

一、架构总览

二、目录结构

三、三层详解

L1: MCP Server (src/index.js)

L1: GitLab API Client (src/gitlab-client.js)

L2: Agent Behavior (knowledge/page-designer/AGENTS.md)

L3: Knowledge Base (knowledge/page-designer/docs/)

四、数据流

场景 A: 页面配置咨询

场景 B: 错误诊断

五、环境变量

六、配置 MCP 客户端

OpenCode (全局)

Claude Code / Cursor / VS Code

七、与旧架构对比

八、路线图

九、开发

十、GitLab Token 获取

Maintenance

Resources

Looking for Admin?

Tools

Latest Blog Posts

MCP directory API

L1: MCP Server (`src/index.js`)

L1: GitLab API Client (`src/gitlab-client.js`)

L2: Agent Behavior (`knowledge/page-designer/AGENTS.md`)

L3: Knowledge Base (`knowledge/page-designer/docs/`)