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

# OpenAI developer platform

> Learn how to integrate and use the OpenAI APIs to build AI powered applications through this platform

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

export const IntroCard = ({img, href, title, description}) => {
  return <div className="group flex flex-col gap-0 rounded-xl">
      <div className="w-full h-50 overflow-hidden rounded-xl">
        <img src={img} className="w-full h-full object-cover" alt={title} />
      </div>
      <div className="flex flex-col gap-3 -mt-2">
        <a href={href} target="_blank" rel="noopener noreferrer">
          <h2 className="text-xl font-medium text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            {title}
          </h2>
        </a>
        <p className="text-gray-600 dark:text-gray-400 text-md">
          {description}
        </p>
      </div>
    </div>;
};

<div className="relative w-full flex items-center justify-center" style={{ height: '24rem', overflow: 'hidden'}}>
  <div className="relative w-full h-full">
    <div
      id="background-div"
      className="absolute inset-0 dark:hidden"
      style={{
  height: "32rem",
  backgroundColor: "#f7f7f8",
  backgroundSize: "cover",
  backgroundPosition: "center"
}}
    />

    <div
      id="background-div-dark"
      className="absolute inset-0 hidden dark:block"
      style={{
  height: "32rem",
  backgroundColor: "#14151A",
  backgroundSize: "cover",
  backgroundPosition: "center"
}}
    />
  </div>

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '100%', left: '50%', transform: 'translateX(-50%)' }}>
    <p
      className="text-gray-900 dark:text-white"
      style={{
      marginTop: '4rem',
      fontSize: '2.5rem',
      fontWeight: 500,
      margin: '0',
      whiteSpace: 'nowrap',
      textAlign: 'center',
      fontFamily: 'OpenAI Sans Medium'
  }}
    >
      OpenAI developer platform
    </p>

    <p className="mt-2 text-gray-800 dark:text-gray-400 flex flex-col" style={{fontWeight: 400}}>
      Learn how to integrate and use the OpenAI APIs to build AI <br /> powered applications through this platform
    </p>

    <div className="flex flex-col items-center justify-center">
      <div className="flex items-center justify-center dark:hidden" style={{ width: '100%' }}>
        <button
          type="button"
          className="hidden w-full lg:flex items-center text-sm leading-6 rounded-md py-2 pl-3 pr-3 shadow-sm text-gray-400 bg-white"
          id="home-search-entry"
          style={{
        marginTop: '2rem',
        maxWidth: '100rem',
        width: '100%',
        margin: '2rem auto 0',
        boxShadow: '0px 1px 2px rgba(20, 21, 26, 0.05)',
        borderRadius: '12px',
        outline: '1px #F7F7F8 solid'
      }}
          onClick={openSearch}
        >
          <div className="relative z-10 flex items-center w-full">
            <img src="https://mintlify-assets.b-cdn.net/openai-logo.svg" className="h-4 w-5 mr-2 flex-none" alt="Logo" />

            Ask ChatGPT
          </div>
        </button>
      </div>

      <div className="flex items-center justify-center dark:block hidden" style={{ width: '100%' }}>
        <button
          type="button"
          className="hidden w-full lg:flex items-center text-sm leading-6 rounded-md py-2 pl-3 pr-3 shadow-sm text-gray-400 dark:bg-black"
          id="home-search-entry"
          style={{
        marginTop: '2rem',
        maxWidth: '100rem',
        width: '100%',
        margin: '2rem auto 0',
        boxShadow: '0px 1px 2px rgba(20, 21, 26, 0.05)',
        borderRadius: '12px',
        outline: '1px #14151A solid'
      }}
          onClick={openSearch}
        >
          <div className="relative z-10 flex items-center w-full">
            <img src="https://mintlify-assets.b-cdn.net/openai-logo.svg" className="h-4 w-5 mr-2 flex-none" alt="Logo" />

            Ask ChatGPT
          </div>
        </button>
      </div>
    </div>
  </div>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex justify-between items-center w-full">
    <h2
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.3rem',
  fontWeight: '500'
}}
    >
      Browse models
    </h2>

    <a href="/docs/models" className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center">
      View all

      <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" className="ml-2">
        <path d="M10.8609 5H1.13867" stroke="#717684" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

        <path d="M7.55518 1.69434L10.8607 4.99989L7.55518 8.30545" stroke="#717684" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </a>
  </div>

  <CardGroup cols={3}>
    <IntroCard title="GPT-4.1" description="Flagship GPT model for complex tasks" href="/docs/models" img="https://mintlify-assets.b-cdn.net/gpt-4.1.svg" />

    <IntroCard title="o3-mini" description="Fast, flexible, intelligent reasoning model" href="/docs/models" img="https://mintlify-assets.b-cdn.net/o3-mini.svg" />

    <IntroCard title="o1" description="High-intelligence reasoning model" href="/docs/models" img="https://mintlify-assets.b-cdn.net/o1.svg" />
  </CardGroup>
</div>

<div
  style={{paddingTop: '4rem', marginBottom: '4rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex flex-col w-full justify-left items-left" style={{marginBottom: '1rem' }}>
    <h2
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.3rem',
  fontWeight: '500'
}}
    >
      Start building
    </h2>
  </div>

  <CardGroup cols={3}>
    <Card title="Read and generate text" href="/docs/quickstart" icon="message-square-text" color="#9ea2ad">
      Use the API to prompt a model and generate text
    </Card>

    <Card title="Use a model's vision feature" href="/docs/guides/images" icon="eye" color="#9ea2ad">
      Allow models to see and analyze images in your application
    </Card>

    <Card title="Generate images as output" href="/docs/guides/images" icon="images" color="#9ea2ad">
      Create artistic or design applications with DALL·E
    </Card>

    <Card title="Build apps with audio" href="/docs/guides/realtime-vad" icon="headphones" color="#9ea2ad">
      Analyze, transcribe, and generate audio with API endpoints
    </Card>

    <Card title="Build agentic applications" href="/docs/guides/voice-agents" icon="mouse-pointer-click" color="#9ea2ad">
      Use the API to build agents that use tools and computers
    </Card>

    <Card title="Achieve complex tasks with reasoning" href="/docs/guides/moderation" icon="award" color="#9ea2ad">
      Use reasoning models to carry out complex tasks
    </Card>
  </CardGroup>
</div>

<div
  style={{maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem', marginBottom: '4rem' }}
>
  <div className="flex flex-col w-full justify-left items-left" style={{marginBottom: '0rem'}}>
    <h2
      className="text-gray-900 dark:text-gray-200 mt-4"
      style={{
  fontSize: '1.3rem',
  fontWeight: '500'
}}
    >
      More resources
    </h2>
  </div>

  <div className="dark:hidden">
    <CardGroup cols={4}>
      <IntroCard title="Help Center" description="Frequently asked account and billing questions" href="https://help.openai.com/" img="https://mintlify-assets.b-cdn.net/question-light.svg" />

      <IntroCard title="Developer Forum" description="Discuss topics with other developers" href="https://community.openai.com/" img="https://mintlify-assets.b-cdn.net/messages-light.svg" />

      <IntroCard title="Cookbook" description="Open-source collection of examples and guides" href="https://developers.openai.com/cookbook" img="https://mintlify-assets.b-cdn.net/forum-light.svg" />

      <IntroCard title="Status" description="Check the status of OpenAI services" href="https://status.openai.com/" img="https://mintlify-assets.b-cdn.net/signal-light.svg" />
    </CardGroup>
  </div>

  <div className="hidden dark:block">
    <CardGroup cols={4}>
      <IntroCard title="Help Center" description="Frequently asked account and billing questions" href="/s/article/Contacting-Customer-Support" img="https://mintlify-assets.b-cdn.net/question-dark.svg" />

      <IntroCard title="Developer Forum" description="Discuss topics with other developers" href="/s/article/Contacting-Customer-Support" img="https://mintlify-assets.b-cdn.net/messages-dark.svg" />

      <IntroCard title="Cookbook" description="Open-source collection of examples and guides" href="/s/article/Contacting-Customer-Support" img="https://mintlify-assets.b-cdn.net/forum-dark.svg" />

      <IntroCard title="Status" description="Check the status of OpenAI services" href="/s/article/Contacting-Customer-Support" img="https://mintlify-assets.b-cdn.net/signal-dark.svg" />
    </CardGroup>
  </div>
</div>