基础站点MCP服务器
自定义模型上下文协议（MCP）服务器，为AI助手提供对Foundation for Sites框架的结构化访问。
特性
- 🔌 插件生成：创建符合基金会标准的JavaScript插件
- 🎨 组件生成：使用混入和变量生成Sass组件
- 🧪 测试生成：自动生成插件和组件的测试套件
- 📖 文档访问：Query Foundation的架构和模式
- 🔍 代码分析：根据基金会惯例验证代码
- 🏗️ 架构查询：获取插件和组件模式的指导
安装
cd mcp-server
npm install
# or
yarn install配置
- 复制
.env.example到.env:
cp .env.example .env- 配置您的Foundation存储库路径：
FOUNDATION_REPO_PATH=/path/to/foundation-sites- （可选）配置Redis进行分布式缓存：
CACHE_BACKEND=redis
REDIS_URL=redis://localhost:6379用法
发展模式
npm run start:dev生产建设
npm run build
npm start运行测试
npm test
npm run test:watch与AI助手集成
GitHub Copilot
添加到您的 .copilot-instructions.md:
Use the Foundation MCP server at foundation:// for:
- Generating Foundation plugins and components
- Validating code against Foundation patterns
- Querying architectural guidance在LM Studio中配置 mcp.json:
{
"mcp.servers": {
"foundation": {
"command": "node",
"args": ["/path/to/mcp-server/dist/index.js"],
"env": {
"FOUNDATION_REPO_PATH": "/path/to/foundation-sites"
}
}
}
}可用资源
foundation://plugins/index-列出所有Foundation插件foundation://plugins/{slug}/template-获取插件模板foundation://plugins/{slug}/docs-获取插件文档foundation://components/{slug}/template-获取组件模板foundation://components/{slug}/docs-获取组件文档foundation://build/config-构建系统配置foundation://architecture/plugins-插件架构指南foundation://patterns/tests/{type}-测试模式foundation://integrations/wordpress-在WordPress主题或插件中使用Foundation的指南
可用工具
代码生成
generate_plugin-生成新的Foundation插件generate_component-生成一个新的Sass组件
分析与重构
analyze_pattern-根据基础模式分析代码find_similar_pattern-查找类似的代码模式query_architecture-查询架构指导refactor_to_foundation-分析非基础代码并生成全面的迁移指导
文件和参考
get_component_reference-获取组件API引用get_plugin_reference-获取插件API参考
验证
validate_plugin-验证插件代码wordpress_integration_guide-在WordPress（主题或插件）中排队基础的步骤和片段
建筑
src/
├── index.ts # Entry point
├── server.ts # MCP server setup
├── config.ts # Configuration management
├── handlers/
│ ├── resources.ts # Resource handlers
│ └── tools.ts # Tool handlers
├── engines/
│ ├── CodebaseIndexer.ts # Indexes Foundation codebase
│ ├── PluginAnalyzer.ts # Analyzes plugin patterns
│ ├── RefactoringAnalyzer.ts # Migration analysis engine
│ ├── ComponentResolver.ts
│ ├── DocsParser.ts
│ └── ArchitectureMap.ts
├── generators/
│ ├── PluginGenerator.ts
│ ├── ComponentGenerator.ts
│ ├── TestGenerator.ts
│ └── DocGenerator.ts
├── validators/
│ ├── PluginValidator.ts
│ ├── ComponentValidator.ts
│ └── AccessibilityValidator.ts
├── types.ts # TypeScript interfaces
└── utils/
├── cache.ts
├── fileSystem.ts
└── parser.ts发展
看 Developpent.md 了解开发指南。
Lint 代码
npm run lint
npm run lint:fix构建
npm run build清洁构建工件
npm run clean重构工具
概述
这 refactor_to_foundation 该工具分析非Foundation代码，并提供全面的重构指导，以迁移到Foundation等效代码。
特性
- 特征检测 -识别下拉菜单、手风琴、模态、旋转木马、工具提示、表单等模式
- 组件匹配 -将检测到的功能映射到具有相似性评分的Foundation插件/组件
- 迁移规划 -生成逐步迁移指南
- 代码适配 -提供带有特定更改列表的前后代码示例
- 突破性变化分析 -识别jQuery与vanilla JS的差异，单位转换（px→rem），架构更改
- 集成指导 -创建详细的分步实施指南
用法
// Input
{
sourceCode: string, // Code to analyze
sourceType: 'custom-plugin' | 'custom-component',
foundationTarget?: string // Optional: target version (default: latest)
}
// Output
{
sourceType: 'custom-plugin' | 'custom-component',
suggestedFoundationComponents: [{
name: string,
slug: string,
similarity: number,
description: string
}],
migrationSteps: string[],
codeAdaptation: {
before: string,
after: string,
changes: [{description, reason, foundationAPI}]
},
breakingChanges: [{change, impact, solution}],
recommendedApproach: string,
integrationGuide: [{step, description, code}]
}示例
# Analyze custom dropdown code
{
"name": "refactor_to_foundation",
"arguments": {
"sourceCode": "// your custom dropdown implementation...",
"sourceType": "custom-plugin",
"foundationTarget": "6.9"
}
}工具将返回：
- 最佳匹配的基础组件（例如，具有85%相似性的Dropdown插件）
- 8步迁移指南
- 前后代码示例
- 突破性变化和解决方案列表
- 推荐的迁移策略
- 分步集成说明