ソフトバンク株式会社_satto開発チーム
🛠️

satto workspaceの管理画面で利用しているMCPを一挙公開

ryohei oyama
に公開
AI
Model Context Protocol
Claude
satto
zennfes2025ai
idea

はじめに

こんにちは！satto workspaceでプロダクトエンジニアをしている ryohei oyama（@ryohei_oyama）です。

最近、Claude Codeで話題のMCP（Model Context Protocol）。皆さんはもう活用されていますか？

今回は、satto workspaceの管理画面開発で実運用している7つのMCPツールを一挙公開します。設定スニペットと活用シーンを添えて、実際に開発効率が大きく向上した事例を紹介します。

MCPとは？

MCP（Model Context Protocol） は、Anthropic社が開発したオープンソースのプロトコルで、AIアシスタントが外部ツールやサービスと連携できるようにする仕組みです。

設定管理 — Rulerによる統一管理

satto workspaceでは、MCPサーバーの設定をRulerというツールで一元管理しています。

Rulerの特徴

  • 複数のAIコーディングツールの設定を統一管理
  • .ruler/mcp.jsonにMCPサーバー設定を集約
  • 各AIツールの設定ファイルに自動的に反映
  • Gitでバージョン管理可能
// .ruler/mcp.json の例
{
  "mcpServers": {
    "serena": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/oraios/serena", ...]
    },
    // 他のMCPサーバー設定...
  }
}

これにより、チーム全体で同じMCP設定を共有し、開発環境の統一性を保てます。

satto workspaceで活用しているMCPツール7選

1. 🧠 Serena - IDE統合アシスタント

"serena": {
  "command": "uvx",
  "args": [
    "--from",
    "git+https://github.com/oraios/serena",
    "serena-mcp-server",
    "--context",
    "ide-assistant"
  ]
}

関連リンク:

活用シーン:

  • コードベース全体の文脈を理解した上でのコード生成
  • プロジェクト固有のコーディング規約に従った実装
  • 複雑なリファクタリング作業の自動化

2. 🎭 Playwright - ブラウザ自動操作

"playwright": {
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@playwright/mcp@latest"]
}

関連リンク:

活用シーン:

  • 画面操作の自動化
  • スクリーンショット取得

3. ⏰ DateTime - 日時処理ユーティリティ

"mcp-datetime": {
  "command": "uvx",
  "args": ["mcp-datetime"]
}

関連リンク:

活用シーン:

  • ログ解析時のタイムスタンプ変換
  • スケジュール管理機能の実装
  • タイムゾーン対応の日時処理

4. 📚 AWS Documentation Server

"awslabs.aws-documentation-mcp-server": {
  "command": "uvx",
  "args": ["awslabs.aws-documentation-mcp-server@latest"],
  "env": {
    "FASTMCP_LOG_LEVEL": "ERROR",
    "AWS_DOCUMENTATION_PARTITION": "aws"
  }
}

関連リンク:

活用シーン:

  • AWSサービスのベストプラクティス調査
  • API仕様の即座の確認
  • インフラ設定の最適化提案

5. 📊 AWS Diagram Server

"awslabs.aws-diagram-mcp-server": {
  "command": "uvx",
  "args": ["awslabs.aws-diagram-mcp-server"],
  "env": {
    "FASTMCP_LOG_LEVEL": "ERROR"
  }
}

関連リンク:

活用シーン:

  • システムアーキテクチャ図の自動生成
  • インフラ構成の可視化
  • ドキュメント用の図表作成

実際に生成した図の例:

satto-ws-admin アーキテクチャ図
AWS Diagram MCPで生成したsatto workspace管理画面のアーキテクチャ図

このように、複雑なAWSインフラ構成も自動的に図表化でき、ドキュメント作成の効率が大幅に向上します。

6. 📚 Context7 - 最新ドキュメント自動取得

"context7": {
  "type": "stdio",
  "command": "npx",
  "args": ["-y", "@upstash/context7-mcp"]
}

関連リンク:

活用シーン:

  • 最新ライブラリドキュメントの自動取得 - Next.js、React、Tailwindなどの最新バージョンのドキュメントを直接AIのコンテキストに注入
  • 正確なコード生成 - 古いトレーニングデータによるハルシネーションを防ぎ、現在のAPIに基づいた正確なコード生成
  • バージョン固有の実装 - 特定のライブラリバージョンに対応した実装パターンやAPIの取得

7. 🎨 Figma Dev Mode Server

"figma-dev-mode-mcp-server": {
  "type": "sse",
  "url": "http://127.0.0.1:3845/sse"
}

関連リンク

活用シーン:

  • UIコンポーネントの自動生成
  • デザインスペックの取得

注意点とベストプラクティス

ベストプラクティス

  1. 段階的導入: まずは1-2個のMCPから始める
  2. チーム内共有: 設定ファイルをGit管理して共有
  3. カスタマイズ: プロジェクトに合わせて設定を最適化

まとめ

MCPツールを活用することで、開発効率が劇的に向上します。特に以下のような効果が期待できます：

  • 🚀 開発スピードの大幅向上
  • 🎯 品質の向上とバグの削減
  • 📝 ドキュメント作成の自動化
  • 🔄 デザインと実装の一貫性向上

satto workspaceでは、これらのツールを組み合わせることで、少人数チームでも高品質なプロダクトを素早くリリースできています。

皆さんも、プロジェクトに合わせてMCPツールを選定・カスタマイズして、開発効率を高めてみてください。

参考リンク

ソフトバンク株式会社_satto開発チーム
ソフトバンク株式会社_satto開発チーム

ソフトバンク株式会社iPaaS事業開発本部で、satto workspaceをはじめとする複数の生成AIプロダクトを開発しています。 「テクノロジーで社会構造を更新し、みんなの心に余白をつくる」というビジョンのもと、日々の実践や試行錯誤をZennに記録していきます。

Discussion