docs: update custom-tool docs
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
import BetaNotice from '@/components/BetaNotice'
|
||||
import CodeEditor from '@/components/CodeEditor'
|
||||
import { Heading } from '@/components/Heading'
|
||||
import { useLanguage } from '@/i18n/context'
|
||||
@@ -12,115 +11,84 @@ export default function CustomTools() {
|
||||
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
|
||||
{isZh
|
||||
? '通过注册自定义工具,扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口,让 AI 安全调用你的业务逻辑。'
|
||||
: 'Extend AI Agent capabilities by registering custom tools. Use Zod to define strict input schemas for safe business logic calls.'}
|
||||
? '通过注册自定义工具,扩展 AI Agent 的能力边界。使用 Zod 定义输入接口,让 AI 安全调用你的业务逻辑。'
|
||||
: 'Extend AI Agent capabilities by registering custom tools. Define input schemas with Zod for safe business logic invocation.'}
|
||||
</p>
|
||||
|
||||
<div className="space-y-8">
|
||||
<section>
|
||||
<Heading id="tool-registration" className="text-2xl font-bold mb-4">
|
||||
{isZh ? '工具注册' : 'Tool Registration'}
|
||||
<Heading id="define-tools" className="text-2xl font-bold mb-4">
|
||||
{isZh ? '定义工具' : 'Define Tools'}
|
||||
</Heading>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
{isZh
|
||||
? '每个自定义工具需要定义四个核心属性:name、description、input schema 和 execute 函数。'
|
||||
: 'Each custom tool requires four core properties: name, description, input schema, and execute function.'}
|
||||
? '使用 tool() 辅助函数定义自定义工具,每个工具包含 description、inputSchema 和 execute 三个属性。'
|
||||
: 'Use the tool() helper to define custom tools with description, inputSchema, and execute.'}
|
||||
</p>
|
||||
|
||||
<CodeEditor
|
||||
code={`import * as zod from 'zod'
|
||||
code={`import { z } from 'zod'
|
||||
import { PageAgent, tool } from 'page-agent'
|
||||
|
||||
// override internal tool
|
||||
const customTools = {
|
||||
ask_user: tool({
|
||||
description:
|
||||
'Ask the user or parent model a question and wait for their answer. Use this if you need more information or clarification.',
|
||||
inputSchema: zod.object({
|
||||
question: zod.string(),
|
||||
const pageAgent = new PageAgent({
|
||||
customTools: {
|
||||
|
||||
//
|
||||
add_to_cart: tool({
|
||||
description: 'Add a product to the shopping cart by its product ID.',
|
||||
inputSchema: z.object({
|
||||
productId: z.string(),
|
||||
quantity: z.number().min(1).default(1),
|
||||
}),
|
||||
execute: async function (this: PageAgent, input) {
|
||||
const answer = await do_some_thing(input.question)
|
||||
return "✅ Received user answer: " + answer
|
||||
},
|
||||
execute: async function (input) {
|
||||
await fetch('/api/cart', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(input),
|
||||
})
|
||||
}
|
||||
|
||||
// remove internal tool
|
||||
const customTools = {
|
||||
scroll: null, // never scroll
|
||||
}
|
||||
|
||||
const pageAgent = new PageAgent({customTools})
|
||||
`}
|
||||
language="javascript"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Heading id="page-filter" className="text-2xl font-bold mb-4">
|
||||
{isZh ? '页面过滤器' : 'Page Filter'}
|
||||
</Heading>
|
||||
|
||||
<BetaNotice />
|
||||
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
{isZh
|
||||
? '通过 pageFilter 属性控制工具在哪些页面可见,提升安全性和用户体验。'
|
||||
: 'Control tool visibility on specific pages via the pageFilter property to enhance security and UX.'}
|
||||
</p>
|
||||
|
||||
<CodeEditor
|
||||
code={`pageAgent.registerTool({
|
||||
name: 'approveOrder',
|
||||
description: '审批订单',
|
||||
input: z.object({
|
||||
orderId: z.string(),
|
||||
approved: z.boolean()
|
||||
}),
|
||||
execute: async (params) => {
|
||||
// 审批逻辑
|
||||
return \`Added \${input.quantity}x \${input.productId} to cart.\`
|
||||
},
|
||||
}),
|
||||
|
||||
//
|
||||
search_knowledge_base: tool({
|
||||
description: 'Search the internal knowledge base and return relevant articles.',
|
||||
inputSchema: z.object({
|
||||
query: z.string(),
|
||||
limit: z.number().max(10).default(3),
|
||||
}),
|
||||
execute: async function (input) {
|
||||
const res = await fetch(
|
||||
\`/api/kb?q=\${encodeURIComponent(input.query)}&limit=\${input.limit}\`
|
||||
)
|
||||
const articles = await res.json()
|
||||
return JSON.stringify(articles)
|
||||
},
|
||||
}),
|
||||
},
|
||||
// 可选:页面过滤器
|
||||
pageFilter: {
|
||||
// 只在订单管理页面显示
|
||||
include: ['/admin/orders', '/admin/orders/*'],
|
||||
// 排除特定页面
|
||||
exclude: ['/admin/orders/archived']
|
||||
}
|
||||
})`}
|
||||
language="javascript"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<Heading id="best-practices" className="text-2xl font-bold mb-4">
|
||||
{isZh ? '最佳实践' : 'Best Practices'}
|
||||
<Heading id="override-remove" className="text-2xl font-bold mb-4">
|
||||
{isZh ? '覆盖与移除内置工具' : 'Override & Remove Built-in Tools'}
|
||||
</Heading>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-300 mb-2">
|
||||
{isZh ? '⚡ 性能优化' : '⚡ Performance Optimization'}
|
||||
</h3>
|
||||
<ul className="text-gray-600 dark:text-gray-300 space-y-1 text-sm">
|
||||
<li>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
{isZh
|
||||
? '• 使用 pageFilter 减少不必要的工具加载'
|
||||
: '• Use pageFilter to reduce unnecessary tool loading'}
|
||||
</li>
|
||||
<li>
|
||||
{isZh
|
||||
? '• 在 execute 函数中实现适当的缓存机制'
|
||||
: '• Implement appropriate caching in execute functions'}
|
||||
</li>
|
||||
<li>
|
||||
{isZh
|
||||
? '• 避免在工具中执行耗时的同步操作'
|
||||
: '• Avoid long-running sync operations in tools'}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
? '使用相同的名称可以覆盖内置工具的行为,设置为 null 则完全移除该工具。'
|
||||
: 'Use the same name to override a built-in tool, or set it to null to remove it entirely.'}
|
||||
</p>
|
||||
|
||||
<CodeEditor
|
||||
code={`const pageAgent = new PageAgent({
|
||||
customTools: {
|
||||
scroll: null, // remove scroll tool
|
||||
execute_javascript: null, // remove script execution
|
||||
},
|
||||
})`}
|
||||
language="javascript"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user