Typing issue when using createReactAgent with tools with "configurable" parameters

[codebanesr]

Checked other resources

• I added a very descriptive title to this issue.
• I searched the LangChain.js documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.
• I am sure that this is a bug in LangChain.js rather than my code.
• The bug is not resolved by updating to the latest stable version of LangChain (or the specific integration package).

Example Code

import { ChatOpenAI } from "@langchain/openai";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { textFinderTool } from "./tools/textFinderTool";
import { playwrightActionTool } from "./tools/playwrightActionTool";
import {Browser, Page} from "playwright"

interface AgentExecutorInput {
  browser: Browser;
  page: Page;
}

export async function createAgentExecutor({
  browser,
  page
}: AgentExecutorInput) {

  const llm = new ChatOpenAI({
    model: "gpt-3.5-turbo",
    temperature: 0,
    apiKey: process.env.OPENAI_API_KEY
  });
  
  const tools = [textFinderTool, playwrightActionTool.bind({
    "configurable": {
      "page": page
    }
  })];


  const agent = createReactAgent({
    llm,
    tools
  });

  return agent;
}

As soon as i bind configurable parameters to playwrightActionTool
I get the following error:

 Type 'Runnable<ToolCall | { textToFind: string; actionType: "type" | "click" | "hover" | "doubleClick"; inputText?: string | undefined; }, any, RunnableConfig<Record<string, any>>>' is missing the following properties from type 'RunnableToolLike<ZodType<any, ZodTypeDef, any>, unknown>': schema, bound, config, _mergeConfigts(2322)
react_agent_executor.d.ts(37, 5): The expected type comes from property 'tools' which is declared here on type 'CreateReactAgentParams<AnnotationRoot<{}>, Record<string, any>>'

I want the playwright tool to have access to the page object, and currently typescript is stopping me from doing it

Error Message and Stack Trace (if applicable)

Type '(DynamicStructuredTool<ZodObject<{ goal: ZodString; summary: ZodString; }, "strip", ZodTypeAny, { goal: string; summary: string; }, { goal: string; summary: string; }>> | Runnable<...>)[]' is not assignable to type 'ToolNode | (StructuredToolInterface | RunnableToolLike<ZodType<any, ZodTypeDef, any>, unknown>)[]'.
Type '(DynamicStructuredTool<ZodObject<{ goal: ZodString; summary: ZodString; }, "strip", ZodTypeAny, { goal: string; summary: string; }, { goal: string; summary: string; }>> | Runnable<...>)[]' is not assignable to type '(StructuredToolInterface | RunnableToolLike<ZodType<any, ZodTypeDef, any>, unknown>)[]'.
Type 'DynamicStructuredTool<ZodObject<{ goal: ZodString; summary: ZodString; }, "strip", ZodTypeAny, { goal: string; summary: string; }, { goal: string; summary: string; }>> | Runnable<...>' is not assignable to type 'StructuredToolInterface | RunnableToolLike<ZodType<any, ZodTypeDef, any>, unknown>'.
Type 'Runnable<ToolCall | { textToFind: string; actionType: "type" | "click" | "hover" | "doubleClick"; inputText?: string | undefined; }, any, RunnableConfig<Record<string, any>>>' is not assignable to type 'StructuredToolInterface | RunnableToolLike<ZodType<any, ZodTypeDef, any>, unknown>'.
Type 'Runnable<ToolCall | { textToFind: string; actionType: "type" | "click" | "hover" | "doubleClick"; inputText?: string | undefined; }, any, RunnableConfig<Record<string, any>>>' is missing the following properties from type 'RunnableToolLike<ZodType<any, ZodTypeDef, any>, unknown>': schema, bound, config, _mergeConfigts(2322)
react_agent_executor.d.ts(37, 5): The expected type comes from property 'tools' which is declared here on type 'CreateReactAgentParams<AnnotationRoot<{}>, Record<string, any>>'

Also when i try to run the code using @ts-ignore, i get the following

TypeError: Cannot read properties of undefined (reading '_def')
    at zodToJsonSchema (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/openai@4.82.0_zod@3.24.1/node_modules/openai/src/_vendor/zod-to-json-schema/zodToJsonSchema.ts:27:14)
    at zodToJsonSchema (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/openai@4.82.0_zod@3.24.1/node_modules/openai/src/helpers/zod.ts:12:26)
    at zodFunction (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/openai@4.82.0_zod@3.24.1/node_modules/openai/src/helpers/zod.ts:98:21)
    at _convertToOpenAITool (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/@langchain+openai@0.3.17_@langchain+core@0.3.37_openai@4.82.0_zod@3.24.1__/node_modules/@langchain/openai/dist/utils/tools.cjs:22:50)
    at _convertChatOpenAIToolTypeToOpenAITool (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/@langchain+openai@0.3.17_@langchain+core@0.3.37_openai@4.82.0_zod@3.24.1__/node_modules/@langchain/openai/dist/chat_models.cjs:245:48)
    at /Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/@langchain+openai@0.3.17_@langchain+core@0.3.37_openai@4.82.0_zod@3.24.1__/node_modules/@langchain/openai/dist/chat_models.cjs:1161:40
    at Array.map (<anonymous>)
    at ChatOpenAI.bindTools (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/@langchain+openai@0.3.17_@langchain+core@0.3.37_openai@4.82.0_zod@3.24.1__/node_modules/@langchain/openai/dist/chat_models.cjs:1161:26)
    at createReactAgent (/Users/shanurrahman/Documents/spc/qwen/browserwise/node_modules/.pnpm/@langchain+langgraph@0.2.44_@langchain+core@0.3.37_openai@4.82.0_zod@3.24.1__/node_modules/@langchain/langgraph/dist/prebuilt/react_agent_executor.cjs:132:32)
    at createAgentExecutor (/Users/shanurrahman/Documents/spc/qwen/browserwise/src/agent.ts:30:33)

Description

I am trying to send the reference of playwright object to my tool, but typescript won't allow me to do that

System Info

(base) ➜ browserwise git:(main) ✗ pnpm info langchain

langchain@0.3.15 | MIT | deps: 12 | versions: 310
Typescript bindings for langchain
https://github.com/langchain-ai/langchainjs/tree/main/langchain/

node -v
v20.13.1

MacOS

pnpm -v
9.1.2

[dosubot]

The issue you're encountering is related to TypeScript type compatibility when using createReactAgent with tools that have configurable parameters. The error message suggests that the playwrightActionTool does not conform to the expected RunnableToolLike type, which requires specific properties such as schema, bound, and config.

To resolve this, you need to ensure that the playwrightActionTool is correctly defined as a RunnableToolLike. Here are some steps you can take:

1. Check the Tool Definition: Ensure that playwrightActionTool is defined with the necessary properties to match the RunnableToolLike type. This includes having a schema for input validation, a bound runnable instance, and any other required configurations.

2. Binding Configurable Parameters: When binding the page object, make sure that the tool's type definition allows for such a configuration. You might need to adjust the tool's implementation to accept and handle the page object correctly.

3. Type Safety: Verify that the tool's type matches the expected ToolInterface or RunnableToolLike type. This might involve updating the tool's type annotations or using a wrapper to ensure compatibility.

4. Review Documentation: Refer to the LangChain.js documentation for examples of how to define and use tools with configurable parameters. This can provide guidance on structuring your tool to meet the type requirements.

By ensuring that your tool conforms to the expected type structure, you should be able to resolve the TypeScript error and successfully use createReactAgent with your tools.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[codebanesr]

on a second note, binding it to the agent seems to pass the configuration object down the line

Removing bind call from tool and adding it to agent instance instead, seems to work! This seems like a bad design choice, though i might be wrong!

  return agent.bind({
    "configurable": {
      "browser": browser,
      "page": page
    }
  });

[jacoblee93]

Yeah, that is the issue - calling .bind does not result in an instance of the same class, which is likely the root of your typing/runtime issues.

We have thought about and should fix this but your approach right now is fine.