[Agents] Add example agent pages

[thomasgauvin]

Summary

Adds follow-up example agent pages split out from the Agents restructure PR:

• Code review agent
• Payment agent
• Retrieval Augmented Generation agent

Also adds the corresponding cards to the Agents overview page.

Documentation checklist

• The change adheres to the documentation style guide.
• If a larger change - such as adding a new page- an issue has been opened in relation to any incorrect or out of date information that this PR fixes.

[ask-bonk]

A few suggestions for this PR.

Verdict: 3 issues need fixing before merge.

Issues:

• HIGH payment-agent.mdx: Uses bare ts fence instead of TypeScriptExample for Workers code, and has TypeScript correctness issues (undeclared property, missing parameter type, this binding).
• HIGH code-review-agent.mdx: Uses bare typescript fence instead of TypeScriptExample for 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.

[ask-bonk]

Add TypeScriptExample to the import list:

Suggested change

	import { Render, PackageManagers } from "~/components";
	import { Render, PackageManagers, TypeScriptExample } from "~/components";

[ask-bonk]

Workers JS/TS examples must use TypeScriptExample rather than a bare fence:

Suggested change

	```typescript
	<TypeScriptExample>

[ask-bonk]

Close the TypeScriptExample component:

Suggested change

```

```

[ask-bonk]

Multi-step procedures should be wrapped in <Steps> and the component imported from ~/components.

[ask-bonk]

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.

[ask-bonk]

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,
	},
	);
	}
	}

[ask-bonk]

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";

[ask-bonk]

Do not skip heading levels. This should be an H2 because there is no preceding H2:

Suggested change

	### Vector search
	## Vector search

[ask-bonk]

Adjust heading level to match the parent becoming H2:

Suggested change

	#### Next steps
	### Next steps

[ask-bonk]

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">

[ask-bonk]

Review completed for PR #31148.

What I did:

• Added the documentation label (the agents label does not exist in this repo).
• Posted a comprehensive review with 12 inline suggestions targeting specific lines.

Summary of changes:
The PR adds three new example agent pages (Code review, Payment, and Retrieval Augmented Generation) and updates the Agents overview index to include cards linking to them.

Issues flagged:

• HIGH — payment-agent.mdx and code-review-agent.mdx use bare ts/typescript code fences instead of the required TypeScriptExample component for Workers code.
• HIGH — payment-agent.mdx example has TypeScript correctness issues: x402Client is used without being declared, onPaymentRequired lacks a parameter type, and this.onPaymentRequired is passed as a callback without binding this.
• MEDIUM — retrieval-augmented-generation-agent.mdx imports unused components (MetaInfo, Render, Type) and skips a heading level (### Vector search appears without a preceding H2).
• MEDIUM — index.mdx maps the Payment agent card to product="ai-crawl-control", which is the AI Crawl Control product icon — semantically wrong for a payments example. Suggested changing it to product="agents".
• LOW — code-review-agent.mdx contains a numbered multi-step procedure that should be wrapped in the <Steps> component.

All suggestions are posted as inline review comments on the PR.

github run