MCP

🚀 MCP Chat Support System

MCP Chat Support Systemは、Reactを用いたフロントエンドとNode.jsを用いたバックエンドで構成された包括的なチャットサポートシステムです。リアルタイムメッセージング、知識ベース管理、マルチテナントアーキテクチャなどの機能を備えています。

🚀 主な機能

フロントエンド (React + TypeScript)

• 最新のUI/UX：モバイル最適化されたレスポンシブデザイン
• リアルタイムチャット：WebSocketベースのライブメッセージング
• 認証機能：Google OAuth統合
• デモモード：シミュレートされた機能を持つインタラクティブなデモ
• 支払い統合：Stripeによる支払い処理
• ビデオ通話：WebRTCによるビデオ会議
• 知識ベース：検索可能なドキュメントシステム
• 管理ダッシュボード：マルチテナント管理インターフェース
• オフラインサポート：オフライン機能を提供するサービスワーカー

バックエンド (Node.js + TypeScript)

• RESTful API：TypeScriptを用いたExpress.jsサーバー
• WebSocketサーバー：リアルタイム通信
• データベース：TypeORMを用いたSQLite
• 認証機能：JWTトークンベースの認証
• マルチテナンシー：テナントの分離と管理
• ファイルアップロード：安全なファイル処理
• 分析機能：使用状況の追跡とレポート
• ウィジェットシステム：埋め込み可能なチャットウィジェット

📁 プロジェクト構造

project/
├── src/                    # Reactフロントエンド
│   ├── components/         # 再利用可能なUIコンポーネント
│   ├── pages/             # ページコンポーネント
│   ├── contexts/          # Reactコンテキスト
│   ├── hooks/             # カスタムReactフック
│   ├── lib/               # ユーティリティ関数
│   └── types/             # TypeScriptの型定義
├── server/                # Node.jsバックエンド
│   ├── src/
│   │   ├── routes/        # APIルートハンドラー
│   │   ├── middleware/    # Expressミドルウェア
│   │   ├── services/      # ビジネスロジック
│   │   └── db/            # データベースモデル
│   ├── package.json
│   └── tsconfig.json
├── gemini-mcp-server/     # Gemini MCP統合
├── public/                # 静的アセット
└── docs/                  # ドキュメント

🛠️ 技術スタック

フロントエンド

• React 18 とTypeScript
• Vite を用いたビルドツール
• Tailwind CSS を用いたスタイリング
• React Router を用いたナビゲーション
• Socket.io Client を用いたリアルタイム機能
• Stripe を用いた支払い処理
• WebRTC を用いたビデオ通話

バックエンド

• Node.js とTypeScript
• Express.js フレームワーク
• Socket.io を用いたWebSocketサーバー
• SQLite データベースとTypeORM
• JWT を用いた認証
• Multer を用いたファイルアップロード
• Cors を用いたクロスオリジンリクエスト

🚀 クイックスタート

前提条件

• Node.js 18以上
• npmまたはyarn
• Git

フロントエンドのセットアップ

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

# 本番用のビルド
npm run build

バックエンドのセットアップ

# サーバーディレクトリに移動
cd server

# 依存関係のインストール
npm install

# 環境変数のコピー
cp env.example .env

# 開発サーバーの起動
npm run dev

# 本番用のビルド
npm run build

環境変数

サーバーディレクトリに .env ファイルを作成します：

# サーバー設定
PORT=3001
NODE_ENV=development

# データベース
DATABASE_URL=sqlite:./database.sqlite

# JWTシークレット
JWT_SECRET=your-jwt-secret-here

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Stripe (支払い用)
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key

# ファイルアップロード
UPLOAD_DIR=uploads/
MAX_FILE_SIZE=5242880

📱 機能概要

チャットインターフェース

• 入力中インジケーター付きのリアルタイムメッセージング
• ファイル共有と画像アップロード
• メッセージ履歴と検索機能
• 既読通知と配信ステータス

知識ベース

• 検索可能なドキュメント
• カテゴリー分類
• リッチテキスト編集
• バージョン管理

管理ダッシュボード

• マルチテナント管理
• ユーザー分析とレポート
• システム設定
• ウィジェットのカスタマイズ

ウィジェットシステム

• 埋め込み可能なチャットウィジェット
• カスタマイズ可能な外観
• 多言語対応
• モバイルレスポンシブ

🔧 開発

コードスタイル

• 型安全のためのTypeScript
• コードリンティングのためのESLint
• コードフォーマットのためのPrettier
• gitフックのためのHusky

テスト

# フロントエンドのテスト実行
npm test

# バックエンドのテスト実行
cd server && npm test

データベースマイグレーション

cd server
npm run migration:generate
npm run migration:run

🚀 デプロイメント

フロントエンド (Vercel/Netlify)

npm run build
# dist/ フォルダをデプロイ

バックエンド (Render/Railway)

cd server
npm run build
npm start

Gemini MCPサーバー (Hugging Face Spaces)

Gemini MCPサーバーは、Hugging Face Spacesに無料でデプロイできます：

📖 詳細なデプロイメント手順については、 を参照してください。

クイック手順：

1. Google AI Studio から無料のGoogle Gemini APIキーを取得します。
2. Hugging Face Spaces で新しいSpaceを作成します。
3. SDKとして "Docker" を選択します。
4. あなたのGitHubリポジトリを接続します。
5. GEMINI_API_KEY 環境変数を設定します。
6. デプロイします！

コスト： $0 (Hugging Face SpacesとGoogle Gemini APIの両方に無料の利用枠があります)

Node.jsバックエンド (Hugging Face Spaces)

Node.js/ExpressバックエンドもHugging Face Spacesにデプロイできます：

📖 詳細なデプロイメント手順については、 を参照してください。

クイック手順：

1. Hugging Face Spaces で新しいSpaceを作成します。
2. SDKとして "Docker" を選択します。
3. あなたのGitHubリポジトリを接続します。
4. JWT_SECRET 環境変数を設定します。
5. デプロイします！

コスト： $0 (Hugging Face Spacesに無料の利用枠があります)

Dockerデプロイメント

# Docker Composeでビルドして実行
docker-compose up -d

📊 APIドキュメント

認証エンドポイント

• POST /api/auth/login - ユーザーログイン
• POST /api/auth/register - ユーザー登録
• POST /api/auth/google - Google OAuth
• GET /api/auth/profile - ユーザープロファイルの取得

チャットエンドポイント

• GET /api/chat/messages - チャット履歴の取得
• POST /api/chat/messages - メッセージの送信
• GET /api/chat/rooms - チャットルームの取得

知識ベースエンドポイント

• GET /api/knowledge - 知識記事の取得
• POST /api/knowledge - 記事の作成
• PUT /api/knowledge/:id - 記事の更新
• DELETE /api/knowledge/:id - 記事の削除

🤝 コントリビューション

1. リポジトリをフォークします。
2. 機能ブランチを作成します (git checkout -b feature/amazing-feature)。
3. 変更をコミットします (git commit -m 'Add amazing feature')。
4. ブランチにプッシュします (git push origin feature/amazing-feature)。
5. プルリクエストを開きます。

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細については LICENSE ファイルを参照してください。

🆘 サポート

サポートや質問については：

• GitHubでイシューを作成します。
• /docs フォルダ内のドキュメントを確認します。
• デプロイメントガイドを確認します。

🔗 リンク

• ライブデモ
• APIドキュメント
• デプロイメントガイド

Made with ❤️ by [Your Name]