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サーバーの起動

Webサイトの生成

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

📁 プロジェクト構造

🤝 コントリビューション

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

1. フォーク

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

3. 変更をコミット

4. プッシュ

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

📞 サポート

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

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