Q: Related to callTool and having tool marked as "able to be initiated by the component"

API
1

I have the following code for a button click on my widget:

  const helloAgain = async () => {
    await window.openai.callTool("test-tool", { "title_text": "hi again. :)" });
  };

And in the MCP server I’m using this:

widgets: List[TestWidget] = [
    TestWidget(
        identifier="test-tool",
        title="Show Test",
        template_uri="ui://widget/test.html",
        invoking="Displaying test",
        invoked="Rendered test",

Yet the component doesn’t seem to be respond with any changes then the button is clicked and the callTool is executed.

I see this mentioned in the docs “Please note that your tool needs to be marked as able to be initiated by the component.”

This is mentioned on this developers doc page:
/apps-sdk/build/custom-ux

But I don’t see where there is any description of how to have the tool marked this way.

If it is “openai/widgetAccessible”: True,… then I have this set but it doesn’t seem to be helping.

def _tool_meta(widget: TestWidget) -> Dict[str, Any]:
    return {
        "openai/outputTemplate": widget.template_uri,
        "openai/toolInvocation/invoking": widget.invoking,
        "openai/toolInvocation/invoked": widget.invoked,
        "openai/widgetAccessible": True,
        "openai/resultCanProduceWidget": True,
        "annotations": {
          "destructiveHint": False,
          "openWorldHint": False,
          "readOnlyHint": True,
        }
    }
2

Ahh… I found the error in my ways. Sigh. I need to get the reply from callTool and do this.

export function App() {
  const widgetProps = useWidgetProps() || {};
  const { title_text = 'hi' } = widgetProps;
  const displayMode = useDisplayMode();
  const maxHeight = "100vh";

  // Add state to track the current title
  const [titleText, setTitleText] = useWidgetState(title_text);

  useEffect(() => {
    setTitleText(title_text);
  }, [title_text, setTitleText]);

  const helloAgain = async () => {
    //await window.openai.sendFollowUpMessage({ "prompt": "can you show the test app again with the title 'hello again.'" });
    const reply = await window.openai.callTool("test-tool", { "title_text": "hi again. :)" });
    if (reply?.structuredContent?.title_text) {
      setTitleText(reply.structuredContent.title_text);
    }
  };

And use titleText in the rendered Div