Web Development Agent

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サイトを自動生成 🚀✨