Agents: Dynamically Run Chains Based on User Input

[kamalkech]

Follow all steps of documetation

i get this error:

cess to fetch at 'https://serpapi.com/search?location=Austin%2CTexas%2CUnited+States&hl=en&gl=us&api_key=ec6fab4dbaaef213a2bc1c0fb31d1da1b51884d3d45c0fb524073701427dabcc&q=Olivia+Wilde+boyfriend' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
serpapi.js:53     GET https://serpapi.com/search?location=Austin%2CTexas%2CUnited+States&hl=en&gl=us&api_key=ec6fab4dbaaef213a2bc1c0fb31d1da1b51884d3d45c0fb524073701427dabcc&q=Olivia+Wilde+boyfriend net::ERR_FAILED 200
_call @ serpapi.js:53
call @ base.js:31
await in call (async)
eval @ executor.js:97
await in eval (async)
_call @ executor.js:93
await in _call (async)
call @ base.js:61
await in call (async)
search @ page.tsx:37
await in search (async)
callCallback @ react-dom.development.js:19200
invokeGuardedCallbackDev @ react-dom.development.js:19249
invokeGuardedCallback @ react-dom.development.js:19313
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:19327
executeDispatch @ react-dom.development.js:30596
processDispatchQueueItemsInOrder @ react-dom.development.js:30628
processDispatchQueue @ react-dom.development.js:30641
dispatchEventsForPlugins @ react-dom.development.js:30652
eval @ react-dom.development.js:30842
batchedUpdates$1 @ react-dom.development.js:23705
batchedUpdates @ react-dom.development.js:27540
dispatchEventForPluginEventSystem @ react-dom.development.js:30841
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:28045
dispatchEvent @ react-dom.development.js:28037
dispatchDiscreteEvent @ react-dom.development.js:28010
serpapi.js:53        Uncaught (in promise) TypeError: Failed to fetch
    at SerpAPI._call (webpack-internal:///(app-client)/./node_modules/langchain/dist/tools/serpapi.js:59:28)
    at SerpAPI.call (webpack-internal:///(app-client)/./node_modules/langchain/dist/tools/base.js:36:33)
    at async eval (webpack-internal:///(app-client)/./node_modules/langchain/dist/agents/executor.js:102:23)
    at async Promise.all (index 0)
    at async AgentExecutor._call (webpack-internal:///(app-client)/./node_modules/langchain/dist/agents/executor.js:98:30)
    at async AgentExecutor.call (webpack-internal:///(app-client)/./node_modules/langchain/dist/chains/base.js:66:28)
    at async search (webpack-internal:///(app-client)/./src/app/serpapi/page.tsx:39:24)
_call @ ser

[miguelmoya97]

'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

You need to enable CORS in your application. Install cors with NPM and include it in your express application

[shawnesquivel]

thanks @miguelmoya97 hahaha

[kamalkech]

@shawnesquivel @shawnesquivel for example in nextjs or sveltekit we can make code in client or server side, the code must to add on server side and works correctly, so no necessary install cors package.

[shawnesquivel]

@kamalkech even better, thanks!!

I have another follow up question if you don't mind. In my server component, I call the agent like this.

server component

const ServerComp = async () => {

   // agent setup ... 

  const result = await agent.call({ input: input });
  console.log(result);

  return (
    <div>
      <h1>Agents (Server)</h1>
      <p>Recreate the /agents with server component</p>
      <p>{result && result.output}</p>
    </div>
  );
};

do you know how I could then return that to the frontend? since we're not allowed to useState/useEffect in server components, I'm a bit stuck on how to do this.

last couple of lines from the server logs

[chain/end] [1:chain:agent_executor > 5:chain:llm_chain] [3.21s] Exiting Chain run with output: {
  "text": " I now know the final answer\nFinal Answer: Canada has ten provinces."
}
[chain/end] [1:chain:agent_executor] [7.45s] Exiting Chain run with output: {
  "output": "Canada has ten provinces."
}
{ output: 'Canada has ten provinces.' }

[kamalkech]

@shawnesquivel use nextjs api to get input params and return the output

[shawnesquivel]

that worked, thanks!! @kamalkech