DNET_LangFlow4thStep

LangFlowの4thステップ

• 戻る
  • LangFlowのファースト・ステップ
  • LangFlowのセカンド・ステップ
  • LangFlowのサード・ステップ
  • LangFlowの4thステップ（本ページ）

概要

MCP（LLMエージェントの該当節を参照）の機能が実装されたそうなので機能を確認してみる。

• 最初にMCPクライアント機能が実装され、Langflowフロー内でMCPツールを使用することができるようになった。
• 次いでMCPサーバ機能が実装され、Claude DesktopやCursorなどのAIアプリからLangflowフローを利用できるようになった。

機能

MCPホスト

LangFlowの（クライアントを内包する）フロー自体

MCPクライアント

• LangFlowのフロー中のAgentからAgentツールを呼び出す。
• AgentツールはMCPサーバによってMCPクライアントに提供される。

MCPサーバ

• LangFlowのフロー自体をMCPサーバから公開する。
• MCPサーバから公開された機能はAgentツールと呼ばれる。

モード

SSEモード/Stdioモードがある。

• LLM系ツールだから、先ずはCLIとして作りたがる。
• しかし、裏でネットワークを使っているケースは非常に多い。

SSEモード（モード）

SSE（Server-Sent Events）

• MCPにおいて、Agentツールをネットワーク越しに提供/利用するケースがSSEモード。

• 元々SSEは、HTTPサーバからクライアント（主にWebブラウザ）へプッシュするための仕組み。

• 目的
  ネットワーク越しにAgentツールをMCPクライアント（LangFlow）で使えるようにする

• 接続方法
  SSE（Server-Sent Events）というHTTP通信で接続

• 対象

  • ネットワーク越しに利用するAgentツール
  • LangFlowがAgentツールとして公開するフロー

Stdioモード（モード）

Stdio（Stdin/Stdout）、日本語では標準入出力を呼ばれる。

• MCPにおいて、非LangFlowのCLI的なAgentツールをStdio越しに提供/利用するケースがStdioモード。

• Stdioは、匿名パイプを用いたプロセス間通信を行うための一般的な方法で、CLIの実装もStdioによる。

• 目的
  CLI的なAgentツールをMCPクライアント（LangFlow）で使えるようにする

• 接続方法
  Stdioという匿名パイプ通信で接続

• 対象

  • CLI的な外部Agentツール
  • 非LangFlow製の外部Agentツール

詳細

クライアント

• LangflowにおいてMCPサーバーの提供するAgentツールと接続するMCPクライアントは
  「MCP Connection Component」で、コレはコンポーネントサイドバーに表示されていないが、
  検索バーに「MCP」と入力すると、絞り込まれて出てくる。

• 「MCP Connection Component」はAgentツール類と同じように使用できる。

SSEモード（クライアント）

SSEモードのAgentツールを取り込む場合。

• https://docs.langflow.org/mcp-client#mcp-sse-mode
• ...

Stdioモード（クライアント）

StdioモードのAgentツールを取り込む場合。

• https://docs.langflow.org/mcp-client#mcp-stdio-mode
• Langflow から Amazon Nova Canvas MCP Server を利用して画像生成 #AmazonNova - Qiita
  https://qiita.com/harusamet/items/7310d5983dab8f1a4b8a

サーバー

LangFlowのフローをMCPサーバからAgentツールとして公開する。

SSEモード（サーバー）

• プロジェクト画面の[MCP Server]タブに移動する。

• 「Edit Actions」で、

  • MCPサーバから公開するフロー（≒ Agentツール）を選択する。

  • ココで、LLM AgentがAgentツール（≒ フロー）の内容を理解できるように名前と説明を明記する。
    例えば「Document QA（LangFlowのファースト・ステップの該当節を参照）」のフローには以下のような名前と説明を付与する。

    • Flow Name: document_qa_for_resume
    • Flow Description: A flow for analyzing Emily's resume.（エミリーの履歴書を分析するためのフロー。）

• LangFlowが認証を要求する場合、「API key generated」を押下し、Web APIキーを生成する。

• MCPにおけるサーバ接続定義JSONをMCPクライアントに渡す。

  {
    "mcpServers": {
      "lf-my_projects": {
        "command": "uvx",
        "args": [
          "mcp-proxy",
          "--headers",
          "x-api-key",
          "（Web APIキー）",
          "http://localhost:7860/api/v1/mcp/project/（projectのID）/sse"
        ]
      }
    }
  }
  

• CursorなどのMCPクライアントに取り込んで動作確認する。
  https://docs.langflow.org/mcp-server#connect-clients-to-use-the-servers-actions

Stdioモード（サーバー）

該当する機能はない。

Inspector

• 「MCP Inspector」は、一般的なIT用語やオープンな技術仕様としてはあまり知られていない名称
• Langflow的には、MCPサーバのテストとデバッグによく使われるツール（フローを監視し、利用状況を把握）

参考

• Welcome to Langflow | Langflow Documentation
  https://docs.langflow.org/

  • Model Context Protocol (MCP)

    • Use Langflow as an MCP server
      https://docs.langflow.org/mcp-server

    • Use Langflow as an MCP client
      https://docs.langflow.org/mcp-client

• Langflow から Amazon Nova Canvas MCP Server を利用して画像生成 #AmazonNova - Qiita
  https://qiita.com/harusamet/items/7310d5983dab8f1a4b8a

移行メモ

• 「戻る」の並びにある自ページは、元 Wiki では自動リンクを避けるために HTML 実体参照（LangFlow…）で書かれていたが、 その旨を補ってプレーン・テキストとした。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替えた。
• 元 Wiki の行頭空白によるプレフォーマット・ブロックは、 フェンス付きコードブロックにした。
• 同名の見出し（「SSEモード」「Stdioモード」）が「モード」「クライアント」 「サーバー」の各節に繰り返し現れ GitHub Wiki でアンカが衝突するため、 節名を括弧で補って一意にした。

---

Tags: 移行, LangFlow, MCP, MCPホスト, MCPクライアント, MCPサーバ, SSE, Stdio, Inspector