> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cdp.coinbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Get programmatic access to Coinbase products.

export const coinbaseProductsCategories = [{
  id: 'coinbase-apis',
  label: 'Consumer APIs',
  items: [{
    id: 'coinbase-app',
    title: 'Coinbase App',
    desc: 'Trade, transfer, and track Coinbase accounts and assets',
    icon: 'https://mintlify-assets.b-cdn.net/coinbase-logo.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Coinbase%20App.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/coinbaseapp-dark.svg'
    },
    href: '/coinbase-app/introduction/welcome'
  }]
}, {
  id: 'business-apis',
  label: 'Business APIs',
  items: [{
    id: 'coinbase-business',
    title: 'Coinbase Business',
    desc: 'Trade, transfer, and track Coinbase Business accounts and assets',
    icon: "https://mintlify.s3.us-west-1.amazonaws.com/coinbase-prod/coinbase-business/icons/business-light.svg",
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Coinbase%20business.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Coinbase%20business%20(1).svg'
    },
    href: '/coinbase-business/introduction/welcome'
  }]
}, {
  id: 'institutions',
  label: 'Institutional APIs',
  items: [{
    id: 'coinbase-exchange',
    title: 'Coinbase Exchange',
    desc: 'Institutional API for direct access to spot trading and market data',
    icon: 'https://mintlify-assets.b-cdn.net/exchangeProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Exchange.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Exchange%20(1).svg'
    },
    href: '/exchange/introduction/welcome'
  }, {
    id: 'coinbase-international-exchange',
    title: 'Coinbase International Exchange',
    desc: 'Trade and manage orders on the International Exchange',
    icon: 'https://mintlify-assets.b-cdn.net/internationalExchangeProduct-0.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/INTX.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/INTX%20(1).svg'
    },
    href: '/international-exchange/introduction/welcome'
  }, {
    id: 'coinbase-prime',
    title: 'Coinbase Prime',
    desc: 'High-volume trading and custody for institutional traders',
    icon: 'https://mintlify-assets.b-cdn.net/primeProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Prime.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Prime.svg'
    },
    href: '/prime/introduction/welcome'
  }, {
    id: 'coinbase-derivatives',
    title: 'Coinbase Derivatives',
    desc: 'Onboard and connect brokers and market makers',
    icon: 'https://mintlify-assets.b-cdn.net/derivativesProduct-2.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Derivatives.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Derivatives%20(1).svg'
    },
    href: '/derivatives/introduction/welcome'
  }]
}];

export const onChainAppsCategories = [{
  id: 'most-popular',
  label: 'Most popular',
  items: [{
    id: 'transfers',
    title: 'Transfers',
    desc: 'Send fiat and crypto transfers programmatically',
    icon: 'https://mintlify-assets.b-cdn.net/coinbase/coinFocus.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/onramp-light.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/onramp-dark.svg'
    },
    href: '/payments/transfers/overview'
  }, {
    id: 'non-custodial-wallets',
    title: 'Non-custodial Wallet',
    desc: 'Add wallets to your app with social login and passkeys',
    icon: 'https://mintlify-assets.b-cdn.net/productWallet-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/onramp-light.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/onramp-dark.svg'
    },
    href: '/wallets/non-custodial-wallets/overview'
  }, {
    id: 'custom-stablecoins',
    title: 'Custom Stablecoins',
    desc: 'Issue and manage your own stablecoin on Base',
    icon: 'https://mintlify-assets.b-cdn.net/internationalExchangeProduct-0.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/onramp-light.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/onramp-dark.svg'
    },
    href: '/custom-stablecoins/overview'
  }]
}, {
  id: 'payments',
  label: 'Payments',
  items: [{
    id: 'deposit-destinations',
    title: 'Deposit Destination',
    desc: 'Accept crypto deposits into a dedicated onchain address',
    icon: 'https://mintlify-assets.b-cdn.net/paySDKProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/x402.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/x402-dark.svg'
    },
    href: '/payments/deposit-destinations/overview'
  }, {
    id: 'transfers',
    title: 'Transfers',
    desc: 'Send fiat and crypto transfers programmatically',
    icon: 'https://mintlify-assets.b-cdn.net/coinbase/coinFocus.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/x402.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/x402-dark.svg'
    },
    href: '/payments/transfers/overview'
  }, {
    id: 'x402',
    title: 'x402',
    desc: 'Instant, automatic stablecoin payments over HTTP',
    icon: 'https://mintlify-assets.b-cdn.net/primeProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/x402.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/x402-dark.svg'
    },
    href: '/x402/welcome#welcome-to-x402'
  }]
}, {
  id: 'wallets',
  label: 'Wallets',
  items: [{
    id: 'non-custodial-wallets',
    title: 'Non-custodial Wallet',
    desc: 'Add wallets to your app with social login, passkeys, and server-side automation',
    icon: 'https://mintlify-assets.b-cdn.net/productWallet-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Wallet%20API.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Wallet%20API-dark.svg'
    },
    href: '/wallets/non-custodial-wallets/overview'
  }, {
    id: 'custodial-wallets',
    title: 'Custodial Wallet',
    desc: 'Server-side wallets with full custody and programmable control',
    icon: 'https://mintlify-assets.b-cdn.net/coinbase-logo.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Wallet%20API.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Wallet%20API-dark.svg'
    },
    href: '/wallets/custodial-wallets/overview'
  }, {
    id: 'agentic-wallet',
    title: 'Agentic Wallet',
    desc: 'Give AI agents secure, self-custodial wallets',
    icon: 'https://mintlify-assets.b-cdn.net/agentkit.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Wallet%20API.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Wallet%20API-dark.svg'
    },
    href: '/agentic-wallet/welcome'
  }]
}, {
  id: 'stablecoins',
  label: 'Stablecoins',
  items: [{
    id: 'custom-stablecoins',
    title: 'Custom Stablecoins',
    desc: 'Issue and manage your own stablecoin on Base',
    icon: 'https://mintlify-assets.b-cdn.net/internationalExchangeProduct-0.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Staking%20API.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Staking%20API%20(1).svg'
    },
    href: '/custom-stablecoins/overview'
  }]
}, {
  id: 'trading',
  label: 'Trading',
  items: [{
    id: 'trade-api',
    title: 'Trade API',
    desc: 'Swap tokens and execute trades programmatically',
    icon: 'https://mintlify-assets.b-cdn.net/exchangeProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Exchange.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Exchange%20(1).svg'
    },
    href: '/trade-api/welcome'
  }, {
    id: 'staking',
    title: 'Staking API',
    desc: 'Enable staking rewards for you and your customers\' assets',
    icon: 'https://mintlify-assets.b-cdn.net/stakingProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Staking%20API.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Staking%20API%20(1).svg'
    },
    href: '/staking/staking-api/introduction/welcome'
  }]
}, {
  id: 'onchain-tools',
  label: 'Onchain Tools',
  items: [{
    id: 'paymaster',
    title: 'Paymaster',
    desc: 'Build custom gasless experiences for your smart wallet users',
    icon: 'https://mintlify-assets.b-cdn.net/coinbase/paymaster.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Paymaster.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Paymaster.svg'
    },
    href: '/paymaster/introduction/welcome#welcome-to-paymaster'
  }, {
    id: 'data',
    title: 'Data',
    desc: 'Access wallet balances and transactions',
    icon: 'https://mintlify-assets.b-cdn.net/decentralizedWeb3-3.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Data.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/Data%20(1).svg'
    },
    href: '/data/get-started/overview'
  }, {
    id: 'agent-kit',
    title: 'AgentKit',
    desc: 'A toolkit enabling AI agents to interact onchain',
    icon: 'https://mintlify-assets.b-cdn.net/derivativesProduct-2.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/AgentKit.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/AgentKit-dark.svg'
    },
    href: '/agent-kit/welcome'
  }]
}, {
  id: 'customers',
  label: 'Customers',
  items: [{
    id: 'customers',
    title: 'Customers',
    desc: 'Onboard users to Coinbase compliance infrastructure under your brand',
    icon: 'https://mintlify-assets.b-cdn.net/delegateProduct-1.svg',
    image: {
      light: 'https://mintlify-assets.b-cdn.net/coinbase/Coinbase%20App.svg',
      dark: 'https://mintlify-assets.b-cdn.net/coinbase/coinbaseapp-dark.svg'
    },
    href: '/customers-kyc/overview'
  }]
}];

export const Tags = ({tags, className}) => {
  if (!tags || !Array.isArray(tags)) {
    return null;
  }
  return <div className={`mt-5 mb-5 flex flex-row flex-wrap gap-2 ${className}`}>
      {tags.map((tag, index) => <span key={index} className="text-sm text-[#733E00] dark:text-yellow-500 bg-[#FFFCF1] dark:bg-yellow-500/10 font-semibold px-2 py-1 rounded-lg">{tag}</span>)}
    </div>;
};

export const ProductTiles = ({categories, hideButtons = false}) => {
  const [activeCategory, setActiveCategory] = useState(categories[0].id);
  const [activeSubTab, setActiveSubTab] = useState(categories[0].items[0]?.id ?? null);
  const currentCategory = categories.find(cat => cat.id === activeCategory);
  const currentSub = currentCategory?.items.find(item => item.id === activeSubTab);
  return <div className="not-prose space-y-6">
    {!hideButtons && <div className="flex flex-wrap gap-2">
        {categories.map(cat => <button key={cat.id} onClick={() => {
    setActiveCategory(cat.id);
    setActiveSubTab(cat.items[0]?.id ?? null);
  }} className={`px-4 py-2 text-sm rounded-full font-bold transition-colors ${activeCategory === cat.id ? 'bg-[#0A0B0D] text-white dark:bg-white dark:text-[#0A0B0D] border-black' : 'bg-gray-100 dark:bg-white/10 text-black dark:text-white'}`}>
            {cat.label}
          </button>)}
      </div>}

      <div>
        {currentCategory?.items?.length ? <div className="flex flex-col lg:flex-row gap-6">
            <div className="flex flex-col w-full lg:w-1/2 space-y-2">
              {currentCategory.items.map(item => <a key={item.id} href={item.href} onMouseOver={() => setActiveSubTab(item.id)} className={`flex items-start gap-1.5 text-left px-5 py-4 rounded-2xl transition-all ${activeSubTab === item.id ? 'bg-gray-100 dark:bg-white/5' : ''}`}>
                  <div className="text-xl mr-3 mt-1"><img src={item.icon} alt={item.title} className="w-8 h-8" /></div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-base text-black dark:text-white">
                      {item.title}
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{item.desc}</p>
                  </div>
                  <div className={`h-full flex items-center ${activeSubTab === item.id ? 'opacity-100' : 'opacity-0'}`}>
                    <div className="hidden dark:block">
                      <Icon icon="chevron-right" size="14" color="#FFF" />
                    </div>
                    <div className="block dark:hidden">
                      <Icon icon="chevron-right" size="14" color="#0A0B0D" />
                    </div>
                  </div>
                </a>)}
            </div>
            <div className="group w-full h-fit lg:w-1/2 bg-[#F5F8FF] dark:bg-[#001033] rounded-2xl flex items-center justify-center border border-[#D3E1FF] dark:border-[#011D5B]">
              {currentSub?.image ? <>
                <img src={currentSub.image.light} alt={currentSub.title} className="block dark:hidden w-full h-full rounded-xl transition-all duration-300 group-hover:scale-105 group-hover:shadow-lg" />
                <img src={currentSub.image.dark} alt={currentSub.title} className="hidden dark:block w-full h-full rounded-xl transition-all duration-300 group-hover:scale-105 group-hover:shadow-lg" />
              </> : <p className="text-gray-400 dark:text-gray-500">No preview available</p>}
            </div>
          </div> : <p className="text-sm text-gray-500 dark:text-gray-400">
            No features available for this category.
          </p>}
      </div>
    </div>;
};

export const QuickstartItem = ({title, description, icon, href}) => {
  return <a className="group flex items-start gap-4 hover:bg-gray-100 dark:hover:bg-white/5 p-3 rounded-xl" href={href}>
      <div className="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg border border-gray-200 dark:border-white/10 bg-background-light dark:bg-background-dark">
        {icon}
      </div>
      <div>
        <div className="font-semibold text-sm text-gray-900 dark:text-gray-200">{title}</div>
        <div className="mt-1 text-gray-500 text-sm dark:text-gray-400">{description}</div>
      </div>
    </a>;
};

export const TitleLink = ({children, href}) => {
  return <a href={href} className="text-[#0955FE] dark:text-blue-400 font-bold flex items-center gap-1">
      {children} <Icon icon="arrow-right" size="14" color="currentColor" />
    </a>;
};

export const Title = ({children}) => {
  return <div className="text-gray-900 dark:text-gray-200 text-3xl tracking-tight">
      {children}
    </div>;
};

export const Container = ({children}) => {
  return <div className="px-4 lg:px-10 py-14">
      {children}
    </div>;
};

export const CandleSticksIcon = ({className}) => {
  return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
      <path d="M10.9888 -0.00482178H12.9888V2.99518H13.9888V14.9952H12.9888V17.9952H10.9888V14.9952H9.98877V2.99518H10.9888V-0.00482178Z" fill="currentColor" />
      <path d="M3.98877 8.99518H2.98877V20.9952H3.98877V23.9952H5.98877V20.9952H6.98877V8.99518H5.98877V5.99518H3.98877V8.99518Z" fill="currentColor" />
      <path d="M19.9888 8.99518H20.9888V20.9952H19.9888V23.9952H17.9888V20.9952H16.9888V8.99518H17.9888V5.99518H19.9888V8.99518Z" fill="currentColor" />
    </svg>;
};

export const NftIcon = ({className}) => {
  return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
      <path d="M11.4888 7.99518L12.7616 11.2224L15.9888 12.4952L12.7616 13.768L11.4888 16.9952L10.216 13.768L6.98877 12.4952L10.216 11.2224L11.4888 7.99518Z" fill="currentColor" />
      <path d="M16.1252 7.85878L15.4888 6.49518L14.8524 7.85878L13.4888 8.49518L14.8524 9.13157L15.4888 10.4952L16.1252 9.13157L17.4888 8.49518L16.1252 7.85878Z" fill="currentColor" />
      <path d="M4.9177 19.0662C3.10806 17.2566 1.98877 14.7566 1.98877 11.9952C1.98877 6.47233 6.46592 1.99518 11.9888 1.99518C17.5116 1.99518 21.9888 6.47233 21.9888 11.9952C21.9888 14.7566 20.8695 17.2566 19.0598 19.0662L21.9888 21.9952H1.98877L4.9177 19.0662ZM15.8648 18.9952C18.3242 17.6304 19.9888 15.0072 19.9888 11.9952C19.9888 7.5769 16.407 3.99518 11.9888 3.99518C7.57049 3.99518 3.98877 7.5769 3.98877 11.9952C3.98877 15.0072 5.65334 17.6304 8.11276 18.9952H15.8648Z" fill="currentColor" />
    </svg>;
};

export const CurrenciesIcon = ({className}) => {
  return <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
      <path d="M10.4523 10.669L9.48873 8.35236L8.52518 10.669L6.02417 10.8695L7.92968 12.5018L7.34752 14.9423L9.48873 13.6345L11.63 14.9423L11.0478 12.5018L12.9533 10.8695L10.4523 10.669Z" fill="currentColor" />
      <path d="M9.48877 20.4952C14.1832 20.4952 17.9888 16.6896 17.9888 11.9952C17.9888 7.30076 14.1832 3.49518 9.48877 3.49518C4.79435 3.49518 0.98877 7.30076 0.98877 11.9952C0.98877 16.6896 4.79435 20.4952 9.48877 20.4952ZM9.48877 18.4952C5.89892 18.4952 2.98877 15.585 2.98877 11.9952C2.98877 8.40533 5.89892 5.49518 9.48877 5.49518C13.0786 5.49518 15.9888 8.40533 15.9888 11.9952C15.9888 15.585 13.0786 18.4952 9.48877 18.4952Z" fill="currentColor" />
      <path d="M18.9888 20.1215C22.4631 19.0539 24.9888 15.8195 24.9888 11.9951C24.9888 8.17075 22.4631 4.93628 18.9888 3.86871V5.99328C21.3377 6.97284 22.9888 9.29117 22.9888 11.9951C22.9888 14.6991 21.3377 17.0174 18.9888 17.997V20.1215Z" fill="currentColor" />
    </svg>;
};

export const WalletIcon = ({className}) => {
  return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
      <path d="M16.9888 15.9952C17.5411 15.9952 17.9888 15.5475 17.9888 14.9952C17.9888 14.4429 17.5411 13.9952 16.9888 13.9952C16.4365 13.9952 15.9888 14.4429 15.9888 14.9952C15.9888 15.5475 16.4365 15.9952 16.9888 15.9952Z" fill="currentColor" />
      <path d="M18.9888 8.99518V1.99518L1.98877 8.54063V21.9952H21.9888V8.99518H18.9888ZM19.9888 10.9952V19.9952H3.98877V10.9952H19.9888ZM16.9888 4.90836V8.99518H6.37438L16.9888 4.90836Z" fill="currentColor" />
    </svg>;
};

<div className="px-5">
  <Container>
    <div className="flex flex-col w-full mb-10">
      <Title>Institutional APIs</Title>

      <p className="text-lg font-[500] text-gray-600 dark:text-gray-400 text-left mt-6">
        Coinbase’s Institutional APIs allow institutional investors to
        programmatically trade, manage orders & much more on Coinbase's Exchange,
        International Exchange, Derivatives Exchange & Prime brokerage platform.
      </p>
    </div>

    <ProductTiles
      categories={coinbaseProductsCategories.filter(
    (category) => category.id === "institutions"
  )}
      hideButtons={true}
    />
  </Container>
</div>