[Agents] Add example agent pages#31148
Draft
thomasgauvin wants to merge 1 commit into
Draft
Conversation
Contributor
There was a problem hiding this comment.
A few suggestions for this PR.
Verdict: 3 issues need fixing before merge.
Issues:
- HIGH
payment-agent.mdx: Uses baretsfence instead ofTypeScriptExamplefor Workers code, and has TypeScript correctness issues (undeclared property, missing parameter type,thisbinding). - HIGH
code-review-agent.mdx: Uses baretypescriptfence instead ofTypeScriptExamplefor Workers code. - MEDIUM
retrieval-augmented-generation-agent.mdx: Unused component imports and heading level skip (###without an H2). - MEDIUM
index.mdx: Payment agent card uses the wrong product icon (ai-crawl-control). - LOW
code-review-agent.mdx: Numbered procedure should be wrapped in<Steps>.
Posted inline suggestions for the fixes above.
| reviewed: 2025-10-15 | ||
| --- | ||
|
|
||
| import { Render, PackageManagers } from "~/components"; |
Contributor
There was a problem hiding this comment.
Add TypeScriptExample to the import list:
Suggested change
| import { Render, PackageManagers } from "~/components"; | |
| import { Render, PackageManagers, TypeScriptExample } from "~/components"; |
|
|
||
| Replace `src/index.ts`: | ||
|
|
||
| ```typescript |
Contributor
There was a problem hiding this comment.
Workers JS/TS examples must use TypeScriptExample rather than a bare fence:
Suggested change
| ```typescript | |
| <TypeScriptExample> |
| await sandbox.destroy(); | ||
| } | ||
| } | ||
| ``` |
Contributor
There was a problem hiding this comment.
Close the TypeScriptExample component:
Suggested change
| ``` |
| - An [Anthropic API key](https://console.anthropic.com/) for Claude | ||
| - A GitHub repository for testing | ||
|
|
||
| ## 1. Create your project |
Contributor
There was a problem hiding this comment.
Multi-step procedures should be wrapped in <Steps> and the component imported from ~/components.
| description: Use withX402Client to pay for resources from a Cloudflare Agent. | ||
| --- | ||
|
|
||
| Build an agent that can pay for x402-protected tools. The Agents SDK includes an MCP client that can pay for protected resources from your Agents or any MCP client connection. |
Contributor
There was a problem hiding this comment.
Import TypeScriptExample before the first paragraph:
Suggested change
| Build an agent that can pay for x402-protected tools. The Agents SDK includes an MCP client that can pay for protected resources from your Agents or any MCP client connection. | |
| import { TypeScriptExample } from "~/components"; | |
| Build an agent that can pay for x402-protected tools. The Agents SDK includes an MCP client that can pay for protected resources from your Agents or any MCP client connection. |
Comment on lines
+16
to
+41
| export class MyAgent extends Agent { | ||
| // Your Agent definitions... | ||
|
|
||
| async onStart() { | ||
| const { id } = await this.mcp.connect(`${this.env.WORKER_URL}/mcp`); | ||
| const account = privateKeyToAccount(this.env.MY_PRIVATE_KEY); | ||
|
|
||
| this.x402Client = withX402Client(this.mcp.mcpConnections[id].client, { | ||
| network: "base-sepolia", | ||
| account, | ||
| }); | ||
| } | ||
|
|
||
| onPaymentRequired(paymentRequirements): Promise<boolean> { | ||
| // Your human-in-the-loop confirmation flow... | ||
| } | ||
|
|
||
| async onToolCall(toolName: string, toolArgs: unknown) { | ||
| // The first parameter is the confirmation callback. | ||
| // Set to `null` for the agent to pay automatically. | ||
| return await this.x402Client.callTool(this.onPaymentRequired, { | ||
| name: toolName, | ||
| arguments: toolArgs, | ||
| }); | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Fix TypeScript correctness issues in the example: declare the x402Client property, type the paymentRequirements parameter, and bind this when passing the callback so the method retains its context in the JS tab as well:
Suggested change
| export class MyAgent extends Agent { | |
| // Your Agent definitions... | |
| async onStart() { | |
| const { id } = await this.mcp.connect(`${this.env.WORKER_URL}/mcp`); | |
| const account = privateKeyToAccount(this.env.MY_PRIVATE_KEY); | |
| this.x402Client = withX402Client(this.mcp.mcpConnections[id].client, { | |
| network: "base-sepolia", | |
| account, | |
| }); | |
| } | |
| onPaymentRequired(paymentRequirements): Promise<boolean> { | |
| // Your human-in-the-loop confirmation flow... | |
| } | |
| async onToolCall(toolName: string, toolArgs: unknown) { | |
| // The first parameter is the confirmation callback. | |
| // Set to `null` for the agent to pay automatically. | |
| return await this.x402Client.callTool(this.onPaymentRequired, { | |
| name: toolName, | |
| arguments: toolArgs, | |
| }); | |
| } | |
| } | |
| export class MyAgent extends Agent { | |
| // Your Agent definitions... | |
| x402Client: ReturnType<typeof withX402Client>; | |
| async onStart() { | |
| const { id } = await this.mcp.connect(`${this.env.WORKER_URL}/mcp`); | |
| const account = privateKeyToAccount(this.env.MY_PRIVATE_KEY); | |
| this.x402Client = withX402Client(this.mcp.mcpConnections[id].client, { | |
| network: "base-sepolia", | |
| account, | |
| }); | |
| } | |
| onPaymentRequired(paymentRequirements: unknown): Promise<boolean> { | |
| // Your human-in-the-loop confirmation flow... | |
| } | |
| async onToolCall(toolName: string, toolArgs: unknown) { | |
| // The first parameter is the confirmation callback. | |
| // Set to `null` for the agent to pay automatically. | |
| return await this.x402Client.callTool( | |
| this.onPaymentRequired.bind(this), | |
| { | |
| name: toolName, | |
| arguments: toolArgs, | |
| }, | |
| ); | |
| } | |
| } |
Comment on lines
+9
to
+15
| import { | ||
| MetaInfo, | ||
| Render, | ||
| Type, | ||
| TypeScriptExample, | ||
| WranglerConfig, | ||
| } from "~/components"; |
Contributor
There was a problem hiding this comment.
Remove unused imports (MetaInfo, Render, and Type are not used on this page):
Suggested change
| import { | |
| MetaInfo, | |
| Render, | |
| Type, | |
| TypeScriptExample, | |
| WranglerConfig, | |
| } from "~/components"; | |
| import { TypeScriptExample, WranglerConfig } from "~/components"; |
|
|
||
| You can use the Agent's own [SQL database](/agents/runtime/lifecycle/state/) as the source of truth for your data and store embeddings in [Vectorize](/vectorize/) (or any other vector-enabled database) to allow your Agent to retrieve relevant information. | ||
|
|
||
| ### Vector search |
Contributor
There was a problem hiding this comment.
Do not skip heading levels. This should be an H2 because there is no preceding H2:
Suggested change
| ### Vector search | |
| ## Vector search |
|
|
||
| If you have multiple indexes you want to make available, you can provide an array of `vectorize` bindings. | ||
|
|
||
| #### Next steps |
Contributor
There was a problem hiding this comment.
Adjust heading level to match the parent becoming H2:
Suggested change
| #### Next steps | |
| ### Next steps |
|
|
||
| </RelatedProduct> | ||
|
|
||
| <RelatedProduct header="Payment agent" href="/agents/examples/payment-agent/" product="ai-crawl-control"> |
Contributor
There was a problem hiding this comment.
ai-crawl-control is the AI Crawl Control product (a completely different feature). Use the agents product for the payment agent card so the correct icon is shown:
Suggested change
| <RelatedProduct header="Payment agent" href="/agents/examples/payment-agent/" product="ai-crawl-control"> | |
| <RelatedProduct header="Payment agent" href="/agents/examples/payment-agent/" product="agents"> |
Contributor
|
Review completed for PR #31148. What I did:
Summary of changes: Issues flagged:
All suggestions are posted as inline review comments on the PR. |
a987462 to
a68fc22
Compare
95124af to
2e1f0f8
Compare
2e1f0f8 to
1238f30
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds follow-up example agent pages split out from the Agents restructure PR:
Also adds the corresponding cards to the Agents overview page.
Documentation checklist