🐥

AppsSDKのウィジェットで色々やってみる

に公開
Model Context Protocol
OpenAI
ChatGPT
FastMCP
appssdk
tech

先日ChatGPTのAppsSDKが公開されました。ウィジェットで出来ることを試してみました。

ソースコード
https://github.com/yusan25c/openai-apps-sdk-examples/tree/simple

ウィジェット呼び出しパラメータを取得する

ChatGPTからウィジェットが呼び出された時のパラメータを取得することができます。
toolInputにはChatGPTから入力されたデータが入り、toolOutputはMCPサーバで処理した結果が入ります。

const inputParam = useOpenAiGlobal("toolInput") || "default value";
const outputParam = useOpenAiGlobal("toolOutput") || "default value";
return (
  <div>
    <p>Sample View1</p>
    <p>
      toolInput parameter: <strong>{JSON.stringify(inputParam)}</strong>
    </p>
    <p>
      toolOutput parameter: <strong>{JSON.stringify(outputParam)}</strong>
    </p>

ウィジェットから他のツールを呼び出す

表示中のウィジェットから他のツールを呼び出すことも可能です。以下はsample-view2ツールを呼び出すコードです。

function callToolSampleView(name, message){
  console.log("callToolSampleView name:", name, "message:", message);
  window.openai?.callTool(name, { message }).then((response) => {
    console.log("response:", response);
    setSampleViewResponse(response["structuredContent"]["message"]);
  }).catch((error) => {
    console.error("error:", error);
  });
}

〜 省略 〜
<Button
  variant="contained"
  onClick={() => callToolSampleView("sample-view2", "Sample View1から呼び出し")}
  >
  CallTool
</Button>
<p>
  Sample View Response: <strong>{JSON.stringify(sampleViewResponse)}</strong>
</p>

sample-view2ツールのコードです。

async def _call_tool_request(req: types.CallToolRequest) -> types.ServerResult:

〜 省略 〜

    text = f"identifier : {widget.identifier}, message : {payload.message}"

〜 省略 〜

    return types.ServerResult(
        types.CallToolResult(
            content=[
                types.TextContent(
                    type="text",
                    text=widget.response_text,
                )
            ],
            structuredContent={
                "message": text,
            },
            _meta=meta,
        )
    )

ChatGPTへメッセージを入力する

ウィジェットからChatGPTへメッセージを入力することも可能です。

function sendFollowUpMessage(message){
  console.log("sendFollowUpMessage message:", message);
  window.openai?.sendFollowUpMessage({ prompt: message }).then((response) => {
    console.log("response:", response);
  }).catch((error) => {
    console.error("error:", error);
  });
}

〜 省略 〜

<Button
  variant="contained"
  onClick={() => sendFollowUpMessage("日本の有名な観光地を教えてください。")}
  >
  Send Follow-Up
</Button>

その他

今回はAppsSDKの一部機能を紹介しました。
ほかにもフルウィンドウ表示などのUI制御も可能なのです。興味のある方は以下のドキュメントを参照してみてください。

https://developers.openai.com/apps-sdk/build/custom-ux

Discussion