FrontendLeap MCP Challenge

🚀 FrontendLeap MCP 服务器

FrontendLeap MCP 服务器是一个基于模型上下文协议（MCP）的服务器，它能让 Claude 及其他 AI 助手为 FrontendLeap 生成个性化的编码挑战。

🚀 快速开始

FrontendLeap MCP 服务器可助力 Claude 等 AI 助手生成个性化编码挑战。以下为使用该服务器的基本步骤：

1. 完成服务器的安装。
2. 依据需求进行配置。
3. 调用相关工具创建编码挑战。

✨ 主要特性

• 🧠 Claude 驱动内容：所有挑战内容（包括解释、起始代码、测试）均由 Claude 根据对话上下文生成。
• 🎯 完全定制化挑战：不使用模板，每个挑战都是独一无二且与上下文相关的。
• 🔒 安全认证：使用 API 密钥与你的 FrontendLeap 实例进行认证。
• 🌐 多语言支持：支持 JavaScript、TypeScript、HTML 和 CSS 挑战。
• ⚡ 即时创建：Claude 生成完整的挑战并直接保存到你的平台。

📦 安装指南

安装依赖

npm install

配置环境

cp .env.example .env
# 编辑 .env 文件并添加你的 FRONTENDLEAP_API_KEY

构建服务器

npm run build

💻 使用示例

基础用法

与 Claude 桌面版集成

将以下内容添加到你的 Claude 桌面版 MCP 配置中：

{
"mcpServers": {
"frontendleap": {
"command": "node",
"args": ["/path/to/frontendleap-mcp-server/dist/index.js"],
"env": {
"FRONTENDLEAP_API_KEY": "YOUR_API_KEY",
"FRONTENDLEAP_API_URL": "https://fl.test"
}
}
}
}

高级用法

可用工具

• create_challenge：使用 Claude 生成的内容创建完整的编码挑战。
  • title（必需）：挑战标题。
  • description（必需）：简要描述挑战所教授的内容。
  • explanation（必需）：带有学习目标的详细 Markdown 解释。
  • starter_code（必需）：与挑战相关的初始代码模板。
  • test_code（必需）：用于验证解决方案的 JavaScript 测试代码（Jasmine）。
  • solution（可选）：解决方案方法的 Markdown 解释。
  • language（必需）：javascript、typescript、html 或 css。
  • difficulty（必需）：beginner、intermediate 或 advanced。

示例调用

用户：“我想学习 CSS Grid 布局，特别是如何创建响应式卡片网格”

Claude：我将为你创建一个全面的 CSS Grid 挑战，包含详细的解释和实际示例。

[Claude 生成完整的挑战内容并调用 create_challenge]

Claude：🎯 挑战创建成功！
**CSS Grid 布局精通**
- 难度：中级
- 语言：css

🔗 在此访问你的挑战：https://fl.test/desafios/css-grid-layout-mastery

你的定制编码挑战已准备好！该挑战包括：
- Claude 生成的解释和学习目标
- 与上下文相关的起始代码（.grid-container 已正确设置）
- 全面的测试用例（验证网格属性）
- 交互式 Monaco 代码编辑器

该挑战现已上线，等待用户解决！

🔧 技术细节

开发模式运行

# 在开发模式下运行
npm run dev

生产环境构建

# 为生产环境构建
npm run build

启动生产服务器

# 启动生产服务器
npm start