Frontendleap MCP Challenge

🚀 FrontendLeap MCP Server

FrontendLeapからのパーソナライズされたコーディングチャレンジをClaudeや他のAIアシスタントに生成させることができるモデルコンテキストプロトコル（MCP）サーバーです。

🚀 クイックスタート

FrontendLeap MCP Serverを使用することで、Claudeや他のAIアシスタントを利用して、パーソナライズされたコーディングチャレンジを生成できます。以下のセクションでは、インストール方法、使用方法などについて説明します。

✨ 主な機能

• 🧠 Claudeによるコンテンツ生成：会話のコンテキストに基づいて、Claudeがすべてのチャレンジコンテンツ（説明、スターターコード、テスト）を生成します。
• 🎯 完全にカスタマイズ可能なチャレンジ：テンプレートを使用せず、すべてのチャレンジが一意でコンテキストに関連しています。
• 🔒 セキュアな認証：FrontendLeapインスタンスとのAPIキー認証を使用します。
• 🌐 多言語対応：JavaScript、TypeScript、HTML、CSSのチャレンジに対応しています。
• ⚡ 即時生成：Claudeが完全なチャレンジを生成し、直接あなたのプラットフォームに保存します。

📦 インストール

1. 依存関係のインストール

   npm install
   

2. 環境の設定

   cp .env.example .env
   # .envを編集し、FRONTENDLEAP_API_KEYを追加します
   

3. サーバーのビルド

   npm run build
   

💻 使用例

Claude Desktopでの使用

Claude Desktopの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

基本的な使用法

User: "I want to learn CSS Grid layout, specifically how to create a responsive card grid"

Claude: I'll create a comprehensive CSS Grid challenge for you with detailed explanations and practical examples.

[Claude generates complete challenge content and calls create_challenge]

Claude: 🎯 Challenge Created Successfully!
**CSS Grid Layout Mastery**
- Difficulty: intermediate
- Language: css

🔗 Access your challenge here: https://fl.test/desafios/css-grid-layout-mastery

Your custom coding challenge is ready! The challenge includes:
- Claude-generated explanation and learning objectives
- Contextually relevant starter code (.grid-container with proper setup)
- Comprehensive test cases (validates grid properties)
- Interactive Monaco code editor

The challenge is now live and ready for users to solve!

📚 ドキュメント

開発時のコマンド

# 開発モードで実行
npm run dev

# 本番環境用にビルド
npm run build

# 本番サーバーを起動
npm start