Sponsored by Deepsite.site

MCP Tools Usage From LangChain / Example in TypeScript

Created By
hideya10 months 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.
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
ZedCode at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
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.
WindsurfThe new purpose-built IDE to harness magic
y-cli 🚀A Tiny Terminal Chat App for AI Models with MCP Client Support
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.
Y GuiA web-based graphical interface for AI chat interactions with support for multiple AI models and MCP (Model Context Protocol) servers.
ChatWiseThe second fastest AI chatbot™
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 .
MCP PlaygroundCall MCP Server Tools Online
CursorThe AI Code Editor
Cherry Studio🍒 Cherry Studio is a desktop client that supports for multiple LLM providers.
LutraLutra is the first MCP compatible client built for everyone
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
Roo Code (prev. Roo Cline)Roo Code (prev. Roo Cline) gives you a whole dev team of AI agents in your code editor.
MCP ConnectEnables cloud-based AI services to access local Stdio based MCP servers via HTTP requests
chatmcpChatMCP is an AI chat client implementing the Model Context Protocol (MCP).
DeepChatYour AI Partner on Desktop
BACHAI-TWITTER-API45Twitter的一些api mcp
Refact.aiOpen-source AI Agent for VS Code and JetBrains that autonomously solves coding tasks end-to-end.