/ 目錄 / 演練場 / mcp-agent-langchainjs
● 官方 Azure-Samples ⚡ 即開即用

mcp-agent-langchainjs

作者 Azure-Samples · Azure-Samples/mcp-agent-langchainjs

Azure 官方參考範例 — 一個無伺服器 LangChain.js 代理程式,使用 MCP 呼叫漢堡點餐工具 API,可透過 azd up 完整部署。

這是 Azure Samples 的參考應用程式,並非終端使用者用的 MCP。它展示如何建立一個整合 MCP 工具呼叫的無伺服器 LangChain.js 代理程式,並部署至 Azure Static Web Apps + Functions + Cosmos DB。示範用的是一家漢堡餐廳 — 但這個模式適用於任何你想在 Azure 上建立的工具型代理程式。

為什麼要用

核心特性

即時演示

實際使用效果

agent-langchainjs.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "agent-langchainjs": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-agent-langchainjs"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "agent-langchainjs": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-agent-langchainjs"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "agent-langchainjs": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-agent-langchainjs"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "agent-langchainjs": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-agent-langchainjs"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "agent-langchainjs",
      "command": "npx",
      "args": [
        "-y",
        "mcp-agent-langchainjs"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "agent-langchainjs": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-agent-langchainjs"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add agent-langchainjs -- npx -y mcp-agent-langchainjs

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: mcp-agent-langchainjs

在 Azure 上快速建立具備 MCP 工具呼叫的無伺服器代理程式

👤 正在開發 AI 功能的 Azure 開發者 ⏱ ~120 min advanced

何時使用: 你想在 Azure 上發布 LLM 驅動的功能,並需要一個可直接 fork 的可運作參考範例。

前置條件
  • Azure 訂閱 — azure.microsoft.com — 免費方案足以用於開發
  • Azure Developer CLIbrew install azd 或 Windows 安裝程式
步驟
  1. Fork 並部署
    Fork Azure-Samples/mcp-agent-langchainjs,並引導我執行 azd up 部署到我的 Azure 訂閱。✓ 已複製
    → 取得 Azure 正式 URL,並完成 Functions + Cosmos 的佈建
  2. 替換示範工具
    將漢堡點餐 MCP 替換成我自己領域的自訂 MCP(例如預約訂位)。請展示整合方式。✓ 已複製
    → 程式碼差異 + 可運作的自訂工具
  3. 自訂介面
    範例有一個對話介面;請自訂品牌色彩與歡迎訊息。✓ 已複製
    → 完成樣式設定的應用程式

結果: 一個從已驗證範例衍生、可正式上線的 Azure 託管代理程式。

注意事項
  • 免費方案的 Azure OpenAI 配額很低 — 在有足夠容量的區域自行佈建 OpenAI 資源,並在環境變數中設定端點
  • 本地端 Ollama 對複雜工具呼叫的處理不佳 — 涉及多步驟工具呼叫的開發請使用雲端模型(如 GPT-4o-mini 等)

學習 MCP + LangChain.js 整合模式

👤 初次接觸 MCP 的開發者 ⏱ ~60 min intermediate

何時使用: 你正在評估 MCP,並想了解它如何與 LangChain.js 生態系整合。

步驟
  1. 閱讀程式碼
    摘要說明這個專案如何將 MCP 接入 LangChain.js 代理程式,關鍵整合點在哪裡?✓ 已複製
    → 架構說明
  2. 在本地端執行
    在 Codespaces 中執行它。跑一遍漢堡點餐流程,並在日誌中觀察 MCP 工具呼叫。✓ 已複製
    → 可正常執行的本地端環境 + 工具呼叫追蹤記錄

結果: 在自行開發之前,先透過實際操作深入理解這個模式。

組合

與其他 MCP 搭配,撬動十倍槓桿

agent-langchainjs + github

為你自己的 fork 建立 CI/CD 流程

Fork 這個專案,設定 GitHub Actions 在推送到 main 時自動執行 azd 部署。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
(reference app — not a callable MCP) N/A 這是一個你自行部署的範例應用程式,並非 Claude 可呼叫的工具 N/A

成本與限制

運行它的成本

API 配額
Azure 依用量計費
每次呼叫 Token 數
N/A — 你是在建立這個應用程式,而非將它當作工具來呼叫
費用
不固定 — 開發階段使用免費方案費用很低;正式環境成本依流量而定
提示
盡早設定 Azure 費用警示。若 Cosmos DB 設定不當費用可能偏高 — 開發期間請保持使用無伺服器方案。

安全

權限、密鑰、影響範圍

憑證儲存: Azure Key Vault + 受控識別(由 Bicep 範本自動設定)
資料出站: 完全在你的 Azure 訂閱與所選的 LLM 端點之間

故障排查

常見錯誤與修復

azd up fails: no capacity in region

OpenAI 的容量依區域而異。請嘗試 eastus2、swedencentral 或 francecentral。

Functions cold-start slowness

正式環境請使用 Premium 方案;Consumption 方案適合開發,但冷啟動會導致初始對話卡頓。

MCP tool call not recognized

確認 LangChain.js 的工具繫結使用的是範例中設定的 MCP 用戶端,並檢查 import 路徑。

替代方案

mcp-agent-langchainjs 對比其他方案

替代方案何時用它替代權衡
Vercel AI SDK starter你偏好使用 Vercel / Next.js 託管不同雲端平台;範例規模較小
AWS Bedrock Agents + sample你使用 AWS不同技術堆疊;Bedrock Agents 並非 MCP 原生支援

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills