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

# Develop with Coinbase

export default function BuildWithCoinbase() {
  const [active, setActive] = useState("infrastructure");
  const cards = [{
    id: "infrastructure",
    title: "Crypto Infrastructure",
    description: "Payments, wallets, trading & more."
  }, {
    id: "programmatic",
    title: "Coinbase apps",
    description: "OAuth and consumer APIs."
  }, {
    id: "institutional",
    title: "Institutional trading",
    description: "Exchange, Prime, International."
  }];
  const cloneCmd = "git clone --depth=1 https://github.com/coinbase/cdp-sdk && cd cdp-sdk/examples/typescript/quickstart";
  const startCmd = "npm install && npm run build && npm start";
  return <>
      <style jsx global>{`
        /* Remove extra margins from What next cards */
        .what-next-grid > a {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }
        .what-next-grid > a > div {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }
        /* Reduce Steps component bottom margin */
        .mintlify-steps {
          margin-bottom: 1.5rem !important;
        }
        /* Ensure consistent card height */
        .tab-cards > div > div {
          height: 100%;
        }
      `}</style>

      <div className="not-prose grid grid-cols-1 md:grid-cols-3 gap-4 w-full mb-10 tab-cards">
        {cards.map(({id, title, description}) => {
    const isActive = active === id;
    const iconName = id === "infrastructure" ? "layer-group" : id === "programmatic" ? "plug" : "building-columns";
    return <div key={id} onClick={() => setActive(id)} className="relative cursor-pointer flex">
              <div className={`
                  flex-1 flex flex-col p-6 rounded-lg border transition-all duration-200
                  ${isActive ? "border-blue-500 bg-blue-50/50 dark:bg-blue-950/10" : "border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-600"}
                `}>
                <div className="flex items-center gap-3 mb-3">
                  <Icon icon={iconName} className="text-blue-600" />
                  <h3 className="font-semibold text-base">{title}</h3>
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
              </div>
            </div>;
  })}
      </div>

      {active === "infrastructure" && <>
          <Heading level={2} id="crypto-infrastructure">Crypto Infrastructure</Heading>

          <p className="mt-3">
            Coinbase Developer Platform (CDP) provides crypto infrastructure at scale for any business, anywhere. Whether you're a fintech processing stablecoin payments, a neobank embedding wallets for your users, or an enterprise needing institutional custody, CDP is one unified platform for payments, wallets, trading, and compliance capabilities.
          </p>

          <Heading level={2} id="what-you-can-build" className="mt-8">What you can build</Heading>

          <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card title="Wallets" href="/wallets/overview" icon="wallet">
              Non-custodial wallets (API key or user authentication), smart accounts, policy engine.
            </Card>
            <Card title="Payments" href="/payments/overview" icon="arrow-right-arrow-left">
              Stablecoin transfers, payment acceptance, onramp/offramp, x402 machine payments.
            </Card>
            <Card title="Stablecoins" href="/custom-stablecoins/overview" icon="coin">
              Issue and manage your own branded stablecoin backed 1:1 by USDC on Base.
            </Card>
            <Card title="Trading" href="/trade-api/welcome" icon="chart-candlestick">
              Onchain token swaps, price discovery, DEX aggregation.
            </Card>
            <Card title="Onchain Tools" href="/onchain-tools/overview" icon="wrench">
              Gas sponsorship (paymaster), blockchain data (SQL API, node access), AgentKit.
            </Card>
          </div>

          <Heading level={2} id="send-your-first-request" className="mt-10">Hit your first CDP API request</Heading>

          <p className="mt-3">
            The <a href="/get-started/tools/cdp-cli">CDP CLI</a> covers the full CDP API (wallets, data, policies, onramp, x402) and doubles as an <a href="/get-started/tools/cdp-cli-mcp">MCP server</a> so AI agents get typed tool access to every endpoint.
          </p>

          <Heading level={3} id="from-your-terminal" className="mt-6">From your terminal</Heading>

          <Steps titleSize="p">
            <Step title="Install (Node.js 22+)">
              <CodeGroup>
                <CodeBlock language="bash" filename="Terminal">
                  npm install -g @coinbase/cdp-cli
                </CodeBlock>
              </CodeGroup>
            </Step>

            <Step title="Configure credentials">
              Download an{" "}
              <a href="https://portal.cdp.coinbase.com/projects/api-keys" target="_blank" rel="noreferrer">
                API key
              </a>
              {" "}and a{" "}
              <a href="https://portal.cdp.coinbase.com/wallets/non-custodial/security" target="_blank" rel="noreferrer">
                wallet secret
              </a>
              {" "}from the CDP Portal, then load each into the CLI:
              <CodeGroup>
                <CodeBlock language="bash" filename="Terminal">
{`cdp env live --key-file ./cdp_api_key.json
cdp env live --wallet-secret-file ./cdp_wallet_secret.txt`}
                </CodeBlock>
              </CodeGroup>
            </Step>

            <Step title="Create and fund a testnet account">
              <CodeGroup>
                <CodeBlock language="bash" filename="Terminal">
{`cdp evm accounts create name=my-wallet
address=$(cdp evm accounts by-name my-wallet --jq '.address')
cdp evm faucet address=$address network=base-sepolia token=eth`}
                </CodeBlock>
              </CodeGroup>
            </Step>

            <Step title="You're done">
              <p>The full encode-sign-send pipeline (and Solana, smart accounts, swaps, x402, etc.) is covered in the <a href="/get-started/tools/cdp-cli-quickstart">CLI quickstart</a>.</p>
            </Step>
          </Steps>

          <Heading level={3} id="from-an-agent-session" className="mt-6">From an agent session</Heading>

          <p className="mt-3">
            Point the agent at the CDP CLI onboarding skill. It installs, configures, and verifies the CLI:
          </p>

          <CodeGroup>
            <CodeBlock language="text" filename="Prompt">
              docs.cdp.coinbase.com/cdp-cli/skill.md
            </CodeBlock>
          </CodeGroup>

          <p className="mt-4">
            To register the CLI's MCP server (Claude Code example):
          </p>

          <CodeGroup>
            <CodeBlock language="bash" filename="Terminal">
              claude mcp add --scope user --transport stdio cdp -- cdp mcp
            </CodeBlock>
          </CodeGroup>

          <p className="mt-4">
            Other agents and bundled-skill installation: see <a href="/get-started/tools/cdp-cli-mcp">CDP CLI MCP Integration</a>.
          </p>

          <Heading level={2} id="cli-what-next" className="mt-6">What next?</Heading>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 what-next-grid">
            <Card title="CLI Quickstart" href="/get-started/tools/cdp-cli-quickstart" icon="rocket">
              First testnet transaction.
            </Card>
            <Card title="How It Works" href="/get-started/tools/cdp-cli-how-it-works" icon="book">
              Field syntax, env, pipeline.
            </Card>
            <Card title="MCP for AI agents" href="/get-started/tools/cdp-cli-mcp" icon="robot">
              Typed tools for every endpoint.
            </Card>
          </div>
        </>}

      {active === "programmatic" && <>
          <Heading level={2} id="integrate-with-coinbase">Integrate with Coinbase apps</Heading>
          
          <div className="space-y-6 mt-6">
            <Card title="Coinbase App" href="/coinbase-app/introduction/welcome" icon="mobile">
              Programmatic access to your Coinbase account.
            </Card>
            
            <Card title="Coinbase OAuth2" href="/coinbase-app/oauth2-integration/overview" icon="key">
              Connect to Coinbase's 100M+ users.
            </Card>
          </div>
        </>}

      {active === "institutional" && <>
          <Heading level={2} id="build-for-institutions">Build for institutions</Heading>
          
          <div className="space-y-6 mt-6">
            <Card title="Coinbase Exchange" href="/exchange/introduction/welcome" icon="chart-line">
              Digital asset spot trading.
            </Card>
            
            <Card title="Coinbase International Exchange" href="/international-exchange/introduction/welcome" icon="globe">
              Global derivatives exchange.
            </Card>
            
            <Card title="Coinbase Prime" href="/prime/introduction/welcome" icon="shield">
              Custody and financing solutions.
            </Card>
            
            <Card title="Coinbase Derivatives" href="/derivatives/introduction/welcome" icon="chart-pie">
              Crypto derivatives trading.
            </Card>
          </div>
        </>}
    </>;
}