Crewai を使用した MCP エージェントの構築

ツイート

##MCPのワークフローは、CREW RStudyアシスタントを駆動

️️ アーキテクチャ・ブレイクダウン

◀ フロントエンドレイヤー

• streamlit app.py - 美しいUIのメインWebインターフェイス
• streamlit app backup.py - 安全のためのバックアップバージョン

####################################################&###########################################################################################################################################################################################################

• main api.py - StreamlitとCrewAIの間の橋
• app.py - 代替インターフェースの実装

◯ AIコアレイヤー

• main.py - CrewAI エージェント (Research + Writer)
• debug summary.py - 概要抽出ユーティリティ

####### は、MCP Server レイヤー

• サーバー/search server.py - Brave API による Web 検索 *サーバー/image server.py - Segmind API による画像生成

################################################################################################################################################################################################################################################################

• サーバー/search results/ - 検索データを持つJSONファイル (40+ トピック)
• サーバー/画像/ - 人工知能画像の生成(30以上のビジュアル)

◀ 設定とユーティリティ

• 要件.txt - 依存関係管理
• setup nodejs.py - 環境設定
• test python version.py - 互換性テスト

UIなしでアプリケーションを実行

Streamlitを使用してアプリケーションを実行します

Streamlitインターフェイス

Crewai-MCP

Build an MCP agent using Crewai

Workflow of MCP powered Crewai RStudy Assistant

graph TD
    %% User Interface Layer
    A["🌐 User InterfaceStreamlit App(streamlit_app.py)"] --> B["⚙️ API Layermain_api.py"]
    
    %% API Processing
    B --> C["🚀 Subprocess Callpython main.py {topic}"]
    
    %% CrewAI Core
    C --> D["🤖 CrewAI Application(main.py)Research Agent + Writer Agent"]
    
    %% MCP Protocol Communication
    D --> E["📡 MCP ProtocolModel Context ProtocolCommunication Layer"]
    
    %% MCP Servers
    E --> F["🔍 Search MCP Server(servers/search_server.py)Python Implementation"]
    E --> G["🎨 Image MCP Server(servers/image_server.py)Python Implementation"]
    E --> H["📁 Filesystem MCP Server(NPX - Disabled)Node.js v14 Issue"]
    
    %% External APIs
    F --> I["🦁 Brave Search APIWeb Search Results"]
    G --> J["🎭 Segmind APIAI Image Generation"]
    
    %% File Output Generation
    D --> K["📄 File Generation"]
    K --> L["📊 search_results.jsonSearch Data"]
    K --> M["📝 summary.txtResearch Summary"]
    K --> N["🖼️ generated_images/AI Generated Images"]
    
    %% Result Processing
    B --> O["🔄 Result ExtractionFile Detection & Parsing"]
    O --> P["📋 Summary ExtractionMultiple Pattern Recognition"]
    O --> Q["🔍 Search Results ParsingJSON Processing"]
    O --> R["🖼️ Image CollectionFile Listing"]
    
    %% Display Results
    P --> S["📑 Summary TabStreamlit Display"]
    Q --> T["🔍 Search Results TabStreamlit Cards"]
    R --> U["🎨 Generated Images TabStreamlit Gallery"]
    
    %% User Features
    S --> V["💾 Download SummaryText File"]
    U --> W["💾 Download ImagesZIP Archive"]
    
    %% System Monitoring
    A --> X["📊 System StatusMCP Server Health Check"]
    
    %% Styling for different component types
    classDef streamlit fill:#ff6b6b,stroke:#ff5252,stroke-width:3px,color:#fff
    classDef crewai fill:#4ecdc4,stroke:#26a69a,stroke-width:3px,color:#fff
    classDef mcp fill:#45b7d1,stroke:#039be5,stroke-width:3px,color:#fff
    classDef api fill:#96ceb4,stroke:#66bb6a,stroke-width:3px,color:#fff
    classDef files fill:#feca57,stroke:#ff9800,stroke-width:3px,color:#fff
    
    %% Apply styles
    class A,S,T,U,V,W,X streamlit
    class D crewai
    class E,F,G,H mcp
    class I,J api
    class K,L,M,N,O,P,Q,R files
    class B,C streamlit

🏗️ Architecture Breakdown

📱 Frontend Layer

• streamlit_app.py - Main web interface with beautiful UI
• streamlit_app_backup.py - Backup version for safety

🔄 API & Integration Layer

• main_api.py - Bridge between Streamlit and CrewAI
• app.py - Alternative interface implementation

🤖 AI Core Layer