mcp-agent-langchainjs MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

LangChain.js agent with MCP tool integration (reference pattern)
Serverless deploy — Static Web Apps + Azure Functions + Cosmos DB
IaC via Bicep templates
User auth + session history
Local dev via Ollama or Codespaces; production via azd up

라이브 데모

실제 사용 모습

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

Bootstrap a serverless agent on Azure with MCP tool calls

👤 Azure devs building AI features ⏱ ~120 min advanced

언제 쓸까: You want to ship an LLM-powered feature on Azure and need a working reference to fork.

사전 조건

Azure subscription — azure.microsoft.com — free tier covers dev
Azure Developer CLI — brew install azd or Windows installer

흐름

Fork and deploy

Fork Azure-Samples/mcp-agent-langchainjs and walk me through azd up to deploy to my Azure sub.✓ 복사됨

→ Live Azure URL + Functions + Cosmos provisioned
Swap the demo tool

Replace the burger-ordering MCP with a custom MCP for my domain (e.g. appointment booking). Show me the wiring.✓ 복사됨

→ Code diff + working custom tool
Customize the UI

The sample has a chat UI; customize brand/colors and the welcome message.✓ 복사됨

→ Styled app

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

함정

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

언제 쓸까: You're evaluating MCP and want to see how it plugs into the LangChain.js ecosystem.

흐름

Read the code

Summarize how this repo wires MCP to LangChain.js agents. What's the key integration point?✓ 복사됨

→ Architecture explanation
Run locally

Run it in Codespaces. Exercise the burger-order flow. Observe the MCP tool calls in logs.✓ 복사됨

→ Working local run + tool call traces

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

조합

다른 MCP와 조합해 10배 효율

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.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
(reference app — not a callable MCP)	N/A	This is a sample app you deploy, not a tool Claude calls	N/A

비용 및 제한

운영 비용

API 쿼터: Azure consumption-based
호출당 토큰: N/A — you're building the app, not calling it as a tool
금액: Varies — cheap on free tier for dev; production costs depend on traffic
팁: Use Azure cost alerts early. Cosmos DB can be expensive if mis-provisioned — keep it on serverless tier during dev.

보안

권한, 시크릿, 파급범위

자격 증명 저장: Azure Key Vault + Managed Identity (set up by the Bicep templates)

데이터 외부 송신: Entirely within your Azure sub + chosen LLM endpoint

Sample apps are starting points, not production-ready. Harden auth, rate limiting, and observability before going live.
Keep your OpenAI / LLM keys in Key Vault, not in source code.

문제 해결

자주 발생하는 오류와 해결

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.

대안

mcp-agent-langchainjs 다른 것과 비교

대안	언제 쓰나	단점/장점
Vercel AI SDK starter	You prefer Vercel / Next.js hosting	Different cloud; smaller sample
AWS Bedrock Agents + sample	You're on AWS	Different stack; Bedrock agents aren't MCP-native

mcp-agent-langchainjs