/ Verzeichnis / Playground / mcp-agent-langchainjs
● Offiziell Azure-Samples ⚡ Sofort

mcp-agent-langchainjs

von Azure-Samples · Azure-Samples/mcp-agent-langchainjs

Azure's official reference — a serverless LangChain.js agent that uses MCP to call a burger-ordering tool API, fully deployable via azd up.

This is an Azure Samples reference app, not an end-user MCP. It shows how to build a serverless LangChain.js agent that integrates MCP for tool calls, deployed to Azure Static Web Apps + Functions + Cosmos DB. The demo is a burger restaurant — but the pattern applies to any tool-using agent you want on Azure.

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

agent-langchainjs.replay ▶ bereit
0/0

Installieren

Wählen Sie Ihren Client

~/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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

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

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

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

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

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

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: mcp-agent-langchainjs

Bootstrap a serverless agent on Azure with MCP tool calls

👤 Azure devs building AI features ⏱ ~120 min advanced

Wann einsetzen: You want to ship an LLM-powered feature on Azure and need a working reference to fork.

Voraussetzungen
  • Azure subscription — azure.microsoft.com — free tier covers dev
  • Azure Developer CLIbrew install azd or Windows installer
Ablauf
  1. Fork and deploy
    Fork Azure-Samples/mcp-agent-langchainjs and walk me through azd up to deploy to my Azure sub.✓ Kopiert
    → Live Azure URL + Functions + Cosmos provisioned
  2. Swap the demo tool
    Replace the burger-ordering MCP with a custom MCP for my domain (e.g. appointment booking). Show me the wiring.✓ Kopiert
    → Code diff + working custom tool
  3. Customize the UI
    The sample has a chat UI; customize brand/colors and the welcome message.✓ Kopiert
    → Styled app

Ergebnis: A shippable Azure-hosted agent derived from a vetted sample.

Fallstricke
  • Free-tier Azure OpenAI has low quota — Provision your own OpenAI resource in a region with capacity; set endpoint in env
  • Local Ollama doesn't handle complex tool calls well — Use a cloud model (GPT-4o-mini, etc.) for dev that involves multi-step tool calls

Learn the MCP + LangChain.js integration pattern

👤 Devs new to MCP ⏱ ~60 min intermediate

Wann einsetzen: You're evaluating MCP and want to see how it plugs into the LangChain.js ecosystem.

Ablauf
  1. Read the code
    Summarize how this repo wires MCP to LangChain.js agents. What's the key integration point?✓ Kopiert
    → Architecture explanation
  2. Run locally
    Run it in Codespaces. Exercise the burger-order flow. Observe the MCP tool calls in logs.✓ Kopiert
    → Working local run + tool call traces

Ergebnis: Hands-on understanding of the pattern before building your own.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

agent-langchainjs + github

CI/CD the sample to your own fork

Fork the repo, set up GitHub Actions to azd deploy on push to main.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
(reference app — not a callable MCP) N/A This is a sample app you deploy, not a tool Claude calls N/A

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Azure consumption-based
Tokens pro Aufruf
N/A — you're building the app, not calling it as a tool
Kosten in €
Varies — cheap on free tier for dev; production costs depend on traffic
Tipp
Use Azure cost alerts early. Cosmos DB can be expensive if mis-provisioned — keep it on serverless tier during dev.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Azure Key Vault + Managed Identity (set up by the Bicep templates)
Datenabfluss: Entirely within your Azure sub + chosen LLM endpoint

Fehlerbehebung

Häufige Fehler und Lösungen

azd up fails: no capacity in region

OpenAI capacity varies by region. Try eastus2, swedencentral, or francecentral.

Functions cold-start slowness

Use Premium plan for prod; Consumption is fine for dev but cold-starts stall early chats.

MCP tool call not recognized

Confirm the LangChain.js tool binding is using the MCP client the sample sets up. Check the imports.

Alternativen

mcp-agent-langchainjs vs. andere

AlternativeWann stattdessenKompromiss
Vercel AI SDK starterYou prefer Vercel / Next.js hostingDifferent cloud; smaller sample
AWS Bedrock Agents + sampleYou're on AWSDifferent stack; Bedrock agents aren't MCP-native

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen