[{"data":1,"prerenderedAt":348},["ShallowReactive",2],{"integration:\u002Fintegrations\u002Flangchain-js":3},{"id":4,"title":5,"body":6,"description":338,"extension":339,"keywords":340,"logo":341,"meta":342,"navigation":121,"order":343,"path":344,"product":18,"seo":345,"stem":346,"__hash__":347},"integrations\u002Fintegrations\u002Flangchain-js.md","Use 402.report with LangChain.js",{"type":7,"value":8,"toc":333},"minimark",[9,25,30,58,71,75,251,255,262,326,329],[10,11,12,19,20,24],"p",{},[13,14,18],"a",{"href":15,"rel":16},"https:\u002F\u002Fjs.langchain.com",[17],"nofollow","LangChain.js"," consumes MCP servers through\n",[21,22,23],"code",{},"@langchain\u002Fmcp-adapters",". 402.report exposes your x402 spend + forensics as read-only MCP tools\nyour agents can call.",[26,27,29],"h2",{"id":28},"_1-install","1. Install",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-bash shiki shiki-themes github-light github-dark","npm install @402report\u002Fsdk @langchain\u002Fmcp-adapters\n","bash","",[21,38,39],{"__ignoreMap":36},[40,41,44,48,52,55],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sScJk","npm",[40,49,51],{"class":50},"sZZnC"," install",[40,53,54],{"class":50}," @402report\u002Fsdk",[40,56,57],{"class":50}," @langchain\u002Fmcp-adapters\n",[10,59,60,61,64,65,70],{},"Set your key as ",[21,62,63],{},"REPORT402_API_KEY"," (create one in the ",[13,66,69],{"href":67,"rel":68},"https:\u002F\u002F402.report",[17],"dashboard",").",[26,72,74],{"id":73},"_2-load-the-spend-tools","2. Load the spend tools",[31,76,80],{"className":77,"code":78,"language":79,"meta":36,"style":36},"language-ts shiki shiki-themes github-light github-dark","import { MultiServerMCPClient } from \"@langchain\u002Fmcp-adapters\";\nimport { mcpHttpConfig } from \"@402report\u002Fsdk\";\n\nconst { url, headers } = mcpHttpConfig({ apiKey: process.env.REPORT402_API_KEY! });\n\nconst client = new MultiServerMCPClient({\n  mcpServers: {\n    report402: { transport: \"http\", url, headers },\n  },\n});\n\nconst tools = await client.getTools();\n\u002F\u002F Pass `tools` to a LangGraph\u002FLangChain agent (e.g. createReactAgent({ llm, tools })).\n","ts",[21,81,82,101,116,123,162,167,187,193,205,211,217,222,244],{"__ignoreMap":36},[40,83,84,88,92,95,98],{"class":42,"line":43},[40,85,87],{"class":86},"szBVR","import",[40,89,91],{"class":90},"sVt8B"," { MultiServerMCPClient } ",[40,93,94],{"class":86},"from",[40,96,97],{"class":50}," \"@langchain\u002Fmcp-adapters\"",[40,99,100],{"class":90},";\n",[40,102,104,106,109,111,114],{"class":42,"line":103},2,[40,105,87],{"class":86},[40,107,108],{"class":90}," { mcpHttpConfig } ",[40,110,94],{"class":86},[40,112,113],{"class":50}," \"@402report\u002Fsdk\"",[40,115,100],{"class":90},[40,117,119],{"class":42,"line":118},3,[40,120,122],{"emptyLinePlaceholder":121},true,"\n",[40,124,126,129,132,136,139,142,145,148,151,154,156,159],{"class":42,"line":125},4,[40,127,128],{"class":86},"const",[40,130,131],{"class":90}," { ",[40,133,135],{"class":134},"sj4cs","url",[40,137,138],{"class":90},", ",[40,140,141],{"class":134},"headers",[40,143,144],{"class":90}," } ",[40,146,147],{"class":86},"=",[40,149,150],{"class":46}," mcpHttpConfig",[40,152,153],{"class":90},"({ apiKey: process.env.",[40,155,63],{"class":134},[40,157,158],{"class":86},"!",[40,160,161],{"class":90}," });\n",[40,163,165],{"class":42,"line":164},5,[40,166,122],{"emptyLinePlaceholder":121},[40,168,170,172,175,178,181,184],{"class":42,"line":169},6,[40,171,128],{"class":86},[40,173,174],{"class":134}," client",[40,176,177],{"class":86}," =",[40,179,180],{"class":86}," new",[40,182,183],{"class":46}," MultiServerMCPClient",[40,185,186],{"class":90},"({\n",[40,188,190],{"class":42,"line":189},7,[40,191,192],{"class":90},"  mcpServers: {\n",[40,194,196,199,202],{"class":42,"line":195},8,[40,197,198],{"class":90},"    report402: { transport: ",[40,200,201],{"class":50},"\"http\"",[40,203,204],{"class":90},", url, headers },\n",[40,206,208],{"class":42,"line":207},9,[40,209,210],{"class":90},"  },\n",[40,212,214],{"class":42,"line":213},10,[40,215,216],{"class":90},"});\n",[40,218,220],{"class":42,"line":219},11,[40,221,122],{"emptyLinePlaceholder":121},[40,223,225,227,230,232,235,238,241],{"class":42,"line":224},12,[40,226,128],{"class":86},[40,228,229],{"class":134}," tools",[40,231,177],{"class":86},[40,233,234],{"class":86}," await",[40,236,237],{"class":90}," client.",[40,239,240],{"class":46},"getTools",[40,242,243],{"class":90},"();\n",[40,245,247],{"class":42,"line":246},13,[40,248,250],{"class":249},"sJ8bj","\u002F\u002F Pass `tools` to a LangGraph\u002FLangChain agent (e.g. createReactAgent({ llm, tools })).\n",[26,252,254],{"id":253},"_3-observe-the-payments-your-agent-makes","3. Observe the payments your agent makes",[10,256,257,258,261],{},"Route outbound HTTP through the proxy so x402 activity is recorded. Anywhere your tools call a\npaid API with ",[21,259,260],{},"fetch",", use the proxy fetch:",[31,263,265],{"className":77,"code":264,"language":79,"meta":36,"style":36},"import { createProxyFetch } from \"@402report\u002Fsdk\";\n\nconst fetch402 = createProxyFetch({ apiKey: process.env.REPORT402_API_KEY! });\nconst res = await fetch402(\"https:\u002F\u002Fapi.example.com\u002Fpremium\");\n",[21,266,267,280,284,304],{"__ignoreMap":36},[40,268,269,271,274,276,278],{"class":42,"line":43},[40,270,87],{"class":86},[40,272,273],{"class":90}," { createProxyFetch } ",[40,275,94],{"class":86},[40,277,113],{"class":50},[40,279,100],{"class":90},[40,281,282],{"class":42,"line":103},[40,283,122],{"emptyLinePlaceholder":121},[40,285,286,288,291,293,296,298,300,302],{"class":42,"line":118},[40,287,128],{"class":86},[40,289,290],{"class":134}," fetch402",[40,292,177],{"class":86},[40,294,295],{"class":46}," createProxyFetch",[40,297,153],{"class":90},[40,299,63],{"class":134},[40,301,158],{"class":86},[40,303,161],{"class":90},[40,305,306,308,311,313,315,317,320,323],{"class":42,"line":125},[40,307,128],{"class":86},[40,309,310],{"class":134}," res",[40,312,177],{"class":86},[40,314,234],{"class":86},[40,316,290],{"class":46},[40,318,319],{"class":90},"(",[40,321,322],{"class":50},"\"https:\u002F\u002Fapi.example.com\u002Fpremium\"",[40,324,325],{"class":90},");\n",[10,327,328],{},"402.report is non-custodial — it observes x402 activity, it never holds or settles funds.",[330,331,332],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":36,"searchDepth":103,"depth":103,"links":334},[335,336,337],{"id":28,"depth":103,"text":29},{"id":73,"depth":103,"text":74},{"id":253,"depth":103,"text":254},"Connect LangChain.js \u002F LangGraph agents to 402.report's MCP tools and route their HTTP through the proxy — with one API key.","md","LangChain MCP, LangChain.js x402, LangGraph agent spend, MultiServerMCPClient, agent payment observability","\u002Flangchain.svg",{},30,"\u002Fintegrations\u002Flangchain-js",{"title":5,"description":338},"integrations\u002Flangchain-js","PyCLJ67UWkjR6ZIyuoUzDvOjtQKAbaRooS3lAiIptNM",1784841652800]