Custom tool failing

[reef tapir]

I am getting this error for my custom tool implementation
Also neither an error nor data is printing to the console at this like in the tool execute function:

if ( !res.ok ) {
            console.log(`Failed to fetch cats with params: ${JSON.stringify(args, undefined, 2)}`)
            throw new Error(`Failed to fetch cats with params: ${JSON.stringify(args, undefined, 2)}`)
        }

        const data = await res.json();

And the json received at the front end's renderTool is an empty string which is not a valid json.
The cat api is working fine as I have tested with the exact same args in postman and it gave me the data

[devout vessel]

This solution has been AI generated

Your tool result is an empty string, so JSON.parse("") throws “Unexpected end of JSON input.” This happens because get_cats is registered with useFrontendTool but has no handler, so nothing executes and the renderer gets an empty result. Also, there are typos in your render (utl, breads).

Fix 1: Backend‑executed tool + frontend renderer (recommended)

Use useRenderTool for get_cats if the fetch runs on your backend. Do not also register a useFrontendTool with the same name.

useRenderTool({
  name: "get_cats",
  parameters: z.object({ /* your existing schema */ }),
  render: ({ args, result, status }) => {
    if (status !== "complete") {
      return <div className="bg-[#667eea] text-white p-4 rounded-lg max-w-md">⚙ Retrieving Cats...</div>;
    }

    let parsed = result;
    if (typeof result === "string" && result.length > 0) {
      try { parsed = JSON.parse(result); } catch { parsed = {}; }
    } else if (!result) { parsed = {}; }

    return (
      <div className="flex flex-wrap gap-2">
        {parsed.cats?.map((cat: any) => (
          <Image key={cat.id} src={cat.url} alt={cat.breeds?.[0]?.name || "Cat"} width={200} height={200} />
        ))}
      </div>
    );
  }
});

Fix 2: Pure frontend tool

If you want to fetch in the browser, keep useFrontendTool but add a handler that returns JSON‑serializable data.

useFrontendTool({
  name: "get_cats",
  parameters: z.object({ /* your schema */ }),
  handler: async (args) => {
    const url = new URL("https://api.thecatapi.com/v1/images/search");
    Object.entries(args).forEach(([k,v]) => v!=null && url.searchParams.set(k, String(v)));
    const res = await fetch(url.toString(), { headers: { /* optional API key */ } });
    if (!res.ok) throw new Error(`Failed to fetch cats with params: ${JSON.stringify(args)}`);
    const data = await res.json();

    return { cats: data }; // becomes `result` in render
  },
  render: ({ result, status }) => { /* same renderer as above with safe parsing */ }
});

Also fix

• Use cat.url (not utl).
• Use cat.breeds (not breads).
• Avoid registering both frontend and backend tools with the same name to prevent empty results.

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

Thank you for your feedback! Our team will provide additional assistance. 🔄