Introduction

Building AI agents that can scrape the web and act on that data is a common goal, but trusting an autonomous agent to perform critical actions without oversight is a significant risk. langgraph-js-mcp is a TypeScript-based implementation that solves this by integrating LangGraph.js, the Model Context Protocol (MCP), and human-in-the-loop approval workflows. By combining these technologies, developers can create agents that gather intelligence from the web via Firecrawl and ensure that the final output or action is vetted by a human expert before execution.

What Is langgraph-js-mcp?

langgraph-js-mcp is a reference implementation and toolset that allows AI agents to use the Model Context Protocol (MCP) to connect to external tools—specifically web scraping tools like Firecrawl—while utilizing LangGraph.js for stateful orchestration and gotoHuman for human-in-the-loop approvals. It is written in TypeScript and licensed under the MIT License.

The project serves as a bridge between the standardized tool-calling interface of MCP and the complex, cyclic workflows of LangGraph, allowing developers to build agents that don’t just “scrape and send,” but “scrape, draft, review, and execute.”

Why langgraph-js-mcp Matters

Traditional AI agents often suffer from a “black box” problem where the agent performs a sequence of actions and the user only sees the final result. In high-stakes environments—such as sales outreach, financial research, or legal document gathering—the cost of an AI hallucination or an incorrect scrape can be catastrophic.

langgraph-js-mcp matters because it formalizes the “Human-in-the-Loop” (HITL) pattern. Instead of hoping the LLM gets the scrape right, the agent pauses its execution state, saves its progress to a checkpoint, and waits for a human to approve or edit the gathered data in a dedicated dashboard. This transforms the AI from an autonomous (and potentially erratic) tool into a collaborative assistant that enhances human productivity without sacrificing quality control.

Key Features

• MCP Integration: Leverages the Model Context Protocol to connect to external tools without writing custom wrappers for every API, enabling plug-and-play tool discovery.
• Stateful Orchestration: Uses LangGraph.js to manage complex, cyclic workflows where the agent can loop back to a scraping step if a human reviewer rejects the data.
• Human-in-the-Loop Approvals: Integrates with gotoHuman to provide a central dashboard where experts can review, edit, and approve AI-generated content before it is finalized.
• Firecrawl Connectivity: Specifically optimized for Firecrawl, which converts messy web pages into LLM-ready markdown, bypassing common anti-bot protections.
• Durable Execution: Utilizes LangGraph’s checkpointing system to ensure that the agent’s state is preserved even if the process restarts or the human reviewer takes hours to respond.
• TypeScript First: Built with TypeScript for strong typing and better developer experience in modern Node.js environments.

How langgraph-js-mcp Compares

When comparing langgraph-js-mcp to other agentic frameworks, the primary differentiator is the explicit focus on the MCP standard and human-in-the-loop checkpoints.

While standard LangChain is excellent for linear chains of thought, langgraph-js-mcp is designed for production-grade agents that that require cycles (e.g., “if the human rejects the draft, go back to the research node”). By using MCP, it avoids the “wrapper hell” where developers must write a new tool definition for every single API they want to use.

Getting Started: Installation

To get langgraph-js-mcp running, you will need API keys for the integrated services. Ensure you have Node.js installed on your system.

Prerequisites

You will need the following keys:

• Firecrawl API Key (from firecrawl.dev)
• gotoHuman API Key (from app.gotohuman.com)
• OpenAI API Key (or another LLM provider supported by LangGraph.js)

Installation Steps

# Clone the repository
git clone https://github.com/gotohuman/langgraph-js-mcp.git
cd langgraph-js-mcp

# Install dependencies
npm install

How to Use langgraph-js-mcp

The basic workflow of langgraph-js-mcp follows a research-draft-review cycle. The agent starts by using an MCP tool to scrape a target URL using Firecrawl. It then processes that raw markdown into a structured draft (e.g., a personalized email or a research summary).

Once the draft is created, the agent triggers a gotoHuman review request. The agent’s execution is paused, and the state is saved to a checkpoint. The agent will not proceed to the final execution node until a human reviewer logs into the gotoHuman dashboard, reviews the content, and clicks “Approve.” If the reviewer provides feedback or edits the text, those changes are fed back into the agent’s state, allowing the agent to refine the agent’s output based on human guidance.

Code Examples

The following examples demonstrate how the project integrates MCP tools and human approvals within a LangGraph.js workflow.

Example 1: Connecting to an MCP Server

This snippet shows how to use the MultiServerMCPClient to load tools from an MCP server (like the Firecrawl MCP server) without manual tool definitions.

import { MultiServerMCPClient } from "@langchain/mcp-adapters";

const client = new MultiServerMCPClient({
  servers: {
    firecrawl: {
      url: "https://mcp.composio.dev/firecrawl",
    },
  },
});

const tools = await client.getTools();

Example 2: Implementing a Human Approval Node

This example illustrates how a node in the graph can pause execution and wait for a human response via gotoHuman.

import { gotoHuman } from "@gotohuman/sdk";

async function reviewNode(state) {
  const { draft } = state;
  
  // Create a review request in gotoHuman
  await gotoHuman.createReview("Review the scraped data draft", {
    content: draft,
    formId: "your_form_id",
  });

  // The graph pauses here due to LangGraph's interrupt
  return { status: "awaiting_approval" };
}

Advanced Configuration

To customize the behavior of the agent, you must configure your environment variables in a .env file. The project relies on these for authentication and routing.

OPENAI_API_KEY=sk-proj-XXX
GOTOHUMAN_API_KEY=XYZ
FIRECRAWL_API_KEY=ABC
GOTOHUMAN_FORM_ID=your_form_id_here

You can also configure the MultiServerMCPClient to prefix tool names with the server name to avoid collisions when connecting to multiple MCP servers simultaneously.

Real-World Use Cases

langgraph-js-mcp is most effective in scenarios where AI autonomy is a risk and expert verification is required.

• Personalized Sales Outreach: A sales agent scrapes a lead’s LinkedIn profile and recent company news via Firecrawl, drafts a personalized email, and pauses for a sales manager to approve the tone and accuracy before sending.
• Competitive Intelligence: An agent monitors competitor pricing pages, scrapes changes, and drafts a summary report. A market analyst reviews the summary to ensure the AI hasn’t misinterpreted the pricing tiers before the report is distributed to executives.
• Customer Support Escalation: An agent scrapes a user’s account history and public documentation to draft a complex technical response. A senior engineer reviews the draft to ensure the technical accuracy of the solution before it is sent to the customer.

Contributing to langgraph-js-mcp

Contributions are welcome to help expand the toolset and the reference implementation. Since the project is open-source, you can contribute by following the standard GitHub flow:

• Reporting Bugs: Open an issue on GitHub to describe the bug, including steps to reproduce it.
• Submitting PRs: Fork the repository, create a feature branch, and submit a pull request with your changes.
• Improving Documentation: Help improve the README or add more usage examples to the project.

Community and Support

Support for langgraph-js-mcp is primarily handled through GitHub. You can find the project’s source code, report issues, and manage contributions via the GitHub repository. For broader architectural guidance on LangGraph.js and MCP, refer to the official LangChain JS documentation and the MCP official site.

Conclusion

The shift toward agentic AI is moving from simple autonomous loops to collaborative systems. langgraph-js-mcp provides a practical blueprint for this transition by combining the tool-discovery power of MCP, the stateful orchestration of LangGraph.js, and the critical safety layer of human-in-the-loop approvals via gotoHuman.

For developers who need to build agents that are reliable, verifiable, and production-ready, this project is the right choice. It is not intended for simple, one-off scraping tasks, but for complex workflows where the quality of the output is more important than the speed of execution. Star the repo, try the quickstart, and join the community to build safer AI agents.

Resources

• langgraph-js-mcp GitHub Repository
• Firecrawl Documentation
• gotoHuman Dashboard
• Model Context Protocol (MCP) Specification