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

# AI21 Labs Documentation

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

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

<div className="relative w-full flex items-center justify-center" style={{ height: '26rem', overflow: 'hidden' }}>
  <div
    className="absolute inset-0 h-[30rem] bg-cover bg-no-repeat dark:hidden"
    style={{
backgroundImage: "url('https://mintlify-assets.b-cdn.net/ai21-background.svg')",
backgroundPosition: "center"
}}
  />

  <div
    className="absolute inset-0 h-[30rem] bg-cover bg-no-repeat hidden dark:block"
    style={{
backgroundImage: "url('https://mintlify.s3.us-west-1.amazonaws.com/ai21-demo/images/dark-ai21-background2.svg')",
backgroundPosition: "center"
}}
  />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem' }}>
    <div
      className="text-gray-900 dark:text-white"
      style={{
   fontWeight: '300',
   fontSize: '2.5rem',
   fontFamily: 'Polysans',
   margin: '0',
   marginTop: '5rem'
  }}
    >
      Welcome to AI21 Labs
    </div>

    <p className="mt-4 text-gray-900 dark:text-white" style={{ fontSize: '1rem', fontWeight: '400' , maxWidth: '40rem'}}> Start building your AI solution with comprehensive guides and API references for AI21 Maestro and our Jamba Family of Open 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 text-sm leading-6 py-4 pl-4 pr-4 text-gray-500 rounded-full"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    maxWidth: '40rem',
    background: '#FFF',
    boxShadow: '0px 1px 4px 0px rgba(8, 9, 10, 0.25), 0px 0px 0px 4px rgba(255, 255, 255, 0.20)',
    cursor: 'pointer',
    textAlign: 'left',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
          style={{
    marginRight: '0.5rem',
     maskImage:
       'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
     maskRepeat: 'no-repeat',
     maskPosition: 'center center',
    }}
        />

        Search or ask...
      </button>
    </div>

    <div style={{ maxWidth: '650px', margin: '0 auto', marginTop: '2rem' }}>
      <div className="flex flex-wrap items-center justify-center gap-3 mt-3">
        <IntroCard icon="play" title="Get Started" href="/docs/sdk" />

        <IntroCard icon="code" title="API Reference" href="/reference/jamba-1-6-api-ref" />

        <IntroCard icon="bell" title="Updates" href="/changelog" />
      </div>
    </div>
  </div>
</div>

<div style={{ marginTop:"2rem",marginBottom:"8rem",maxWidth:"70rem",marginLeft:"auto",marginRight:"auto",paddingLeft:"1.25rem",paddingRight:"1.25rem" }}>
  <div className="flex flex-col w-full " style={{ marginTop:"2rem",marginBottom:"2rem" }} />

  <div className="flex flex-col w-full " style={{ marginTop:"2rem",marginBottom:"1rem" }}>
    <h2 className="category-title text-gray-900 dark:text-gray-200">
      Terms and Policies
    </h2>
  </div>

  <CardGroup cols={2}>
    <Card title="Status Page" icon="signal-bars" iconType="solid" horizontal href="https://status.ai21.com/?_gl=1*1r4kb9c*_gcl_au*MTgwMDc4MzA5MS4xNzQ1MzA4Mjc0" />

    <Card title="Trust Center" icon="shield-check" iconType="solid" horizontal href="https://trust.ai21.com/" />

    <Card title="Terms of Service" icon="file-shield" iconType="solid" horizontal href="https://www.ai21.com/terms-policies/terms-of-use/" />

    <Card title="Privacy Policy" icon="lock" iconType="solid" horizontal href="https://www.ai21.com/terms-policies/privacy-policy/" />
  </CardGroup>

  <div className="flex flex-col w-full " style={{ marginTop:"2rem",marginBottom:"1rem" }}>
    <h2 className="category-title text-gray-900 dark:text-gray-200">
      Publications
    </h2>
  </div>

  <CardGroup cols={2}>
    <Card title="Blog" icon="pen-field" iconType="solid" horizontal href="https://www.ai21.com/blog" />

    <Card title="Press" icon="newspaper" iconType="solid" horizontal href="https://www.ai21.com/newsroom/" />
  </CardGroup>
</div>