diff --git a/apps/portal/src/app/ai/mcp/page.mdx b/apps/portal/src/app/ai/mcp/page.mdx index 5700a385a57..a982e39cf1b 100644 --- a/apps/portal/src/app/ai/mcp/page.mdx +++ b/apps/portal/src/app/ai/mcp/page.mdx @@ -17,6 +17,76 @@ https://api.thirdweb.com/mcp?secretKey= 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. + +```http +https://api.thirdweb.com/mcp?secretKey=&tool=fetchWithPayment&tool=getWalletBalance +``` + +You can find all available tools at the bottom of this page. + +## Usage with agents + +Use your favorite agent framework to plug in the MCP server as a collection of tools for your agent. Refer to your agent framework's documentation for more information. + +#### Example usage with langchain: + + + + +TypeScript +Python + + + + +```typescript +import { createReactAgent } from "@langchain/langgraph/prebuilt"; +import { MultiServerMCPClient } from "@langchain/mcp-adapters"; + +const mcpServers = { + thirdweb: { + url: `https://api.thirdweb.com/mcp?secretKey=` + } +}; + +// Connect to MCP servers and get tools +const client = new MultiServerMCPClient(mcpServers); +const tools = await client.getTools(); + +const agent = createReactAgent({ + llm: model, + tools: tools, +}); +await agent.invoke({messages: [{ role: "user", content: "create a server wallet called 'my-wallet'" }]}) +``` + + + + + +```python +from langchain_mcp_adapters.client import MultiServerMCPClient +from langgraph.prebuilt import create_react_agent + +client = MultiServerMCPClient( + { + "thirdweb": { + "url": "https://api.thirdweb.com/mcp?secretKey=", + } + } +) +tools = await client.get_tools() +agent = create_react_agent("openai:gpt-4.1", tools) +response = await agent.invoke({"messages": "create a server wallet called 'my-wallet'"}) +``` + + + + + +Once installed, you can use the entire thirdweb API with natural language. + ## Usage with LLM clients You can also use the MCP server on your own LLM client, like cursor, claude code and more. Refer to your LLM client's documentation for more information. @@ -112,31 +182,6 @@ claude mcp add --transport http "thirdweb-api" "https://api.thirdweb.com/mcp?sec -## Usage with agents - -Use your favorite agent framework to plug in the MCP server as a collection of tools for your agent. Refer to your agent framework's documentation for more information. - -#### Example usage with langchain: - -```python -from langchain_mcp_adapters.client import MultiServerMCPClient -from langgraph.prebuilt import create_react_agent - -client = MultiServerMCPClient( - { - "thirdweb-api": { - "transport": "streamable_http", - "url": "https://api.thirdweb.com/mcp?secretKey=", - } - } -) -tools = await client.get_tools() -agent = create_react_agent("openai:gpt-4.1", tools) -response = await agent.ainvoke({"messages": "create a server wallet called 'my-wallet'"}) -``` - -Once installed, you can use the entire thirdweb API with natural language. - ## Example prompts #### Managing server wallets @@ -164,3 +209,46 @@ List my contracts ``` approve 100 USDC from treasury wallet to executor wallet ``` + +## Available tools + +Currently, the following tools are available: + +- `initiateAuthentication` +- `completeAuthentication` +- `linkAuthentication` +- `unlinkAuthentication` +- `getMyWallet` +- `listUserWallets` +- `createUserWallet` +- `listServerWallets` +- `createServerWallet` +- `getWalletBalance` +- `getWalletTransactions` +- `getWalletTokens` +- `getWalletNFTs` +- `signMessage` +- `signTypedData` +- `sendTokens` +- `listContracts` +- `deployContract` +- `readContract` +- `writeContract` +- `getContractTransactions` +- `getContractEvents` +- `getContractMetadata` +- `getContractSignatures` +- `getTransactionById` +- `listTransactions` +- `sendTransactions` +- `createPayment` +- `paymentsPurchase` +- `getPaymentHistory` +- `fetchWithPayment` +- `createToken` +- `listTokens` +- `getTokenOwners` +- `getBridgeChains` +- `convertFiatToCrypto` +- `bridgeSwap` +- `chat` \ No newline at end of file diff --git a/apps/portal/src/app/payments/sidebar.tsx b/apps/portal/src/app/payments/sidebar.tsx index 8a699cdc60b..a0e5a6b1ce5 100644 --- a/apps/portal/src/app/payments/sidebar.tsx +++ b/apps/portal/src/app/payments/sidebar.tsx @@ -80,6 +80,10 @@ export const sidebar: SideBar = { href: `${paymentsSlug}/x402/server`, name: "Server Side", }, + { + href: `${paymentsSlug}/x402/agents`, + name: "Agents", + }, { href: `${paymentsSlug}/x402/facilitator`, name: "Facilitator", diff --git a/apps/portal/src/app/payments/x402/agents/page.mdx b/apps/portal/src/app/payments/x402/agents/page.mdx new file mode 100644 index 00000000000..36fd1b53aca --- /dev/null +++ b/apps/portal/src/app/payments/x402/agents/page.mdx @@ -0,0 +1,87 @@ +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; +import { OpenApiEndpoint } from "@doc"; + +# Agents + +Easily create AI agents that can pay for any x402-compatible API calls. + +## Using the MCP Server + +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. + +In this example, we create a ReAct agent using LangChain and filter the MCP tools to `fetchWithPayment` and `getWalletBalance` as the only 2 tools we give our agent. You can view the full list of available tools [here](/ai/mcp#available-tools). + + + + +TypeScript +Python + + + + +```typescript +import { createReactAgent } from "@langchain/langgraph/prebuilt"; +import { MultiServerMCPClient } from "@langchain/mcp-adapters"; +import { ChatOpenAI } from "@langchain/openai"; + +const model = new ChatOpenAI({ + model: "gpt-4.1", +}); + +const mcpServers = { + thirdweb: { + url: `https://api.thirdweb.com/mcp?secretKey=&tool=fetchWithPayment&tool=getWalletBalance` + } +}; + +// Connect to MCP servers and get tools +const client = new MultiServerMCPClient(mcpServers); +const tools = await client.getTools(); + +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}}." +}); +``` + + + + + +```python +from langchain_mcp_adapters.client import MultiServerMCPClient +from langgraph.prebuilt import create_react_agent + +client = MultiServerMCPClient( + { + "thirdweb": { + "url": "https://api.thirdweb.com/mcp?secretKey=&tool=fetchWithPayment&tool=getWalletBalance", + } + } +) +tools = await client.get_tools() +agent = create_react_agent("openai:gpt-4.1", tools, prompt="Use the fetchWithPayment tool to fetch any endpoint. Always pay in {{tokenAddress}}. Your wallet address is {{walletAddress}}.") +``` + + + + +## Using the API directly + +You can also create your own MCP tool or wrap all external calls with the `/v1/x402/fetchWithPayment` endpoint to automatically handle payment flows when APIs return a `402 Payment Required` response. + +Pass the target `url`, `method` and optional `from` wallet address to the endpoint that will complete the payment. The address should be one of your [user wallets](/wallets/users) or [server wallets](/wallets/server). + +```bash +curl -X POST https://api.thirdweb.com/v1/payments/x402/fetch?url=https://api.example.com/premium&method=GET&from=0x1234... \ + -H "Content-Type: application/json" \ + -H "x-secret-key: " \ + -d '{ ... }' # optional request body passed through to the url called. +``` + + +