> ## Documentation Index
> Fetch the complete documentation index at: https://assembly-preview.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

export const IntroCard = ({icon, title, href}) => {
  return <a href={href} style={{
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '6px',
    padding: '10px 16px',
    borderRadius: '14px',
    backgroundColor: 'transparent',
    textDecoration: 'none',
    height: '44px',
    width: 'fit-content'
  }} className="intro-card border hover:!border-primary dark:hover:!border-primary-light transition-colors">
      <Icon icon={icon} className="w-[18px] h-[18px] text-blue-600 dark:text-blue-500" />
      <span style={{
    fontSize: '16px',
    fontWeight: 600,
    lineHeight: 1
  }} className="text-gray-900 dark:text-white">
        {title}
      </span>
    </a>;
};

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center" style={{ height: '32rem', overflow: 'hidden', marginTop: '0.5rem', borderRadius: '1rem', maxWidth: '1800px', marginLeft: 'auto', marginRight: 'auto' }}>
  <div className="relative w-full h-full m-2">
    <div
      id="background-div"
      className="absolute inset-0 dark:hidden rounded-2xl"
      style={{
  height: "32rem",
  backgroundImage: "url('https://mintlify-assets.b-cdn.net/Light%20BG.png')",
  backgroundSize: "cover",
  backgroundPosition: "center"
}}
    />

    <div
      id="background-div-dark"
      className="absolute inset-0 hidden dark:block rounded-2xl"
      style={{
  height: "32rem",
  backgroundImage: "url('https://mintlify-assets.b-cdn.net/Dark%20BG.png')",
  backgroundSize: "cover",
  backgroundPosition: "center"
}}
    />
  </div>

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '1500px' }}>
    <div
      className="text-gray-900 dark:text-gray-200"
      style={{
   fontWeight: '800',
   fontSize: '2rem',
   margin: '0'
  }}
    >
      <span class="dark:text-gray-200 text-gray-900"> AssemblyAI Documentation</span>
    </div>

    <p className="mt-4 dark:text-gray-200 text-gray-900">Build with our leading Speech AI models </p>

    <div className="flex items-center justify-center" style={{ maxWidth: '800px', margin: '0 auto' }}>
      <button
        type="button"
        className="hidden w-full lg:flex items-center justify-center text-sm leading-6 rounded-full py-4 pl-4 pr-4 text-gray-500 bg-white dark:bg-background-dark hover:border-gray-400 dark:hover:border-gray-600"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    margin: '2rem auto 0',
    width: '600px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
    border: "1px solid var(--outline-color)",
  }}
        onClick={openSearch}
      >
        <img src="https://mintlify-assets.b-cdn.net/light-assembly.svg" alt="Search" className="dark:hidden" style={{ marginRight: '0.75rem' }} />

        <img src="https://mintlify-assets.b-cdn.net/dark-assembly.svg" alt="Search" className="hidden dark:block" style={{ marginRight: '0.75rem' }} />

        <span>Ask AI anything about AssemblyAI Docs</span>
      </button>
    </div>

    <div style={{ maxWidth: '1500px', margin: '0 auto', marginTop: '2rem' }}>
      <div className="flex flex-wrap items-center gap-3">
        <IntroCard icon="file-code" title="API Reference" href="/docs/api-reference/overview" />

        <IntroCard icon="message" title="FAQs" href="/docs/concepts/faq" />

        <IntroCard icon="language" title="Supported Languages" href="/docs/getting-started/supported-languages" />

        <IntroCard icon="gauge" title="Usage Limits" href="/docs/getting-started/usage-limits" />

        <IntroCard icon="sparkles" title="Examples" href="/cookbooks/search/data" />
      </div>

      <div className="flex flex-wrap items-center justify-center gap-3 mt-3">
        <IntroCard icon="shapes" title="Integrations" href="/docs/integrations/llamaindex/ts" />

        <IntroCard icon="terminal" title="CLI" href="/docs/concepts/cli" />

        <IntroCard icon="circle-play" title="Playground" href="https://www.assemblyai.com/playground" />
      </div>
    </div>
  </div>
</div>

<div
  style={{marginTop: '3rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <h2 className="text-gray-900 dark:text-gray-200 text-center" style={{marginTop: '16px' ,fontSize: '24px', marginBottom: '16px',fontWeight:'500'}}>Get Started with our SDK Guides in minutes:</h2>

  <CardGroup cols={3}>
    <Card title="Transcribe an audio file" href="/docs/getting-started/transcribe-an-audio-file" icon="file-waveform" color="blue" iconType="solid">
      Learn how to transcribe and analyze an audio file.

      <br />

      <br />

      <br />

      Start here <Icon icon="chevron-right" />
    </Card>

    <Card title="Transcribe streaming audio from a microphone" href="/docs/getting-started/transcribe-streaming-audio-from-a-microphone" icon="waveform" color="gold" iconType="solid">
      Learn how to transcribe streaming audio using Streaming Speech-to-Text.

      <br />

      <br />

      Start here <Icon icon="chevron-right" />
    </Card>

    <Card title="Apply LLMs to audio files" href="/docs/getting-started/apply-llms-to-audio-files" icon="puzzle-piece" color="green" iconType="solid">
      Learn how to leverage LLMs for speech using LeMUR.

      <br />

      <br />

      <br />

      Start here <Icon icon="chevron-right" />
    </Card>
  </CardGroup>
</div>