HomeAPIinjectCallTool

injectCallTool

Calls a server tool from the view and tracks the state of the call.

injectCallTool<ToolArgs, ToolResponse>(name: string): InjectCallToolResult

Bind the helper to one tool name, then call it from an event handler.

import { injectCallTool } from "ng-mcp-ui/web";

export class PollWidget {
  private readonly vote = injectCallTool<{ option: string }>("cast_vote");

  readonly status = this.vote.status;

  onVote(option: string) {
    this.vote.callTool({ option });
  }
}

Returns

Member Type Purpose
callTool function Starts the call. Returns nothing.
callToolAsync function Starts the call and returns a promise of the response.
status Signal<"idle" | "pending" | "success" | "error"> The state of the last call.
data Signal<TResponse | undefined> The last successful response.
error Signal<unknown> The last error.

Use callTool with the signals for a template. Use callToolAsync when you need the value in the next line of code.

callTool

callTool(args);
callTool(args, sideEffects);
callTool();                     // when the tool takes no arguments
callTool(sideEffects);          // when the tool takes no arguments

The function returns nothing. Read the outcome from status, data and error.

Side effects

The second argument runs callbacks for one call.

Callback Runs
onSuccess(data, args) After a successful call.
onError(error, args) After a failed call.
onSettled(data, error, args) After either outcome.
this.vote.callTool(
  { option },
  { onSuccess: () => this.toast("Vote counted.") },
);

callToolAsync

const response = await this.vote.callToolAsync({ option });

The promise rejects when the tool errors. Use try/catch.

The signals still update, therefore you can use the promise and the template state together.

Types

Pass the argument type and the response type, or infer both from the server with injectAppHelpers:

const { injectCallTool } = injectAppHelpers<AppServer>();
private readonly vote = injectCallTool("cast_vote");   // args and data are typed

The second type argument refines structuredContent and meta on data():

private readonly move = injectCallTool<
  { state: string; cell: number },
  { structuredContent: GameView; meta: { "ng-mcp-ui/state"?: string } }
>("move");

meta is the _meta of the tool result. A server returns a sealed state token there, and the view echoes it back as an argument. See Sealed state.

Host support

Supported on the two host runtimes.