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