zodでChatKit Client toolsを試しやすくする
ChatKitにWebサイトのデータを渡したり、ChatKitでWebサイトを操作したりするためのインタフェース
クライアントサイドで動くFunction callingのようなもの
校正さんに相談機能にて、校正したいテキストを取得するためClient toolsを実装している
Client toolsの呼び出し方をzodで定義する
toolCallSchema.tsCopied!
import { z } from "zod";
const toolCallSchema = z.union([ z.object({ name: z.literal("get_memo"), params: z.object({}), }), z.object({ name: z.literal("set_ai_lint_messages"), params: z.object({ messages: z.array(z.object(/* 省略 */)), }), }),]);Agent builderにToolを登録する
zodで書いたtoolCallSchemaをJSON Schemaに変換すると、parameters欄を書きやすい
console.log(z.toJSONSchema(toolCallSchema)); get_memo.jsonCopied!
{ "name": "get_memo", "description": "文章を取得する", "strict": true, "parameters": { "type": "object", "properties": {}, "additionalProperties": false, "required": [] }}set_ai_lint_messages.jsonCopied!
{ "name": "set_ai_lint_messages", "description": "AIによる見直し箇所をセットする", "strict": true, "parameters": { "type": "object", "properties": { "messages": { "type": "array", "items": { "type": "object", "properties": /* 省略 */, "required": /* 省略 */, "additionalProperties": false } } }, "required": [ "messages" ], "additionalProperties": false }}Client toolsを実装する
tsCopied!
import { useCallback } from "react";import { useChatKit } from "@openai/chatkit-react";import type { ChatKitOptions } from "@openai/chatkit-react";
const handleClientTool: NonNullable<ChatKitOptions["onClientTool"]> = useCallback( (toolCall) => { try { const { name, params } = toolCallSchema.parse(toolCall); switch (name) { case "get_memo": { return { result: memo.result, text: memo.text }; }
case "set_ai_lint_messages": { // Reactのstateを書き換える処理
return {}; }
default: { throw new Error(`Unknown tool: ${name satisfies never}`); } } } catch (exception) { console.error(exception); return { exception: String(exception) }; } }, [memo] );
useChatKit({ onClientTool: handleClientTool,});https://kohsei-san.hata6502.com/ にテキストを書いて「文章にはどんな見直し箇所がある?」と聞けば、
get_memo toolが実行されるようになった
