[Docs] Add MCP tool filtering, agent examples, and available tools list #8188
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
|
github-actions
bot
added
the
Portal
WalkthroughDocumentation updates expand MCP tool availability and client integration guidance, add an x402 Agents documentation page with TypeScript/Python examples and direct API usage, and include a new “Agents” link in the Payments x402 sidebar. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant Agent
participant MCP Server
participant Payments API (/v1/payments/x402/fetch)
participant Target API (x402-compatible)
User->>Agent: Request to call x402-protected API
Agent->>MCP Server: List/Filter tools (query params)
MCP Server-->>Agent: MCP tools (including fetch)
Agent->>MCP Server: Invoke fetch tool with url, method, from
MCP Server->>Payments API: POST fetch {url, method, from, ...}
Payments API->>Target API: Perform paid request
Target API-->>Payments API: Response
Payments API-->>MCP Server: Result (status, body)
MCP Server-->>Agent: Tool result
Agent-->>User: Final answer with API response
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8188 +/- ##
=======================================
Coverage 55.03% 55.03%
=======================================
Files 919 919
Lines 60562 60562
Branches 4122 4122
=======================================
Hits 33332 33332
Misses 27126 27126
Partials 104 104
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
apps/portal/src/app/ai/mcp/page.mdx (1)
44-62: Consider adding explicit return types to TypeScript example.The TypeScript example demonstrates async tool fetching and agent creation but lacks explicit return types. While this is a documentation example, adding return types would align with the project's coding guidelines and serve as a better reference for users.
As per coding guidelines
Consider this enhancement:
const mcpServers = { thirdweb: { url: `https://api.thirdweb.com/mcp?secretKey=<your-project-secret-key>` } }; // Connect to MCP servers and get tools const client = new MultiServerMCPClient(mcpServers); -const tools = await client.getTools(); +const tools: Tool[] = await client.getTools(); const agent = createReactAgent({ llm: model, tools: tools, }); -await agent.invoke({messages: [{ role: "user", content: "create a server wallet called 'my-wallet'" }]}) +const response = await agent.invoke({messages: [{ role: "user", content: "create a server wallet called 'my-wallet'" }]});Note: You may need to import the
Tooltype from the appropriate package.apps/portal/src/app/payments/x402/agents/page.mdx (1)
73-86: Consider adding response handling examples.The direct API usage section shows how to call the endpoint but doesn't explain what happens next. Adding brief information about expected responses (success and error cases) would help users understand the complete flow.
Consider adding after line 84:
The endpoint returns: - **200 OK**: The fetched data from the target URL (after payment if required) - **402 Payment Required**: If payment cannot be completed automatically - **4xx/5xx errors**: Standard HTTP error responses for invalid requests or server errors
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
apps/portal/src/app/ai/mcp/page.mdx(2 hunks)apps/portal/src/app/payments/sidebar.tsx(1 hunks)apps/portal/src/app/payments/x402/agents/page.mdx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/portal/src/app/payments/sidebar.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/portal/src/app/payments/sidebar.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/portal/src/app/ai/mcp/page.mdx (1)
213-254: LGTM! Comprehensive tools list.The available tools section provides a clear, complete enumeration of all MCP tools. This is well-referenced from both line 26 in this file and from the new agents documentation page.
apps/portal/src/app/payments/sidebar.tsx (1)
83-86: LGTM! Navigation link is properly structured.The new "Agents" link is correctly placed in the x402 section and follows the established pattern for sidebar navigation items.
|
|
||
| Make sure to keep your secret key safe and never share it with anyone. | ||
|
|
||
| By default, all tools are available. You can filter the tools available by passing multiple `tool` query parameter. |
There was a problem hiding this comment.
Fix grammatical error in tool filtering explanation.
"passing multiple tool query parameter" should be "passing multiple tool query parameters" (plural form).
Apply this diff to fix the grammar:
-By default, all tools are available. You can filter the tools available by passing multiple `tool` query parameter.
+By default, all tools are available. You can filter the tools available by passing multiple `tool` query parameters.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| By default, all tools are available. You can filter the tools available by passing multiple `tool` query parameter. | |
| By default, all tools are available. You can filter the tools available by passing multiple `tool` query parameters. |
🤖 Prompt for AI Agents
In apps/portal/src/app/ai/mcp/page.mdx around line 20, the sentence "You can
filter the tools available by passing multiple `tool` query parameter." uses the
singular "parameter" incorrectly; change it to the plural "parameters" so the
line reads "You can filter the tools available by passing multiple `tool` query
parameters."
|
|
||
| The easiest way to equip your agents with the ability to pay for API calls is to use the [remote MCP server](/ai/mcp) and provide the tools to your agent. | ||
|
|
||
| The MCP server comes with all the tools by default, but you can filter the tools available by passing multiple `tool` query parameter. |
There was a problem hiding this comment.
Fix grammatical error in tool filtering explanation.
Same issue as in the MCP documentation: "passing multiple tool query parameter" should be "passing multiple tool query parameters" (plural form).
Apply this diff to fix the grammar:
-The MCP server comes with all the tools by default, but you can filter the tools available by passing multiple `tool` query parameter.
+The MCP server comes with all the tools by default, but you can filter the tools available by passing multiple `tool` query parameters.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| The MCP server comes with all the tools by default, but you can filter the tools available by passing multiple `tool` query parameter. | |
| The MCP server comes with all the tools by default, but you can filter the tools available by passing multiple `tool` query parameters. |
🤖 Prompt for AI Agents
In apps/portal/src/app/payments/x402/agents/page.mdx around line 12, the
sentence uses the singular "query parameter" but should be plural; update the
sentence to read "passing multiple `tool` query parameters" so the grammar
correctly indicates multiple parameters.
| const agent = createReactAgent({ | ||
| llm: model, | ||
| tools: tools, | ||
| prompt: "Use the fetchWithPayment tool to fetch any endpoint. Always pay in {{tokenAddress}}. Your wallet address is {{walletAddress}}." |
There was a problem hiding this comment.
Clarify template placeholder usage in agent prompts.
Both TypeScript and Python examples include prompt templates with {{tokenAddress}} and {{walletAddress}} placeholders, but the documentation doesn't explain what these should be replaced with or how users should obtain these values.
Users may be confused about:
- What format
tokenAddressshould be in (contract address, symbol, etc.) - Whether
walletAddressrefers to their user wallet or server wallet - Whether these are meant to be replaced before runtime or if the agent should handle them dynamically
Consider adding a brief explanation before or after the code examples, such as:
Replace the template placeholders in the prompt:
- `{{tokenAddress}}`: The ERC-20 token contract address to use for payments (e.g., USDC on Base)
- `{{walletAddress}}`: Your wallet address (from user wallets or server wallets)Or if these are meant to be dynamic runtime values, clarify how the agent should resolve them.
Also applies to: 67-67
size-limit report 📦
|
joaquim-verges
deleted the
_Docs_Add_MCP_tool_filtering_agent_examples_and_available_tools_list
branch
PR-Codex overview
This PR introduces new features and documentation related to the
MCPserver and its integration with AI agents, specifically focusing on payment functionalities and examples for using the server with different programming languages.Detailed summary
Agentsoption in the sidebar ofsidebar.tsx.page.mdxwith detailed instructions for creating AI agents using the MCP server.TypeScriptandPythonto demonstrate agent creation and tool usage.Summary by CodeRabbit
New Features
Documentation