Skip to main content
Without it, useCallTool and useToolInfo need their tool types written by hand, duplicating your server. generateHelpers infers them from your server type, so you import already-typed hooks. Set it up once and use the hooks across your views.

​
Example

helpers.ts wires your server type to the hooks; views import the typed hooks from it.
helpers.ts
import type { AppType } from "./server"; // type-only import
import { generateHelpers } from "skybridge/web";

export const { useCallTool, useToolInfo } = generateHelpers<AppType>();
views/carousel.tsx
import { useCallTool, useToolInfo } from "../helpers.js";

function Carousel() {
  const { output } = useToolInfo<"search-products">(); // output typed from the tool
  const { callTool } = useCallTool("create-checkout"); // name autocompleted, input typed

  return (
    <button onClick={() => callTool({ items: output.products })}>Check out</button>
  );
}

​
Signature

const { useCallTool, useToolInfo } = generateHelpers<ServerType>();

​
Type Parameters

​
ServerType

ServerType extends McpServer<AnyToolRegistry>;
Your server’s type, typeof server. Export it from your server file with export type AppType = typeof server, then pass it here.
Inference works only when the server is built by chaining .registerTool() calls off the constructor, so the tool types accumulate on the server type.

​
Returns

Two hooks. Both autocomplete tool names and infer types from ServerType, so you write no generics; their surface is otherwise identical to the untyped versions.

​
useCallTool

The typed useCallTool: the name argument autocompletes, and the input and output types follow the named tool.

​
useToolInfo

The typed useToolInfo: the tool name (its type argument) autocompletes, and input, output, and responseMetadata follow it.

useCallTool

Call a tool from a view

useToolInfo

Read the tool result the view mounted with

McpServer

The server whose type you infer from