> ## 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.

# Explore

> Jumpstart your building journey with ready-to-use demo apps.

export const Dropdown = ({label, options, selected, setSelected}) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  return <div className={`z-20 relative inline-block`}>
      {dropdownOpen && <div className="fixed inset-0 z-10" onClick={() => {
    setDropdownOpen(false);
  }}></div>}
      <button className={`px-4 py-1.5 rounded-full font-semibold flex items-center gap-2 ${selected.length > 0 ? "bg-gray-900 text-white dark:bg-white dark:text-gray-900" : 'bg-gray-100 dark:bg-white/10'}`} onClick={() => setDropdownOpen(open => !open)}>
        <span>{label} {selected.length > 0 && `(${selected.length})`}</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className={`w-3 h-3 transition-transform duration-200 ${dropdownOpen && "rotate-180"}`}>
          <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" fill="currentColor" />
        </svg>
      </button>
      {dropdownOpen && <div className="absolute z-10 mt-2 w-56 bg-white border rounded-2xl shadow-lg p-3">
          {options.map(option => <div className="flex items-center justify-between px-3 py-1 rounded-xl cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10" onClick={() => setSelected(prev => prev.includes(option) ? prev.filter(item => item !== option) : [...prev, option])}>
              <span className="font-semibold text-gray-800 dark:text-gray-100">{option}</span>
              <label key={option} className="flex items-center py-2 cursor-pointer">
                <input type="checkbox" checked={selected.includes(option)} />
              </label>
            </div>)}
          <div className="flex space-x-2 justify-between mt-2 border-t border-gray-100 dark:border-white/10 pt-4">
            <button className="flex-1 px-4 py-1.5 rounded-full bg-gray-100 text-gray-600 font-semibold" onClick={() => {
    setDropdownOpen(false);
    setSelected([]);
  }}>
              Reset
            </button>
            <button className="flex-1 px-4 py-1.5 rounded-full bg-blue-600 text-white font-semibold" onClick={() => {
    setDropdownOpen(false);
  }}>
              Apply
            </button>
          </div>
        </div>}
    </div>;
};

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 apps = [{
  title: 'AgentKit',
  description: 'Build autonomous crypto agents with AgentKit.',
  tags: ['AI'],
  img: `/get-started/demo-apps/images/agentkit-quickstart.png`,
  href: '/agent-kit/getting-started/quickstart'
}, {
  title: 'Aave Lending',
  description: 'Enable users to earn yield by depositing into Aave with CDP Non-custodial Wallets.',
  tags: ['DeFi', 'Non-custodial Wallet'],
  img: `/get-started/demo-apps/images/aave-lending.svg`,
  href: '/get-started/demo-apps/app-examples/aave-lending'
}, {
  title: 'Morpho Integration',
  description: 'Enable users to earn yield by depositing into a Morpho vault from your onchain app.',
  tags: ['DeFi', 'Non-custodial Wallet'],
  img: `/get-started/demo-apps/images/morpho.svg`,
  href: '/get-started/demo-apps/app-examples/morpho-integration'
}, {
  title: 'Onchain commerce shop',
  description: 'An Onchain Commerce Template built with OnchainKit, and ready to be deployed to Vercel.',
  tags: ['Payments', 'Fintech', 'OnchainKit'],
  img: `/get-started/demo-apps/images/onchain-commerce-shop.png`,
  href: '/get-started/demo-apps/app-examples/onchain-commerce-shop',
  product: 'OnchainKit'
}, {
  title: 'Onchain social profile',
  description: 'An Onchain Profile built with OnchainKit, and ready to be deployed to Vercel.',
  tags: ['Identity', 'OnchainKit'],
  img: `/get-started/demo-apps/images/onchain-social-profile.png`,
  href: '/get-started/demo-apps/starter/onchain-social-profile',
  product: 'OnchainKit'
}, {
  title: 'Onramp demo app',
  description: 'Enable users to easily fund their crypto wallet. Get started with a basic API integration of Onramp for web and mobile apps.',
  tags: ['Starter', 'Onramp'],
  img: `/get-started/demo-apps/images/onramp-demo-app.svg`,
  href: '/get-started/demo-apps/starter/onramp-demo-app'
}, {
  title: 'Partial and full staking app',
  description: 'A partial and full ETH staking app powered by our fully self-serviceable Staking API with no gated onboarding.',
  tags: ['Staking'],
  img: `/get-started/demo-apps/images/partial-and-full-staking-app.png`,
  href: '/get-started/demo-apps/app-examples/partial-and-full-staking-app'
}, {
  title: 'Mass Payments',
  description: 'Build a scalable mass payments application using CDP Non-custodial Wallet',
  tags: ['Payments', 'Non-custodial Wallet'],
  img: `/get-started/demo-apps/images/mass-payments.svg`,
  href: '/get-started/demo-apps/app-examples/automated-mass-payouts'
}, {
  title: 'Onchain app',
  description: 'An Onchain App Template built with OnchainKit, and ready to be deployed to Vercel.',
  tags: ['Starter', 'OnchainKit'],
  img: `/get-started/demo-apps/images/onchain-app.png`,
  href: '/get-started/demo-apps/starter/onchain-app',
  product: 'OnchainKit'
}, {
  title: 'Staking demo app',
  description: 'Stake from any Solana wallet in minutes using the CDP Golang SDK.',
  tags: ['Starter', 'Staking'],
  img: `/get-started/demo-apps/images/staking-demo-app.svg`,
  href: '/get-started/demo-apps/starter/staking-demo-app'
}, {
  title: 'Frame in 100 lines',
  description: 'Farcaster Frames in less than 100 lines, and ready to be deployed to Vercel.',
  tags: ['Starter', 'OnchainKit'],
  img: `/get-started/demo-apps/images/frame-in-100-lines.svg`,
  href: '/get-started/demo-apps/starter/frame-in-100-lines',
  product: 'OnchainKit'
}, {
  title: 'Address history',
  description: 'An address history tool, ready to be deployed to Vercel.',
  tags: ['Address History', 'Onchain-Data'],
  img: `/get-started/demo-apps/images/wallet-history.png`,
  href: '/get-started/demo-apps/app-examples/wallet-history#wallet-history'
}, {
  title: 'Transactions downloader',
  description: 'A Python tool that downloads complete transaction history for any wallet address, including native transfers and token movements (ERC20/ERC721/ERC1155).',
  tags: ['Address History', 'Onchain-Data'],
  img: `/get-started/demo-apps/images/transactions-downloader.png`,
  href: '/get-started/demo-apps/app-examples/transaction-history-downloader'
}];

<Info>
  For details on the latest Non-custodial Wallet, see the [Non-custodial Wallet Overview](/wallets/non-custodial-wallets/overview).
</Info>

## All demo apps

export const useCaseOptions = ["Payments", "AI", "Identity", "Trading", "DeFi", "Starter"];

export const productOptions = ["OnchainKit", "Non-custodial Wallet", "Onramp", "Staking"];

export const DemoApps = () => {
  const [search, setSearch] = useState('');
  const [useCaseSelection, setUseCaseSelection] = useState([]);
  const [productSelection, setProductSelection] = useState([]);
  const filteredApps = apps.filter(app => app.title.toLowerCase().includes(search.toLowerCase()) && (useCaseSelection.length === 0 || useCaseSelection.some(useCase => app.tags.includes(useCase))) && (productSelection.length === 0 || productSelection.some(product => app.tags.includes(product))));
  return <>
      <div className="flex items-center gap-2">
        <div className="flex items-center bg-gray-100 dark:bg-white/10 rounded-full px-3 py-1.5 w-full max-w-md relative">
          <svg className="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" fill="none" />
            <line x1="16.5" y1="16.5" x2="20" y2="20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
          </svg>
          <input className="bg-transparent outline-none flex-1 text-gray-800 dark:text-gray-100 placeholder-gray-500 text-base" type="text" placeholder="Search..." aria-label="Search" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <Dropdown label="Use cases" options={useCaseOptions} selected={useCaseSelection} setSelected={setUseCaseSelection} />
        <Dropdown label="Products" options={productOptions} selected={productSelection} setSelected={setProductSelection} />
        {(useCaseSelection.length > 0 || productSelection.length > 0) && <button className="px-4 py-1.5 font-semibold rounded-full hover:bg-gray-100 dark:hover:bg-white/10" onClick={() => {
    setUseCaseSelection([]);
    setProductSelection([]);
    setSearch('');
  }}>
              Reset filters
            </button>}
      </div>
      <div className="mt-8">
        <Columns cols={2}>
          {filteredApps.map(app => {
    return <Card title={app.title} img={app.img} href={app.href}>
                {app.description}
                <Tags tags={app.tags} className="!mb-0" />
              </Card>;
  })}
        </Columns>
        {filteredApps.length === 0 && <div className="flex flex-col items-center justify-center py-12 w-full">
            <img src="/get-started/demo-apps/images/priceTracking-2.svg" alt="No demo apps match your search" className="mb-6 w-20 h-20" />
            <div className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
              No demo apps match your search
            </div>
            <div className="text-gray-600 dark:text-gray-400 text-sm">
              Try adjusting your filters to find the demo app you are looking for
            </div>
          </div>}
      </div>
    </>;
};

<DemoApps />