Sponsored by Deepsite.site

MCP Tools Usage From LangChain / Example in TypeScript

Created By
hideyaa year ago
MCP Tools Usage From LangChain ReAct Agent / Example in TypeScript
Content

MCP Tools Usage From LangChain / Example in TypeScript License: MIT

This simple Model Context Protocol (MCP) client demonstrates the use of MCP server tools by LangChain ReAct Agent.

It leverages a utility function convertMcpToLangchainTools() from @h1deya/langchain-mcp-tools.
This function handles parallel initialization of specified multiple MCP servers and converts their available tools into an array of LangChain-compatible tools (StructuredTool[]).

Anthropic's claude-3-5-sonnet-latest is used as the LLM. For convenience, code for OpenAI's gpt-4o is also included and commented out.

A bit more realistic (conversational) MCP Client is available here

A python equivalent of this app is available here

Prerequisites

  • Node.js 16+
  • npm 7+ (npx) to run Node.js-based MCP servers
  • [optional] uv (uvx) installed to run Python-based MCP servers
  • API key from Anthropic (or OpenAI)

Usage

  1. Install dependencies:

    npm install
    
  2. Setup API key:

    cp .env.template .env
    
    • Update .env as needed.
    • .gitignore is configured to ignore .env to prevent accidental commits of the credentials.
  3. Run the app:

    npm start
    

Sample Code for SSE Authentiocation

A simple example of showing how to implement an OAuth client provider and use it with the langchain-mcp-tools library can be found in src/sse-auth-test-client.ts.

For testing purposes, a sample MCP server with OAuth authentication support that works with the above client is provided in src/sse-auth-test-server.ts.

You can run the server with npm run sse-auth-test-server and the client with npm run sse-auth-test-client.

Recommend Clients
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
CursorThe AI Code Editor
Cherry Studio🍒 Cherry Studio is a desktop client that supports for multiple LLM providers.
Roo Code (prev. Roo Cline)Roo Code (prev. Roo Cline) gives you a whole dev team of AI agents in your code editor.
ZedCode at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
LutraLutra is the first MCP compatible client built for everyone
LINKAGOGO-MCP---BOOKMARK-MANAGERManage your LinkaGoGo bookmarks through any AI assistant that supports the Model Context Protocol (MCP). Search, add, organize, tag, move, and export bookmarks conversationally — 16 tools for full bookmark and folder management. Connect via Claude.ai, Claude Desktop, or any MCP-compatible client.
Y GuiA web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.
WindsurfThe new purpose-built IDE to harness magic
MCP PlaygroundCall MCP Server Tools Online
chatmcpChatMCP is an AI chat client implementing the Model Context Protocol (MCP).
HyperChatHyperChat is a Chat client that strives for openness, utilizing APIs from various LLMs to achieve the best Chat experience, as well as implementing productivity tools through the MCP protocol.
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
Continue⏩ Create, share, and use custom AI code assistants with our open-source IDE extensions and hub of models, rules, prompts, docs, and other building blocks
A Sleek AI Assistant & MCP Client5ire is a cross-platform desktop AI assistant, MCP client. It compatible with major service providers, supports local knowledge base and tools via model context protocol servers .
Refact.aiOpen-source AI Agent for VS Code and JetBrains that autonomously solves coding tasks end-to-end.
Cline – #1 on OpenRouterAutonomous coding agent right in your IDE, capable of creating/editing files, executing commands, using the browser, and more with your permission every step of the way.
MCP ConnectEnables cloud-based AI services to access local Stdio based MCP servers via HTTP requests
ChatWiseThe second fastest AI chatbot™
y-cli 🚀A Tiny Terminal Chat App for AI Models with MCP Client Support
DeepChatYour AI Partner on Desktop