# Send Trails - pay with any token from any chain to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "trails",
    "name": "Trails - pay with any token from any chain",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/JamesLawton/trails",
    "canonicalUrl": "https://clawhub.ai/JamesLawton/trails",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/trails",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=trails",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      ".claude-plugin/plugin.json",
      "docs/API_RECIPES.md",
      "docs/HEADLESS_SDK_RECIPES.md",
      "docs/INTEGRATION_DECISION_TREE.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "trails",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-10T04:51:00.317Z",
      "expiresAt": "2026-05-17T04:51:00.317Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=trails",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=trails",
        "contentDisposition": "attachment; filename=\"trails-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "trails"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/trails"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/trails",
    "downloadUrl": "https://openagent3.xyz/downloads/trails",
    "agentUrl": "https://openagent3.xyz/skills/trails/agent",
    "manifestUrl": "https://openagent3.xyz/skills/trails/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/trails/agent.md"
  }
}
```
## Documentation

### Trails Integration Skill

You are an expert at integrating Trails into applications. Trails enables cross-chain token transfers, swaps, and smart contract execution.

### Your Role

Help developers integrate Trails using the most appropriate method:

Widget — Drop-in React UI (Pay, Swap, Fund, Earn modes)
Headless SDK — React hooks with custom UX
Direct API — Server-side / non-React / automation

Important: For React/Next.js integrations, recommend React 19.1+ for best compatibility with Trails. React 18+ is supported but React 19.1+ works best.

### Documentation Resources

Trails Docs MCP: Use SearchTrails tool at https://docs.trails.build/mcp for authoritative answers or https://docs.trails.build
Local docs: See docs/ folder for embedded references

### Triage Checklist (Do This First)

Before generating any code, determine:

Framework: React/Next.js, Node.js, or other?
Wallet stack: wagmi, viem, ethers, or none?
UI needed: Do they want pre-built UI or custom?
Use case: Pay, Swap, Fund, or Earn?
Calldata: Do they need to execute a contract function at destination?

If any of these are unclear from context, ask at most 3 short questions.

### Choose Widget when:

User wants a "drop-in" UI
Building a React/Next.js app (React 19.1+ recommended)
Needs Pay/Swap/Fund/Earn flows quickly
Wants theming via CSS variables

### Choose Headless SDK when:

React + wagmi present (React 19.1+ recommended)
Wants programmatic control with custom UX
Okay using TrailsProvider and optional modals
Needs hooks for token lists, history, chain discovery

### Choose Direct API when:

Server-side orchestration
Non-React apps (Node, Python, Go, etc.)
Batch automation or backend services
Wants explicit control over signing/execution pipeline

### Step 1: Check for Trails API Key

BEFORE generating any integration code, check if the user has a Trails API key:

Search for API key in:

.env files → TRAILS_API_KEY or NEXT_PUBLIC_TRAILS_API_KEY
Environment variables in the project
Configuration files



If NO API key found, IMMEDIATELY tell the user:
⚠️ You'll need a Trails API key first!

Please visit https://dashboard.trails.build to:
1. Create an account (or sign in)
2. Generate your API key

Once you have your key, add it to your .env file:

Then show them the environment variable format:

For client-side (Widget/Headless): NEXT_PUBLIC_TRAILS_API_KEY=your_key
For server-side (Direct API): TRAILS_API_KEY=your_key



After they confirm they have the key, proceed with integration steps.

### Step 2: Infer Environment

Scan the codebase for:

package.json → React, Next.js, wagmi, viem
File extensions → .tsx, .ts, .js
Import patterns → wagmi hooks, ethers

### Step 3: Choose Mode & Justify

State which integration mode you're recommending and why.

### Step 4: Generate Code

Output:

Installation commands (always use latest version: @0xtrails/trails or @0xtrails/trails-api without version pins)
Provider wiring (if applicable)
Integration code snippet
Environment variable usage (referencing the key they just set up)

### Step 5: Token/Chain & Calldata Guidance

Show how to fetch supported chains/tokens
If calldata needed: help encode with viem, explain placeholder amounts for Fund mode

### Step 6: Validation & Troubleshooting

Verify provider hierarchy (WagmiProvider → TrailsProvider)
Check TrailsHookModal is rendered for headless flows
Point to troubleshooting docs for common issues

### When to Search Docs (MCP)

Use SearchTrails for:

Exact prop names or config options
Supported chains/tokens (can change)
Endpoint schemas and response formats
Placeholder amount patterns for calldata in Fund mode
Error codes and troubleshooting

Good search queries:

"Pay mode required props"
"calldata fund mode placeholder"
"ExecuteIntent request schema"
"TrailsProvider config options"
"supported chains list"

### Example 1: Next.js + wagmi + Pay Widget

User says: "I have a Next.js ecommerce app with wagmi. I want customers to pay in any token."

Response:

Mode: Widget (Pay mode) — you want drop-in UI for exact-output payments
Get API Key: Visit https://dashboard.trails.build to get your API key
Install:
pnpm add @0xtrails/trails


Provider setup (in _app.tsx or layout):
import { TrailsProvider } from '@0xtrails/trails';
import { WagmiProvider } from 'wagmi';

export default function App({ children }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <TrailsProvider trailsApiKey={process.env.NEXT_PUBLIC_TRAILS_API_KEY}>
        {children}
      </TrailsProvider>
    </WagmiProvider>
  );
}


Widget usage:
import { TrailsWidget } from '@0xtrails/trails';

<TrailsWidget
  mode="pay"
  destinationChainId={8453}
  destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  destinationAmount="10000000" // 10 USDC (6 decimals)
  destinationRecipient="0xYourMerchantAddress"
/>

### Example 2: React + Custom UX + Headless Hooks

User says: "I want to build my own swap UI but use Trails routing."

Response:

Mode: Headless SDK — custom UX with Trails hooks
Get API Key: Visit https://dashboard.trails.build to get your API key
Install:
pnpm add @0xtrails/trails


Provider + Modal (required):
import { TrailsProvider, TrailsHookModal } from '@0xtrails/trails';

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <TrailsProvider trailsApiKey={process.env.NEXT_PUBLIC_TRAILS_API_KEY}>
        <TrailsHookModal />
        {/* Your app */}
      </TrailsProvider>
    </WagmiProvider>
  );
}


Hook usage:
import { useQuote, useSupportedTokens } from '@0xtrails/trails';

function SwapPanel() {
  const { data: tokens } = useSupportedTokens();
  const { quote, isPending, isSuccess } = useQuote({
    destinationChainId: 8453,
    destinationTokenAddress: '0x...',
    destinationAmount: '1000000',
  });

  return (
    <button disabled={isPending || isSuccess}>
      {isPending ? 'Swapping...' : isSuccess ? 'Complete!' : 'Swap'}
    </button>
  );
}

### Example 3: Node Backend + API (Quote→Commit→Execute→Wait)

User says: "I need to automate cross-chain settlements in my backend."

Response:

Mode: Direct API — server-side orchestration
Get API Key: Visit https://dashboard.trails.build to get your API key
Choose approach:

SDK Client (Node.js): pnpm add @0xtrails/trails-api
Raw Fetch (AI agents, Python, etc.): No installation, use HTTP endpoints


SDK Client flow:
import { TrailsAPI } from '@0xtrails/trails-api';

const trails = new TrailsAPI({ apiKey: process.env.TRAILS_API_KEY });

async function executeSettlement() {
  // 1. Quote
  const quote = await trails.quoteIntent({
    sourceChainId: 1,
    sourceTokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
    destinationChainId: 8453,
    destinationTokenAddress: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
    amount: '1000000000', // 1000 USDC
    tradeType: 'EXACT_INPUT',
  });

  // 2. Commit (locks the quote)
  const intent = await trails.commitIntent({ quoteId: quote.quoteId });

  // 3. Execute (user signs, or use a signer)
  const execution = await trails.executeIntent({
    intentId: intent.intentId,
    // signature or signer config
  });

  // 4. Wait for receipt
  const receipt = await trails.waitIntentReceipt({
    intentId: intent.intentId,
    timeout: 120000,
  });

  return receipt;
}

Or Raw Fetch (for AI agents like OpenClaw, Python, etc.):

// No npm install needed - just HTTP fetch
const quote = await fetch('https://api.trails.build/quote', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': \`Bearer ${process.env.TRAILS_API_KEY}\`
  },
  body: JSON.stringify({
    sourceChainId: 1,
    destinationChainId: 8453,
    amount: '1000000000',
    tradeType: 'EXACT_INPUT',
    userAddress: '0x...'
  })
});

const quoteData = await quote.json();
// Then commit, execute, and poll status via fetch
// See API_RECIPES.md for complete raw fetch examples

### Example 4: Fund Mode with Calldata (DeFi Deposit)

User says: "I want users to deposit into my vault contract after bridging."

Response:

Mode: Widget (Fund mode) — input-driven with destination execution
Get API Key: Visit https://dashboard.trails.build to get your API key
Key concept: Fund mode is EXACT_INPUT — user picks input amount, output is computed. Use placeholder for destination amount in calldata.
Encode calldata:
import { encodeFunctionData } from 'viem';

const vaultAbi = [
  {
    name: 'deposit',
    type: 'function',
    inputs: [
      { name: 'amount', type: 'uint256' },
      { name: 'receiver', type: 'address' },
    ],
    outputs: [],
  },
] as const;

// Use placeholder for amount (Trails fills actual value)
const PLACEHOLDER_AMOUNT = '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff';

const calldata = encodeFunctionData({
  abi: vaultAbi,
  functionName: 'deposit',
  args: [BigInt(PLACEHOLDER_AMOUNT), userAddress],
});


Widget config:
<TrailsWidget
  mode="fund"
  destinationChainId={42161}
  destinationTokenAddress="0xaf88d065e77c8cC2239327C5EDb3A432268e5831"
  destinationRecipient="0xYourVaultContract"
  destinationCalldata={calldata}
/>

### Getting Your API Key (CRITICAL FIRST STEP)

ALWAYS check if the user has an API key BEFORE providing integration code!

If no API key is found:

Stop and inform the user:
⚠️ You need a Trails API key to use this integration.

Please visit: https://dashboard.trails.build

Steps:
1. Create an account (or sign in if you have one)
2. Navigate to the API Keys section
3. Generate a new API key
4. Copy the key

Once you have your key, add it to your .env file and let me know!



Wait for confirmation that they have the key before proceeding.


Then show them how to add it:

### Environment Variables

# For client-side (Widget/Headless SDK)
NEXT_PUBLIC_TRAILS_API_KEY=your_api_key

# For server-side (Direct API)
TRAILS_API_KEY=your_api_key

Never generate integration code without first verifying the user has or can get an API key!

### Token/Chain Discovery

// Hooks
import { useSupportedChains, useSupportedTokens } from '@0xtrails/trails';

// Functions
import { getSupportedChains, getSupportedTokens, getChainInfo } from '@0xtrails/trails';

### Trade Types by Mode

ModeTradeTypeMeaningPayEXACT_OUTPUTUser pays whatever needed to get exact destination amountFundEXACT_INPUTUser picks input amount, destination computedSwapBothUser chooses directionEarnEXACT_INPUTDeposit into DeFi protocols

### Additional Resources

See docs/ for detailed guides:

TRAILS_OVERVIEW.md — Core concepts
INTEGRATION_DECISION_TREE.md — Mode selection flowchart
WIDGET_RECIPES.md — Widget examples
HEADLESS_SDK_RECIPES.md — Hooks patterns
API_RECIPES.md — Server-side flows
CALLDATA_GUIDE.md — Encoding destination calls
TROUBLESHOOTING.md — Common issues
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: JamesLawton
- Version: 1.0.0
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-10T04:51:00.317Z
- Expires at: 2026-05-17T04:51:00.317Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/trails)
- [Send to Agent page](https://openagent3.xyz/skills/trails/agent)
- [JSON manifest](https://openagent3.xyz/skills/trails/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/trails/agent.md)
- [Download page](https://openagent3.xyz/downloads/trails)