Web Development Agent

自然言語指示から静的Webサイトを自動生成するMCPサーバーです。Next.jsベースのWebサイトを生成し、S3への自動デプロイも可能です。

🚀 概要

このシステムは、ユーザーの自然言語による指示を受け取り、以下の処理を自動実行します：

1. 指示解析: 自然言語指示をWebサイト構造に変換

2. Next.jsプロジェクト生成: 自動的にプロジェクトをセットアップ

3. ページ開発: 各ページのコンポーネントとスタイルを生成

4. 品質管理: 生成されたコードの品質をレビュー

5. 自動デプロイ: S3静的ホスティングへの自動デプロイ

✨ 主要機能

MCPツール

• create_website: 自然言語指示からWebサイトを自動生成

• deploy_to_s3: Next.jsプロジェクトをS3に静的サイトとしてデプロイ

• check_s3_deployment: S3デプロイメントの状態確認

技術スタック

• Framework: Next.js 13+ App Directory

• Styling: TailwindCSS + CSS Modules

• Server: FastMCP (Model Context Protocol)

• AI/ML: Google Gemini API, LangChain

• Cloud: AWS S3 (静的ホスティング)

• Architecture: Multi-agent system

🛠️ インストール

前提条件

• Node.js 18+

• Python 3.8+

• Google API key (Gemini)

セットアップ

1. リポジトリのクローン

   git clone https://github.com/shark-bot-0118/web-dev-mcp.git
   cd web-dev-mcp

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

   pip install -r requirements.txt

3. Node.js依存関係のインストール

   npm install

4. 環境設定 .envファイルを作成：

   GOOGLE_API_KEY=your_google_api_key
   
   # AWS設定（S3デプロイ用）
   AWS_ACCESS_KEY_ID=your_aws_access_key
   AWS_SECRET_ACCESS_KEY=your_aws_secret_key
   AWS_DEFAULT_REGION=ap-northeast-1
   
   # オプション設定
   OUTPUT_DIR=static_site_output
   TEMPLATE_DIR=templates
   LOG_FILE=app.log

🚀 使用方法

MCPサーバーの起動

python main.py

Webサイトの生成

create_websiteツールを自然言語指示で使用：

# 例：企業サイトの指示
user_instruction = "技術系企業のコーポレートサイトを作成してください。ホーム、企業概要、サービス、お問い合わせページが必要です。モダンなブルー系のカラースキームでプロフェッショナルなタイポグラフィを使用してください。"

📁 プロジェクト構造

web_development_agent/
├── agents/                    # マルチエージェントシステム
├── graph/                     # ワークフロー管理
├── tools/                     # ユーティリティツール
├── templates/                 # HTMLテンプレート
├── static_site_output/        # 生成されたプロジェクト
├── config.py                  # 設定管理
├── logger.py                  # ロギングシステム
└── main.py                    # MCPサーバーエントリーポイント

🤝 コントリビューション

コントリビューションを歓迎します！

1. フォーク

2. フィーチャーブランチを作成

3. 変更をコミット

4. プッシュ

5. プルリクエストを作成

📞 サポート

質問やイシューがある場合は、GitHubのIssuesページをご利用ください。

Web Development Agent - 自然言語からWebサイトを自動生成 🚀✨