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

<div class="tw-reset costatw:flex costatw:flex-col costatw:items-center costatw:text-center costatw:mt-16 costatw:mb-10 costatw:px-4">
  <h1 class="costatw:!text-4xl costatw:md:!text-6xl costatw:!font-semibold costatw:!tracking-tight costatw:!leading-[1.05] costatw:!m-0">
    Connect your AI.
  </h1>

  <p class="costatw:mt-5 costatw:text-lg costatw:md:text-xl costatw:text-zinc-600 costatw:dark:text-zinc-300 costatw:max-w-xl">
    Make every token count.
  </p>

  <div class="costatw:mt-10 costatw:flex costatw:items-center costatw:justify-center">
    <a href="/get-started/claude-code" class="costatw:!inline-flex costatw:!items-center costatw:!justify-center costatw:!px-6 costatw:!py-3 costatw:!rounded-xl costatw:!font-medium costatw:!transition-colors costatw:!border-0 costatw:!bg-zinc-900 costatw:!text-white costatw:hover:!bg-zinc-800 costatw:dark:!bg-white costatw:dark:!text-zinc-900 costatw:dark:hover:!bg-zinc-100">
      <span>Get started</span>

      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="costatw:ml-2" aria-hidden="true">
        <path d="M5 12h14" />

        <path d="m12 5 7 7-7 7" />
      </svg>
    </a>
  </div>
</div>

<Frame>
  <img src="https://docs-cdn.costa.security/images/session_analytics.png" alt="A Costa session: prompts, tool calls, and routing across models" style={{ borderRadius: '0.5rem' }} />

  <figcaption>A real session.</figcaption>
</Frame>

<div class="tw-reset costatw:mt-10 costatw:mb-6 costatw:w-full costatw:flex costatw:justify-center">
  <a href="/?assistant=open" data-assistant data-prompt="What is Costa?" class="costatw:!inline-flex costatw:!items-center costatw:!justify-center costatw:!px-4 costatw:!py-2 costatw:!rounded-full costatw:!text-sm costatw:!font-medium costatw:!transition-colors costatw:!border-0 costatw:!bg-indigo-100/45 costatw:hover:!bg-indigo-200/45 costatw:!text-zinc-900 costatw:dark:!bg-indigo-500/20 costatw:dark:!text-white costatw:dark:hover:!bg-indigo-500/30">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="costatw:mr-2">
      <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />

      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />

      <path d="M12 17h.01" />
    </svg>

    <span>Chat with our docs</span>
  </a>
</div>