Fluorite MCP - 完全機能ガイド
Claude Code CLI を エンタープライズ級開発プラットフォーム に変換する Fluorite MCP の包括的ガイドです。プロダクション品質のコード生成、インテリジェントなエラー予防、超高速プロトタイピングを実現する革新的システムの全機能について説明します。
🚀 即座の価値提供
10倍の開発速度を実現
- ⚡ 要件 → 本番コード: 数時間から数分への短縮
- 🎯 自然言語駆動: 新しい構文を学ぶ必要なし
- 💎 プロダクション品質: 業界標準とTypeScript型を自動適用
- 🔧 フレームワークネイティブ: 深いエコシステム統合
ゼロ学習コスト
- 🔄 透過的動作: 既存ワークフローをそのまま活用
- 🏃♂️ 即座の開始: インストール後すぐに利用可能
- 🧠 インテリジェント学習: 使用パターンから継続改善
📋 機能概要マップ
🎯 核心システム | 📊 統計情報 | 🚀 主要価値 |
---|---|---|
🧪 スパイクテンプレート | 6,200+ 本番対応 | アイデア→実装を数秒で |
📚 ライブラリ仕様 | 86+ プロ仕様 | 完璧な統合パターン |
🔍 静的解析エンジン | 50+ 検証ルール | エラー予防・品質保証 |
🎯 /fl: コマンド | 17+ 拡張機能 | SuperClaude統合 |
🤖 MCPサーバー | 15+ 専門ツール | Claude完全統合 |
目次
- 🧪 スパイクテンプレートシステム
- 📚 ライブラリ仕様エンジン
- 🔍 静的解析・検証システム
- 🎯 /fl: コマンド統合
- 🤖 MCPサーバーアーキテクチャ
- 📖 ドキュメント・ローカライゼーション
- 🎵 音声処理エンジン
- ⚡ パフォーマンス最適化
- 🔒 セキュリティ・品質保証
- 🚀 実践的使用例
コアMCPサーバー機能
概要
Fluorite MCPは、Model Context Protocol (MCP)を実装し、Claude Code CLIおよび他のAI支援開発ツールに包括的な開発コンテキストを提供します。
主要コンポーネント
1. MCPプロトコル実装
- 完全プロトコルサポート: MCP仕様の完全実装
- ツール登録: Claude Code CLIとの動的ツール登録
- コンテキストストリーミング: 開発中のリアルタイムコンテキスト更新
- エラー回復: 堅牢なエラー処理と回復メカニズム
2. リクエスト処理
typescript
interface MCPRequest {
method: string;
params: Record<string, any>;
id?: string | number;
}
interface MCPResponse {
result?: any;
error?: {
code: number;
message: string;
data?: any;
};
id?: string | number;
}
3. リソース管理
- 動的リソース解決: 要求時のライブラリ仕様読み込み
- キャッシング戦略: パフォーマンス向上のためのインテリジェントキャッシング
- メモリ効率: 大規模プロジェクトでの低メモリフットプリント
ライブラリ仕様システム
アーキテクチャ
YAML仕様フォーマット
yaml
name: "library-name"
version: "1.0.0"
description: "ライブラリの説明"
category: "development-category"
# インストール情報
installation:
npm: "npm install library-name"
yarn: "yarn add library-name"
pnpm: "pnpm add library-name"
# 使用例
usage: |
import { Component } from 'library-name';
function App() {
return <Component />;
}
# ベストプラクティス
best-practices:
- "常にTypeScriptを使用する"
- "コンポーネントをメモ化する"
- "適切なキーを提供する"
# 一般的なパターン
patterns:
- name: "フォームバリデーション"
description: "Zodを使った型安全なバリデーション"
example: |
const schema = z.object({
email: z.string().email(),
password: z.string().min(8)
});
利用可能な仕様カテゴリ
フロントエンドフレームワーク
- Next.js:
spec://nextjs
- フルスタック React フレームワーク - React:
spec://react
- UIライブラリ - Vue.js:
spec://vue
- プログレッシブフレームワーク - Nuxt.js:
spec://nuxt
- Vue.js フレームワーク
UI/UXライブラリ
- shadcn/ui:
spec://shadcn__ui
- モダンなUIコンポーネント - TanStack Table:
spec://tanstack-table
- データテーブル - Radix UI:
spec://radix-ui
- アクセシブルプリミティブ - Material-UI:
spec://mui
- Material Design コンポーネント
状態管理
- Zustand:
spec://zustand
- 軽量状態管理 - Jotai:
spec://jotai
- アトミック状態管理 - TanStack Query:
spec://tanstack-query
- サーバー状態管理
フォーム・検証
- React Hook Form:
spec://react-hook-form
- パフォーマンス重視のフォーム - Zod:
spec://zod
- スキーマ検証 - Yup: 従来の検証ライブラリ
データベース・ORM
- Prisma:
spec://prisma
- 次世代ORM - Drizzle:
spec://drizzle-orm
- 高性能SQLクエリビルダー - TypeORM: エンタープライズ級ORM
認証・セキュリティ
- NextAuth.js:
spec://authjs
- Next.js認証ソリューション - Clerk:
spec://clerk
- 完全な認証プラットフォーム - Lucia:
spec://lucia
- 軽量認証ライブラリ
バックエンドフレームワーク
- FastAPI:
spec://fastapi
- 現代的なPython APIフレームワーク - Laravel:
spec://laravel
- PHPウェブフレームワーク - Express.js: Node.js最小フレームワーク
モバイル開発
- React Native:
spec://expo-react-native
- Expoでのモバイル開発 - Flutter: ダート言語によるクロスプラットフォーム開発
クラウド・インフラ
- Vercel:
spec://vercel-ecosystem
- フロントエンドプラットフォーム - Supabase:
spec://supabase-ecosystem
- オープンソースFirebase代替 - AWS: Amazon Web Services統合
🧪 スパイクテンプレートシステム
概要
6,200以上の本番対応テンプレートによる高速プロトタイピングシステム。アイデアから動作するコードまでを数秒で実現します。
主要機能
インスタント開発環境
- ⚡ ゼロセットアップ時間: 数秒で動作するプロトタイプ
- 🏆 本番品質: 業界ベストプラクティスとTypeScript型を含む
- 🔧 事前設定済み: 依存関係、ビルドツール、テストが準備完了
- 🎯 価値に集中: ビジネスロジックに時間を費やし、ボイラープレートは不要
テンプレート インテリジェンス
- 🧠 自然言語による発見: 平易な日本語を使ったテンプレート検索
- 🤖 自動選択: AI があなたのニーズに最適なテンプレートを選択
- 🔄 スマートマージ: テンプレート適用時のインテリジェントな競合解決
- 📊 利用解析: 成功したテンプレート適用から学習
テンプレートカテゴリ
フロントエンド(180以上のテンプレート)
- Next.js エコシステム: 150以上のテンプレート
- 基本アプリ、API ルート、認証、SSR、ISR
- shadcn/ui コンポーネント、フォーム、データベース統合
- React エコシステム: 17テンプレート
- Vite スターター、状態管理、フォーム検証
- Vue.js: Composition API、Pinia 状態管理
バックエンド(59以上のテンプレート)
- FastAPI: 24テンプレート
- JWT 認証、WebSocket、背景タスク、データベース統合
- Node.js: Express、Fastify、高性能API
- Go/Rust: 高性能システムプログラミング
テスト・品質(58以上のテンプレート)
- Playwright: 11テンプレート(E2E、アクセシビリティ、ビジュアル回帰)
- GitHub Actions: 32テンプレート(CI/CD、セキュリティスキャン)
- 品質ツール: OpenAPI契約テスト、秘密検出
UI コンポーネント(72以上のテンプレート)
- Material-UI: データグリッド、フォーム、レイアウト
- Radix UI: アクセシブルプリミティブ、ダイアログ、メニュー
- TanStack Table: ソート、フィルタリング、ページネーション
- インタラクティブ: ドラッグアンドドロップ、データ可視化
データ・状態管理(35以上のテンプレート)
- データベース統合: PostgreSQL、MongoDB、Redis、Prisma
- リアルタイム通信: WebSocket、Socket.IO、Kafka、NATS
インフラ・DevOps(40以上のテンプレート)
- コンテナ: Docker、Kubernetes、オーケストレーション
- クラウド: Cloudflare Workers、Vercel、AWS Lambda
- IaC: Terraform、Pulumi、インフラ自動化
監視・可観測性(15以上のテンプレート)
- ログ・メトリクス: Winston、Structlog、OpenTelemetry
- 品質・検証: OpenAPI、スキーマ検証、API モッキング
使用ワークフロー
発見フェーズ
bash
# 自然言語を使ったテンプレート発見
fluorite-mcp discover "JWT認証付きNextJSアプリ"
fluorite-mcp discover "PostgreSQL を使った FastAPI"
プレビューフェーズ
bash
# テンプレート内容の事前確認
fluorite-mcp preview-spike nextjs-auth-jwt \
--params app_name=my-app,db_url=postgresql://...
実装フェーズ
bash
# テンプレート適用と設定
fluorite-mcp apply-spike nextjs-auth-jwt \
--params app_name=my-app,jwt_secret=xxx
🔍 静的解析・検証システム
包括的解析エンジン
Fluorite MCPは、50以上の検証ルールによる包括的な静的解析機能を提供します。
フレームワーク固有解析
Next.js 解析
- 検出項目:
- サーバーコンポーネントでのクライアントフック
- ハイドレーションミスマッチ
- 画像最適化問題
- ルート設定問題
- パフォーマンスアンチパターン
React 解析
- チェック内容:
- フック使用パターン
- コンポーネントライフサイクル問題
- 状態管理問題
- パフォーマンス最適化機会
- アクセシビリティ懸念
Vue.js 解析
- 識別内容:
- リアクティビティ問題
- ライフサイクル管理
- コンポーネント通信
- パフォーマンスボトルネック
- TypeScript統合問題
エラー予測エンジン
- 予測対象:
- ハイドレーションエラー
- 型ミスマッチ
- 非同期操作の失敗
- メモリリーク
- パフォーマンス劣化
カスタム解析ルール
設定可能な解析ルール:
- チームコーディング標準
- フレームワーク固有パターン
- セキュリティ要件
- パフォーマンス予算
- アクセシビリティ準拠
リアルタイム検証
bash
# ファイルのリアルタイム検証
fluorite-mcp realtime-validation --file src/components/Button.tsx
# プロジェクト全体の静的解析
fluorite-mcp static-analysis --project-path . --framework nextjs
🎯 /fl: コマンド統合
SuperClaude フレームワーク統合
Fluorite MCP は SuperClaude フレームワークと完全に統合され、17以上の拡張コマンドを提供します。
利用可能なコマンド
開発コマンド
bash
/fl:build # プロジェクトビルダー(フレームワーク検出付き)
/fl:implement # 機能・コード実装(インテリジェントペルソナ活性化)
/fl:design # 設計オーケストレーション
解析コマンド
bash
/fl:analyze # 多次元コード・システム解析
/fl:troubleshoot # 問題調査・デバッグ
/fl:explain # 教育的説明・ドキュメント
品質コマンド
bash
/fl:improve # 証拠に基づくコード強化
/fl:cleanup # プロジェクトクリーンアップ・技術的負債削減
/fl:test # テストワークフロー・検証
ユーティリティコマンド
bash
/fl:estimate # 証拠に基づく見積もり
/fl:task # 長期プロジェクト・タスク管理
/fl:git # Gitワークフロー支援
/fl:document # プロ仕様ドキュメント生成
メタコマンド
bash
/fl:index # コマンドカタログ閲覧・発見
/fl:load # プロジェクトコンテキスト読み込み
/fl:spawn # タスクオーケストレーション
スパイク専用コマンド
bash
/fl:spike discover [query] # スパイクテンプレート発見
/fl:spike apply [template] # テンプレート適用
/fl:spike list # 利用可能テンプレート一覧
インテリジェント機能
自動ペルソナ活性化
- コンテキスト認識: タスクタイプに基づくペルソナ自動選択
- 専門性マッチング: 特定ドメインのエキスパートペルソナ活性化
- クロスドメイン協力: 複数ペルソナの協調作業
フラグ統合
bash
# 高度な解析
/fl:analyze --think-hard --seq --c7
# 波動モード(複雑なマルチステージ実装)
/fl:implement --wave-mode --adaptive-waves
# 反復改善
/fl:improve --loop --iterations 5
# 並列処理
/fl:analyze --delegate --parallel-focus
🤖 MCPサーバーアーキテクチャ
アーキテクチャ概要
コア MCPサーバー実装
typescript
class FluoriteMCPServer {
private handlers: Map<string, Handler>;
private catalog: LibraryCatalog;
private analyzer: StaticAnalyzer;
private spikeEngine: SpikeEngine;
async initialize() {
await this.loadCatalog();
await this.initializeAnalyzers();
await this.registerTools();
}
}
専門ツール群(15以上)
カタログ管理ツール
list-specs
: ライブラリ仕様一覧upsert-spec
: カスタム仕様追加・更新catalog-stats
: カタログ統計情報
解析ツール
static-analysis
: プロジェクト静的解析quick-validate
: コードスニペット検証realtime-validation
: リアルタイムファイル検証get-validation-rules
: 検証ルール取得
スパイク開発ツール
discover-spikes
: 自然言語クエリでスパイク発見auto-spike
: 最適スパイク自動選定・次アクション提示preview-spike
: 適用前スパイクプレビューapply-spike
: スパイクテンプレート適用validate-spike
: 適用済みスパイク整合性検証explain-spike
: スパイク目的・使用方法説明
診断ツール
self-test
: サーバーヘルスチェックperformance-test
: パフォーマンス指標server-metrics
: サーバー可観測性データ
高度な機能
インテリジェントメモリエンジン
rust
// Rust実装による高性能メモリ管理
struct MemoryEngine {
learning_patterns: HashMap<String, Pattern>,
performance_cache: LRUCache<String, AnalysisResult>,
optimization_hints: Vec<OptimizationHint>,
}
継続学習システム
- パターン学習: 成功した実装パターンの自動学習
- エラー予測: 過去のエラーパターンに基づく予測
- 最適化提案: 使用パターン分析に基づく改善提案
ハイブリッドアーキテクチャ
- TypeScript コア: 高い開発生産性とメンテナンス性
- Rust エンジン: 重い処理の高性能実行
- 並列処理: マルチスレッド解析とテンプレート処理
📖 ドキュメント・ローカライゼーション
包括的ドキュメンテーション
多言語サポート
- 日本語: 完全な日本語ローカライゼーション
- 英語: 国際標準ドキュメント
- 一貫性: 両言語間での整合性維持
ドキュメント種類
- API リファレンス: 完全な技術仕様
- ユーザーガイド: 使用方法とベストプラクティス
- チュートリアル: 段階的な学習コンテンツ
- アーキテクチャガイド: システム設計詳解
VitePress 統合
yaml
# VitePress設定
site:
title: "Fluorite MCP"
description: "次世代開発ツール"
locales:
root:
label: "日本語"
lang: "ja"
en:
label: "English"
lang: "en"
ドキュメント自動生成
- API ドキュメント: TypeScript定義から自動生成
- 使用例: テンプレートから実際の使用例を自動抽出
- 更新同期: コード変更時のドキュメント自動更新
🎵 音声処理エンジン
多言語音声合成
高品質な音声合成システムによる多言語サポート。
サポート言語
- 日本語: 自然な発音とイントネーション
- 英語: 技術用語の正確な読み上げ
- その他: 拡張可能な言語サポート
技術仕様
typescript
interface SpeechEngine {
synthesize(text: string, language: 'ja' | 'en'): Promise<AudioBuffer>;
configure(options: SpeechOptions): void;
getAvailableVoices(): Voice[];
}
interface SpeechOptions {
rate: number; // 0.1 - 3.0
pitch: number; // 0.0 - 2.0
volume: number; // 0.0 - 1.0
voice?: string;
}
使用例
- ドキュメント読み上げ: 長文ドキュメントの音声化
- コード説明: コード解析結果の音声による説明
- エラー通知: 音声による問題報告
⚡ パフォーマンス最適化
高性能アーキテクチャ
メモリ最適化
- 効率的キャッシング: LRU キャッシュによる高速データアクセス
- ガベージコレクション最適化: 低レイテンシーの実現
- メモリプール: オブジェクト再利用による負荷軽減
並列処理最適化
typescript
// 並列処理による高速解析
class ParallelAnalyzer {
async analyzeProject(projectPath: string): Promise<AnalysisResult> {
const files = await this.discoverFiles(projectPath);
const chunks = this.chunkFiles(files, this.workers.length);
const results = await Promise.all(
chunks.map(chunk => this.analyzeChunk(chunk))
);
return this.mergeResults(results);
}
}
I/O最適化
- 非同期ファイル処理: ノンブロッキングファイルアクセス
- ストリーミング解析: 大きなファイルの効率的な処理
- バッチ処理: 複数操作の最適化されたバッチ実行
ベンチマーク結果
解析性能
- 小規模プロジェクト (< 100ファイル): < 500ms
- 中規模プロジェクト (100-1000ファイル): < 2秒
- 大規模プロジェクト (1000+ファイル): < 10秒
メモリ使用量
- 基本実行: 50MB 未満
- 大規模解析: 200MB 未満
- キャッシュ含む: 500MB 未満
スパイクテンプレート適用
- テンプレート検索: < 100ms
- プレビュー生成: < 200ms
- 実際の適用: < 1秒
🔒 セキュリティ・品質保証
セキュリティ機能
脆弱性検出
- 依存関係スキャン: npm audit統合
- シークレット検出: API キーやパスワードの誤コミット防止
- セキュリティルール: OWASP準拠のセキュリティチェック
安全な実行環境
typescript
interface SecurityContext {
sandboxLevel: 'strict' | 'moderate' | 'minimal';
allowedOperations: Operation[];
restrictedPaths: string[];
timeoutLimits: TimeoutConfig;
}
コード署名・検証
- テンプレート署名: 信頼されたテンプレートの検証
- 整合性チェック: ファイル改ざん検出
- アクセス制御: 適切な権限管理
品質保証システム
自動テストスイート
- ユニットテスト: 98% 以上のカバレッジ
- 統合テスト: エンドツーエンドの動作確認
- パフォーマンステスト: 継続的なベンチマーク実行
継続的品質監視
yaml
quality_gates:
coverage: ">= 95%"
performance: "< 2s for analysis"
memory: "< 200MB for large projects"
security: "zero critical vulnerabilities"
エラー監視・報告
- クラッシュ報告: 自動エラー収集と分析
- パフォーマンス監視: リアルタイムメトリクス
- ユーザビリティ追跡: 使用パターン分析
🚀 実践的使用例
エンタープライズ開発シナリオ
シナリオ 1: 新機能の高速プロトタイピング
背景: 新しいダッシュボード機能の実装が必要
Fluorite MCP アプローチ:
bash
# 1. 要件分析とテンプレート発見
/fl:analyze "ダッシュボード機能要件" --focus architecture
# 2. スパイクテンプレート適用
/fl:spike discover "Next.js dashboard with charts"
/fl:spike apply nextjs-dashboard-comprehensive
# 3. 反復改善
/fl:improve --loop --focus performance
# 4. 品質検証
/fl:test --e2e --accessibility
結果:
- ⏱️ 開発時間: 3日 → 4時間
- 📊 コード品質: TypeScript完全対応、テスト付き
- 🎯 機能完成度: プロダクション準備完了
シナリオ 2: レガシーシステム現代化
背景: 古いPHPシステムをNext.jsに移行
Fluorite MCP アプローチ:
bash
# 1. 現状分析
/fl:analyze legacy-system --focus migration
# 2. 移行戦略立案
/fl:design migration-strategy --framework nextjs
# 3. 段階的実装
/fl:implement "user authentication migration" --framework nextjs
/fl:implement "dashboard migration" --framework nextjs
# 4. 品質保証
/fl:test --migration-validation
結果:
- 🔄 移行効率: 6ヶ月 → 2ヶ月
- 🛡️ リスク軽減: 段階的移行による安全性確保
- 📈 性能向上: レスポンス時間75%改善
シナリオ 3: 国際化プロジェクト
背景: 多言語対応の E コマースサイト開発
Fluorite MCP アプローチ:
bash
# 1. 国際化アーキテクチャ設計
/fl:design "multi-language e-commerce" --persona-architect
# 2. 基盤実装
/fl:implement "Next.js i18n setup" --framework nextjs
/fl:implement "multi-currency payment" --framework nextjs
# 3. コンテンツローカライゼーション
/fl:document --persona-scribe=ja "product descriptions"
/fl:document --persona-scribe=en "user guides"
結果:
- 🌏 対応言語: 5言語同時サポート
- 💰 売上向上: 海外売上300%増加
- 🎯 開発効率: 各言語版2日で完成
技術的深堀りケーススタディ
ケース 1: パフォーマンス最適化
問題: Next.js アプリの初期読み込みが遅い
Fluorite MCP 解決プロセス:
bash
# 1. パフォーマンス解析
/fl:analyze --focus performance --ultrathink
# 検出された問題:
# - バンドルサイズ過大 (2.1MB)
# - 未使用コードの多数存在
# - 画像最適化未実装
# - コード分割の不備
# 2. 最適化実装
/fl:improve --focus performance --loop
# 適用された解決策:
# - 動的インポート導入
# - Tree shaking 設定最適化
# - Next.js Image コンポーネント適用
# - Webpack Bundle Analyzer 統合
測定可能な成果:
- 📦 バンドルサイズ: 2.1MB → 640KB (70%削減)
- ⚡ 初期読み込み: 4.2秒 → 1.1秒 (74%改善)
- 📱 モバイル性能: Lighthouse スコア 45 → 92
- 💚 Core Web Vitals: すべて green に改善
ケース 2: セキュリティ強化
問題: 既存 API の脆弱性と認証の不備
Fluorite MCP セキュリティ監査:
bash
# 1. セキュリティ分析
/fl:analyze --focus security --persona-security
# 発見された問題:
# - JWT トークン有効期限なし
# - SQL インジェクション脆弱性
# - CORS 設定の不備
# - 秘密情報のハードコード
# 2. セキュリティ強化実装
/fl:improve --focus security --validate
# 適用されたセキュリティ対策:
# - JWT リフレッシュトークン実装
# - パラメータ化クエリ導入
# - セキュアな CORS 設定
# - 環境変数管理の改善
セキュリティ向上結果:
- 🛡️ 脆弱性: 23件 → 0件(100%解決)
- 🔐 認証セキュリティ: エンタープライズ級に強化
- 📋 コンプライアンス: OWASP Top 10 完全準拠
- 🎯 セキュリティスコア: 6.2/10 → 9.8/10
ケース 3: 大規模チーム開発最適化
背景: 50人の開発チームでの効率性改善
Fluorite MCP チーム最適化:
bash
# 1. 開発プロセス解析
/fl:analyze team-workflow --focus efficiency
# 2. 標準テンプレート作成
/fl:spike create team-component-template
/fl:spike create team-api-template
/fl:spike create team-test-template
# 3. 品質ガードレール設定
/fl:configure quality-gates --team-standards
# 4. ドキュメント統一
/fl:document team-standards --persona-scribe=ja
チーム効率向上結果:
- ⏰ 開発速度: 新機能実装時間40%短縮
- 📊 コード品質: レビュー指摘事項60%削減
- 🔄 一貫性: 統一されたコーディングスタイル達成
- 📚 知識共有: ドキュメント化による属人化解消
統計とメトリクス(v0.20.3)
テンプレートカバレッジ
- 総テンプレート数: 6,200+ 本番対応
- フレームワーク: 15+ 技術スタック
- ライブラリ仕様: 86+ プロ仕様
- 総コード行数: 150,000+ 行
パフォーマンス指標
- 解析速度: 平均 < 2秒 (中規模プロジェクト)
- メモリ使用量: < 200MB (大規模プロジェクト)
- テンプレート適用: < 1秒
- サーバー応答時間: < 100ms
品質指標
- テストカバレッジ: 98%+
- セキュリティ: ゼロ既知脆弱性
- ドキュメント: 100% 日英対応
- TypeScript: 完全型安全対応
最終更新: 2025年1月