> ## Documentation Index
> Fetch the complete documentation index at: https://circle-devdocs-test-ai-codegen-component.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Circle Developer Docs

export const TryItOut = () => {
  const [selectedItem, setSelectedItem] = useState(0);
  const items = [{
    icon: "arrows-maximize",
    title: "Get supported tokens and chains",
    subtitle: "Gateway APIs",
    code: `{
  "newRoyaltyRecipient": "0xb794f5ea0ba39494ce839613fffba74279579268",
  "newRoyaltyBps": "250",
  "newRoyaltyRecipient2": "0xb794f5ea0ba39494ce839613fffba74279579269",
  "newRoyaltyBps2": "251"
}`
  }, {
    icon: "arrow-up-arrow-down",
    title: "Transfer fees between chains",
    subtitle: "Using CCTP",
    code: `{
  "newRoyaltyRecipient": "0xb794f5ea0ba39494ce839613fffba74279579268",
  "newRoyaltyBps": "250",
  "newRoyaltyRecipient2": "0xb794f5ea0ba39494ce839613fffba74279579269",
  "newRoyaltyBps2": "251"
}`
  }, {
    icon: "arrows-rotate-reverse",
    title: "Get a testnet token",
    subtitle: "With the API Faucet",
    code: `{
  "newRoyaltyRecipient": "0xb794f5ea0ba39494ce839613fffba74279579268",
  "newRoyaltyBps": "250",
  "newRoyaltyRecipient2": "0xb794f5ea0ba39494ce839613fffba74279579269",
  "newRoyaltyBps2": "251"
}`
  }, {
    icon: "droplet",
    title: "Fetch an exchange rate",
    subtitle: "Using Circle Mint",
    code: `{
  "newRoyaltyRecipient": "0xb794f5ea0ba39494ce839613fffba74279579268",
  "newRoyaltyBps": "250",
  "newRoyaltyRecipient2": "0xb794f5ea0ba39494ce839613fffba74279579269",
  "newRoyaltyBps2": "251"
}`
  }];
  return <div className="flex flex-row rounded-2xl bg-[#F5F7FA] dark:bg-[#1A1A1A] overflow-hidden">
      {}
      <div className="w-[360px] p-[24px] pr-0 flex flex-col gap-[8px]">
        {items.map((item, index) => <div key={index} onClick={() => setSelectedItem(index)} className={`flex gap-[12px] p-[16px] rounded-xl cursor-pointer transition-all ${selectedItem === index ? "bg-white dark:bg-[#2A2A2A]" : "bg-transparent hover:bg-white/50 dark:hover:bg-[#252525]"}`}>
            <div className={`mt-[2px] flex-shrink-0 ${item.icon === "arrow-up-arrow-down" ? "rotate-45" : ""}`}>
              <Icon icon={item.icon} color="#6B7280" size={20} />
            </div>
            <div className="flex-1">
              <div className="text-[15px] font-semibold text-[#111827] dark:text-white mb-[4px] leading-tight">
                {item.title}
              </div>
              <div className="text-[13px] text-[#6B7280] dark:text-[#9CA3AF] leading-tight">{item.subtitle}</div>
            </div>
          </div>)}
      </div>

      {}
      <div className="home_code_container flex-1 p-[24px] pl-[16px] flex flex-col">
        <div className="flex-1 rounded-xl overflow-hidden">
          <CodeBlock wrap lines language="json">
            {items[selectedItem].code}
          </CodeBlock>
        </div>
      </div>
    </div>;
};

export const StablecoinSolutions = () => {
  const [isDark, setIsDark] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      setIsDark(document.documentElement.classList.contains("dark"));
    };
    checkDarkMode();
    const observer = new MutationObserver(checkDarkMode);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => observer.disconnect();
  }, []);
  const cards = [{
    icon: "wallet",
    iconColor: "#9F72FF",
    iconBgColor: "#F6F2FF",
    iconBgColorDark: "#2D1B4E",
    iconSize: 24,
    title: "Integrate USDC into your app",
    description: "Embed USDC payments and wallets directly in your app.",
    linkText: "Wallets",
    linkHref: "/stablecoins/what-is-usdc"
  }, {
    icon: "arrow-up-arrow-down",
    iconColor: "#1894E8",
    iconBgColor: "#E1F2FF",
    iconBgColorDark: "#0A2540",
    iconSize: 20,
    rotate: true,
    title: "Bridge between blockchains",
    description: "Transfer USDC seamlessly across chains with CCTP.",
    linkText: "CCTP",
    linkHref: "/cctp"
  }, {
    icon: "coin-blank",
    iconColor: "#0B9C4A",
    iconBgColor: "#E2FDF2",
    iconBgColorDark: "#0A2E1A",
    iconSize: 24,
    title: "Integrate currency trading",
    description: "Enable currency trading in your app with our APIs.",
    linkText: "StableFX",
    linkHref: "/wallets/user-controlled/receive-inbound-transfer"
  }];
  return <Columns cols={3}>
      {cards.map((card, index) => <div key={index} className="border border-[#1118271A] dark:border-[#374151] rounded-xl p-[24px] flex flex-col hover:border-[#0073C3] dark:hover:border-[#3B9EFF] select-none transition-all duration-300 h-full">
          <span className={`${card.rotate ? "inline-flex items-center justify-center w-[56px] h-[56px] rounded-full rotate-45 transition-colors flex-shrink-0 mb-[16px]" : "inline-flex items-center justify-center w-[56px] h-[56px] rounded-full transition-colors flex-shrink-0 mb-[16px]"}`} style={{
    backgroundColor: `light-dark(${card.iconBgColor}, ${card.iconBgColorDark})`
  }}>
            <Icon icon={card.icon} color={card.iconColor} size={card.iconSize} />
          </span>
          <h3 className="text-lg font-bold text-black dark:text-white mt-0 mb-[16px]">{card.title}</h3>
          <p className="text-[#4B5563] dark:text-[#9CA3AF] m-0 mb-[16px] flex-grow">{card.description}</p>
          <a href={card.linkHref} className="cursor-pointer text-[#0073C3] dark:!text-[#0073C3] font-bold w-fit no-underline hover:underline border-b-0 mt-auto">
            {card.linkText}
          </a>
        </div>)}
    </Columns>;
};

export const BuildWithKits = () => {
  return <div className="border border-[#B5E1FF] dark:border-[#0073C360] bg-[#f7f8ff] dark:bg-[#0A1628] rounded-2xl flex flex-col lg:flex-row items-start lg:items-center justify-between px-[24px] py-[24px] lg:py-[20px] gap-[16px] mb-[40px]">
      <div className="flex-shrink-0">
        <h2 className="text-2xl font-bold text-black dark:text-white mb-[4px] mt-0">Build fast with Kits</h2>
        <p className="text-[#4B5563] dark:text-[#9CA3AF] m-0 text-base">
          Pre-configured SDKs that handle setup, keys, and chains.
        </p>
      </div>
      <a href="#" className="border border-[#1118271A] dark:border-[#374151] bg-[#FFFFFF] dark:bg-[#1F2937] px-[24px] py-[12px] rounded-lg flex items-center justify-between w-full lg:flex-1 lg:max-w-[630px] cursor-pointer hover:border-[#0073C3] dark:hover:border-[#3B9EFF] transition-all duration-300 no-underline">
        <div className="flex flex-col gap-[4px] flex-1">
          <h3 className="text-lg font-bold text-black dark:text-white mt-0 mb-0">Bridging Kit</h3>
          <p className="text-[#4B5563] dark:text-[#9CA3AF] m-0 text-sm">Connect assets and wallets across chains.</p>
        </div>
        <Icon icon="chevron-right" color="#6B6580" size={20} />
      </a>
    </div>;
};

export const HeroSection = () => {
  useEffect(() => {
    const header = document.querySelector("div#content-area > header#header");
    if (header) {
      header.style.display = "none";
    }
    const mdxContent = document.querySelector("div.mdx-content");
    if (mdxContent) {
      mdxContent.style.marginTop = "0";
    }
    return () => {
      const header = document.querySelector("div#content-area > header#header");
      if (header) {
        header.style.display = "";
      }
      const mdxContent = document.querySelector("div.mdx-content");
      if (mdxContent) {
        mdxContent.style.marginTop = "";
      }
    };
  }, []);
  return <div className="relative w-full flex items-center justify-between mt-0">
      <div>
        <h1 className="text-5xl font-bold text-black dark:text-white mb-[16px]">Circle developers</h1>
        <p className="mb-[24px] text-[#4B5563] dark:text-[#9CA3AF]">Bridge chains. Move money. Develop faster.</p>
        <div className="flex gap-[16px] mt-4">
          <a className="cursor-pointer border border-[#0073C380] dark:border-[#0073C360] text-[#0073C3] dark:text-[#3B9EFF] h-[40px] px-4 rounded-md inline-flex items-center gap-2 hover:bg-[#0073C31A] dark:hover:bg-[#0073C320] transition-all duration-300">
            <Icon icon="server" color="#0073C3" size={24} />
            Build with MCP Server
          </a>
          <a href="https://developers.circle.com/ai-codegen" target="_blank" rel="noopener noreferrer" className="cursor-pointer border border-[#0073C380] dark:border-[#0073C360] text-[#0073C3] dark:text-[#3B9EFF] h-[40px] px-4 rounded-md inline-flex items-center gap-2 hover:bg-[#0073C31A] dark:hover:bg-[#0073C320] transition-all duration-300">
            <Icon icon="sparkles" color="#0073C3" size={24} />
            Code with AI
          </a>
        </div>
      </div>

      <div className="hidden md:block">
        <img src="images/home/hero.svg" noZoom alt="hero image my-0" />
      </div>
    </div>;
};

<HeroSection />

<BuildWithKits />

## Scalable solutions with stablecoins

<StablecoinSolutions />

## Try it out

<TryItOut />

## Explore our products

<div class="home_mint_cards">
  <Columns cols={3}>
    <Card title="Wallets" href="/wallets" icon="wallet" color="#B090F5">
      Embed secure wallets in any app
    </Card>

    <Card title="Paymaster" href="/paymaster" icon="coin-vertical" color="#9F72FF">
      Allow transaction fees in USDC
    </Card>

    <Card title="Gas station" href="/wallets/gas-station" icon="gas-pump" color="#9F72FF">
      Mint and redeem USDC with Circle.
    </Card>

    <Card title="Mint" href="/circle-mint/introducing-circle-mint" icon="arrows-rotate-reverse" color="#B090F5">
      Access and distribute USDC liquidity
    </Card>

    <Card title="CPN" href="/cpn" icon="globe" color="#9F72FF">
      Global, real-time settlement
    </Card>

    <Card title="CCPT" href="/cctp" icon="arrow-up-arrow-down" color="#9F72FF">
      Move USDC natively between chains
    </Card>

    <Card title="Gateway" href="/gateway" icon="arrows-maximize" color="#B090F5">
      Enable a unified USDC balance
    </Card>

    <Card title="Circle Unified Bridge" href="/gateway/howtos/create-unified-usdc-balance" icon="link" color="#9F72FF">
      Move USDC cross-chain with one API
    </Card>

    <Card title="Contracts" href="/contracts" icon="globe" color="#9F72FF">
      Build and manage smart contracts
    </Card>
  </Columns>
</div>