<!DOCTYPE html><html lang="en"> <head><!-- Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/png" href="/favicon.png"><meta name="generator" content="Astro v6.0.4"><link rel="preload" href="/fonts/OpenAISans-Regular.woff" as="font" type="font/woff" crossorigin><link rel="preload" href="/fonts/OpenAISans-Bold.woff" as="font" type="font/woff" crossorigin><style>
  @layer theme, base, components, utilities;
</style><!-- Canonical URL --><link rel="canonical" href="https://developers.openai.com/api/docs"><!-- Primary Meta Tags --><title>OpenAI API Platform Documentation</title><meta name="title" content="OpenAI API Platform Documentation"><meta name="description" content="Explore guides, API docs, and examples for the OpenAI API."><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://developers.openai.com/api/docs"><meta property="og:title" content="OpenAI API Platform Documentation"><meta property="og:description" content="Explore guides, API docs, and examples for the OpenAI API."><meta property="og:image" content="https://developers.openai.com/og/api/docs.png"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@OpenAIDevs"><meta name="twitter:url" content="https://developers.openai.com/api/docs"><meta name="twitter:title" content="OpenAI API Platform Documentation"><meta name="twitter:description" content="Explore guides, API docs, and examples for the OpenAI API."><meta name="twitter:image" content="https://developers.openai.com/og/api/docs.png"><meta name="twitter:image:alt" content="OpenAI API Platform Documentation"><!-- Sitemap --><link rel="sitemap" href="/sitemap-index.xml"><!-- RSS Feed --><link rel="alternate" type="application/rss+xml" title="OpenAI API Platform Documentation" href="https://developers.openai.com/rss.xml"><!-- Global Scripts --><script src="/js/theme.js"></script><script src="/js/scroll.js"></script><script src="/js/animate.js"></script><script defer src="/js/copy.js"></script><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="swap"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.kuoG-IR1.js"></script><link rel="stylesheet" href="/_astro/platform-docs.C8tKlvDz.css">
<link rel="stylesheet" href="/_astro/PageLayout.BXOQaGou.css">
<style>@layer base{.icon-item{cursor:pointer;border-radius:8px;align-items:flex-start;text-decoration:none;transition:opacity .15s;display:flex}.icon-item:hover .pointer{opacity:1;transform:translate(0)}.icon-item:hover .icon-item-icon{background:var(--card-gradient-hover);color:var(--color-text-emphasis)}.icon-item-icon{box-sizing:border-box;border:1px solid var(--color-background-primary-soft);background:var(--card-gradient-hover);width:48px;height:48px;color:var(--color-text);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:24px;line-height:0;transition:background .2s;display:flex}:where(html.dark,html[data-theme=dark]) .icon-item-icon{background:linear-gradient(90deg,#56586980,#56586999,#565869b3)}:where(html.dark,html[data-theme=dark]) .icon-item:hover .icon-item-icon{background:linear-gradient(90deg,#56586999,#565869b3,#565869cc)}.icon-item-right{padding-left:16px}.icon-item-title{color:var(--color-text-emphasis);align-items:center;font-weight:500;transition:color .15s;display:flex}.pointer{opacity:0;justify-content:center;transition:opacity .15s ease-in-out,transform .15s ease-in-out;display:flex;transform:translate(-4px)}.icon-item-tag{background-color:var(--color-background-primary-soft);color:var(--gray-700);font-size:12px;font-weight:var(--font-weight-bold);letter-spacing:var(--font-tracking-wide);border-radius:8px;margin-left:8px;padding:2px 6px;line-height:16px;display:inline-block;transform:translateY(-2px)}.icon-item-tag.icon-item-tag-green{background-color:var(--green-100);color:var(--green-700)}.icon-item-desc{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:normal;margin-bottom:15px;overflow:hidden}.icon-item *{text-decoration:none}}
@layer components.base{._root_1x2h7_2{position:relative;display:flex;flex-direction:column;margin:20px 0;border:.5px solid var(--color-border-primary-surface);border-radius:8px;background:var(--code-snippet-bg)}._root_1x2h7_2+._root_1x2h7_2{margin-top:1em}._flush_1x2h7_16{width:100%;border:0;background:transparent;background-color:transparent;color:var(--color-text-emphasis);line-height:20px}._flush_1x2h7_16 code>code{padding-right:20px!important}._flush_1x2h7_16 .syntax-highlighter{background:transparent;font-size:13px;letter-spacing:var(--font-tracking-wide)}._flush_1x2h7_16 ._header_1x2h7_34{position:relative;z-index:1;justify-content:space-between;padding-left:8px;border-bottom:none;background:transparent}._flush_1x2h7_16 ._header_1x2h7_34 ._title_1x2h7_42{display:none}._flush_1x2h7_16 ._header_1x2h7_34 .code-sample-select-val{font-size:12px;letter-spacing:var(--font-tracking-wide)}._flush_1x2h7_16 ._header_1x2h7_34 .code-sample-select-wrap{margin-bottom:4px;margin-left:12px;font-size:12px;letter-spacing:var(--font-tracking-wide)}._flush_1x2h7_16 ._body_1x2h7_59{background:transparent}._flush_1x2h7_16 ._body_1x2h7_59 ._pre_1x2h7_62{padding-top:0}._root_1x2h7_2 .python-upgrade-banner{display:flex;padding:2px;background:var(--card-gradient);color:#fff;font-size:.8em;font-weight:var(--font-weight-bold);text-align:center}._root_1x2h7_2 .python-upgrade-banner svg{margin-top:6px;margin-right:8px;margin-left:8px}._root_1x2h7_2 .python-upgrade-banner path{stroke:#fff}._header_1x2h7_34{overflow:auto;display:flex;align-items:center;gap:4px;flex-shrink:0;padding:4px 8px 4px 14px;border-bottom:.5px solid var(--color-border-primary-surface);border-top-left-radius:8px;border-top-right-radius:8px}._title_1x2h7_42{overflow:hidden;flex:1 1 auto;margin-right:12px;color:var(--color-text);font-family:var(--monospace);font-size:12px;font-weight:var(--font-weight-normal);letter-spacing:var(--font-tracking-wide);text-overflow:ellipsis;white-space:nowrap}._sep_1x2h7_113{flex:0 0 auto;min-width:1px;height:22px;padding-left:8px;border-left:1px solid var(--color-background-primary-soft);margin-left:8px}._body_1x2h7_59{position:relative;flex-grow:1;flex-shrink:0}._body_1x2h7_59 ._pre_1x2h7_62{height:100%;min-height:44px;padding:12px 16px;border-radius:8px;margin:0;font-size:14px;line-height:20px;white-space:pre;background:var(--code-snippet-bg)}._body_1x2h7_59._bodyWithHeader_1x2h7_139 ._pre_1x2h7_62{border-top-left-radius:0;border-top-right-radius:0}._bodyWithCopyFloat_1x2h7_145 ._pre_1x2h7_62{padding-right:56px}._copyFloat_1x2h7_157{position:absolute;top:6px;right:6px}._oneliner_1x2h7_162 ._copyFloat_1x2h7_157{top:50%;transform:translateY(-50%)}._copyButton_1x2h7_168{height:1.75rem;padding:0 .5rem;border-radius:.375rem}}
</style>
<link rel="stylesheet" href="/_astro/index.avIh2ZpK.css">
<style>@layer components{._ModelsTitle_163e7_1{font-size:30px;font-weight:var(--font-weight-semibold);letter-spacing:var(--font-tracking-tight);line-height:1.3}}
@layer base{.syntax-highlighter{background:transparent;color:var(--color-text);overflow-x:auto}.syntax-highlighter>code{border:none;box-shadow:none;font-family:var(--monospace)}.syntax-highlighter>code>code{padding-right:16px;border:none;box-shadow:none;float:left;font-family:var(--monospace);line-height:20px}.syntax-highlighter .react-syntax-highlighter-line-number{color:var(--color-text-disabled);line-height:20px;opacity:.5;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none}.syntax-highlighter [data-highlighted-row=true]{display:block;width:150%;margin-left:-25%;background-color:var(--pill-success-bg)}.syntax-highlighter [data-highlighted-row-subtle=true]{background-color:rgba(var(--sh-fg),.08)}.hljs-comment{color:rgba(var(--sh-fg),.5)}.hljs-meta{color:rgba(var(--sh-fg),.6)}.hljs-built_in,.hljs-class .hljs-title{color:var(--syntax1)}.hljs-doctag,.hljs-keyword,.hljs-formula,.hljs-literal{color:var(--syntax2)}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:var(--syntax3)}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:var(--syntax4)}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-selector-id,.hljs-title{color:var(--syntax5)}}
@layer components{._SectionContent_1tiej_1>*{border-top:1px solid var(--color-background-primary-soft)}}
</style><script type="module" src="/_astro/page.N6TaiQem.js"></script></head> <body class="overflow-x-hidden" data-pagefind-filter="section:api"> <header id="header" class="fixed top-0 w-full h-16 z-50 bg-white dark:bg-black border-b border-primary-surface astro-3ef6ksr2"> <div class="flex items-center h-full px-4 md:px-8 md:grid md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:gap-6 astro-3ef6ksr2"> <!-- Logo --> <a href="/" class="flex items-center font-semibold ml-0 md:-ml-2 md:justify-self-start astro-3ef6ksr2"> <img src="/OpenAI_Developers.svg" alt="OpenAI Developers" class="h-6 w-48 md:h-6 dark:invert astro-3ef6ksr2"> </a> <!-- Links --> <nav class="hidden md:flex items-center justify-center gap-1 astro-3ef6ksr2"> <div class="relative group astro-3ef6ksr2"> <a href="/" class="flex items-center gap-1 text-sm px-2.5 py-1 rounded-md text-primary-soft hover:text-default hover:bg-primary-soft-alpha astro-3ef6ksr2"> Home  </a>  </div><div class="relative group astro-3ef6ksr2"> <a href="/api" class="flex items-center gap-1 text-sm px-2.5 py-1 rounded-md text-default bg-primary-soft astro-3ef6ksr2" aria-haspopup="menu"> API <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-tertiary astro-3ef6ksr2 " ><path d="M11.2929 16.2929C11.6834 16.6834 12.3166 16.6834 12.7071 16.2929L18.7071 10.2929C19.0976 9.90237 19.0976 9.26921 18.7071 8.87868C18.3166 8.48816 17.6834 8.48816 17.2929 8.87868L12 14.1716L6.70711 8.87868C6.31658 8.48816 5.68342 8.48816 5.29289 8.87868C4.90237 9.26921 4.90237 9.90237 5.29289 10.2929L11.2929 16.2929Z" fill="currentColor"></path></svg> </a> <div class="invisible opacity-0 absolute left-0 top-full z-50 mt-2 min-w-full w-max transition-opacity duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 before:content-[''] before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 astro-3ef6ksr2" role="menu"> <div class="overflow-hidden rounded-md border border-primary-surface bg-surface shadow-md ring-1 ring-black/5 dark:ring-white/10 astro-3ef6ksr2"> <a role="menuitem" href="/api/docs" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Docs</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Guides and concepts for the OpenAI API </div> </div> </a><a role="menuitem" href="/api/reference/overview" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">API reference</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Endpoints, parameters, and responses </div> </div> </a> </div> </div> </div><div class="relative group astro-3ef6ksr2"> <a href="/codex" class="flex items-center gap-1 text-sm px-2.5 py-1 rounded-md text-primary-soft hover:text-default hover:bg-primary-soft-alpha astro-3ef6ksr2" aria-haspopup="menu"> Codex <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-tertiary astro-3ef6ksr2 " ><path d="M11.2929 16.2929C11.6834 16.6834 12.3166 16.6834 12.7071 16.2929L18.7071 10.2929C19.0976 9.90237 19.0976 9.26921 18.7071 8.87868C18.3166 8.48816 17.6834 8.48816 17.2929 8.87868L12 14.1716L6.70711 8.87868C6.31658 8.48816 5.68342 8.48816 5.29289 8.87868C4.90237 9.26921 4.90237 9.90237 5.29289 10.2929L11.2929 16.2929Z" fill="currentColor"></path></svg> </a> <div class="invisible opacity-0 absolute left-0 top-full z-50 mt-2 min-w-full w-max transition-opacity duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 before:content-[''] before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 astro-3ef6ksr2" role="menu"> <div class="overflow-hidden rounded-md border border-primary-surface bg-surface shadow-md ring-1 ring-black/5 dark:ring-white/10 astro-3ef6ksr2"> <a role="menuitem" href="/codex" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Docs</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Guides, concepts, and product docs for Codex </div> </div> </a><a role="menuitem" href="/codex/use-cases" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Use cases</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Example workflows and tasks teams hand to Codex </div> </div> </a> </div> </div> </div><div class="relative group astro-3ef6ksr2"> <a href="/chatgpt" class="flex items-center gap-1 text-sm px-2.5 py-1 rounded-md text-primary-soft hover:text-default hover:bg-primary-soft-alpha astro-3ef6ksr2" aria-haspopup="menu"> ChatGPT <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-tertiary astro-3ef6ksr2 " ><path d="M11.2929 16.2929C11.6834 16.6834 12.3166 16.6834 12.7071 16.2929L18.7071 10.2929C19.0976 9.90237 19.0976 9.26921 18.7071 8.87868C18.3166 8.48816 17.6834 8.48816 17.2929 8.87868L12 14.1716L6.70711 8.87868C6.31658 8.48816 5.68342 8.48816 5.29289 8.87868C4.90237 9.26921 4.90237 9.90237 5.29289 10.2929L11.2929 16.2929Z" fill="currentColor"></path></svg> </a> <div class="invisible opacity-0 absolute left-0 top-full z-50 mt-2 min-w-full w-max transition-opacity duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 before:content-[''] before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 astro-3ef6ksr2" role="menu"> <div class="overflow-hidden rounded-md border border-primary-surface bg-surface shadow-md ring-1 ring-black/5 dark:ring-white/10 astro-3ef6ksr2"> <a role="menuitem" href="/apps-sdk" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Apps SDK</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Build apps to extend ChatGPT </div> </div> </a><a role="menuitem" href="/commerce" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Commerce</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Build commerce flows in ChatGPT </div> </div> </a><a role="menuitem" href="/ads" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Ads</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Publish and measure ads in ChatGPT </div> </div> </a> </div> </div> </div><div class="relative group astro-3ef6ksr2"> <a href="/learn" class="flex items-center gap-1 text-sm px-2.5 py-1 rounded-md text-primary-soft hover:text-default hover:bg-primary-soft-alpha astro-3ef6ksr2" aria-haspopup="menu"> Resources <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-tertiary astro-3ef6ksr2 " ><path d="M11.2929 16.2929C11.6834 16.6834 12.3166 16.6834 12.7071 16.2929L18.7071 10.2929C19.0976 9.90237 19.0976 9.26921 18.7071 8.87868C18.3166 8.48816 17.6834 8.48816 17.2929 8.87868L12 14.1716L6.70711 8.87868C6.31658 8.48816 5.68342 8.48816 5.29289 8.87868C4.90237 9.26921 4.90237 9.90237 5.29289 10.2929L11.2929 16.2929Z" fill="currentColor"></path></svg> </a> <div class="invisible opacity-0 absolute left-0 top-full z-50 mt-2 min-w-full w-max transition-opacity duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 before:content-[''] before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 astro-3ef6ksr2" role="menu"> <div class="overflow-hidden rounded-md border border-primary-surface bg-surface shadow-md ring-1 ring-black/5 dark:ring-white/10 astro-3ef6ksr2"> <a role="menuitem" href="/showcase" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Showcase</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Demo apps to get inspired </div> </div> </a><a role="menuitem" href="/blog" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Blog</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Learnings and experiences from developers </div> </div> </a><a role="menuitem" href="/cookbook" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Cookbook</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Notebook examples for building with OpenAI models </div> </div> </a><a role="menuitem" href="/learn" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Learn</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Docs, videos, and demo apps for building with OpenAI </div> </div> </a><a role="menuitem" href="/community" class="block px-4 py-3 text-sm text-default transition-colors hover:bg-primary-soft-alpha dark:hover:bg-alpha-10 hover:text-default astro-3ef6ksr2"> <div class="flex flex-col gap-1 astro-3ef6ksr2"> <div class="font-medium astro-3ef6ksr2">Community</div> <div class="text-sm text-secondary astro-3ef6ksr2"> Programs, meetups, and support for builders </div> </div> </a> </div> </div> </div>  </nav> <!-- Theme Toggle, Mobile Menu --> <div class="ml-auto flex items-center gap-4 md:gap-5 md:ml-0 md:justify-end md:justify-self-end astro-3ef6ksr2"> <button type="button" data-header-search-button aria-controls="header-search-overlay" aria-expanded="false" class="hidden min-w-52 items-center justify-between gap-3 rounded-full border border-primary-surface bg-surface px-4 py-2 text-sm text-secondary transition-colors hover:bg-primary-soft-alpha hover:text-default xl:flex astro-3ef6ksr2"> <span class="truncate astro-3ef6ksr2">Start searching</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 astro-3ef6ksr2 " ><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </button> <div class="hidden md:flex astro-3ef6ksr2"> <div class="flex items-center gap-2"><a target="_blank" rel="noopener noreferrer" href="https://platform.openai.com/login" class="_Button_6dmow_1 not-prose !h-9 !w-9 justify-center !px-0 min-[1000px]:!w-auto min-[1000px]:!px-4" data-color="primary" data-variant="solid" data-pill="" data-size="md"><span class="_ButtonInner_6dmow_4"><span class="sr-only min-[1000px]:not-sr-only">API Dashboard</span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" class="shrink-0"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></span></a></div> </div> <button id="header-theme-button" aria-label="Toggle light and dark theme" class="hidden md:flex text-secondary hover:text-default transition-colors astro-3ef6ksr2"> <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="block dark:hidden w-4 h-4 astro-3ef6ksr2 " ><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C11.5523 0 12 0.447715 12 1V3C12 3.55228 11.5523 4 11 4C10.4477 4 10 3.55228 10 3V1C10 0.447715 10.4477 0 11 0ZM3.22183 3.22183C3.61235 2.8313 4.24551 2.8313 4.63604 3.22183L6.05025 4.63604C6.44078 5.02656 6.44078 5.65973 6.05025 6.05025C5.65973 6.44078 5.02656 6.44078 4.63604 6.05025L3.22183 4.63604C2.8313 4.24551 2.8313 3.61235 3.22183 3.22183ZM18.7782 3.22183C19.1687 3.61235 19.1687 4.24551 18.7782 4.63604L17.364 6.05025C16.9734 6.44078 16.3403 6.44078 15.9497 6.05025C15.5592 5.65973 15.5592 5.02656 15.9497 4.63604L17.364 3.22183C17.7545 2.8313 18.3876 2.8313 18.7782 3.22183ZM11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8ZM6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11C16 13.7614 13.7614 16 11 16C8.23858 16 6 13.7614 6 11ZM0 11C0 10.4477 0.447715 10 1 10H3C3.55228 10 4 10.4477 4 11C4 11.5523 3.55228 12 3 12H1C0.447715 12 0 11.5523 0 11ZM18 11C18 10.4477 18.4477 10 19 10H21C21.5523 10 22 10.4477 22 11C22 11.5523 21.5523 12 21 12H19C18.4477 12 18 11.5523 18 11ZM6.05025 15.9497C6.44078 16.3403 6.44078 16.9734 6.05025 17.364L4.63604 18.7782C4.24551 19.1687 3.61235 19.1687 3.22183 18.7782C2.8313 18.3876 2.8313 17.7545 3.22183 17.364L4.63604 15.9497C5.02656 15.5592 5.65973 15.5592 6.05025 15.9497ZM15.9497 15.9497C16.3403 15.5592 16.9734 15.5592 17.364 15.9497L18.7782 17.364C19.1687 17.7545 19.1687 18.3876 18.7782 18.7782C18.3877 19.1687 17.7545 19.1687 17.364 18.7782L15.9497 17.364C15.5592 16.9734 15.5592 16.3403 15.9497 15.9497ZM11 18C11.5523 18 12 18.4477 12 19V21C12 21.5523 11.5523 22 11 22C10.4477 22 10 21.5523 10 21V19C10 18.4477 10.4477 18 11 18Z" fill="currentColor"></path></svg> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="hidden dark:block w-4 h-4 astro-3ef6ksr2 " ><path d="M10.7836 0.470481C10.9676 0.765118 10.9855 1.13415 10.8309 1.44525C10.2994 2.51497 10 3.7211 10 5.00001C10 9.41829 13.5817 13 18 13L18.0575 12.9998C18.4049 12.9974 18.7287 13.1754 18.9127 13.47C19.0968 13.7647 19.1147 14.1337 18.9601 14.4448C17.325 17.7352 13.9279 20 10 20C4.47715 20 0 15.5229 0 10C0 4.50107 4.43841 0.038857 9.92838 0.000268937C10.2758 -0.00217271 10.5995 0.175844 10.7836 0.470481ZM8.40989 2.15803C4.75344 2.8954 2 6.12619 2 10C2 14.4183 5.58172 18 10 18C12.587 18 14.8886 16.7721 16.3516 14.8648C11.6131 14.0789 8 9.96139 8 5.00001C8 4.01361 8.1431 3.05953 8.40989 2.15803Z" fill="currentColor"></path></svg> </button> <button type="button" data-header-search-button aria-label="Search the API docs" aria-controls="header-search-overlay" aria-expanded="false" class="text-secondary hover:text-default transition-colors md:inline-flex xl:hidden astro-3ef6ksr2"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-secondary hover:text-default transition-colors astro-3ef6ksr2 " ><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </button> <!-- Mobile Menu Button --> <button id="header-drawer-button" type="button" aria-label="Toggle menu" aria-controls="drawer" aria-expanded="false" class="md:hidden relative right-1 text-secondary hover:text-default transition-colors astro-3ef6ksr2"> <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary hover:text-default transition-colors astro-3ef6ksr2 " ><path d="M0 1C0 0.447715 0.447715 0 1 0H17C17.5523 0 18 0.447715 18 1C18 1.55228 17.5523 2 17 2H1C0.447715 2 0 1.55228 0 1ZM0 9C0 8.44772 0.447715 8 1 8H11C11.5523 8 12 8.44772 12 9C12 9.55229 11.5523 10 11 10H1C0.447715 10 0 9.55229 0 9Z" fill="currentColor"></path></svg> </button> </div> </div> </header> <div id="header-search-overlay" role="dialog" aria-modal="true" aria-labelledby="header-search-title" aria-hidden="true" data-open="false" class="fixed inset-0 z-[60] hidden items-start justify-center px-4 pt-20 pb-10 md:px-6 md:pt-24 astro-3ef6ksr2"> <div class="absolute inset-0 bg-black/35 backdrop-blur-xs transition-opacity dark:bg-black/70 astro-3ef6ksr2" data-header-search-dismiss></div> <div class="relative z-10 w-full max-w-4xl overflow-hidden rounded-[28px] bg-surface shadow-[0_36px_120px_-48px_rgba(15,23,42,0.55)] ring-1 ring-black/10 dark:ring-white/10 astro-3ef6ksr2" data-header-search-panel> <div data-header-search-body class="p-0 astro-3ef6ksr2"> <h2 id="header-search-title" class="sr-only astro-3ef6ksr2"> Search the API docs </h2> <div class="relative flex min-h-0 flex-1 flex-col astro-3ef6ksr2"> <button type="button" data-header-search-close aria-label="Close search" class="absolute right-5 top-7 z-20 inline-flex h-8 w-8 shrink-0 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 leading-none text-tertiary shadow-none transition-colors hover:text-default focus-visible:outline-none focus-visible:ring-0 md:right-7 astro-3ef6ksr2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-[18px] w-[18px] shrink-0 astro-3ef6ksr2 " ><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg> </button> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>Number.POSITIVE_INFINITY*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Z19tmGq" prefix="r82" component-url="/_astro/AlgoliaSearch.react.DMaHK7Vr.js" component-export="default" renderer-url="/_astro/client.BWriqC1y.js" props="{&quot;id&quot;:[0,&quot;header-site-search&quot;],&quot;className&quot;:[0,&quot;pagefind-header-ui pagefind-desktop-ui oai-site-search-overlay astro-3ef6ksr2&quot;],&quot;query&quot;:[0,&quot;&quot;],&quot;scope&quot;:[0,&quot;api&quot;],&quot;uiOptions&quot;:[0,{&quot;showImages&quot;:[0,false],&quot;showSubResults&quot;:[0,false],&quot;translations&quot;:[0,{&quot;placeholder&quot;:[0,&quot;Start searching&quot;],&quot;zeroResults&quot;:[0,&quot;No matches yet. Try a different keyword.&quot;]}]}]}" ssr client="load" opts="{&quot;name&quot;:&quot;AlgoliaSearchReact&quot;,&quot;value&quot;:true}" await-children><div id="header-site-search" class="pagefind-header-ui pagefind-desktop-ui oai-site-search-overlay astro-3ef6ksr2 _root_1wztd_1" data-site-search-root="true" data-site-search-provider="algolia" data-site-search-variant="overlay" data-query="" data-scope="api"><div class="flex h-full min-h-0 flex-col gap-0"><div class="shrink-0 border-b border-primary-surface px-4 py-4 md:px-6 md:py-5"><label class="sr-only" for="header-site-search-input">Search docs</label><input id="header-site-search-input" type="text" placeholder="Start searching" autoComplete="off" spellCheck="false" data-site-search-input="true" class="w-full outline-none transition-colors rounded-none border-0 bg-transparent py-0 pl-0 pr-14 text-[18px] leading-tight text-default placeholder:text-tertiary focus:ring-0 md:text-[18px]" value=""/></div><div class="flex min-h-0 flex-1 flex-col gap-4 px-4 py-4 md:px-6 md:py-5"><div data-site-search-empty-state="true" class="flex flex-col gap-4"><section class="_emptySection_1wztd_68"><h3 class="_emptyHeading_1wztd_74">Suggested</h3><div class="flex flex-wrap gap-2"><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="responses create">responses create</button><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="reasoning_effort">reasoning_effort</button><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="realtime">realtime</button><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="prompt caching">prompt caching</button></div></section></div></div></div></div><!--astro:end--></astro-island> </div> </div> </div> </div> <div id="drawer" data-default-tab-id="mobile-nav-tab-api" data-default-search-placeholder="Start searching" data-default-search-scope="api" class="fixed inset-0 z-40 flex flex-col bg-surface transform translate-x-full transition-transform duration-300 md:hidden astro-3ef6ksr2"> <div class="flex flex-col h-full w-full astro-3ef6ksr2"> <div class="px-6 pt-6 w-full mt-16 astro-3ef6ksr2"> <span id="mobile-nav-primary-label" class="sr-only astro-3ef6ksr2">Primary navigation</span> <div class="flex items-center gap-2 astro-3ef6ksr2"> <nav class="min-w-0 flex-1 flex items-center gap-2 overflow-x-auto pb-2 -mx-1 px-1 astro-3ef6ksr2" role="tablist" aria-labelledby="mobile-nav-primary-label"> <button type="button" role="tab" data-mobile-nav-tab data-tab-id="mobile-nav-tab-api" data-has-nav="true" data-href="/api/docs" data-label="API" data-search-placeholder="Start searching" data-search-scope="api" data-selected="true" aria-selected="true" class="shrink-0 rounded-full border border-primary-surface px-3.5 py-1.5 text-sm text-secondary transition-colors duration-150 data-[selected=true]:bg-primary-soft data-[selected=true]:text-default hover:bg-primary-soft-alpha hover:text-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-surface astro-3ef6ksr2"> API </button><button type="button" role="tab" data-mobile-nav-tab data-tab-id="mobile-nav-tab-api-reference" data-has-nav="false" data-href="/api/reference/overview" data-label="API Reference" data-search-placeholder="Start searching" data-search-scope="api" data-selected="false" aria-selected="false" class="shrink-0 rounded-full border border-primary-surface px-3.5 py-1.5 text-sm text-secondary transition-colors duration-150 data-[selected=true]:bg-primary-soft data-[selected=true]:text-default hover:bg-primary-soft-alpha hover:text-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-surface astro-3ef6ksr2"> API Reference </button><button type="button" role="tab" data-mobile-nav-tab data-tab-id="mobile-nav-tab-2" data-has-nav="true" data-href="/codex" data-label="Codex" data-search-placeholder="Start searching" data-search-scope="codex" data-selected="false" aria-selected="false" class="shrink-0 rounded-full border border-primary-surface px-3.5 py-1.5 text-sm text-secondary transition-colors duration-150 data-[selected=true]:bg-primary-soft data-[selected=true]:text-default hover:bg-primary-soft-alpha hover:text-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-surface astro-3ef6ksr2"> Codex </button><button type="button" role="tab" data-mobile-nav-tab data-tab-id="mobile-nav-tab-3" data-has-nav="true" data-href="/chatgpt" data-label="ChatGPT" data-search-placeholder="Start searching" data-search-scope="chatgpt" data-selected="false" aria-selected="false" class="shrink-0 rounded-full border border-primary-surface px-3.5 py-1.5 text-sm text-secondary transition-colors duration-150 data-[selected=true]:bg-primary-soft data-[selected=true]:text-default hover:bg-primary-soft-alpha hover:text-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-surface astro-3ef6ksr2"> ChatGPT </button><button type="button" role="tab" data-mobile-nav-tab data-tab-id="mobile-nav-tab-4" data-has-nav="true" data-href="/learn" data-label="Resources" data-search-placeholder="Start searching" data-search-scope="learn" data-selected="false" aria-selected="false" class="shrink-0 rounded-full border border-primary-surface px-3.5 py-1.5 text-sm text-secondary transition-colors duration-150 data-[selected=true]:bg-primary-soft data-[selected=true]:text-default hover:bg-primary-soft-alpha hover:text-default focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-surface astro-3ef6ksr2"> Resources </button> </nav> <button id="drawer-theme-button" type="button" aria-label="Toggle light and dark theme" class="shrink-0 mb-2 rounded-full border border-primary-surface p-2 text-secondary transition-colors hover:text-default astro-3ef6ksr2"> <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="block dark:hidden w-5 h-5 astro-3ef6ksr2 " ><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C11.5523 0 12 0.447715 12 1V3C12 3.55228 11.5523 4 11 4C10.4477 4 10 3.55228 10 3V1C10 0.447715 10.4477 0 11 0ZM3.22183 3.22183C3.61235 2.8313 4.24551 2.8313 4.63604 3.22183L6.05025 4.63604C6.44078 5.02656 6.44078 5.65973 6.05025 6.05025C5.65973 6.44078 5.02656 6.44078 4.63604 6.05025L3.22183 4.63604C2.8313 4.24551 2.8313 3.61235 3.22183 3.22183ZM18.7782 3.22183C19.1687 3.61235 19.1687 4.24551 18.7782 4.63604L17.364 6.05025C16.9734 6.44078 16.3403 6.44078 15.9497 6.05025C15.5592 5.65973 15.5592 5.02656 15.9497 4.63604L17.364 3.22183C17.7545 2.8313 18.3876 2.8313 18.7782 3.22183ZM11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8ZM6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11C16 13.7614 13.7614 16 11 16C8.23858 16 6 13.7614 6 11ZM0 11C0 10.4477 0.447715 10 1 10H3C3.55228 10 4 10.4477 4 11C4 11.5523 3.55228 12 3 12H1C0.447715 12 0 11.5523 0 11ZM18 11C18 10.4477 18.4477 10 19 10H21C21.5523 10 22 10.4477 22 11C22 11.5523 21.5523 12 21 12H19C18.4477 12 18 11.5523 18 11ZM6.05025 15.9497C6.44078 16.3403 6.44078 16.9734 6.05025 17.364L4.63604 18.7782C4.24551 19.1687 3.61235 19.1687 3.22183 18.7782C2.8313 18.3876 2.8313 17.7545 3.22183 17.364L4.63604 15.9497C5.02656 15.5592 5.65973 15.5592 6.05025 15.9497ZM15.9497 15.9497C16.3403 15.5592 16.9734 15.5592 17.364 15.9497L18.7782 17.364C19.1687 17.7545 19.1687 18.3876 18.7782 18.7782C18.3877 19.1687 17.7545 19.1687 17.364 18.7782L15.9497 17.364C15.5592 16.9734 15.5592 16.3403 15.9497 15.9497ZM11 18C11.5523 18 12 18.4477 12 19V21C12 21.5523 11.5523 22 11 22C10.4477 22 10 21.5523 10 21V19C10 18.4477 10.4477 18 11 18Z" fill="currentColor"></path></svg> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="hidden dark:block w-5 h-5 astro-3ef6ksr2 " ><path d="M10.7836 0.470481C10.9676 0.765118 10.9855 1.13415 10.8309 1.44525C10.2994 2.51497 10 3.7211 10 5.00001C10 9.41829 13.5817 13 18 13L18.0575 12.9998C18.4049 12.9974 18.7287 13.1754 18.9127 13.47C19.0968 13.7647 19.1147 14.1337 18.9601 14.4448C17.325 17.7352 13.9279 20 10 20C4.47715 20 0 15.5229 0 10C0 4.50107 4.43841 0.038857 9.92838 0.000268937C10.2758 -0.00217271 10.5995 0.175844 10.7836 0.470481ZM8.40989 2.15803C4.75344 2.8954 2 6.12619 2 10C2 14.4183 5.58172 18 10 18C12.587 18 14.8886 16.7721 16.3516 14.8648C11.6131 14.0789 8 9.96139 8 5.00001C8 4.01361 8.1431 3.05953 8.40989 2.15803Z" fill="currentColor"></path></svg> </button> </div> </div> <div class="flex-1 w-full overflow-y-auto px-6 py-4 flex flex-col gap-6 astro-3ef6ksr2" data-mobile-nav-panels> <div data-mobile-search class="astro-3ef6ksr2"> <astro-island uid="2m9xLh" prefix="r83" component-url="/_astro/AlgoliaSearch.react.DMaHK7Vr.js" component-export="default" renderer-url="/_astro/client.BWriqC1y.js" props="{&quot;id&quot;:[0,&quot;header-mobile-search&quot;],&quot;className&quot;:[0,&quot;pagefind-header-ui pagefind-mobile-ui astro-3ef6ksr2&quot;],&quot;query&quot;:[0,&quot;&quot;],&quot;scope&quot;:[0,&quot;api&quot;],&quot;uiOptions&quot;:[0,{&quot;showImages&quot;:[0,false],&quot;showSubResults&quot;:[0,false],&quot;translations&quot;:[0,{&quot;placeholder&quot;:[0,&quot;Start searching&quot;],&quot;zeroResults&quot;:[0,&quot;No matches yet. Try a different keyword.&quot;]}]}]}" ssr client="load" opts="{&quot;name&quot;:&quot;AlgoliaSearchReact&quot;,&quot;value&quot;:true}" await-children><div id="header-mobile-search" class="pagefind-header-ui pagefind-mobile-ui astro-3ef6ksr2 _root_1wztd_1" data-site-search-root="true" data-site-search-provider="algolia" data-site-search-variant="default" data-query="" data-scope="api"><div class="flex h-full min-h-0 flex-col gap-4"><div class=""><label class="sr-only" for="header-mobile-search-input">Search docs</label><input id="header-mobile-search-input" type="text" placeholder="Start searching" autoComplete="off" spellCheck="false" data-site-search-input="true" class="w-full outline-none transition-colors rounded-[18px] border border-transparent bg-primary-soft-alpha py-4 pl-6 pr-14 text-[18px] leading-tight text-default placeholder:text-tertiary focus:border-transparent focus:ring-0" value=""/></div><div class="flex min-h-0 flex-1 flex-col gap-4"><div data-site-search-empty-state="true" class="flex flex-col gap-4"><section class="_emptySection_1wztd_68"><h3 class="_emptyHeading_1wztd_74">Suggested</h3><div class="flex flex-wrap gap-2"><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="responses create">responses create</button><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="reasoning_effort">reasoning_effort</button><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="realtime">realtime</button><button type="button" class="_emptyChip_1wztd_81" data-search-query-button="true" data-search-query="prompt caching">prompt caching</button></div></section></div></div></div></div><!--astro:end--></astro-island> </div> <div id="mobile-nav-panel-api" data-mobile-nav-content data-tab-id="mobile-nav-tab-api" data-default-variant-id="mobile-nav-tab-api-variant-default" class="flex flex-col gap-4 pb-8 astro-3ef6ksr2">  <div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-api-variant-default" class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Get started </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs" class="px-3 py-1.5 rounded-lg transition-colors block text-default bg-primary-ghost-active " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/quickstart" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Quickstart   </a> </li><li> <a href="/api/docs/models" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Models   </a> </li><li> <a href="/api/docs/pricing" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Pricing   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <a href="/api/docs/libraries" class="flex-1 " data-mobile-nav-link> SDKs and CLI  </a> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/libraries" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> OpenAI SDK   </a> </li><li> <a href="/api/docs/guides/agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Agents SDK   </a> </li><li> <a href="/api/docs/libraries/openai-cli" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> OpenAI CLI   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/latest-model" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Latest: GPT-5.5   </a> </li><li> <a href="/api/docs/guides/prompt-guidance" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Prompt guidance   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Core concepts </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/text" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Text generation   </a> </li><li> <a href="/api/docs/guides/code-generation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Code generation   </a> </li><li> <a href="/api/docs/guides/images-vision" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Images and vision   </a> </li><li> <a href="/api/docs/guides/audio" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Audio and speech   </a> </li><li> <a href="/api/docs/guides/structured-outputs" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Structured output   </a> </li><li> <a href="/api/docs/guides/function-calling" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Function calling   </a> </li><li> <a href="/api/docs/guides/migrate-to-responses" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Responses API   </a> </li><li> <a href="/api/docs/guides/tools" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Using tools   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Agents SDK </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/agents/quickstart" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Quickstart   </a> </li><li> <a href="/api/docs/guides/agents/define-agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Agent definitions   </a> </li><li> <a href="/api/docs/guides/agents/models" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Models and providers   </a> </li><li> <a href="/api/docs/guides/agents/running-agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Running agents   </a> </li><li> <a href="/api/docs/guides/agents/sandboxes" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Sandbox agents   </a> </li><li> <a href="/api/docs/guides/agents/orchestration" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Orchestration   </a> </li><li> <a href="/api/docs/guides/agents/guardrails-approvals" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Guardrails   </a> </li><li> <a href="/api/docs/guides/agents/results" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Results and state   </a> </li><li> <a href="/api/docs/guides/agents/integrations-observability" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Integrations and observability   </a> </li><li> <a href="/api/docs/guides/agent-evals" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Evaluate agent workflows   </a> </li><li> <a href="/api/docs/guides/voice-agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Voice agents   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Agent Builder</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/agent-builder" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/node-reference" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Node reference   </a> </li><li> <a href="/api/docs/guides/agent-builder-safety" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Safety in building agents   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">ChatKit</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/chatkit" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/chatkit-themes" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Customize   </a> </li><li> <a href="/api/docs/guides/chatkit-widgets" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Widgets   </a> </li><li> <a href="/api/docs/guides/chatkit-actions" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Actions   </a> </li><li> <a href="/api/docs/guides/custom-chatkit" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Advanced integrations   </a> </li> </ul> </details> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Tools </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/tools-web-search" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Web search   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <a href="/api/docs/guides/tools-connectors-mcp" class="flex-1 " data-mobile-nav-link> MCP and Connectors  </a> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/secure-mcp-tunnels" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Secure MCP Tunnel   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/tools-skills" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Skills   </a> </li><li> <a href="/api/docs/guides/tools-shell" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Shell   </a> </li><li> <a href="/api/docs/guides/tools-computer-use" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Computer use   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">File search and retrieval</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/tools-file-search" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> File search   </a> </li><li> <a href="/api/docs/guides/retrieval" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Retrieval   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/tools-tool-search" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Tool search   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">More tools</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/tools-apply-patch" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Apply Patch   </a> </li><li> <a href="/api/docs/guides/tools-local-shell" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Local shell   </a> </li><li> <a href="/api/docs/guides/tools-image-generation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Image generation   </a> </li><li> <a href="/api/docs/guides/tools-code-interpreter" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Code interpreter   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Run and scale </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/conversation-state" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Conversation state   </a> </li><li> <a href="/api/docs/guides/background" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Background mode   </a> </li><li> <a href="/api/docs/guides/streaming-responses" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Streaming   </a> </li><li> <a href="/api/docs/guides/websocket-mode" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> WebSocket mode   </a> </li><li> <a href="/api/docs/guides/webhooks" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Webhooks   </a> </li><li> <a href="/api/docs/guides/file-inputs" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> File inputs   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Context management</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/compaction" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Compaction   </a> </li><li> <a href="/api/docs/guides/token-counting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Counting tokens   </a> </li><li> <a href="/api/docs/guides/prompt-caching" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Prompt caching   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Prompting</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/prompting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/prompt-engineering" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Prompt engineering   </a> </li><li> <a href="/api/docs/guides/citation-formatting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Citation formatting   </a> </li><li> <a href="/api/docs/guides/prompting/migrate-from-prompt-object" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Migration guide   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Reasoning</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/reasoning" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Reasoning models   </a> </li><li> <a href="/api/docs/guides/reasoning-best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Reasoning best practices   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Evaluation </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/evaluation-getting-started" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Getting started   </a> </li><li> <a href="/api/docs/guides/evals" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Working with evals   </a> </li><li> <a href="/api/docs/guides/prompt-optimizer" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Prompt optimizer   </a> </li><li> <a href="/api/docs/guides/external-models" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> External models   </a> </li><li> <a href="/api/docs/guides/red-teaming" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Red teaming   </a> </li><li> <a href="/api/docs/guides/evaluation-best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Best practices   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Realtime and audio </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/realtime" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/voice-agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Voice agents   </a> </li><li> <a href="/api/docs/guides/realtime-translation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Live translation   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Transcription</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/realtime-transcription" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Realtime transcription   </a> </li><li> <a href="/api/docs/guides/speech-to-text" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Speech to text   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/text-to-speech" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Speech generation   </a> </li><li> <a href="/api/docs/guides/realtime-models-prompting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Realtime prompting guide   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Connection methods</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/realtime-webrtc" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> WebRTC   </a> </li><li> <a href="/api/docs/guides/realtime-websocket" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> WebSocket   </a> </li><li> <a href="/api/docs/guides/realtime-sip" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> SIP   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Realtime sessions</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/realtime-conversations" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Managing conversations   </a> </li><li> <a href="/api/docs/guides/realtime-vad" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Voice activity detection   </a> </li><li> <a href="/api/docs/guides/realtime-mcp" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Realtime with tools   </a> </li><li> <a href="/api/docs/guides/realtime-server-controls" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Webhooks and server-side controls   </a> </li><li> <a href="/api/docs/guides/realtime-costs" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Managing costs   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Model optimization </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/model-optimization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Optimization cycle   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Fine-tuning</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/supervised-fine-tuning" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Supervised fine-tuning   </a> </li><li> <a href="/api/docs/guides/vision-fine-tuning" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Vision fine-tuning   </a> </li><li> <a href="/api/docs/guides/direct-preference-optimization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Direct preference optimization   </a> </li><li> <a href="/api/docs/guides/reinforcement-fine-tuning" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Reinforcement fine-tuning   </a> </li><li> <a href="/api/docs/guides/rft-use-cases" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> RFT use cases   </a> </li><li> <a href="/api/docs/guides/fine-tuning-best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Best practices   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/graders" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Graders   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Specialized models </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/image-generation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Image generation   </a> </li><li> <a href="/api/docs/guides/video-generation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Video generation   </a> </li><li> <a href="/api/docs/guides/deep-research" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Deep research   </a> </li><li> <a href="/api/docs/guides/embeddings" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Embeddings   </a> </li><li> <a href="/api/docs/guides/moderation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Moderation   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Going live </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/production-best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Production best practices   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <a href="/api/docs/guides/workload-identity-federation" class="flex-1 " data-mobile-nav-link> Workload identity federation  </a> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/workload-identity-federation" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/kubernetes" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Kubernetes   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/aws" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> AWS   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/microsoft-azure" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Microsoft Azure   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/google-cloud" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Google Cloud   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/github-actions" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> GitHub Actions   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/deployment-checklist" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Deployment checklist   </a> </li><li> <a href="/api/docs/guides/amazon-bedrock" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Amazon Bedrock   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Latency optimization</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/latency-optimization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/predicted-outputs" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Predicted Outputs   </a> </li><li> <a href="/api/docs/guides/priority-processing" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Priority processing   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Cost optimization</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/cost-optimization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/api/docs/guides/batch" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Batch   </a> </li><li> <a href="/api/docs/guides/flex-processing" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Flex processing   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/optimizing-llm-accuracy" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Accuracy optimization   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Safety</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/guides/safety-best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Safety best practices   </a> </li><li> <a href="/api/docs/guides/safety-checks" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Safety checks   </a> </li><li> <a href="/api/docs/guides/safety-checks/cybersecurity" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Cybersecurity checks   </a> </li><li> <a href="/api/docs/guides/safety-checks/under-18-api-guidance" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Under 18 API Guidance   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Legacy APIs </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Assistants API</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/assistants/migration" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Migration guide   </a> </li><li> <a href="/api/docs/assistants/deep-dive" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Deep dive   </a> </li><li> <a href="/api/docs/assistants/tools" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Tools   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Resources </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="https://openai.com/policies" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover flex items-center justify-between gap-2" target="_blank" rel="noopener noreferrer" data-mobile-nav-link> Terms and policies  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2 h-2 inline-block ml-1 text-gray-600 dark:text-gray-300 " ><path d="M10.2426 0.757385C10.7949 0.757385 11.2426 1.2051 11.2426 1.75738V8.82845C11.2426 9.38074 10.7949 9.82845 10.2426 9.82845C9.69035 9.82845 9.24264 9.38074 9.24264 8.82845V4.1716L2.46446 10.9498C2.07394 11.3403 1.44077 11.3403 1.05025 10.9498C0.659724 10.5592 0.659723 9.92608 1.05025 9.53556L7.82842 2.75739H3.17157C2.61928 2.75739 2.17157 2.30967 2.17157 1.75738C2.17157 1.2051 2.61928 0.757385 3.17157 0.757385H10.2426Z" fill="currentColor"></path></svg> </a> </li><li> <a href="/api/docs/changelog" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Changelog   </a> </li><li> <a href="/api/docs/guides/your-data" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Your data   </a> </li><li> <a href="/api/docs/guides/rbac" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Permissions   </a> </li><li> <a href="/api/docs/guides/rate-limits" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Rate limits   </a> </li><li> <a href="/api/docs/guides/admin-apis" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Admin APIs   </a> </li><li> <a href="/api/docs/deprecations" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Deprecations   </a> </li><li> <a href="/api/docs/mcp" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> MCP for deep research   </a> </li><li> <a href="/api/docs/guides/developer-mode" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Developer mode   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">ChatGPT Actions</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/api/docs/actions/introduction" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Introduction   </a> </li><li> <a href="/api/docs/actions/getting-started" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Getting started   </a> </li><li> <a href="/api/docs/actions/actions-library" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Actions library   </a> </li><li> <a href="/api/docs/actions/authentication" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Authentication   </a> </li><li> <a href="/api/docs/actions/production" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Production   </a> </li><li> <a href="/api/docs/actions/data-retrieval" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Data retrieval   </a> </li><li> <a href="/api/docs/actions/sending-files" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Sending files   </a> </li> </ul> </details> </li> </ul> </div> </div> </div><div id="mobile-nav-panel-2" data-mobile-nav-content data-tab-id="mobile-nav-tab-2" data-default-variant-id="mobile-nav-tab-2-variant-0" hidden class="flex flex-col gap-4 pb-8 astro-3ef6ksr2"> <div class="group flex flex-col gap-1 astro-3ef6ksr2" data-mobile-context-options data-context-active="false"> <button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-2-variant-0" data-context-label="Docs" data-context-href="/codex" data-context-is-home="false" data-selected="true"> Docs </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-2-variant-1" data-context-label="Use cases" data-context-href="/codex/use-cases" data-context-is-home="false" data-selected="false"> Use cases </button> </div> <div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-2-variant-0" class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Getting Started </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/quickstart" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Quickstart   </a> </li><li> <a href="/codex/use-cases" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Explore use cases   </a> </li><li> <a href="/codex/migrate" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Migrate   </a> </li><li> <a href="/codex/pricing" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Pricing   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Concepts</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/prompting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Prompting   </a> </li><li> <a href="/codex/concepts/customization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Customization   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <a href="/codex/memories" class="flex-1 " data-mobile-nav-link> Memories  </a> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/memories/chronicle" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Chronicle   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <a href="/codex/concepts/sandboxing" class="flex-1 " data-mobile-nav-link> Sandboxing  </a> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/concepts/sandboxing/auto-review" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Auto-review   </a> </li> </ul> </details> </li><li> <a href="/codex/concepts/subagents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Subagents   </a> </li><li> <a href="/codex/workflows" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Workflows   </a> </li><li> <a href="/codex/models" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Models   </a> </li><li> <a href="/codex/concepts/cyber-safety" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Cyber Safety   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Using Codex </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">App</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/app" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/app/features" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Features   </a> </li><li> <a href="/codex/app/settings" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Settings   </a> </li><li> <a href="/codex/app/review" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Review   </a> </li><li> <a href="/codex/app/automations" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Automations   </a> </li><li> <a href="/codex/app/worktrees" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Worktrees   </a> </li><li> <a href="/codex/app/local-environments" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Local Environments   </a> </li><li> <a href="/codex/app/browser" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> In-app browser   </a> </li><li> <a href="/codex/app/chrome-extension" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Chrome extension   </a> </li><li> <a href="/codex/app/computer-use" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Computer Use   </a> </li><li> <a href="/codex/appshots" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Appshots   </a> </li><li> <a href="/codex/app/commands" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Commands   </a> </li><li> <a href="/codex/app/windows" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Windows   </a> </li><li> <a href="/codex/app/troubleshooting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Troubleshooting   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">IDE Extension</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/ide" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/ide/features" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Features   </a> </li><li> <a href="/codex/ide/settings" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Settings   </a> </li><li> <a href="/codex/ide/commands" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> IDE Commands   </a> </li><li> <a href="/codex/ide/slash-commands" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Slash commands   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">CLI</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/cli" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/cli/features" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Features   </a> </li><li> <a href="/codex/cli/reference" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Command Line Options   </a> </li><li> <a href="/codex/cli/slash-commands" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Slash commands   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Web</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/cloud" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/cloud/environments" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Environments   </a> </li><li> <a href="/codex/cloud/internet-access" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Internet Access   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Integrations</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/integrations/github" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> GitHub   </a> </li><li> <a href="/codex/integrations/slack" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Slack   </a> </li><li> <a href="/codex/integrations/linear" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Linear   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Codex Security</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/security" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/security/plugin" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex Security plugin   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Codex Security cloud</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/security/setup" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Setup   </a> </li><li> <a href="/codex/security/threat-model" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Improving the threat model   </a> </li> </ul> </details> </li><li> <a href="/codex/security/faq" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> FAQ   </a> </li> </ul> </details> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Configuration </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Config File</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/config-basic" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Config Basics   </a> </li><li> <a href="/codex/config-advanced" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Advanced Config   </a> </li><li> <a href="/codex/config-reference" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Config Reference   </a> </li><li> <a href="/codex/environment-variables" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Environment Variables   </a> </li><li> <a href="/codex/config-sample" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Sample Config   </a> </li> </ul> </details> </li><li> <a href="/codex/permissions" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Permissions   </a> </li><li> <a href="/codex/speed" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Speed   </a> </li><li> <a href="/codex/rules" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Rules   </a> </li><li> <a href="/codex/hooks" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Hooks   </a> </li><li> <a href="/codex/guides/agents-md" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> AGENTS.md   </a> </li><li> <a href="/codex/mcp" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> MCP   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Plugins</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/plugins" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/plugins/build" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Build plugins   </a> </li> </ul> </details> </li><li> <a href="/codex/sites" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Sites   </a> </li><li> <a href="/codex/skills" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Skills   </a> </li><li> <a href="/codex/subagents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Subagents   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Administration </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Authentication</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/auth" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/codex/enterprise/access-tokens" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Access tokens   </a> </li> </ul> </details> </li><li> <a href="/codex/agent-approvals-security" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Agent approvals &amp; security   </a> </li><li> <a href="/codex/remote-connections" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Remote connections   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Deployment</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/amazon-bedrock" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Amazon Bedrock   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Enterprise</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/enterprise/admin-setup" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Admin Setup   </a> </li><li> <a href="/codex/enterprise/governance" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Governance   </a> </li><li> <a href="/codex/enterprise/managed-configuration" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Managed configuration   </a> </li> </ul> </details> </li><li> <a href="/codex/windows" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Windows   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Automation </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/noninteractive" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Non-interactive Mode   </a> </li><li> <a href="/codex/sdk" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex SDK   </a> </li><li> <a href="/codex/app-server" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> App Server   </a> </li><li> <a href="/codex/guides/agents-sdk" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> MCP Server   </a> </li><li> <a href="/codex/github-action" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> GitHub Action   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Learn </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/learn/best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Best practices   </a> </li><li> <a href="/codex/videos" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Videos   </a> </li><li> <a href="/community" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Community   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Blog</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/blog/skills-agents-sdk" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Using skills to accelerate OSS maintenance   </a> </li><li> <a href="/blog/building-frontend-uis-with-codex-and-figma" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Building frontend UIs with Codex and Figma   </a> </li><li> <a href="/blog/topic/codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> View all   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-2 rounded-lg transition-colors flex items-center justify-between gap-2 hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1">Cookbooks</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block text-secondary transition-transform duration-150  group-open:rotate-90 " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/cookbook/examples/agents_sdk/agent_improvement_loop" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Build an Agent Improvement Loop with Traces, Evals, and Codex   </a> </li><li> <a href="/cookbook/examples/codex/build_iterative_repair_loops_with_codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Build iterative repair loops with Codex   </a> </li><li> <a href="/cookbook/topic/codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> View all   </a> </li> </ul> </details> </li><li> <a href="/codex/guides/build-ai-native-engineering-team" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Building AI Teams   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Releases </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/changelog" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Changelog   </a> </li><li> <a href="/codex/feature-maturity" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Feature Maturity   </a> </li><li> <a href="/codex/open-source" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Open Source   </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-2-variant-1" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/codex/use-cases" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Home   </a> </li><li> <a href="/codex/use-cases/collections" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Collections   </a> </li> </ul> </div> </div> </div><div id="mobile-nav-panel-3" data-mobile-nav-content data-tab-id="mobile-nav-tab-3" data-default-variant-id="mobile-nav-tab-3-variant-0" hidden class="flex flex-col gap-4 pb-8 astro-3ef6ksr2"> <div class="group flex flex-col gap-1 astro-3ef6ksr2" data-mobile-context-options data-context-active="false"> <button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-3-variant-1" data-context-label="Apps SDK" data-context-href="/apps-sdk" data-context-is-home="false" data-selected="false"> Apps SDK </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-3-variant-2" data-context-label="Commerce" data-context-href="/commerce" data-context-is-home="false" data-selected="false"> Commerce </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-3-variant-3" data-context-label="Ads" data-context-href="/ads" data-context-is-home="false" data-selected="false"> Ads </button> </div> <div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-3-variant-0" class="flex flex-col gap-6 astro-3ef6ksr2">  </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-3-variant-1" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Home   </a> </li><li> <a href="/apps-sdk/quickstart" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Quickstart   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Core Concepts </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/mcp-apps-in-chatgpt" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> MCP Apps in ChatGPT   </a> </li><li> <a href="/apps-sdk/concepts/mcp-server" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> MCP Server   </a> </li><li> <a href="/apps-sdk/concepts/ux-principles" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> UX principles   </a> </li><li> <a href="/apps-sdk/concepts/ui-guidelines" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> UI guidelines   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Plan </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/plan/use-case" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Research use cases   </a> </li><li> <a href="/apps-sdk/plan/tools" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Define tools   </a> </li><li> <a href="/apps-sdk/plan/components" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Design components   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Build </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/build/mcp-server" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Set up your server   </a> </li><li> <a href="/apps-sdk/build/chatgpt-ui" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Build your ChatGPT UI   </a> </li><li> <a href="/apps-sdk/build/auth" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Authenticate users   </a> </li><li> <a href="/apps-sdk/build/state-management" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Manage state   </a> </li><li> <a href="/apps-sdk/build/monetization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Monetize your app   </a> </li><li> <a href="/apps-sdk/build/examples" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Examples   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Deploy </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/deploy" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Deploy your app   </a> </li><li> <a href="/apps-sdk/deploy/connect-chatgpt" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Connect from ChatGPT   </a> </li><li> <a href="/apps-sdk/deploy/testing" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Test your integration   </a> </li><li> <a href="/apps-sdk/deploy/submission" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Submit your app   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Conversion apps </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/guides/restaurant-reservation-conversion-spec" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Restaurant reservation spec   </a> </li><li> <a href="/apps-sdk/guides/product-checkout-conversion-spec" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Product checkout spec   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Guides </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/guides/optimize-metadata" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Optimize Metadata   </a> </li><li> <a href="/apps-sdk/guides/security-privacy" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Security &amp; Privacy   </a> </li><li> <a href="/apps-sdk/deploy/troubleshooting" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Troubleshooting   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Resources </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/apps-sdk/changelog" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Changelog   </a> </li><li> <a href="/apps-sdk/app-submission-guidelines" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> App submission guidelines   </a> </li><li> <a href="/apps-sdk/reference" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Reference   </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-3-variant-2" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/commerce" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Home   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Guides </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/commerce/guides/get-started" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Get started   </a> </li><li> <a href="/commerce/guides/best-practices" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Best practices   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> File Upload </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/commerce/specs/file-upload/overview" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/commerce/specs/file-upload/products" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Products   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> API </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/commerce/specs/api/overview" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/commerce/specs/api/feeds" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Feeds   </a> </li><li> <a href="/commerce/specs/api/products" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Products   </a> </li><li> <a href="/commerce/specs/api/promotions" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Promotions   </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-3-variant-3" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/ads" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Ads Overview   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Measurement </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/ads/measurement-pixel" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> JavaScript Pixel   </a> </li><li> <a href="/ads/conversions-api" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Conversions API   </a> </li><li> <a href="/ads/supported-events" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Supported events   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Advertiser API </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/ads/api-overview" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Overview   </a> </li><li> <a href="/ads/api-quickstart" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Quickstart   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> API Reference </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/ads/api-reference/authentication" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Authentication   </a> </li><li> <a href="/ads/api-reference/campaigns" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Campaigns   </a> </li><li> <a href="/ads/api-reference/ad-groups" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Ad Groups   </a> </li><li> <a href="/ads/api-reference/ads" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Ads   </a> </li><li> <a href="/ads/api-reference/ad-account" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Ad Account   </a> </li><li> <a href="/ads/api-reference/insights" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Insights   </a> </li><li> <a href="/ads/api-reference/files" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Files   </a> </li> </ul> </div> </div> </div><div id="mobile-nav-panel-4" data-mobile-nav-content data-tab-id="mobile-nav-tab-4" data-default-variant-id="mobile-nav-tab-4-variant-0" hidden class="flex flex-col gap-4 pb-8 astro-3ef6ksr2"> <div class="group flex flex-col gap-1 astro-3ef6ksr2" data-mobile-context-options data-context-active="false"> <button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-4-variant-1" data-context-label="Showcase" data-context-href="/showcase" data-context-is-home="false" data-selected="false"> Showcase </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-4-variant-2" data-context-label="Blog" data-context-href="/blog" data-context-is-home="false" data-selected="false"> Blog </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-4-variant-3" data-context-label="Cookbook" data-context-href="/cookbook" data-context-is-home="false" data-selected="false"> Cookbook </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-4-variant-4" data-context-label="Learn" data-context-href="/learn" data-context-is-home="false" data-selected="false"> Learn </button><button type="button" class="w-full rounded-lg px-3 py-2 text-left text-sm font-normal text-secondary transition-colors hover:bg-primary-ghost-hover hover:text-default data-[selected=true]:bg-primary-ghost-active data-[selected=true]:text-default group-data-[context-active=true]:font-semibold astro-3ef6ksr2" data-mobile-context-option data-context-id="mobile-nav-tab-4-variant-5" data-context-label="Community" data-context-href="/community" data-context-is-home="false" data-selected="false"> Community </button> </div> <div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-4-variant-0" class="flex flex-col gap-6 astro-3ef6ksr2">  </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-4-variant-1" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/showcase" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Home   </a> </li><li> <a href="/showcase/api-examples" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> API examples   </a> </li><li> <a href="/showcase/sites" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Sites   </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-4-variant-2" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/blog" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> All posts   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Recent </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/blog/realtime-perplexity-computer" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> How Perplexity Brought Voice Search to Millions Using the Realtime API   </a> </li><li> <a href="/blog/designing-delightful-frontends-with-gpt-5-4" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Designing delightful frontends with GPT-5.4   </a> </li><li> <a href="/blog/one-year-of-responses" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> From prompts to products: One year of Responses   </a> </li><li> <a href="/blog/skills-agents-sdk" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Using skills to accelerate OSS maintenance   </a> </li><li> <a href="/blog/building-frontend-uis-with-codex-and-figma" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Building frontend UIs with Codex and Figma   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Topics </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/blog/topic/general" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> General   </a> </li><li> <a href="/blog/topic/api" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> API   </a> </li><li> <a href="/blog/topic/apps-sdk" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Apps SDK   </a> </li><li> <a href="/blog/topic/audio" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Audio   </a> </li><li> <a href="/blog/topic/codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex   </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-4-variant-3" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/cookbook" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Home   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Topics </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/cookbook/topic/agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Agents   </a> </li><li> <a href="/cookbook/topic/evals" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Evals   </a> </li><li> <a href="/cookbook/topic/multimodal" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Multimodal   </a> </li><li> <a href="/cookbook/topic/text" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Text   </a> </li><li> <a href="/cookbook/topic/guardrails" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Guardrails   </a> </li><li> <a href="/cookbook/topic/optimization" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Optimization   </a> </li><li> <a href="/cookbook/topic/chatgpt" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> ChatGPT   </a> </li><li> <a href="/cookbook/topic/codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex   </a> </li><li> <a href="/cookbook/topic/gpt-oss" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> gpt-oss   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Contribute </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="https://github.com/openai/openai-cookbook" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover flex items-center justify-between gap-2" target="_blank" rel="noopener noreferrer" data-mobile-nav-link> Cookbook on GitHub  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2 h-2 inline-block ml-1 text-gray-600 dark:text-gray-300 " ><path d="M10.2426 0.757385C10.7949 0.757385 11.2426 1.2051 11.2426 1.75738V8.82845C11.2426 9.38074 10.7949 9.82845 10.2426 9.82845C9.69035 9.82845 9.24264 9.38074 9.24264 8.82845V4.1716L2.46446 10.9498C2.07394 11.3403 1.44077 11.3403 1.05025 10.9498C0.659724 10.5592 0.659723 9.92608 1.05025 9.53556L7.82842 2.75739H3.17157C2.61928 2.75739 2.17157 2.30967 2.17157 1.75738C2.17157 1.2051 2.61928 0.757385 3.17157 0.757385H10.2426Z" fill="currentColor"></path></svg> </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-4-variant-4" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/learn" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Home   </a> </li><li> <a href="/learn/developers-codex-plugin" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> OpenAI Developers plugin   </a> </li><li> <a href="/learn/docs-mcp" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Docs MCP   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Categories </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/learn/code" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Demo apps   </a> </li><li> <a href="/learn/videos" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Videos   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Topics </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/learn/agents" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Agents   </a> </li><li> <a href="/learn/audio" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Audio &amp; Voice   </a> </li><li> <a href="/learn/cua" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Computer Use   </a> </li><li> <a href="/learn/codex" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex   </a> </li><li> <a href="/learn/evals" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Evals   </a> </li><li> <a href="/learn/gpt-oss" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> gpt-oss   </a> </li><li> <a href="/learn/fine-tuning" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Fine-tuning   </a> </li><li> <a href="/learn/imagegen" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Image generation   </a> </li><li> <a href="/learn/scaling" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Scaling   </a> </li><li> <a href="/learn/tools" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Tools   </a> </li><li> <a href="/learn/videogen" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Video generation   </a> </li> </ul> </div> </div><div data-mobile-nav-variant-content data-variant-id="mobile-nav-tab-4-variant-5" hidden class="flex flex-col gap-6 astro-3ef6ksr2"> <div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/community" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Community   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Programs </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/community/codex-ambassadors" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex Ambassadors   </a> </li><li> <a href="/community/students" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex for Students   </a> </li><li> <a href="/community/codex-for-oss" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Codex for Open Source   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2"> <h3 class="text-xs tracking-wide text-secondary astro-3ef6ksr2"> Events </h3> <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="/community/meetups" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Meetups   </a> </li><li> <a href="/community/hackathons" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover " data-mobile-nav-link> Hackathon Support   </a> </li> </ul> </div><div class="flex flex-col gap-3 astro-3ef6ksr2">  <ul class="flex flex-col gap-1 text-sm text-default w-full"> <li> <a href="https://community.openai.com/" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover flex items-center justify-between gap-2" target="_blank" rel="noopener noreferrer" data-mobile-nav-link> Forum  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2 h-2 inline-block ml-1 text-gray-600 dark:text-gray-300 " ><path d="M10.2426 0.757385C10.7949 0.757385 11.2426 1.2051 11.2426 1.75738V8.82845C11.2426 9.38074 10.7949 9.82845 10.2426 9.82845C9.69035 9.82845 9.24264 9.38074 9.24264 8.82845V4.1716L2.46446 10.9498C2.07394 11.3403 1.44077 11.3403 1.05025 10.9498C0.659724 10.5592 0.659723 9.92608 1.05025 9.53556L7.82842 2.75739H3.17157C2.61928 2.75739 2.17157 2.30967 2.17157 1.75738C2.17157 1.2051 2.61928 0.757385 3.17157 0.757385H10.2426Z" fill="currentColor"></path></svg> </a> </li><li> <a href="https://discord.com/invite/openai" class="px-3 py-1.5 rounded-lg transition-colors block hover:text-default hover:bg-primary-ghost-hover flex items-center justify-between gap-2" target="_blank" rel="noopener noreferrer" data-mobile-nav-link> Discord  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2 h-2 inline-block ml-1 text-gray-600 dark:text-gray-300 " ><path d="M10.2426 0.757385C10.7949 0.757385 11.2426 1.2051 11.2426 1.75738V8.82845C11.2426 9.38074 10.7949 9.82845 10.2426 9.82845C9.69035 9.82845 9.24264 9.38074 9.24264 8.82845V4.1716L2.46446 10.9498C2.07394 11.3403 1.44077 11.3403 1.05025 10.9498C0.659724 10.5592 0.659723 9.92608 1.05025 9.53556L7.82842 2.75739H3.17157C2.61928 2.75739 2.17157 2.30967 2.17157 1.75738C2.17157 1.2051 2.61928 0.757385 3.17157 0.757385H10.2426Z" fill="currentColor"></path></svg> </a> </li> </ul> </div> </div> </div> </div> <div class="w-full px-6 py-6 border-t border-primary-surface astro-3ef6ksr2"> <div class="flex flex-col gap-5 astro-3ef6ksr2"> <div class="flex items-center gap-2 w-full gap-3 astro-3ef6ksr2"><a target="_blank" rel="noopener noreferrer" href="https://platform.openai.com/login" class="_Button_6dmow_1 not-prose flex-1 justify-center" data-color="primary" data-variant="solid" data-pill="" data-size="md"><span class="_ButtonInner_6dmow_4"><span class="">API Dashboard</span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" class="shrink-0"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></span></a></div> <div class="flex flex-wrap items-center gap-4 text-sm text-gray-700 dark:text-gray-300 astro-3ef6ksr2">  </div> </div> </div> </div> </div>  <script>
  const MOBILE_NAV_PERSIST_KEY = "mobile-nav:restore-open";

  const readPersistedMobileNavOpen = () => {
    try {
      return sessionStorage.getItem(MOBILE_NAV_PERSIST_KEY) === "true";
    } catch {
      return false;
    }
  };

  const setPersistedMobileNavOpen = (isOpen) => {
    try {
      if (isOpen) {
        sessionStorage.setItem(MOBILE_NAV_PERSIST_KEY, "true");
      } else {
        sessionStorage.removeItem(MOBILE_NAV_PERSIST_KEY);
      }
    } catch {}
  };

  function initializeMobileNavigation() {
    const drawer = document.getElementById("drawer");
    const drawerButton = document.getElementById("header-drawer-button");

    if (
      !drawer ||
      !drawerButton ||
      drawer.dataset.mobileNavInitialized === "true"
    ) {
      return;
    }

    const navTabElements = Array.from(
      drawer.querySelectorAll("[data-mobile-nav-tab]")
    );
    const defaultSearchPlaceholder =
      drawer.dataset.defaultSearchPlaceholder || "Search the site";
    const defaultSearchScope = drawer.dataset.defaultSearchScope || "";
    const headerSearchOverlay = document.getElementById(
      "header-search-overlay"
    );
    const navLinkElements = Array.from(
      drawer.querySelectorAll("[data-mobile-nav-link]")
    );
    const tabPanels = Array.from(
      drawer.querySelectorAll("[data-mobile-nav-content]")
    );
    const isStarlightApiReferenceRoute =
      window.location.pathname === "/api/reference" ||
      window.location.pathname.startsWith("/api/reference/");
    const shouldRestoreDrawerOpen =
      matchMedia("(max-width: 50rem)").matches &&
      !isStarlightApiReferenceRoute &&
      readPersistedMobileNavOpen();

    let activeTabId =
      drawer.dataset.defaultTabId ||
      navTabElements.find((tab) => tab.dataset.selected === "true")?.dataset
        .tabId ||
      null;

    const updateSelectedOption = (tabId) => {
      let selectedLabel = "";
      let selectedPlaceholder = "";
      let selectedScope = "";

      navTabElements.forEach((tab) => {
        const isSelected = tab.dataset.tabId === tabId;
        tab.dataset.selected = isSelected ? "true" : "false";
        tab.setAttribute("aria-selected", isSelected ? "true" : "false");

        if (isSelected && !selectedLabel) {
          selectedLabel = tab.dataset.label || tab.textContent?.trim() || "";
        }

        if (isSelected && !selectedPlaceholder) {
          selectedPlaceholder = tab.dataset.searchPlaceholder || "";
        }

        if (isSelected && !selectedScope) {
          selectedScope = tab.dataset.searchScope || "";
        }
      });

      if (!selectedLabel && navTabElements[0]) {
        selectedLabel =
          navTabElements[0].dataset.label ||
          navTabElements[0].textContent?.trim() ||
          "";
      }

      if (!selectedPlaceholder && navTabElements[0]) {
        selectedPlaceholder = navTabElements[0].dataset.searchPlaceholder || "";
      }

      if (!selectedScope && navTabElements[0]) {
        selectedScope = navTabElements[0].dataset.searchScope || "";
      }

      const nextPlaceholder = selectedPlaceholder || defaultSearchPlaceholder;
      const nextScope = selectedScope || defaultSearchScope;
      const updatePlaceholder = (container) => {
        if (!container) return;
        const input = container.querySelector("[data-site-search-input]");
        if (input instanceof HTMLInputElement) {
          input.placeholder = nextPlaceholder;
        }
      };
      const updateScope = (container) => {
        if (!container) return;
        const target = container.querySelector("[data-site-search-root]");
        if (!target) return;
        target.setAttribute("data-scope", nextScope);
        target.dispatchEvent(new CustomEvent("site-search:update"));
      };
      updatePlaceholder(drawer);
      updatePlaceholder(headerSearchOverlay);
      updateScope(drawer);
      updateScope(headerSearchOverlay);
    };

    const activeVariantByTabId = new Map();

    const getTabLabel = (tabId) => {
      return (
        navTabElements.find((tab) => tab.dataset.tabId === tabId)?.dataset
          .label || ""
      );
    };

    const updatePanelBreadcrumb = (panel, tabId, contextLabel) => {
      const breadcrumb = panel.querySelector("[data-mobile-breadcrumb]");
      const parent = panel.querySelector("[data-mobile-breadcrumb-parent]");
      const childWrapper = panel.querySelector(
        "[data-mobile-breadcrumb-child-wrapper]"
      );
      const child = panel.querySelector("[data-mobile-breadcrumb-child]");
      const contextOptions = panel.querySelector(
        "[data-mobile-context-options]"
      );

      if (contextOptions) {
        contextOptions.dataset.contextActive = contextLabel ? "true" : "false";
      }

      if (!breadcrumb || !parent || !childWrapper || !child) {
        return;
      }

      const tabLabel = getTabLabel(tabId);
      parent.textContent = tabLabel;

      if (!contextLabel) {
        breadcrumb.setAttribute("hidden", "true");
        childWrapper.setAttribute("hidden", "true");
        child.textContent = "";
        return;
      }

      breadcrumb.removeAttribute("hidden");
      childWrapper.removeAttribute("hidden");
      child.textContent = contextLabel;
    };

    const selectVariantForPanel = (panel, tabId, variantId) => {
      if (!variantId) {
        updatePanelBreadcrumb(panel, tabId, "");
        return;
      }

      const contextOptions = Array.from(
        panel.querySelectorAll("[data-mobile-context-option]")
      );
      let selectedContextLabel = "";

      contextOptions.forEach((option) => {
        const isSelected = option.dataset.contextId === variantId;
        option.dataset.selected = isSelected ? "true" : "false";
        if (isSelected) {
          selectedContextLabel = option.dataset.contextLabel || "";
        }
      });

      const variantSections = Array.from(
        panel.querySelectorAll("[data-mobile-nav-variant-content]")
      );
      variantSections.forEach((section) => {
        const isSelected = section.dataset.variantId === variantId;
        if (isSelected) {
          section.removeAttribute("hidden");
        } else {
          section.setAttribute("hidden", "true");
        }
      });

      updatePanelBreadcrumb(panel, tabId, selectedContextLabel);
      activeVariantByTabId.set(tabId, variantId);
    };

    const activateTab = (tabId) => {
      if (!tabId) return;
      activeTabId = tabId;
      updateSelectedOption(tabId);

      tabPanels.forEach((panel) => {
        const panelTabId = panel.getAttribute("data-tab-id");
        const isActive = panelTabId === tabId;
        if (isActive) {
          panel.removeAttribute("hidden");
          const defaultVariantId = panel.getAttribute(
            "data-default-variant-id"
          );
          const nextVariantId =
            activeVariantByTabId.get(tabId) ||
            defaultVariantId ||
            panel.querySelector("[data-mobile-nav-variant-content]")?.dataset
              .variantId ||
            "";
          selectVariantForPanel(panel, tabId, nextVariantId);
        } else {
          panel.setAttribute("hidden", "true");
        }
      });
    };

    const closeDrawer = () => {
      drawer.classList.remove("open");
      drawerButton.classList.remove("open");
      drawerButton.setAttribute("aria-expanded", "false");
      setPersistedMobileNavOpen(false);
    };

    const openDrawer = () => {
      drawer.classList.add("open");
      drawerButton.classList.add("open");
      drawerButton.setAttribute("aria-expanded", "true");
      if (activeTabId) {
        activateTab(activeTabId);
      }
    };

    const toggleDrawer = () => {
      if (drawer.classList.contains("open")) {
        closeDrawer();
      } else {
        openDrawer();
      }
    };

    const handleTabSelection = (tab) => {
      const hasNav = tab.dataset.hasNav === "true";
      const href = tab.dataset.href;
      const tabId = tab.dataset.tabId;

      if (!tabId) {
        return;
      }

      if (!hasNav && href) {
        setPersistedMobileNavOpen(true);
        window.location.href = href;
        return;
      }

      activateTab(tabId);
    };

    drawerButton.addEventListener("click", toggleDrawer);

    navTabElements.forEach((tab) => {
      tab.addEventListener("click", () => {
        handleTabSelection(tab);
      });

      tab.addEventListener("keydown", (event) => {
        if (!navTabElements.length) return;

        const currentIndex = navTabElements.indexOf(tab);

        if (event.key === "ArrowRight") {
          event.preventDefault();
          const nextIndex = (currentIndex + 1) % navTabElements.length;
          navTabElements[nextIndex]?.focus();
        } else if (event.key === "ArrowLeft") {
          event.preventDefault();
          const prevIndex =
            (currentIndex - 1 + navTabElements.length) % navTabElements.length;
          navTabElements[prevIndex]?.focus();
        } else if (event.key === "Home") {
          event.preventDefault();
          navTabElements[0]?.focus();
        } else if (event.key === "End") {
          event.preventDefault();
          navTabElements[navTabElements.length - 1]?.focus();
        } else if (
          event.key === "Enter" ||
          event.key === " " ||
          event.key === "Space" ||
          event.key === "Spacebar"
        ) {
          event.preventDefault();
          handleTabSelection(tab);
        } else if (event.key === "Escape") {
          event.preventDefault();
          closeDrawer();
          drawerButton.focus();
        }
      });
    });

    tabPanels.forEach((panel) => {
      const tabId = panel.getAttribute("data-tab-id") || "";
      const contextOptions = Array.from(
        panel.querySelectorAll("[data-mobile-context-option]")
      );

      contextOptions.forEach((option) => {
        option.addEventListener("click", () => {
          const contextHref = option.dataset.contextHref;
          if (
            contextHref &&
            contextHref.startsWith("/api/reference") &&
            tabId
          ) {
            closeDrawer();
            window.location.href = contextHref;
            return;
          }

          const variantId = option.dataset.contextId;
          if (!variantId || !tabId) {
            return;
          }

          selectVariantForPanel(panel, tabId, variantId);
        });
      });
    });

    navLinkElements.forEach((link) => {
      link.addEventListener("click", () => {
        closeDrawer();
      });
    });

    const mobileSearch = drawer.querySelector("[data-mobile-search]");
    mobileSearch?.addEventListener("click", (event) => {
      const target = event.target;
      if (target instanceof Element) {
        const anchor = target.closest("a[href]");
        if (anchor) {
          closeDrawer();
        }
      }
    });

    mobileSearch?.addEventListener("focusin", (event) => {
      const target = event.target;
      if (!(target instanceof HTMLInputElement) || target.type !== "text") {
        return;
      }
      closeDrawer();
      window.requestAnimationFrame(() => {
        if (document.activeElement === target) {
          target.blur();
        }
        document.dispatchEvent(
          new CustomEvent("header:open-search", {
            detail: {
              trigger: target,
              variant: "mobile",
            },
          })
        );
      });
    });

    drawer.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        closeDrawer();
        drawerButton.focus();
      }
    });

    drawer.dataset.mobileNavInitialized = "true";
    if (activeTabId) {
      activateTab(activeTabId);
    }

    if (shouldRestoreDrawerOpen) {
      openDrawer();
      setPersistedMobileNavOpen(false);
    }
  }

  function initializeHeaderSearch() {
    const overlay = document.getElementById("header-search-overlay");
    if (!overlay) {
      return;
    }

    const getSearchButtons = () =>
      Array.from(document.querySelectorAll("[data-header-search-button]"));

    const closeButtons = overlay.querySelectorAll("[data-header-search-close]");
    const dismissTarget = overlay.querySelector("[data-header-search-dismiss]");
    const panel = overlay.querySelector("[data-header-search-panel]");
    const overlayMobileClass = "header-search-overlay--mobile";
    const panelMobileClass = "header-search-panel--mobile";
    let lastTrigger = null;
    let lastVariant = null;

    const setExpandedState = (isOpen) => {
      const expanded = isOpen ? "true" : "false";
      getSearchButtons().forEach((button) => {
        button.setAttribute("aria-expanded", expanded);
        button.setAttribute("data-active", expanded);
      });
      overlay.dataset.open = expanded;
      overlay.setAttribute("aria-hidden", isOpen ? "false" : "true");
    };

    const focusSearchInput = () => {
      window.requestAnimationFrame(() => {
        const input = overlay.querySelector("[data-site-search-input]");
        if (input) {
          input.focus();
          input.select();
        }
      });
    };

    const openOverlay = (trigger, options = {}) => {
      lastTrigger = trigger ?? document.activeElement;
      const variant = options.variant ?? null;
      lastVariant = typeof variant === "string" ? variant : null;
      overlay.classList.remove("hidden");
      overlay.classList.add("flex");
      const isMobileVariant = lastVariant === "mobile";
      if (isMobileVariant) {
        overlay.dataset.variant = "mobile";
      } else {
        delete overlay.dataset.variant;
      }
      overlay.classList.toggle(overlayMobileClass, isMobileVariant);
      panel?.classList.toggle(panelMobileClass, isMobileVariant);
      document.documentElement.classList.add("has-header-search-open");
      setExpandedState(true);
      focusSearchInput();
    };

    const closeOverlay = () => {
      overlay.classList.add("hidden");
      overlay.classList.remove("flex");
      document.documentElement.classList.remove("has-header-search-open");
      overlay.classList.remove(overlayMobileClass);
      panel?.classList.remove(panelMobileClass);
      delete overlay.dataset.variant;
      setExpandedState(false);
      if (lastTrigger instanceof HTMLElement) {
        if (
          lastVariant === "mobile" &&
          typeof lastTrigger.blur === "function"
        ) {
          lastTrigger.blur();
        } else if (lastVariant !== "mobile") {
          lastTrigger.focus();
        }
      }
      lastTrigger = null;
      lastVariant = null;
    };

    const bindSearchButtons = () => {
      getSearchButtons().forEach((button) => {
        if (button.dataset.searchButtonInitialized === "true") {
          return;
        }

        button.addEventListener("click", (event) => {
          event.preventDefault();
          openOverlay(button);
        });

        button.dataset.searchButtonInitialized = "true";
      });
    };

    if (overlay.dataset.searchInitialized !== "true") {
      closeButtons.forEach((button) => {
        button.addEventListener("click", () => {
          closeOverlay();
        });
      });

      overlay.addEventListener("click", (event) => {
        if (event.target === overlay) {
          closeOverlay();
        }
      });

      dismissTarget?.addEventListener("click", closeOverlay);

      const handleKeydown = (event) => {
        const key = "key" in event ? event.key : undefined;
        const isShortcut =
          !!key &&
          key.toLowerCase() === "k" &&
          (event.metaKey || event.ctrlKey);

        if (isShortcut) {
          event.preventDefault();
          const buttons = getSearchButtons();
          openOverlay(buttons[0] ?? null);
          return;
        }

        if (key === "Escape" && overlay.dataset.open === "true") {
          event.preventDefault();
          closeOverlay();
        }
      };

      document.addEventListener("keydown", handleKeydown);

      document.addEventListener("header:open-search", (event) => {
        const detail =
          event instanceof CustomEvent && typeof event.detail === "object"
            ? event.detail
            : {};
        const trigger =
          detail && detail.trigger instanceof HTMLElement
            ? detail.trigger
            : null;
        openOverlay(trigger, detail);
      });

      document.addEventListener("astro:before-swap", () => {
        if (overlay.dataset.open === "true") {
          closeOverlay();
        }
      });

      overlay.dataset.searchInitialized = "true";
    }

    bindSearchButtons();
  }

  const handleAfterSwap = () => {
    initializeMobileNavigation();
    window.requestAnimationFrame(() => {
      initializeHeaderSearch();
    });
  };

  document.addEventListener("astro:after-swap", handleAfterSwap);
  handleAfterSwap();
</script> <div data-docs-agent-page class="min-h-dvh"> <div class="flex pt-16"> <div class="hidden md:flex md:flex-col w-[218px] px-3 pb-6 pt-2 md:fixed md:top-16 md:bottom-0 md:z-40 bg-surface dark:bg-black astro-73gi4scu" data-left-nav-container><nav class="flex-1 overflow-y-auto overflow-x-visible astro-73gi4scu" data-left-nav data-left-nav-id="/api/docs"><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Get started</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/quickstart" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Quickstart </span>   </a> </li><li> <a href="/api/docs/models" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Models </span>   </a> </li><li> <a href="/api/docs/pricing" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Pricing </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <a href="/api/docs/libraries" class="flex-1 min-w-0 "> <span class="line-clamp-2 "> SDKs and CLI </span>  </a>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/libraries" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> OpenAI SDK </span>   </a> </li><li> <a href="/api/docs/guides/agents" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Agents SDK </span>   </a> </li><li> <a href="/api/docs/libraries/openai-cli" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> OpenAI CLI </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/latest-model" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Latest: GPT-5.5 </span>   </a> </li><li> <a href="/api/docs/guides/prompt-guidance" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Prompt guidance </span>   </a> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Core concepts</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/text" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Text generation </span>   </a> </li><li> <a href="/api/docs/guides/code-generation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Code generation </span>   </a> </li><li> <a href="/api/docs/guides/images-vision" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Images and vision </span>   </a> </li><li> <a href="/api/docs/guides/audio" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Audio and speech </span>   </a> </li><li> <a href="/api/docs/guides/structured-outputs" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Structured output </span>   </a> </li><li> <a href="/api/docs/guides/function-calling" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Function calling </span>   </a> </li><li> <a href="/api/docs/guides/migrate-to-responses" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Responses API </span>   </a> </li><li> <a href="/api/docs/guides/tools" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Using tools </span>   </a> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Agents SDK</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/agents" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/agents/quickstart" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Quickstart </span>   </a> </li><li> <a href="/api/docs/guides/agents/define-agents" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Agent definitions </span>   </a> </li><li> <a href="/api/docs/guides/agents/models" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Models and providers </span>   </a> </li><li> <a href="/api/docs/guides/agents/running-agents" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Running agents </span>   </a> </li><li> <a href="/api/docs/guides/agents/sandboxes" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Sandbox agents </span>   </a> </li><li> <a href="/api/docs/guides/agents/orchestration" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Orchestration </span>   </a> </li><li> <a href="/api/docs/guides/agents/guardrails-approvals" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Guardrails </span>   </a> </li><li> <a href="/api/docs/guides/agents/results" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Results and state </span>   </a> </li><li> <a href="/api/docs/guides/agents/integrations-observability" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Integrations and observability </span>   </a> </li><li> <a href="/api/docs/guides/agent-evals" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Evaluate agent workflows </span>   </a> </li><li> <a href="/api/docs/guides/voice-agents" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Voice agents </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Agent Builder</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/agent-builder" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/node-reference" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Node reference </span>   </a> </li><li> <a href="/api/docs/guides/agent-builder-safety" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Safety in building agents </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">ChatKit</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 ml-2"> <li> <a href="/api/docs/guides/chatkit" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/chatkit-themes" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Customize </span>   </a> </li><li> <a href="/api/docs/guides/chatkit-widgets" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Widgets </span>   </a> </li><li> <a href="/api/docs/guides/chatkit-actions" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Actions </span>   </a> </li><li> <a href="/api/docs/guides/custom-chatkit" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Advanced integrations </span>   </a> </li> </ul> </details> </li> </ul> </details> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Tools</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/tools-web-search" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Web search </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <a href="/api/docs/guides/tools-connectors-mcp" class="flex-1 min-w-0 "> <span class="line-clamp-2 "> MCP and Connectors </span>  </a>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/secure-mcp-tunnels" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Secure MCP Tunnel </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/tools-skills" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Skills </span>   </a> </li><li> <a href="/api/docs/guides/tools-shell" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Shell </span>   </a> </li><li> <a href="/api/docs/guides/tools-computer-use" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Computer use </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">File search and retrieval</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/tools-file-search" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> File search </span>   </a> </li><li> <a href="/api/docs/guides/retrieval" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Retrieval </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/tools-tool-search" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Tool search </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">More tools</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/tools-apply-patch" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Apply Patch </span>   </a> </li><li> <a href="/api/docs/guides/tools-local-shell" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Local shell </span>   </a> </li><li> <a href="/api/docs/guides/tools-image-generation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Image generation </span>   </a> </li><li> <a href="/api/docs/guides/tools-code-interpreter" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Code interpreter </span>   </a> </li> </ul> </details> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Run and scale</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/conversation-state" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Conversation state </span>   </a> </li><li> <a href="/api/docs/guides/background" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Background mode </span>   </a> </li><li> <a href="/api/docs/guides/streaming-responses" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Streaming </span>   </a> </li><li> <a href="/api/docs/guides/websocket-mode" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> WebSocket mode </span>   </a> </li><li> <a href="/api/docs/guides/webhooks" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Webhooks </span>   </a> </li><li> <a href="/api/docs/guides/file-inputs" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> File inputs </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Context management</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/compaction" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Compaction </span>   </a> </li><li> <a href="/api/docs/guides/token-counting" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Counting tokens </span>   </a> </li><li> <a href="/api/docs/guides/prompt-caching" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Prompt caching </span>   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Prompting</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/prompting" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/prompt-engineering" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Prompt engineering </span>   </a> </li><li> <a href="/api/docs/guides/citation-formatting" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Citation formatting </span>   </a> </li><li> <a href="/api/docs/guides/prompting/migrate-from-prompt-object" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Migration guide </span>   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Reasoning</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/reasoning" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Reasoning models </span>   </a> </li><li> <a href="/api/docs/guides/reasoning-best-practices" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Reasoning best practices </span>   </a> </li> </ul> </details> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Evaluation</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/evaluation-getting-started" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Getting started </span>   </a> </li><li> <a href="/api/docs/guides/evals" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Working with evals </span>   </a> </li><li> <a href="/api/docs/guides/prompt-optimizer" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Prompt optimizer </span>   </a> </li><li> <a href="/api/docs/guides/external-models" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> External models </span>   </a> </li><li> <a href="/api/docs/guides/red-teaming" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Red teaming </span>   </a> </li><li> <a href="/api/docs/guides/evaluation-best-practices" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Best practices </span>   </a> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Realtime and audio</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/realtime" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/voice-agents" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Voice agents </span>   </a> </li><li> <a href="/api/docs/guides/realtime-translation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Live translation </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Transcription</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/realtime-transcription" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Realtime transcription </span>   </a> </li><li> <a href="/api/docs/guides/speech-to-text" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Speech to text </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/text-to-speech" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Speech generation </span>   </a> </li><li> <a href="/api/docs/guides/realtime-models-prompting" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Realtime prompting guide </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Connection methods</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/realtime-webrtc" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> WebRTC </span>   </a> </li><li> <a href="/api/docs/guides/realtime-websocket" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> WebSocket </span>   </a> </li><li> <a href="/api/docs/guides/realtime-sip" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> SIP </span>   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Realtime sessions</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/realtime-conversations" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Managing conversations </span>   </a> </li><li> <a href="/api/docs/guides/realtime-vad" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Voice activity detection </span>   </a> </li><li> <a href="/api/docs/guides/realtime-mcp" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Realtime with tools </span>   </a> </li><li> <a href="/api/docs/guides/realtime-server-controls" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Webhooks and server-side controls </span>   </a> </li><li> <a href="/api/docs/guides/realtime-costs" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Managing costs </span>   </a> </li> </ul> </details> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Model optimization</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/model-optimization" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Optimization cycle </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Fine-tuning</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/supervised-fine-tuning" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Supervised fine-tuning </span>   </a> </li><li> <a href="/api/docs/guides/vision-fine-tuning" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Vision fine-tuning </span>   </a> </li><li> <a href="/api/docs/guides/direct-preference-optimization" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Direct preference optimization </span>   </a> </li><li> <a href="/api/docs/guides/reinforcement-fine-tuning" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Reinforcement fine-tuning </span>   </a> </li><li> <a href="/api/docs/guides/rft-use-cases" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> RFT use cases </span>   </a> </li><li> <a href="/api/docs/guides/fine-tuning-best-practices" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Best practices </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/graders" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Graders </span>   </a> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Specialized models</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/image-generation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Image generation </span>   </a> </li><li> <a href="/api/docs/guides/video-generation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Video generation </span>   </a> </li><li> <a href="/api/docs/guides/deep-research" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Deep research </span>   </a> </li><li> <a href="/api/docs/guides/embeddings" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Embeddings </span>   </a> </li><li> <a href="/api/docs/guides/moderation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Moderation </span>   </a> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Going live</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="/api/docs/guides/production-best-practices" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Production best practices </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <a href="/api/docs/guides/workload-identity-federation" class="flex-1 min-w-0 "> <span class="line-clamp-2 "> Workload identity federation </span>  </a>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/workload-identity-federation" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/kubernetes" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Kubernetes </span>   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/aws" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> AWS </span>   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/microsoft-azure" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Microsoft Azure </span>   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/google-cloud" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Google Cloud </span>   </a> </li><li> <a href="/api/docs/guides/workload-identity-federation/github-actions" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> GitHub Actions </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/deployment-checklist" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Deployment checklist </span>   </a> </li><li> <a href="/api/docs/guides/amazon-bedrock" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Amazon Bedrock </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Latency optimization</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/latency-optimization" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/predicted-outputs" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Predicted Outputs </span>   </a> </li><li> <a href="/api/docs/guides/priority-processing" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Priority processing </span>   </a> </li> </ul> </details> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Cost optimization</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/cost-optimization" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Overview </span>   </a> </li><li> <a href="/api/docs/guides/batch" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Batch </span>   </a> </li><li> <a href="/api/docs/guides/flex-processing" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Flex processing </span>   </a> </li> </ul> </details> </li><li> <a href="/api/docs/guides/optimizing-llm-accuracy" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Accuracy optimization </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Safety</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/guides/safety-best-practices" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Safety best practices </span>   </a> </li><li> <a href="/api/docs/guides/safety-checks" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Safety checks </span>   </a> </li><li> <a href="/api/docs/guides/safety-checks/cybersecurity" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Cybersecurity checks </span>   </a> </li><li> <a href="/api/docs/guides/safety-checks/under-18-api-guidance" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Under 18 API Guidance </span>   </a> </li> </ul> </details> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Legacy APIs</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">Assistants API</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/assistants/migration" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Migration guide </span>   </a> </li><li> <a href="/api/docs/assistants/deep-dive" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Deep dive </span>   </a> </li><li> <a href="/api/docs/assistants/tools" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Tools </span>   </a> </li> </ul> </details> </li> </ul></div><div class=" astro-73gi4scu"><h3 class="mb-2 ml-3 mt-6 text-sm font-semibold select-none astro-73gi4scu">Resources</h3><ul class="flex flex-col gap-0.25 text-sm text-default w-full"> <li> <a href="https://openai.com/policies" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover flex items-center justify-between gap-1" target="_blank" rel="noopener noreferrer"> <span class="line-clamp-2 min-w-0 flex-1"> Terms and policies </span> <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-2 h-2 inline-block shrink-0 text-current " ><path d="M10.2426 0.757385C10.7949 0.757385 11.2426 1.2051 11.2426 1.75738V8.82845C11.2426 9.38074 10.7949 9.82845 10.2426 9.82845C9.69035 9.82845 9.24264 9.38074 9.24264 8.82845V4.1716L2.46446 10.9498C2.07394 11.3403 1.44077 11.3403 1.05025 10.9498C0.659724 10.5592 0.659723 9.92608 1.05025 9.53556L7.82842 2.75739H3.17157C2.61928 2.75739 2.17157 2.30967 2.17157 1.75738C2.17157 1.2051 2.61928 0.757385 3.17157 0.757385H10.2426Z" fill="currentColor"></path></svg>  </a> </li><li> <a href="/api/docs/changelog" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Changelog </span>   </a> </li><li> <a href="/api/docs/guides/your-data" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Your data </span>   </a> </li><li> <a href="/api/docs/guides/rbac" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Permissions </span>   </a> </li><li> <a href="/api/docs/guides/rate-limits" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Rate limits </span>   </a> </li><li> <a href="/api/docs/guides/admin-apis" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Admin APIs </span>   </a> </li><li> <a href="/api/docs/deprecations" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Deprecations </span>   </a> </li><li> <a href="/api/docs/mcp" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> MCP for deep research </span>   </a> </li><li> <a href="/api/docs/guides/developer-mode" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Developer mode </span>   </a> </li><li> <details class="group"> <summary class="list-none cursor-pointer select-none px-3 py-1.5 w-full rounded-[8px] transition-colors text-default pl-5 flex items-center justify-between hover:text-default hover:bg-primary-ghost-hover"> <span class="flex-1 min-w-0 line-clamp-2">ChatGPT Actions</span>  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block ml-1 text-current group-open:rotate-90 transition-transform duration-150  " aria-hidden="true" ><path d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="currentColor"></path></svg> </summary> <ul class="mt-1 ml-3 max-w-[calc(100%-theme(spacing.3))] flex flex-col gap-0.5 text-sm text-default w-full mb-2 "> <li> <a href="/api/docs/actions/introduction" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Introduction </span>   </a> </li><li> <a href="/api/docs/actions/getting-started" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Getting started </span>   </a> </li><li> <a href="/api/docs/actions/actions-library" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Actions library </span>   </a> </li><li> <a href="/api/docs/actions/authentication" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Authentication </span>   </a> </li><li> <a href="/api/docs/actions/production" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Production </span>   </a> </li><li> <a href="/api/docs/actions/data-retrieval" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Data retrieval </span>   </a> </li><li> <a href="/api/docs/actions/sending-files" class="px-3 py-1.5 w-full rounded-[8px] transition-colors text-default block hover:text-default hover:bg-primary-ghost-hover "> <span class="line-clamp-2 "> Sending files </span>   </a> </li> </ul> </details> </li> </ul></div></nav></div><script>
  const NAV_SELECTOR = "nav[data-left-nav]";
  const STORAGE_PREFIX = "left-nav-scroll:";
  const INITIALIZED_ATTRIBUTE = "data-left-nav-scroll-initialized";

  const isStorageAvailable = (() => {
    try {
      const storageKey = `${STORAGE_PREFIX}__test__`;
      sessionStorage.setItem(storageKey, "1");
      sessionStorage.removeItem(storageKey);
      return true;
    } catch (error) {
      return false;
    }
  })();

  const getNav = () => document.querySelector(NAV_SELECTOR);

  const getStorageKey = (nav) =>
    `${STORAGE_PREFIX}${nav.dataset.leftNavId ?? "default"}`;

  const restoreScrollPosition = (nav) => {
    if (!isStorageAvailable) return;
    const storedValue = sessionStorage.getItem(getStorageKey(nav));
    if (storedValue !== null) {
      nav.scrollTop = Number(storedValue);
    }
  };

  const saveScrollPosition = (nav) => {
    if (!isStorageAvailable) return;
    sessionStorage.setItem(getStorageKey(nav), String(nav.scrollTop));
  };

  const setupNav = () => {
    const nav = getNav();
    if (!nav || nav.getAttribute(INITIALIZED_ATTRIBUTE) === "true") return;

    restoreScrollPosition(nav);

    nav.addEventListener(
      "scroll",
      () => {
        saveScrollPosition(nav);
      },
      { passive: true }
    );

    nav.setAttribute(INITIALIZED_ATTRIBUTE, "true");
  };

  const persistScrollPosition = () => {
    const nav = getNav();
    if (!nav) return;
    saveScrollPosition(nav);
  };

  const initialize = () => {
    setupNav();
    const nav = getNav();
    if (!nav) return;
    restoreScrollPosition(nav);
  };

  window.addEventListener("pageshow", initialize);
  document.addEventListener("astro:page-load", initialize);
  document.addEventListener("astro:after-swap", initialize);

  document.addEventListener("astro:before-swap", persistScrollPosition);
  window.addEventListener("beforeunload", persistScrollPosition);

  initialize();
</script> <main class="min-w-0 flex-1 md:pl-[240px]">  <astro-island uid="Z21Wbso" prefix="r1" component-url="/_astro/PlatformOverview.react.gqFkg7pE.js" component-export="default" renderer-url="/_astro/client.BWriqC1y.js" props="{}" ssr client="load" opts="{&quot;name&quot;:&quot;PlatformOverview&quot;,&quot;value&quot;:true}" await-children><section class="mx-auto w-full max-w-6xl px-4 py-8 md:px-12 xl:px-4"><div class="flex flex-col gap-6 md:gap-7"><div><h1 class="m-0 heading-2xl md:heading-2xl text-[var(--color-text-emphasis)]">API Platform</h1></div><div class="rounded-2xl bg-surface-secondary px-6 py-4 md:px-8 md:py-5"><div class="flex flex-col gap-6 lg:flex-row lg:items-center"><div class="flex max-w-sm flex-col gap-3"><h2 class="text-lg font-semibold text-[var(--color-text-emphasis)]">Developer quickstart</h2><p class="text-sm text-[var(--color-text-secondary)]">Make your first API request in minutes. Learn the basics of the OpenAI platform.</p><div class="flex flex-wrap gap-2 pt-1"><a href="/api/docs/quickstart" class="_Button_6dmow_1" data-color="primary" data-variant="solid" data-pill="" data-size="lg"><span class="_ButtonInner_6dmow_4">Get started</span></a><a target="_blank" rel="noopener noreferrer" href="https://platform.openai.com/api-keys" class="_Button_6dmow_1" data-color="secondary" data-variant="soft" data-pill="" data-size="lg"><span class="_ButtonInner_6dmow_4">Create API key</span></a></div></div><div class="quickstart-code-sample w-full flex-1 rounded-xl bg-surface-secondary [&amp;_.code-sample]:my-0"><div class="code-sample not-prose _root_1x2h7_2 _flush_1x2h7_16 light-mode"><div class="_header_1x2h7_34"><div class="_title_1x2h7_42 body-small"></div><div class="exclude-from-copy"><span class="_SelectControl_x887o_1" role="button" tabindex="0" data-variant="ghost" data-size="sm" data-selected="true" aria-disabled="false" id="select-trigger-_r1R_9i_" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_r1R_1pi_" data-state="closed"><span class="_TriggerText_x887o_510"><span id="_r1R_7pi_">javascript</span></span><div class="_IndicatorWrapper_x887o_520"><svg width="1em" height="1em" viewBox="0 0 10 16" fill="currentColor" class="_DropdownIcon_x887o_475"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.34151 0.747423C4.71854 0.417526 5.28149 0.417526 5.65852 0.747423L9.65852 4.24742C10.0742 4.61111 10.1163 5.24287 9.75259 5.6585C9.38891 6.07414 8.75715 6.11626 8.34151 5.75258L5.00001 2.82877L1.65852 5.75258C1.24288 6.11626 0.61112 6.07414 0.247438 5.6585C-0.116244 5.24287 -0.0741267 4.61111 0.34151 4.24742L4.34151 0.747423ZM0.246065 10.3578C0.608879 9.94139 1.24055 9.89795 1.65695 10.2608L5.00001 13.1737L8.34308 10.2608C8.75948 9.89795 9.39115 9.94139 9.75396 10.3578C10.1168 10.7742 10.0733 11.4058 9.65695 11.7687L5.65695 15.2539C5.28043 15.582 4.7196 15.582 4.34308 15.2539L0.343082 11.7687C-0.0733128 11.4058 -0.116749 10.7742 0.246065 10.3578Z"></path></svg></div></span></div><button type="button" class="_Button_6dmow_1 _copyButton_1x2h7_168" data-color="primary" data-variant="ghost" data-size="sm" data-gutter-size="xs" data-icon-size="sm"><span class="_ButtonInner_6dmow_4"><span class="block relative w-[var(--button-icon-size)] h-[var(--button-icon-size)]" data-transition-position="absolute" style="--tg-will-change:transform, opacity;--tg-enter-opacity:1;--tg-enter-transform:scale(1);--tg-enter-filter:none;--tg-enter-duration:300ms;--tg-enter-delay:150ms;--tg-enter-timing-function:var(--cubic-enter);--tg-exit-opacity:0;--tg-exit-transform:scale(0.6);--tg-exit-filter:none;--tg-exit-duration:150ms;--tg-exit-delay:0ms;--tg-exit-timing-function:var(--cubic-exit);--tg-initial-opacity:0;--tg-initial-transform:scale(0.6);--tg-initial-filter:none"><span class="_TransitionItem_1lpir_1 _TransitionGroupChild_1d6a5_1"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12.7587 2H16.2413C17.0463 1.99999 17.7106 1.99998 18.2518 2.04419C18.8139 2.09012 19.3306 2.18868 19.816 2.43597C20.5686 2.81947 21.1805 3.43139 21.564 4.18404C21.8113 4.66937 21.9099 5.18608 21.9558 5.74817C22 6.28936 22 6.95372 22 7.75868V11.2413C22 12.0463 22 12.7106 21.9558 13.2518C21.9099 13.8139 21.8113 14.3306 21.564 14.816C21.1805 15.5686 20.5686 16.1805 19.816 16.564C19.3306 16.8113 18.8139 16.9099 18.2518 16.9558C17.8906 16.9853 17.4745 16.9951 16.9984 16.9984C16.9951 17.4745 16.9853 17.8906 16.9558 18.2518C16.9099 18.8139 16.8113 19.3306 16.564 19.816C16.1805 20.5686 15.5686 21.1805 14.816 21.564C14.3306 21.8113 13.8139 21.9099 13.2518 21.9558C12.7106 22 12.0463 22 11.2413 22H7.75868C6.95372 22 6.28936 22 5.74818 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43597 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V12.7587C1.99999 11.9537 1.99998 11.2894 2.04419 10.7482C2.09012 10.1861 2.18868 9.66937 2.43597 9.18404C2.81947 8.43139 3.43139 7.81947 4.18404 7.43598C4.66937 7.18868 5.18608 7.09012 5.74817 7.04419C6.10939 7.01468 6.52548 7.00487 7.00162 7.00162C7.00487 6.52548 7.01468 6.10939 7.04419 5.74817C7.09012 5.18608 7.18868 4.66937 7.43598 4.18404C7.81947 3.43139 8.43139 2.81947 9.18404 2.43597C9.66937 2.18868 10.1861 2.09012 10.7482 2.04419C11.2894 1.99998 11.9537 1.99999 12.7587 2ZM9.00176 7L11.2413 7C12.0463 6.99999 12.7106 6.99998 13.2518 7.04419C13.8139 7.09012 14.3306 7.18868 14.816 7.43598C15.5686 7.81947 16.1805 8.43139 16.564 9.18404C16.8113 9.66937 16.9099 10.1861 16.9558 10.7482C17 11.2894 17 11.9537 17 12.7587V14.9982C17.4455 14.9951 17.7954 14.9864 18.089 14.9624C18.5274 14.9266 18.7516 14.8617 18.908 14.782C19.2843 14.5903 19.5903 14.2843 19.782 13.908C19.8617 13.7516 19.9266 13.5274 19.9624 13.089C19.9992 12.6389 20 12.0566 20 11.2V7.8C20 6.94342 19.9992 6.36113 19.9624 5.91104C19.9266 5.47262 19.8617 5.24842 19.782 5.09202C19.5903 4.7157 19.2843 4.40973 18.908 4.21799C18.7516 4.1383 18.5274 4.07337 18.089 4.03755C17.6389 4.00078 17.0566 4 16.2 4H12.8C11.9434 4 11.3611 4.00078 10.911 4.03755C10.4726 4.07337 10.2484 4.1383 10.092 4.21799C9.7157 4.40973 9.40973 4.7157 9.21799 5.09202C9.1383 5.24842 9.07337 5.47262 9.03755 5.91104C9.01357 6.20463 9.00489 6.55447 9.00176 7ZM5.91104 9.03755C5.47262 9.07337 5.24842 9.1383 5.09202 9.21799C4.7157 9.40973 4.40973 9.7157 4.21799 10.092C4.1383 10.2484 4.07337 10.4726 4.03755 10.911C4.00078 11.3611 4 11.9434 4 12.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9624C6.36113 19.9992 6.94342 20 7.8 20H11.2C12.0566 20 12.6389 19.9992 13.089 19.9624C13.5274 19.9266 13.7516 19.8617 13.908 19.782C14.2843 19.5903 14.5903 19.2843 14.782 18.908C14.8617 18.7516 14.9266 18.5274 14.9624 18.089C14.9992 17.6389 15 17.0566 15 16.2V12.8C15 11.9434 14.9992 11.3611 14.9624 10.911C14.9266 10.4726 14.8617 10.2484 14.782 10.092C14.5903 9.7157 14.2843 9.40973 13.908 9.21799C13.7516 9.1383 13.5274 9.07337 13.089 9.03755C12.6389 9.00078 12.0566 9 11.2 9H7.8C6.94342 9 6.36113 9.00078 5.91104 9.03755Z" fill="currentColor"></path></svg></span></span></span></button></div><div class="_body_1x2h7_59 _bodySmall_1x2h7_151 _bodyWithHeader_1x2h7_139"><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="bash" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span></code><span><span>curl https://api.openai.com/v1/responses \
</span></span><span><span>  -H </span><span class="hljs-string">&quot;Content-Type: application/json&quot;</span><span> \
</span></span><span><span>  -H </span><span class="hljs-string">&quot;Authorization: Bearer </span><span class="hljs-string hljs-variable">$OPENAI_API_KEY</span><span class="hljs-string">&quot;</span><span> \
</span></span><span><span>  -d </span><span class="hljs-string">&#x27;{
</span></span><span class="hljs-string">    &quot;model&quot;: &quot;gpt-5.5&quot;,
</span><span class="hljs-string">    &quot;input&quot;: &quot;Write a short bedtime story about a unicorn.&quot;
</span><span class="hljs-string">  }&#x27;</span></code></pre></div><div class="code-block"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="javascript" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span><span class="react-syntax-highlighter-line-number">8
</span><span class="react-syntax-highlighter-line-number">9
</span></code><span><span class="hljs-keyword">import</span><span> OpenAI </span><span class="hljs-keyword">from</span><span> </span><span class="hljs-string">&quot;openai&quot;</span><span>;
</span></span><span><span></span><span class="hljs-keyword">const</span><span> client = </span><span class="hljs-keyword">new</span><span> OpenAI();
</span></span><span>
</span><span><span></span><span class="hljs-keyword">const</span><span> response = </span><span class="hljs-keyword">await</span><span> client.responses.create({
</span></span><span><span>  </span><span class="hljs-attr">model</span><span>: </span><span class="hljs-string">&quot;gpt-5.5&quot;</span><span>,
</span></span><span><span>  </span><span class="hljs-attr">input</span><span>: </span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span>,
</span></span><span>});
</span><span>
</span><span><span></span><span class="hljs-built_in">console</span><span>.log(response.output_text);</span></span></code></pre></div><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="python" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span><span class="react-syntax-highlighter-line-number">8
</span><span class="react-syntax-highlighter-line-number">9
</span></code><span><span class="hljs-keyword">from</span><span> openai </span><span class="hljs-keyword">import</span><span> OpenAI
</span></span><span>client = OpenAI()
</span><span>
</span><span>response = client.responses.create(
</span><span><span>    model=</span><span class="hljs-string">&quot;gpt-5.5&quot;</span><span>,
</span></span><span><span>    </span><span class="hljs-built_in">input</span><span>=</span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span>
</span></span><span>)
</span><span>
</span><span><span></span><span class="hljs-built_in">print</span><span>(response.output_text)</span></span></code></pre></div><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="csharp" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span><span class="react-syntax-highlighter-line-number">8
</span><span class="react-syntax-highlighter-line-number">9
</span><span class="react-syntax-highlighter-line-number">10
</span></code><span><span class="hljs-keyword">using</span><span> OpenAI.Responses;
</span></span><span>
</span><span><span></span><span class="hljs-built_in">string</span><span> apiKey = Environment.GetEnvironmentVariable(</span><span class="hljs-string">&quot;OPENAI_API_KEY&quot;</span><span>)!;
</span></span><span><span></span><span class="hljs-keyword">var</span><span> client = </span><span class="hljs-keyword">new</span><span> OpenAIResponseClient(model: </span><span class="hljs-string">&quot;gpt-5.5&quot;</span><span>, apiKey: apiKey);
</span></span><span>
</span><span>OpenAIResponse response = client.CreateResponse(
</span><span><span>    </span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span>
</span></span><span>);
</span><span>
</span><span>Console.WriteLine(response.GetOutputText());</span></code></pre></div><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="java" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span><span class="react-syntax-highlighter-line-number">8
</span><span class="react-syntax-highlighter-line-number">9
</span><span class="react-syntax-highlighter-line-number">10
</span><span class="react-syntax-highlighter-line-number">11
</span><span class="react-syntax-highlighter-line-number">12
</span><span class="react-syntax-highlighter-line-number">13
</span><span class="react-syntax-highlighter-line-number">14
</span><span class="react-syntax-highlighter-line-number">15
</span><span class="react-syntax-highlighter-line-number">16
</span><span class="react-syntax-highlighter-line-number">17
</span><span class="react-syntax-highlighter-line-number">18
</span></code><span><span class="hljs-keyword">import</span><span> com.openai.client.OpenAIClient;
</span></span><span><span></span><span class="hljs-keyword">import</span><span> com.openai.client.okhttp.OpenAIOkHttpClient;
</span></span><span><span></span><span class="hljs-keyword">import</span><span> com.openai.models.responses.Response;
</span></span><span><span></span><span class="hljs-keyword">import</span><span> com.openai.models.responses.ResponseCreateParams;
</span></span><span>
</span><span><span></span><span class="hljs-keyword">public</span><span> </span><span class="hljs-class hljs-keyword">class</span><span class="hljs-class"> </span><span class="hljs-class hljs-title">Main</span><span class="hljs-class"> </span><span>{
</span></span><span><span>    </span><span class="hljs-function hljs-keyword">public</span><span class="hljs-function"> </span><span class="hljs-function hljs-keyword">static</span><span class="hljs-function"> </span><span class="hljs-function hljs-keyword">void</span><span class="hljs-function"> </span><span class="hljs-function hljs-title">main</span><span class="hljs-function hljs-params">(String[] args)</span><span class="hljs-function"> </span><span>{
</span></span><span>        OpenAIClient client = OpenAIOkHttpClient.fromEnv();
</span><span>
</span><span>        ResponseCreateParams params = ResponseCreateParams.builder()
</span><span><span>                .model(</span><span class="hljs-string">&quot;gpt-5.5&quot;</span><span>)
</span></span><span><span>                .input(</span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span>)
</span></span><span>                .build();
</span><span>
</span><span>        Response response = client.responses().create(params);
</span><span>        System.out.println(response.outputText());
</span><span>    }
</span><span>}</span></code></pre></div><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="go" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span><span class="react-syntax-highlighter-line-number">8
</span><span class="react-syntax-highlighter-line-number">9
</span><span class="react-syntax-highlighter-line-number">10
</span><span class="react-syntax-highlighter-line-number">11
</span><span class="react-syntax-highlighter-line-number">12
</span><span class="react-syntax-highlighter-line-number">13
</span><span class="react-syntax-highlighter-line-number">14
</span><span class="react-syntax-highlighter-line-number">15
</span><span class="react-syntax-highlighter-line-number">16
</span><span class="react-syntax-highlighter-line-number">17
</span><span class="react-syntax-highlighter-line-number">18
</span><span class="react-syntax-highlighter-line-number">19
</span><span class="react-syntax-highlighter-line-number">20
</span><span class="react-syntax-highlighter-line-number">21
</span><span class="react-syntax-highlighter-line-number">22
</span><span class="react-syntax-highlighter-line-number">23
</span><span class="react-syntax-highlighter-line-number">24
</span><span class="react-syntax-highlighter-line-number">25
</span></code><span><span class="hljs-keyword">package</span><span> main
</span></span><span>
</span><span><span></span><span class="hljs-keyword">import</span><span> (
</span></span><span><span>	</span><span class="hljs-string">&quot;context&quot;</span><span>
</span></span><span><span>	</span><span class="hljs-string">&quot;fmt&quot;</span><span>
</span></span><span>
</span><span><span>	</span><span class="hljs-string">&quot;github.com/openai/openai-go/v3&quot;</span><span>
</span></span><span><span>	</span><span class="hljs-string">&quot;github.com/openai/openai-go/v3/responses&quot;</span><span>
</span></span><span>)
</span><span>
</span><span><span></span><span class="hljs-function hljs-keyword">func</span><span class="hljs-function"> </span><span class="hljs-function hljs-title">main</span><span class="hljs-function hljs-params">()</span><span> {
</span></span><span>	client := openai.NewClient()
</span><span>
</span><span>	response, err := client.Responses.New(context.Background(), openai.ResponseNewParams{
</span><span><span>		Model: </span><span class="hljs-string">&quot;gpt-5.5&quot;</span><span>,
</span></span><span>		Input: responses.ResponseNewParamsInputUnion{
</span><span><span>			OfString: openai.String(</span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span>),
</span></span><span>		},
</span><span>	})
</span><span><span>	</span><span class="hljs-keyword">if</span><span> err != </span><span class="hljs-literal">nil</span><span> {
</span></span><span><span>		</span><span class="hljs-built_in">panic</span><span>(err)
</span></span><span>	}
</span><span>
</span><span>	fmt.Println(response.OutputText())
</span><span>}</span></code></pre></div><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="ruby" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span><span class="react-syntax-highlighter-line-number">6
</span><span class="react-syntax-highlighter-line-number">7
</span><span class="react-syntax-highlighter-line-number">8
</span><span class="react-syntax-highlighter-line-number">9
</span><span class="react-syntax-highlighter-line-number">10
</span></code><span><span class="hljs-keyword">require</span><span> </span><span class="hljs-string">&quot;openai&quot;</span><span>
</span></span><span>
</span><span>openai = OpenAI::Client.new
</span><span>
</span><span>response = openai.responses.create(
</span><span><span>  </span><span class="hljs-symbol">model:</span><span> </span><span class="hljs-string">&quot;gpt-5.5&quot;</span><span>,
</span></span><span><span>  </span><span class="hljs-symbol">input:</span><span> </span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span>
</span></span><span>)
</span><span>
</span><span>puts(response.output_text)</span></code></pre></div><div class="code-block hidden"><pre class="hljs syntax-highlighter light-mode _pre_1x2h7_62" data-1p-ignore="true" data-copy-ignore="true"><code data-1p-ignore="true" data-language="bash" style="white-space:pre"><code style="float:left;padding-right:10px"><span class="react-syntax-highlighter-line-number">1
</span><span class="react-syntax-highlighter-line-number">2
</span><span class="react-syntax-highlighter-line-number">3
</span><span class="react-syntax-highlighter-line-number">4
</span><span class="react-syntax-highlighter-line-number">5
</span></code><span><span>openai responses create \
</span></span><span>  --model gpt-5.5 \
</span><span><span>  --input </span><span class="hljs-string">&quot;Write a short bedtime story about a unicorn.&quot;</span><span> \
</span></span><span>  --raw-output \
</span><span><span>  --transform </span><span class="hljs-string">&#x27;output.#(type==&quot;message&quot;).content.0.text&#x27;</span></span></code></pre></div></div></div></div></div></div><aside class="not-prose rounded-xl border border-default bg-surface px-5 py-4"><div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"><div><p class="text-sm font-semibold text-emphasis">Build with the OpenAI API in Codex</p><p class="mt-1 text-sm leading-6 text-secondary">The OpenAI Developers plugin enables Codex to connect to the OpenAI Platform, follow OpenAI API setup guidance, and create project API keys when your app needs one.</p></div><a href="/learn/developers-codex-plugin" class="_Button_6dmow_1 not-prose shrink-0" data-color="secondary" data-variant="soft" data-pill="" data-size="lg" target="_blank" rel="noreferrer"><span class="_ButtonInner_6dmow_4">Install the plugin</span></a></div></aside><section class="flex flex-col gap-3"><h2 class="text-3xl font-semibold tracking-tight text-emphasis">Build paths</h2><div class="grid gap-4 md:grid-cols-2"><a href="/api/docs/guides/text" class="group flex h-full flex-col justify-between rounded-lg border border-default bg-surface p-4 text-emphasis no-underline transition hover:bg-surface-secondary hover:no-underline"><div><h3 class="text-base font-semibold">Responses API</h3><p class="mt-2 text-sm leading-5 text-secondary">Make direct model requests for text, structured output, tools, and multimodal workflows.</p></div><span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-emphasis">Start with Responses<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></span></a><a href="/api/docs/guides/agents/quickstart" class="group flex h-full flex-col justify-between rounded-lg border border-default bg-surface p-4 text-emphasis no-underline transition hover:bg-surface-secondary hover:no-underline"><div><h3 class="text-base font-semibold">Agents SDK</h3><p class="mt-2 text-sm leading-5 text-secondary">Build code-first agents that orchestrate tools, handoffs, approvals, tracing, and container-based execution.</p></div><span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-emphasis">Start with the Agents SDK<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></span></a></div></section><div class="mb-7 flex w-full flex-col gap-7"><div class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between"><div class="flex max-w-[980px] flex-col gap-1 pr-2"><h2 class="text-3xl font-semibold tracking-tight">Models</h2><div class="text-secondary text-sm">Start with <!-- -->gpt-5.5<!-- --> <!-- -->for complex reasoning and coding, or choose<!-- --> <!-- -->gpt-5.4-mini<!-- --> and<!-- --> <!-- -->gpt-5.4-nano<!-- --> for lower-latency, lower-cost workloads.</div></div><div class="mt-2 md:mt-0"><a href="/api/docs/models" class="_Button_6dmow_1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-emphasis)]" data-color="primary" data-variant="ghost" data-size="md"><span class="_ButtonInner_6dmow_4">View all</span></a></div></div><div class="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-x-10 xl:grid-cols-3"><a href="/api/docs/models/gpt-5.5" class="flex flex-col text-emphasis no-underline hover:text-emphasis hover:no-underline"><div class="h-[180px] w-full"><div class="flex h-full w-full flex-1 cursor-pointer flex-row items-center justify-center gap-4 rounded-lg" style="background-image:url(/images/api/models/gpt-5.5.jpg);background-color:var(--color-background-primary-soft);background-size:cover;background-position:center"><div class="inline-flex w-fit max-w-full h-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" viewBox="0 0 108 32" class="block h-full w-auto max-w-full"><path d="M9.89 30.953c-1.44 0-2.731-.233-3.874-.699-1.122-.444-2.01-1.08-2.667-1.905a4.94 4.94 0 0 1-1.11-2.793h4.158c.127.677.508 1.195 1.143 1.555.635.36 1.45.54 2.444.54h.19c1.165 0 2.107-.328 2.826-.984.741-.656 1.111-1.63 1.111-2.921v-1.968c-.444.656-1.079 1.185-1.904 1.587-.826.402-1.778.603-2.858.603a6.827 6.827 0 0 1-3.523-.952c-1.08-.635-1.948-1.566-2.604-2.794-.635-1.227-.952-2.677-.952-4.35 0-1.692.317-3.142.952-4.349.656-1.227 1.524-2.158 2.604-2.793a6.827 6.827 0 0 1 3.523-.953c1.101 0 2.053.212 2.858.635.825.424 1.46.974 1.904 1.651V8.127h4.128v15.905a6.66 6.66 0 0 1-.953 3.492c-.635 1.058-1.587 1.894-2.857 2.508-1.249.614-2.762.92-4.54.92Zm.444-10.318a3.36 3.36 0 0 0 1.904-.572c.572-.402 1.027-.963 1.366-1.682.338-.72.508-1.556.508-2.508 0-.953-.17-1.789-.508-2.508-.318-.72-.762-1.27-1.334-1.651a3.095 3.095 0 0 0-1.873-.603h-.19c-.72 0-1.376.18-1.969.54-.571.36-1.026.899-1.365 1.619-.317.72-.476 1.587-.476 2.603 0 1.016.159 1.883.476 2.603.339.72.783 1.26 1.334 1.62a3.563 3.563 0 0 0 1.936.539h.19ZM21.9 8.127h4.127v2c.38-.657.995-1.207 1.841-1.651.868-.445 1.841-.667 2.92-.667 1.377 0 2.604.35 3.683 1.048 1.101.677 1.958 1.65 2.572 2.92.614 1.25.92 2.678.92 4.286 0 1.63-.317 3.08-.952 4.35-.614 1.248-1.47 2.222-2.571 2.92-1.1.699-2.35 1.048-3.746 1.048-1.059 0-2-.212-2.826-.635-.804-.423-1.418-.952-1.841-1.587v8.19H21.9V8.127Zm8.127 12.857c.74 0 1.397-.201 1.968-.603.593-.402 1.048-.974 1.365-1.715.339-.74.508-1.597.508-2.571 0-.974-.17-1.83-.508-2.571-.317-.741-.772-1.313-1.365-1.715-.571-.402-1.227-.603-1.968-.603h-.159c-.72 0-1.376.201-1.968.603-.593.402-1.058.974-1.397 1.715-.339.74-.508 1.597-.508 2.571 0 .952.17 1.81.508 2.572.339.74.804 1.312 1.397 1.714a3.429 3.429 0 0 0 1.968.603h.159ZM46.836 24c-1.524 0-2.677-.392-3.46-1.175-.783-.804-1.175-1.957-1.175-3.46V11.46H38.9V8.127h3.302V2.984h4.096v5.143h3.619v3.333h-3.62v7.206c0 .699.127 1.186.381 1.46.276.255.773.382 1.492.382h2.191V24h-3.524Zm4.415-11.27h9.207v3.333H51.25V12.73Zm19.666 11.587c-1.46 0-2.784-.253-3.969-.762-1.164-.507-2.106-1.248-2.825-2.222-.699-.973-1.112-2.137-1.239-3.492h4.191a3.74 3.74 0 0 0 1.302 2.064c.677.508 1.481.762 2.413.762h.285c1.122 0 2.032-.35 2.73-1.048.699-.72 1.048-1.65 1.048-2.794 0-.74-.17-1.386-.508-1.936a3.364 3.364 0 0 0-1.365-1.302 4.008 4.008 0 0 0-1.873-.444h-.286c-.74 0-1.418.158-2.032.476-.613.296-1.121.783-1.523 1.46h-3.969l1.588-13.302H78.09v3.651h-9.968l-.635 5.683a5.096 5.096 0 0 1 1.905-1.143c.74-.254 1.555-.381 2.444-.381 1.397 0 2.635.307 3.715.92a6.592 6.592 0 0 1 2.571 2.54c.614 1.08.92 2.297.92 3.651 0 1.524-.338 2.868-1.015 4.032-.678 1.143-1.63 2.032-2.857 2.667-1.228.614-2.646.92-4.255.92Zm12.914 0a2.61 2.61 0 0 1-1.873-.762 2.615 2.615 0 0 1-.762-1.872c0-.72.254-1.334.762-1.842.53-.529 1.153-.794 1.873-.794.74 0 1.365.254 1.873.762s.762 1.133.762 1.873c0 .72-.254 1.344-.762 1.873-.508.509-1.132.762-1.873.762Zm12.85 0c-1.46 0-2.783-.253-3.968-.762-1.164-.507-2.106-1.248-2.826-2.222-.698-.973-1.11-2.137-1.238-3.492h4.19a3.74 3.74 0 0 0 1.302 2.064c.678.508 1.482.762 2.413.762h.286c1.122 0 2.032-.35 2.73-1.048.699-.72 1.048-1.65 1.048-2.794 0-.74-.17-1.386-.508-1.936a3.365 3.365 0 0 0-1.365-1.302 4.008 4.008 0 0 0-1.873-.444h-.286c-.74 0-1.418.158-2.032.476-.614.296-1.122.783-1.524 1.46h-3.968l1.587-13.302h13.207v3.651h-9.969l-.635 5.683a5.096 5.096 0 0 1 1.905-1.143c.741-.254 1.556-.381 2.445-.381 1.397 0 2.635.307 3.714.92a6.593 6.593 0 0 1 2.572 2.54c.613 1.08.92 2.297.92 3.651 0 1.524-.338 2.868-1.016 4.032-.677 1.143-1.629 2.032-2.857 2.667-1.227.614-2.645.92-4.254.92Z"></path></svg></div></div></div><div class="mt-5 flex flex-col gap-1"><div class="flex items-center gap-1.5 text-base font-semibold text-emphasis"><span>GPT-5.5</span><div class="_Badge_10t5o_1" data-color="success" data-size="md" data-pill="" data-variant="soft">New</div></div><div class="text-sm text-secondary">A new class of intelligence for coding and professional work.</div></div></a><a href="/api/docs/models/gpt-5.4" class="flex flex-col text-emphasis no-underline hover:text-emphasis hover:no-underline"><div class="h-[180px] w-full"><div class="flex h-full w-full flex-1 cursor-pointer flex-row items-center justify-center gap-4 rounded-lg" style="background-image:url(/5.4.png);background-color:var(--color-background-primary-soft);background-size:cover;background-position:center"><div class="inline-flex w-fit max-w-full h-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" viewBox="0 0 106 32" class="block h-full w-auto max-w-full"><path d="M7.89 30.953c-1.44 0-2.731-.233-3.874-.699-1.122-.444-2.01-1.08-2.667-1.905a4.94 4.94 0 0 1-1.11-2.793h4.158c.127.677.508 1.195 1.143 1.555.635.36 1.45.54 2.444.54h.19c1.165 0 2.107-.328 2.826-.984.741-.656 1.111-1.63 1.111-2.921v-1.968c-.444.656-1.079 1.185-1.904 1.587-.826.402-1.778.603-2.858.603a6.827 6.827 0 0 1-3.523-.952c-1.08-.635-1.948-1.566-2.604-2.794-.635-1.227-.952-2.677-.952-4.35 0-1.692.317-3.142.952-4.349.656-1.227 1.524-2.158 2.604-2.793a6.827 6.827 0 0 1 3.523-.953c1.101 0 2.053.212 2.858.635.825.424 1.46.974 1.904 1.651V8.127h4.128v15.905a6.66 6.66 0 0 1-.953 3.492c-.635 1.058-1.587 1.894-2.857 2.508-1.249.614-2.762.92-4.54.92Zm.444-10.318a3.36 3.36 0 0 0 1.904-.572c.572-.402 1.027-.963 1.366-1.682.338-.72.508-1.556.508-2.508 0-.953-.17-1.789-.508-2.508-.318-.72-.762-1.27-1.334-1.651a3.095 3.095 0 0 0-1.873-.603h-.19c-.72 0-1.376.18-1.969.54-.571.36-1.026.899-1.365 1.619-.317.72-.476 1.587-.476 2.603 0 1.016.159 1.883.476 2.603.339.72.783 1.26 1.334 1.62a3.563 3.563 0 0 0 1.936.539h.19ZM19.9 8.127h4.127v2c.38-.657.995-1.207 1.841-1.651.868-.445 1.841-.667 2.92-.667 1.377 0 2.604.35 3.683 1.048 1.101.677 1.958 1.65 2.572 2.92.614 1.25.92 2.678.92 4.286 0 1.63-.317 3.08-.952 4.35-.614 1.248-1.47 2.222-2.571 2.92-1.1.699-2.35 1.048-3.746 1.048-1.059 0-2-.212-2.826-.635-.804-.423-1.418-.952-1.841-1.587v8.19H19.9V8.127Zm8.127 12.857c.74 0 1.397-.201 1.968-.603.593-.402 1.048-.974 1.365-1.715.339-.74.508-1.597.508-2.571 0-.974-.17-1.83-.508-2.571-.317-.741-.772-1.313-1.365-1.715-.571-.402-1.227-.603-1.968-.603h-.159c-.72 0-1.376.201-1.968.603-.593.402-1.058.974-1.397 1.715-.339.74-.508 1.597-.508 2.571 0 .952.17 1.81.508 2.572.339.74.804 1.312 1.397 1.714a3.429 3.429 0 0 0 1.968.603h.159ZM44.836 24c-1.524 0-2.677-.392-3.46-1.175-.783-.804-1.175-1.957-1.175-3.46V11.46H36.9V8.127h3.302V2.984h4.096v5.143h3.619v3.333h-3.62v7.206c0 .699.127 1.186.381 1.46.276.255.773.382 1.492.382h2.191V24h-3.524Zm4.415-11.27h9.207v3.333H49.25V12.73Zm19.666 11.587c-1.46 0-2.784-.253-3.969-.762-1.164-.507-2.106-1.248-2.825-2.222-.699-.973-1.111-2.137-1.238-3.492h4.19a3.74 3.74 0 0 0 1.302 2.064c.677.508 1.481.762 2.413.762h.285c1.122 0 2.032-.35 2.73-1.048.699-.72 1.048-1.65 1.048-2.794 0-.74-.17-1.386-.508-1.936a3.364 3.364 0 0 0-1.365-1.302 4.008 4.008 0 0 0-1.873-.444h-.286c-.74 0-1.418.158-2.032.476-.613.296-1.121.783-1.523 1.46h-3.969l1.588-13.302H76.09v3.651h-9.968l-.635 5.683a5.096 5.096 0 0 1 1.905-1.143c.74-.254 1.555-.381 2.444-.381 1.397 0 2.635.307 3.715.92a6.592 6.592 0 0 1 2.571 2.54c.614 1.08.92 2.297.92 3.651 0 1.524-.338 2.868-1.015 4.032-.678 1.143-1.63 2.032-2.857 2.667-1.228.614-2.646.92-4.255.92Zm12.914 0a2.61 2.61 0 0 1-1.873-.762 2.615 2.615 0 0 1-.762-1.872c0-.72.254-1.334.762-1.842.53-.529 1.153-.794 1.873-.794.74 0 1.365.254 1.873.762s.762 1.133.762 1.873c0 .72-.254 1.344-.762 1.873-.508.509-1.132.762-1.873.762Zm15.295-4.825h-10.73v-4.159L96.998 1.777h4.158v14.064h3.334v3.65h-3.334V24h-4.031v-4.508Zm0-3.651V7.428l-6.604 8.413h6.604Z"></path></svg></div></div></div><div class="mt-5 flex flex-col gap-1"><div class="flex items-center gap-1.5 text-base font-semibold text-emphasis"><span>GPT-5.4</span></div><div class="text-sm text-secondary">A more affordable model for coding and professional work.</div></div></a><a href="/api/docs/models/gpt-5.4-mini" class="flex flex-col text-emphasis no-underline hover:text-emphasis hover:no-underline"><div class="h-[180px] w-full"><div class="flex h-full w-full flex-1 cursor-pointer flex-row items-center justify-center gap-4 rounded-lg" style="background-image:url(/images/api/models/gpt-5.4-mini.jpg);background-color:var(--color-background-primary-soft);background-size:cover;background-position:center"><div class="inline-flex w-fit max-w-full h-8"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" viewBox="0 0 182 32" class="block h-full w-auto max-w-full"><path d="M8.89 30.953c-1.44 0-2.731-.233-3.874-.699-1.122-.444-2.01-1.08-2.667-1.905a4.94 4.94 0 0 1-1.11-2.793h4.158c.127.677.508 1.195 1.143 1.555.635.36 1.45.54 2.444.54h.19c1.165 0 2.107-.328 2.826-.984.741-.656 1.111-1.63 1.111-2.921v-1.968c-.444.656-1.079 1.185-1.904 1.587-.826.402-1.778.603-2.858.603a6.827 6.827 0 0 1-3.523-.952c-1.08-.635-1.948-1.566-2.604-2.794-.635-1.227-.952-2.677-.952-4.35 0-1.692.317-3.142.952-4.349.656-1.227 1.524-2.158 2.604-2.793a6.827 6.827 0 0 1 3.523-.953c1.101 0 2.053.212 2.858.635.825.424 1.46.974 1.904 1.651V8.127h4.128v15.905a6.66 6.66 0 0 1-.953 3.492c-.635 1.058-1.587 1.894-2.857 2.508-1.249.614-2.762.92-4.54.92Zm.444-10.318a3.36 3.36 0 0 0 1.904-.572c.572-.402 1.027-.963 1.366-1.682.338-.72.508-1.556.508-2.508 0-.953-.17-1.789-.508-2.508-.318-.72-.762-1.27-1.334-1.651a3.095 3.095 0 0 0-1.873-.603h-.19c-.72 0-1.376.18-1.969.54-.571.36-1.026.899-1.365 1.619-.317.72-.476 1.587-.476 2.603 0 1.016.159 1.883.476 2.603.339.72.783 1.26 1.334 1.62a3.563 3.563 0 0 0 1.936.539h.19ZM20.9 8.127h4.127v2c.38-.657.995-1.207 1.841-1.651.868-.445 1.841-.667 2.92-.667 1.377 0 2.604.35 3.683 1.048 1.101.677 1.958 1.65 2.572 2.92.614 1.25.92 2.678.92 4.286 0 1.63-.317 3.08-.952 4.35-.614 1.248-1.47 2.222-2.571 2.92-1.1.699-2.35 1.048-3.746 1.048-1.059 0-2-.212-2.826-.635-.804-.423-1.418-.952-1.841-1.587v8.19H20.9V8.127Zm8.127 12.857c.74 0 1.397-.201 1.968-.603.593-.402 1.048-.974 1.365-1.715.339-.74.508-1.597.508-2.571 0-.974-.17-1.83-.508-2.571-.317-.741-.772-1.313-1.365-1.715-.571-.402-1.227-.603-1.968-.603h-.159c-.72 0-1.376.201-1.968.603-.593.402-1.058.974-1.397 1.715-.339.74-.508 1.597-.508 2.571 0 .952.17 1.81.508 2.572.339.74.804 1.312 1.397 1.714a3.429 3.429 0 0 0 1.968.603h.159ZM45.836 24c-1.524 0-2.677-.392-3.46-1.175-.783-.804-1.175-1.957-1.175-3.46V11.46H37.9V8.127h3.302V2.984h4.096v5.143h3.619v3.333h-3.62v7.206c0 .699.127 1.186.381 1.46.276.255.773.382 1.492.382h2.191V24h-3.524Zm4.415-11.27h9.207v3.333H50.25V12.73Zm19.666 11.587c-1.46 0-2.784-.253-3.969-.762-1.164-.507-2.106-1.248-2.825-2.222-.699-.973-1.111-2.137-1.238-3.492h4.19a3.74 3.74 0 0 0 1.302 2.064c.677.508 1.481.762 2.413.762h.285c1.122 0 2.032-.35 2.73-1.048.699-.72 1.048-1.65 1.048-2.794 0-.74-.17-1.386-.508-1.936a3.364 3.364 0 0 0-1.365-1.302 4.008 4.008 0 0 0-1.873-.444h-.286c-.74 0-1.418.158-2.032.476-.613.296-1.121.783-1.523 1.46h-3.969l1.588-13.302H77.09v3.651h-9.968l-.635 5.683a5.096 5.096 0 0 1 1.905-1.143c.74-.254 1.555-.381 2.444-.381 1.397 0 2.635.307 3.715.92a6.592 6.592 0 0 1 2.571 2.54c.614 1.08.92 2.297.92 3.651 0 1.524-.338 2.868-1.015 4.032-.678 1.143-1.63 2.032-2.857 2.667-1.228.614-2.646.92-4.255.92Zm12.914 0a2.61 2.61 0 0 1-1.873-.762 2.615 2.615 0 0 1-.762-1.872c0-.72.254-1.334.762-1.842.53-.529 1.153-.794 1.873-.794.74 0 1.365.254 1.873.762s.762 1.133.762 1.873c0 .72-.254 1.344-.762 1.873-.508.509-1.132.762-1.873.762Zm15.295-4.825h-10.73v-4.159L97.998 1.777h4.158v14.064h3.334v3.65h-3.334V24h-4.031v-4.508Zm0-3.651V7.428l-6.604 8.413h6.604Zm9.545-3.111h9.207v3.333h-9.207V12.73Zm12.459-4.603h4.127v1.968a4.622 4.622 0 0 1 1.809-1.683c.784-.423 1.672-.635 2.667-.635 1.101 0 2.074.223 2.921.667a5.196 5.196 0 0 1 2.095 1.968 5.67 5.67 0 0 1 2.191-1.936c.889-.466 1.873-.699 2.952-.699 1.185 0 2.222.244 3.111.73a4.853 4.853 0 0 1 2.032 2.096c.487.91.73 1.968.73 3.175V24h-4.127v-9.556c0-.656-.106-1.217-.317-1.682a2.344 2.344 0 0 0-.953-1.112c-.402-.254-.889-.38-1.46-.38h-.127c-.931 0-1.714.38-2.349 1.142-.614.762-.921 1.736-.921 2.921V24h-4.127v-9.492c0-.656-.106-1.228-.317-1.715a2.349 2.349 0 0 0-.953-1.11c-.402-.276-.889-.413-1.46-.413h-.127c-.931 0-1.715.38-2.349 1.142-.614.762-.921 1.736-.921 2.921V24h-4.127V8.127Zm28.167 0h4.127V24h-4.127V8.127Zm2.031-2c-.677 0-1.27-.244-1.778-.73-.486-.509-.73-1.101-.73-1.779 0-.698.244-1.29.73-1.777a2.528 2.528 0 0 1 1.81-.73c.677 0 1.259.243 1.746.73a2.37 2.37 0 0 1 .762 1.777c0 .678-.254 1.27-.762 1.778a2.42 2.42 0 0 1-1.778.73Zm5.766 2h4.127V10a4.429 4.429 0 0 1 1.842-1.62c.783-.402 1.693-.603 2.73-.603 1.143 0 2.148.254 3.016.762.868.508 1.534 1.238 2 2.19.487.932.73 2.011.73 3.239V24h-4.127v-9.238c0-.741-.106-1.366-.317-1.873-.212-.508-.529-.89-.953-1.143-.402-.276-.91-.413-1.524-.413h-.063c-.953 0-1.746.38-2.381 1.143-.635.762-.953 1.746-.953 2.952V24h-4.127V8.127Zm17.967 0h4.127V24h-4.127V8.127Zm2.032-2c-.677 0-1.27-.244-1.778-.73-.487-.509-.73-1.101-.73-1.779 0-.698.243-1.29.73-1.777a2.526 2.526 0 0 1 1.81-.73c.677 0 1.259.243 1.746.73a2.37 2.37 0 0 1 .762 1.777c0 .678-.254 1.27-.762 1.778a2.42 2.42 0 0 1-1.778.73Z"></path></svg></div></div></div><div class="mt-5 flex flex-col gap-1"><div class="flex items-center gap-1.5 text-base font-semibold text-emphasis"><span>GPT-5.4 mini</span></div><div class="text-sm text-secondary">Our strongest mini model yet for coding, computer use, and subagents</div></div></a></div></div><section class="flex flex-col gap-4"><h2 class="text-lg font-semibold text-[var(--color-text-emphasis)]">Start building</h2><div class="grid gap-6 md:grid-cols-2"><a href="/api/docs/guides/text" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7.5271 4.5 4 7.91095 4 12C4 13.6958 4.5996 15.263 5.62036 16.5254C5.80473 16.7534 5.87973 17.0509 5.82551 17.339C5.72928 17.8505 5.60336 18.3503 5.45668 18.8401C6.08722 18.743 6.69878 18.6098 7.2983 18.4395C7.54758 18.3687 7.81461 18.3975 8.04312 18.5197C9.20727 19.1423 10.5566 19.5 12 19.5C16.4729 19.5 20 16.0891 20 12C20 7.91095 16.4729 4.5 12 4.5ZM2 12C2 6.70021 6.53177 2.5 12 2.5C17.4682 2.5 22 6.70021 22 12C22 17.2998 17.4682 21.5 12 21.5C10.3694 21.5 8.82593 21.1286 7.46141 20.4675C6.36717 20.7507 5.2423 20.9253 4.06155 20.9981C3.72191 21.019 3.39493 20.8658 3.19366 20.5915C2.9924 20.3171 2.94448 19.9592 3.06647 19.6415C3.35663 18.8859 3.6004 18.1448 3.77047 17.399C2.65693 15.8695 2 14.0088 2 12Z" fill="currentColor"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Read and generate text</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Use the API to prompt a model and generate text</div></div></div></a><a href="/api/docs/guides/images-vision" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M5.91456 7.59106C4.34202 9.04124 3.28878 10.7415 2.77064 11.6971C2.66597 11.8902 2.66597 12.1098 2.77064 12.3029C3.28878 13.2585 4.34202 14.9588 5.91456 16.4089C7.48207 17.8545 9.50584 19 12.0001 19C14.4944 19 16.5182 17.8545 18.0857 16.4089C19.6582 14.9588 20.7114 13.2585 21.2296 12.3029C21.3343 12.1098 21.3343 11.8902 21.2296 11.6971C20.7114 10.7415 19.6582 9.04124 18.0857 7.59105C16.5182 6.1455 14.4944 5 12.0001 5C9.50584 5 7.48207 6.1455 5.91456 7.59106ZM4.5587 6.1208C6.36071 4.45899 8.84593 3 12.0001 3C15.1543 3 17.6395 4.45899 19.4415 6.1208C21.2385 7.77798 22.4153 9.68799 22.9878 10.7438C23.4149 11.5315 23.4149 12.4685 22.9878 13.2562C22.4153 14.312 21.2385 16.222 19.4415 17.8792C17.6395 19.541 15.1543 21 12.0001 21C8.84593 21 6.36071 19.541 4.5587 17.8792C2.76171 16.222 1.5849 14.312 1.01244 13.2562C0.585372 12.4685 0.585371 11.5315 1.01244 10.7438C1.5849 9.688 2.76171 7.77798 4.5587 6.1208ZM12.0001 9.5C10.6194 9.5 9.50011 10.6193 9.50011 12C9.50011 13.3807 10.6194 14.5 12.0001 14.5C13.3808 14.5 14.5001 13.3807 14.5001 12C14.5001 10.6193 13.3808 9.5 12.0001 9.5ZM7.50011 12C7.50011 9.51472 9.51483 7.5 12.0001 7.5C14.4854 7.5 16.5001 9.51472 16.5001 12C16.5001 14.4853 14.4854 16.5 12.0001 16.5C9.51483 16.5 7.50011 14.4853 7.50011 12Z" fill="currentColor"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Use a model&#x27;s vision capabilities</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Allow models to see and analyze images in your application</div></div></div></a><a href="/api/docs/guides/image-generation" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M12.1796 11.8179C12.2949 12.6383 11.7233 13.3968 10.903 13.5121C10.0826 13.6274 9.32409 13.0558 9.20879 12.2354C9.0935 11.4151 9.66507 10.6566 10.4854 10.5413C11.3058 10.426 12.0643 10.9976 12.1796 11.8179Z" fill="currentColor"></path><path d="M14.2794 1.70738L17.736 2.1318C18.535 2.22989 19.1944 2.31084 19.7262 2.42069C20.2785 2.53477 20.7793 2.69557 21.2309 3.00017C21.9312 3.47253 22.464 4.15446 22.7529 4.94824C22.9392 5.46009 22.9741 5.98496 22.9511 6.54846C22.9291 7.09101 22.8481 7.75041 22.75 8.54938L22.3256 12.006C22.2275 12.805 22.1465 13.4644 22.0367 13.9962C21.9226 14.5485 21.7618 15.0493 21.4572 15.5009C20.9848 16.2012 20.3029 16.734 19.5091 17.0229C19.4277 17.0525 19.3454 17.0786 19.2619 17.1012C18.7289 17.2459 18.1796 16.931 18.035 16.398C17.8903 15.865 18.2051 15.3157 18.7381 15.171C18.7686 15.1628 18.7974 15.1536 18.8251 15.1435C19.222 14.9991 19.5629 14.7327 19.7991 14.3825C19.8973 14.237 19.989 14.0224 20.078 13.5916C20.1694 13.1493 20.2411 12.5715 20.3455 11.7213L20.7599 8.34664C20.8642 7.49645 20.9344 6.9184 20.9528 6.46718C20.9707 6.02767 20.9335 5.79722 20.8735 5.63228C20.7291 5.23539 20.4627 4.89442 20.1125 4.65824C19.967 4.56009 19.7524 4.46832 19.3216 4.37934C18.8793 4.28799 18.3015 4.21625 17.4513 4.11186L14.0766 3.69751C13.2264 3.59311 12.6484 3.52292 12.1972 3.50457C11.7577 3.48669 11.5272 3.52381 11.3623 3.58385C10.9654 3.7283 10.6244 3.9947 10.3882 4.34485C10.3214 4.44397 10.2574 4.57566 10.1956 4.78417C10.0387 5.31369 9.48218 5.61574 8.95265 5.45882C8.42313 5.30189 8.12108 4.74542 8.27801 4.2159C8.38283 3.86218 8.52321 3.53326 8.73015 3.22646C9.20251 2.52616 9.88445 1.99337 10.6782 1.70446C11.1901 1.51816 11.7149 1.4833 12.2784 1.50622C12.821 1.52829 13.4804 1.60927 14.2794 1.70738ZM11.7602 8.80029C11.309 8.81864 10.7309 8.88883 9.88073 8.99322L6.50608 9.40758C5.65588 9.51197 5.07802 9.5837 4.63577 9.67505C4.20499 9.76404 3.99037 9.8558 3.84485 9.95396C3.4947 10.1901 3.2283 10.5311 3.08385 10.928C3.02381 11.0929 2.98669 11.3234 3.00457 11.7629C3.02292 12.2141 3.09311 12.7922 3.19751 13.6424L3.47503 15.9026C3.68383 15.676 3.87699 15.4746 4.05931 15.3001C4.45033 14.9256 4.84957 14.6163 5.33514 14.4178C6.09046 14.1092 6.92211 14.0389 7.71853 14.2164C8.23053 14.3305 8.67603 14.5684 9.12435 14.8719C9.55516 15.1635 10.0505 15.5598 10.6493 16.0389L14.3141 18.9707C14.4548 18.7983 14.5665 18.6025 14.6435 18.3908C14.7036 18.2259 14.7407 17.9954 14.7228 17.5559C14.7045 17.1047 14.6343 16.5266 14.5299 15.6764L14.1155 12.3018C14.0111 11.4516 13.9394 10.8737 13.848 10.4315C13.7591 10.0007 13.6673 9.78609 13.5691 9.64056C13.333 9.29041 12.992 9.02402 12.5951 8.87956C12.4302 8.81953 12.1997 8.78241 11.7602 8.80029ZM12.1431 19.7952L9.43119 17.6256C8.79321 17.1152 8.36009 16.7697 8.00329 16.5282C7.65652 16.2934 7.45002 16.2056 7.28344 16.1685C6.88523 16.0797 6.46941 16.1149 6.09175 16.2692C5.93377 16.3338 5.74494 16.455 5.4425 16.7446C5.1313 17.0426 4.76232 17.456 4.21908 18.0662L3.81279 18.5226C3.83428 18.6544 3.85618 18.7752 3.87934 18.8873C3.96832 19.3181 4.06009 19.5327 4.15824 19.6782C4.39442 20.0284 4.73539 20.2948 5.13228 20.4392C5.29722 20.4993 5.52767 20.5364 5.96718 20.5185C6.4184 20.5002 6.99645 20.43 7.84664 20.3256L11.2213 19.9112C11.5716 19.8682 11.8757 19.8307 12.1431 19.7952ZM11.6789 6.80194C12.2424 6.77902 12.7673 6.81388 13.2791 7.00018C14.0729 7.28909 14.7548 7.82188 15.2272 8.52218C15.5318 8.97376 15.6926 9.4746 15.8067 10.0269C15.9165 10.5587 15.9975 11.2181 16.0956 12.0171L16.52 15.4736C16.6181 16.2726 16.6991 16.9321 16.7212 17.4746C16.7441 18.0381 16.7092 18.563 16.5229 19.0749C16.234 19.8686 15.7012 20.5506 15.0009 21.0229C14.5493 21.3275 14.0485 21.4883 13.4962 21.6024C12.9644 21.7122 12.305 21.7932 11.506 21.8913L8.04937 22.3157C7.25041 22.4138 6.59101 22.4948 6.04846 22.5169C5.48496 22.5398 4.96009 22.5049 4.44824 22.3186C3.65446 22.0297 2.97253 21.4969 2.50017 20.7966C2.19557 20.345 2.03477 19.8442 1.92069 19.2919C1.81084 18.7601 1.72989 18.1007 1.6318 17.3017L1.20738 13.8451C1.10927 13.0461 1.02829 12.3867 1.00622 11.8442C0.983303 11.2807 1.01816 10.7558 1.20446 10.244C1.49337 9.45018 2.02616 8.76824 2.72646 8.29588C3.17804 7.99129 3.67888 7.83049 4.23119 7.7164C4.76296 7.60656 5.42236 7.52561 6.22133 7.42752L9.67798 7.0031C10.4769 6.90498 11.1364 6.82401 11.6789 6.80194Z" fill="currentColor"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Generate images as output</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Create images with GPT Image 2</div></div></div></a><a href="/api/docs/guides/audio" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M4 15.8333V17.1667C4 18.4553 5.04467 19.5 6.33333 19.5C6.70152 19.5 7 19.2015 7 18.8333V14.1667C7 13.7985 6.70152 13.5 6.33333 13.5C5.04467 13.5 4 14.5447 4 15.8333ZM2 12.5C2 6.97715 6.47715 2.5 12 2.5C17.5228 2.5 22 6.97715 22 12.5V17.1667C22 19.5599 20.0599 21.5 17.6667 21.5C16.1939 21.5 15 20.3061 15 18.8333V14.1667C15 12.6939 16.1939 11.5 17.6667 11.5C18.523 11.5 19.3214 11.7484 19.9936 12.1771C19.8242 7.90854 16.3101 4.5 12 4.5C7.68986 4.5 4.17583 7.90854 4.0064 12.1771C4.6786 11.7484 5.47696 11.5 6.33333 11.5C7.80609 11.5 9 12.6939 9 14.1667V18.8333C9 20.3061 7.80609 21.5 6.33333 21.5C3.9401 21.5 2 19.5599 2 17.1667V12.5ZM20 15.8333C20 14.5447 18.9553 13.5 17.6667 13.5C17.2985 13.5 17 13.7985 17 14.1667V18.8333C17 19.2015 17.2985 19.5 17.6667 19.5C18.9553 19.5 20 18.4553 20 17.1667V15.8333Z" fill="currentColor"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Build apps with audio</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Analyze, transcribe, and generate audio with API endpoints</div></div></div></a><a href="/api/docs/guides/agents" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M6.16146 3L17.8385 3C18.3657 2.99998 18.8205 2.99997 19.195 3.03057C19.5904 3.06287 19.9836 3.13419 20.362 3.32698C20.9265 3.6146 21.3854 4.07354 21.673 4.63803C21.8658 5.01641 21.9371 5.40963 21.9694 5.80497C22 6.17954 22 6.6343 22 7.16144V13.3386C22 13.8657 22 14.3205 21.9694 14.695C21.9371 15.0904 21.8658 15.4836 21.673 15.862C21.3854 16.4265 20.9265 16.8854 20.362 17.173C19.9836 17.3658 19.5904 17.4371 19.195 17.4694C18.8205 17.5 18.3657 17.5 17.8385 17.5H16.5V20C16.5 20.5523 16.5523 21 15.5 21H8.5C7.94772 21 7.5 20.5523 7.5 20V17.5H6.16148C5.63432 17.5 5.17955 17.5 4.80497 17.4694C4.40963 17.4371 4.01641 17.3658 3.63803 17.173C3.07354 16.8854 2.6146 16.4265 2.32698 15.862C2.13419 15.4836 2.06287 15.0904 2.03057 14.695C1.99997 14.3205 1.99998 13.8657 2 13.3385V7.16146C1.99998 6.63431 1.99997 6.17955 2.03057 5.80497C2.06287 5.40963 2.13419 5.01641 2.32698 4.63803C2.6146 4.07354 3.07354 3.6146 3.63803 3.32698C4.01641 3.13419 4.40963 3.06287 4.80497 3.03057C5.17955 2.99997 5.63431 2.99998 6.16146 3ZM9.5 17.5V19H14.5V17.5H9.5ZM4.96784 5.02393C4.69617 5.04612 4.59546 5.0838 4.54601 5.109C4.35785 5.20487 4.20487 5.35785 4.109 5.54601C4.0838 5.59546 4.04612 5.69617 4.02393 5.96784C4.00078 6.25117 4 6.62345 4 7.2V13.3C4 13.8766 4.00078 14.2488 4.02393 14.5322C4.04612 14.8038 4.0838 14.9045 4.109 14.954C4.20487 15.1422 4.35785 15.2951 4.54601 15.391C4.59546 15.4162 4.69617 15.4539 4.96784 15.4761C5.25117 15.4992 5.62345 15.5 6.2 15.5H17.8C18.3766 15.5 18.7488 15.4992 19.0322 15.4761C19.3038 15.4539 19.4045 15.4162 19.454 15.391C19.6422 15.2951 19.7951 15.1422 19.891 14.954C19.9162 14.9045 19.9539 14.8038 19.9761 14.5322C19.9992 14.2488 20 13.8766 20 13.3V7.2C20 6.62345 19.9992 6.25118 19.9761 5.96784C19.9539 5.69617 19.9162 5.59546 19.891 5.54601C19.7951 5.35785 19.6422 5.20487 19.454 5.109C19.4045 5.0838 19.3038 5.04612 19.0322 5.02393C18.7488 5.00078 18.3766 5 17.8 5H6.2C5.62345 5 5.25117 5.00078 4.96784 5.02393Z" fill="currentColor"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Build agentic applications</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Use the API to build agents that use tools and computers</div></div></div></a><a href="/api/docs/guides/reasoning" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.932 4.377A1.45 1.45 0 0 1 11.375 3c.8 0 1.403.638 1.443 1.377.205 3.787 3.003 6.59 6.784 6.794A1.474 1.474 0 0 1 21 12.636c0 .816-.655 1.428-1.406 1.465-3.775.187-6.571 2.985-6.776 6.772a1.45 1.45 0 0 1-1.443 1.377 1.45 1.45 0 0 1-1.443-1.377c-.205-3.787-3.002-6.585-6.777-6.772a1.472 1.472 0 0 1-1.405-1.464c0-.815.654-1.426 1.404-1.464 3.772-.187 6.573-3.004 6.778-6.796Zm1.443 2.87a8.875 8.875 0 0 1-5.395 5.389 8.847 8.847 0 0 1 5.395 5.369 8.847 8.847 0 0 1 5.41-5.374 8.884 8.884 0 0 1-5.41-5.384Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M19.25 3.75a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" clip-rule="evenodd"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Achieve complex tasks with reasoning</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Use reasoning models to carry out complex tasks</div></div></div></a><a href="/api/docs/guides/structured-outputs" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M6.00633 5.5C6.02321 5.53319 6.07042 5.60366 6.19525 5.70906C6.42458 5.9027 6.81573 6.12215 7.38659 6.32603C8.5196 6.73067 10.1506 7 12 7C13.8494 7 15.4804 6.73067 16.6134 6.32603C17.1843 6.12215 17.5754 5.9027 17.8048 5.70906C17.9296 5.60366 17.9768 5.53319 17.9937 5.5C17.9768 5.46681 17.9296 5.39634 17.8048 5.29094C17.5754 5.0973 17.1843 4.87785 16.6134 4.67397C15.4804 4.26933 13.8494 4 12 4C10.1506 4 8.5196 4.26933 7.38659 4.67397C6.81573 4.87785 6.42458 5.0973 6.19525 5.29094C6.07042 5.39634 6.02321 5.46681 6.00633 5.5ZM18 7.91726C17.7726 8.02403 17.5333 8.12123 17.2861 8.20951C15.8856 8.70968 14.0166 9 12 9C9.98341 9 8.1144 8.70968 6.71392 8.20951C6.46674 8.12123 6.22738 8.02403 6 7.91726V11.9866C6.00813 12.0073 6.03931 12.0661 6.14259 12.1624C6.31976 12.3277 6.63181 12.5252 7.10609 12.7189C8.04837 13.1039 9.43027 13.3932 11.051 13.476C11.6026 13.5042 12.0269 13.9741 11.9987 14.5257C11.9705 15.0773 11.5005 15.5016 10.949 15.4734C9.17744 15.3829 7.55934 15.0646 6.34969 14.5704C6.23097 14.5219 6.11419 14.4709 6 14.4173V18.4866C6.00813 18.5073 6.03931 18.5661 6.14259 18.6624C6.31976 18.8277 6.63181 19.0252 7.10609 19.2189C8.04837 19.6039 9.43027 19.8932 11.051 19.976C11.6026 20.0042 12.0269 20.4741 11.9987 21.0257C11.9705 21.5773 11.5005 22.0016 10.949 21.9734C9.17744 21.8829 7.55934 21.5646 6.34969 21.0704C5.74801 20.8246 5.19611 20.5146 4.77833 20.1249C4.35948 19.7341 4 19.1866 4 18.5V5.5C4 4.74631 4.43048 4.16346 4.90494 3.76283C5.38405 3.35829 6.01803 3.03902 6.71392 2.79049C8.1144 2.29032 9.98341 2 12 2C14.0166 2 15.8856 2.29032 17.2861 2.79049C17.982 3.03902 18.616 3.35829 19.0951 3.76283C19.5695 4.16346 20 4.74631 20 5.5V10C20 10.5523 19.5523 11 19 11C18.4477 11 18 10.5523 18 10V7.91726Z" fill="currentColor"></path><path d="M17.4635 13H18.5364C18.8205 13 19.0802 13.1605 19.2072 13.4146L19.7416 14.4833L20.9344 14.4118C21.218 14.3947 21.4868 14.5394 21.6288 14.7854L22.1653 15.7146C22.3074 15.9606 22.2982 16.2658 22.1417 16.5028L21.4833 17.5L22.1417 18.4972C22.2982 18.7342 22.3074 19.0394 22.1653 19.2854L21.6289 20.2146C21.4868 20.4606 21.218 20.6053 20.9344 20.5882L19.7416 20.5167L19.2072 21.5854C19.0802 21.8395 18.8205 22 18.5364 22H17.4635C17.1794 22 16.9197 21.8395 16.7926 21.5854L16.2583 20.5167L15.0655 20.5883C14.782 20.6053 14.5131 20.4606 14.3711 20.2146L13.8346 19.2854C13.6926 19.0394 13.7017 18.7342 13.8582 18.4972L14.5166 17.5L13.8583 16.5028C13.7017 16.2658 13.6926 15.9606 13.8346 15.7146L14.3711 14.7854C14.5131 14.5394 14.782 14.3947 15.0656 14.4117L16.2583 14.4833L16.7926 13.4146C16.9197 13.1605 17.1794 13 17.4635 13ZM17.9999 19C18.8284 19 19.4999 18.3284 19.4999 17.5C19.4999 16.6716 18.8284 16 17.9999 16C17.1715 16 16.4999 16.6716 16.4999 17.5C16.4999 18.3284 17.1715 19 17.9999 19Z" fill="currentColor"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Get structured data from models</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Use Structured Outputs to get model responses that adhere to a JSON schema</div></div></div></a><a href="/api/docs/guides/model-optimization" class="block text-[var(--color-text-emphasis)] no-underline hover:no-underline"><div class="icon-item"><div class="icon-item-icon"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M14.5 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-3.874 1a4.002 4.002 0 0 1 7.748 0H20a1 1 0 1 1 0 2h-1.626a4.002 4.002 0 0 1-7.748 0H4a1 1 0 0 1 0-2h6.626ZM9.5 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-3.874 1a4.002 4.002 0 0 1 7.748 0H20a1 1 0 1 1 0 2h-6.626a4.002 4.002 0 0 1-7.748 0H4a1 1 0 1 1 0-2h1.626Z" clip-rule="evenodd"></path></svg></div><div class="icon-item-right"><div class="icon-item-title"><div class="icon-item-title body-large">Tailor to your use case</div><div class="pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"></path></svg></div></div><div class="icon-item-desc body-small">Adjust our models to perform specifically for your use case with fine-tuning, evals, and distillation</div></div></div></a></div></section><section class="pt-8"><div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4"><a href="https://help.openai.com" target="_blank" rel="noopener noreferrer" class="group relative flex h-full flex-col items-center rounded-xl border border-transparent p-4 text-center text-[var(--color-text-emphasis)] transition hover:border-[var(--color-background-primary-soft)] hover:bg-[var(--card-gradient-hover)]"><div class="absolute right-3 top-3 flex translate-x-1 translate-y-1 opacity-0 transition group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></div><div class="flex h-10 w-10 items-center justify-center text-[var(--color-text)]"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M12 9a1 1 0 0 0-.879.522 1 1 0 0 1-1.754-.96A3 3 0 0 1 12 7c1.515 0 2.567 1.006 2.866 2.189.302 1.189-.156 2.574-1.524 3.258A.618.618 0 0 0 13 13a1 1 0 1 1-2 0c0-.992.56-1.898 1.447-2.342.455-.227.572-.618.48-.978C12.836 9.314 12.529 9 12 9Z" clip-rule="evenodd"></path><path d="M13.1 16a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Z"></path></svg></div><div class="mt-3 text-sm font-semibold">Help center</div><div class="mt-2 text-sm text-[var(--color-text-secondary)]">Frequently asked account and billing questions</div></a><a href="https://community.openai.com/" target="_blank" rel="noopener noreferrer" class="group relative flex h-full flex-col items-center rounded-xl border border-transparent p-4 text-center text-[var(--color-text-emphasis)] transition hover:border-[var(--color-background-primary-soft)] hover:bg-[var(--card-gradient-hover)]"><div class="absolute right-3 top-3 flex translate-x-1 translate-y-1 opacity-0 transition group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></div><div class="flex h-10 w-10 items-center justify-center text-[var(--color-text)]"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M8.522 6.536a7.25 7.25 0 1 1 11.996 8.106l.83 1.328a1 1 0 0 1-.848 1.53h-5.044a7.246 7.246 0 0 1-6.389 3.498A1.004 1.004 0 0 1 9 21H3.5a1 1 0 0 1-.848-1.53l.83-1.328a7.25 7.25 0 0 1 5.04-11.606Zm2.372.151a7.253 7.253 0 0 1 5.393 8.813h2.409l-.261-.417a1 1 0 0 1 .123-1.219 5.25 5.25 0 1 0-7.664-7.177ZM8.895 19a.997.997 0 0 1 .141-.004A5.25 5.25 0 1 0 4 13.75c0 1.401.547 2.672 1.442 3.614a1 1 0 0 1 .123 1.219l-.26.417h3.59Z" clip-rule="evenodd"></path></svg></div><div class="mt-3 text-sm font-semibold">Developer forum</div><div class="mt-2 text-sm text-[var(--color-text-secondary)]">Discuss topics with other developers</div></a><a href="/cookbook" target="_blank" rel="noopener noreferrer" class="group relative flex h-full flex-col items-center rounded-xl border border-transparent p-4 text-center text-[var(--color-text-emphasis)] transition hover:border-[var(--color-background-primary-soft)] hover:bg-[var(--card-gradient-hover)]"><div class="absolute right-3 top-3 flex translate-x-1 translate-y-1 opacity-0 transition group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></div><div class="flex h-10 w-10 items-center justify-center text-[var(--color-text)]"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-2a1 1 0 1 1 0-2v-2a1 1 0 1 1 0-2V9a1 1 0 0 1 0-2V5Zm2 4a1 1 0 0 0 0-2V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2a1 1 0 1 0 0-2v-2a1 1 0 1 0 0-2V9Zm3-1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Z" clip-rule="evenodd"></path></svg></div><div class="mt-3 text-sm font-semibold">Cookbook</div><div class="mt-2 text-sm text-[var(--color-text-secondary)]">Open-source collection of examples and guides</div></a><a href="https://status.openai.com" target="_blank" rel="noopener noreferrer" class="group relative flex h-full flex-col items-center rounded-xl border border-transparent p-4 text-center text-[var(--color-text-emphasis)] transition hover:border-[var(--color-background-primary-soft)] hover:bg-[var(--card-gradient-hover)]"><div class="absolute right-3 top-3 flex translate-x-1 translate-y-1 opacity-0 transition group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.243 6.757a1 1 0 0 1 1 1v7.072a1 1 0 0 1-2 0v-4.657L8.464 16.95a1 1 0 0 1-1.414-1.414l6.778-6.779H9.172a1 1 0 0 1 0-2h7.07Z" clip-rule="evenodd"></path></svg></div><div class="flex h-10 w-10 items-center justify-center text-[var(--color-text)]"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor"><path d="M6.34354 4.92894C6.7341 5.31946 6.7341 5.95263 6.34354 6.34315C3.21906 9.46735 3.21906 14.5327 6.34354 17.6569C6.7341 18.0474 6.7341 18.6806 6.34354 19.0711C5.95298 19.4616 5.31976 19.4616 4.9292 19.0711C1.0236 15.1658 1.0236 8.83418 4.9292 4.92894C5.31976 4.53842 5.95298 4.53842 6.34354 4.92894ZM17.6583 4.92894C18.0488 4.53842 18.682 4.53842 19.0726 4.92894C22.9782 8.83418 22.9782 15.1658 19.0726 19.0711C18.682 19.4616 18.0488 19.4616 17.6583 19.0711C17.2677 18.6806 17.2677 18.0474 17.6583 17.6569C20.7827 14.5327 20.7827 9.46735 17.6583 6.34315C17.2677 5.95263 17.2677 5.31946 17.6583 4.92894Z" fill="currentColor"></path><path d="M9.17222 7.75737C9.56278 8.14789 9.56278 8.78106 9.17222 9.17158C7.60998 10.7337 7.60998 13.2663 9.17222 14.8284C9.56278 15.219 9.56278 15.8521 9.17222 16.2426C8.78166 16.6332 8.14844 16.6332 7.75788 16.2426C5.41452 13.8995 5.41452 10.1005 7.75788 7.75737C8.14844 7.36684 8.78166 7.36684 9.17222 7.75737ZM14.8296 7.75737C15.2201 7.36684 15.8534 7.36684 16.2439 7.75737C18.5873 10.1005 18.5873 13.8995 16.2439 16.2426C15.8534 16.6332 15.2201 16.6332 14.8296 16.2426C14.439 15.8521 14.439 15.219 14.8296 14.8284C16.3918 13.2663 16.3918 10.7337 14.8296 9.17158C14.439 8.78106 14.439 8.14789 14.8296 7.75737Z" fill="currentColor"></path><path d="M14.0011 12C14.0011 13.1046 13.1056 14 12.0009 14C10.8962 14 10.0007 13.1046 10.0007 12C10.0007 10.8954 10.8962 10 12.0009 10C13.1056 10 14.0011 10.8954 14.0011 12Z" fill="currentColor"></path></svg></div><div class="mt-3 text-sm font-semibold">Status</div><div class="mt-2 text-sm text-[var(--color-text-secondary)]">Check the status of OpenAI services</div></a></div></section></div></section><!--astro:end--></astro-island>   </main> </div> </div> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="DQ4jb" component-url="/_astro/Analytics.rv0FwEeX.js" component-export="default" renderer-url="/_astro/client.DjvmFpsL.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;VercelAnalyticsClient&quot;,&quot;value&quot;:&quot;solid-js&quot;}"></astro-island> <vercel-speed-insights data-props="{}" data-params="{}" data-pathname="/api/docs/"></vercel-speed-insights> <script type="module">var o="@vercel/speed-insights",u="1.3.1",f=()=>{window.si||(window.si=function(...r){(window.siq=window.siq||[]).push(r)})};function l(){return typeof window<"u"}function h(){try{const e="production"}catch{}return"production"}function d(){return h()==="development"}function v(e,r){if(!e||!r)return e;let n=e;try{const t=Object.entries(r);for(const[s,i]of t)if(!Array.isArray(i)){const a=c(i);a.test(n)&&(n=n.replace(a,`/[${s}]`))}for(const[s,i]of t)if(Array.isArray(i)){const a=c(i.join("/"));a.test(n)&&(n=n.replace(a,`/[...${s}]`))}return n}catch{return e}}function c(e){return new RegExp(`/${g(e)}(?=[/?#]|$)`)}function g(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function m(e){return e.scriptSrc?e.scriptSrc:d()?"https://va.vercel-scripts.com/v1/speed-insights/script.debug.js":e.dsn?"https://va.vercel-scripts.com/v1/speed-insights/script.js":e.basePath?`${e.basePath}/speed-insights/script.js`:"/_vercel/speed-insights/script.js"}function w(e={}){var r;if(!l()||e.route===null)return null;f();const n=m(e);if(document.head.querySelector(`script[src*="${n}"]`))return null;e.beforeSend&&((r=window.si)==null||r.call(window,"beforeSend",e.beforeSend));const t=document.createElement("script");return t.src=n,t.defer=!0,t.dataset.sdkn=o+(e.framework?`/${e.framework}`:""),t.dataset.sdkv=u,e.sampleRate&&(t.dataset.sampleRate=e.sampleRate.toString()),e.route&&(t.dataset.route=e.route),e.endpoint?t.dataset.endpoint=e.endpoint:e.basePath&&(t.dataset.endpoint=`${e.basePath}/speed-insights/vitals`),e.dsn&&(t.dataset.dsn=e.dsn),d()&&e.debug===!1&&(t.dataset.debug="false"),t.onerror=()=>{console.log(`[Vercel Speed Insights] Failed to load script from ${n}. Please check if any content blockers are enabled and try again.`)},document.head.appendChild(t),{setRoute:s=>{t.dataset.route=s??void 0}}}function p(){try{return}catch{}}customElements.define("vercel-speed-insights",class extends HTMLElement{constructor(){super();try{const r=JSON.parse(this.dataset.props??"{}"),n=JSON.parse(this.dataset.params??"{}"),t=v(this.dataset.pathname??"",n);w({route:t,...r,framework:"astro",basePath:p(),beforeSend:window.speedInsightsBeforeSend})}catch(r){throw new Error(`Failed to parse SpeedInsights properties: ${r}`)}}});</script> <div data-docs-agent-root data-chatkit-api-url="/api/docs-agent/chatkit" data-chatkit-domain-key="domain_pk_69f4ea0d87748194b9ad4d8ba39fc5710f6f8241026056cb" data-chatkit-greeting="What can I help you with?" data-chatkit-start-prompts-by-route="{&#34;home&#34;:[{&#34;label&#34;:&#34;Ask a question&#34;,&#34;prompt&#34;:&#34;What is the Docs MCP server?&#34;,&#34;icon&#34;:&#34;circle-question&#34;},{&#34;label&#34;:&#34;Find a page&#34;,&#34;prompt&#34;:&#34;Show me OpenAI models&#34;,&#34;icon&#34;:&#34;search&#34;},{&#34;label&#34;:&#34;Build a custom app&#34;,&#34;prompt&#34;:&#34;I want to build an interactive webapp that has a huge microphone in the center allowing to chat in Realtime&#34;,&#34;icon&#34;:&#34;square-code&#34;}],&#34;api&#34;:[{&#34;label&#34;:&#34;Ask a question&#34;,&#34;prompt&#34;:&#34;What are the recommended prompting best practices for building with the latest model?&#34;,&#34;icon&#34;:&#34;circle-question&#34;},{&#34;label&#34;:&#34;Find a page&#34;,&#34;prompt&#34;:&#34;show me a page to compare models&#34;,&#34;icon&#34;:&#34;search&#34;},{&#34;label&#34;:&#34;Build a custom app&#34;,&#34;prompt&#34;:&#34;I want to build a customer support app with realtime voice&#34;,&#34;icon&#34;:&#34;square-code&#34;}],&#34;codex&#34;:[{&#34;label&#34;:&#34;Ask a question&#34;,&#34;prompt&#34;:&#34;What is Codex app server?&#34;,&#34;icon&#34;:&#34;circle-question&#34;},{&#34;label&#34;:&#34;Find a page&#34;,&#34;prompt&#34;:&#34;Show me the Codex changelog&#34;,&#34;icon&#34;:&#34;search&#34;},{&#34;label&#34;:&#34;Build a custom app&#34;,&#34;prompt&#34;:&#34;I want to build an internal dashboard that gets updated with data from slack and spreadsheets and which allows to visualize weekly progress&#34;,&#34;icon&#34;:&#34;square-code&#34;}],&#34;chatgpt&#34;:[{&#34;label&#34;:&#34;Ask a question&#34;,&#34;prompt&#34;:&#34;What are best practices for building a ChatGPT app?&#34;,&#34;icon&#34;:&#34;circle-question&#34;},{&#34;label&#34;:&#34;Find a page&#34;,&#34;prompt&#34;:&#34;Show me UI guidelines for building ChatGPT apps&#34;,&#34;icon&#34;:&#34;search&#34;},{&#34;label&#34;:&#34;Build a custom app&#34;,&#34;prompt&#34;:&#34;Help me build an app in ChatGPT that proposes a quiz to users to find the best match from my list of products&#34;,&#34;icon&#34;:&#34;square-code&#34;}],&#34;resources&#34;:[{&#34;label&#34;:&#34;Ask a question&#34;,&#34;prompt&#34;:&#34;What is the Docs MCP server?&#34;,&#34;icon&#34;:&#34;circle-question&#34;},{&#34;label&#34;:&#34;Find a page&#34;,&#34;prompt&#34;:&#34;Show me the Codex meetups page&#34;,&#34;icon&#34;:&#34;search&#34;},{&#34;label&#34;:&#34;Build a custom app&#34;,&#34;prompt&#34;:&#34;I want to build an interactive webapp that has a huge microphone in the center allowing to chat in Realtime&#34;,&#34;icon&#34;:&#34;square-code&#34;}]}" data-astro-transition-persist="docs-agent-launcher" class="docs-agent-root"><button type="button" data-docs-agent-open aria-haspopup="dialog" aria-expanded="false" aria-controls="docs-agent-panel" class="fixed bottom-5 right-5 z-50 inline-flex h-11 items-center justify-center whitespace-nowrap rounded-full border border-transparent bg-primary-solid px-4 text-sm font-medium text-primary-solid shadow-[0_16px_48px_-18px_rgba(15,23,42,0.45)] transition-colors hover:bg-primary-solid-hover active:bg-primary-solid-active focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-soft-active focus-visible:ring-offset-2 focus-visible:ring-offset-surface"><span>Ask AI</span></button><div id="docs-agent-panel" data-docs-agent-panel role="dialog" aria-labelledby="docs-agent-title" class="fixed inset-x-0 bottom-0 z-[80] flex h-[var(--docs-agent-drawer-height)] flex-col overflow-hidden rounded-t-2xl border border-subtle bg-surface transition-transform duration-300 ease-out md:inset-y-0 md:left-auto md:right-0 md:h-auto md:w-[var(--docs-agent-panel-width)] md:rounded-none md:border-y-0 md:border-r-0"><header class="flex h-16 shrink-0 items-center justify-between border-b border-subtle px-4"><h2 id="docs-agent-title" class="text-sm font-semibold text-default">
Docs agent
</h2><div class="flex items-center gap-1.5"><button type="button" data-docs-agent-new aria-label="Start a new docs agent thread" title="Start a new thread" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-secondary transition-colors hover:bg-primary-soft-alpha hover:text-default"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24" class="h-4 w-4 " ><path fill-rule="evenodd" d="M16.793 2.793a3.121 3.121 0 1 1 4.414 4.414l-8.5 8.5A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l8.5-8.5Zm3 1.414a1.121 1.121 0 0 0-1.586 0L10 12.414V14h1.586l8.207-8.207a1.121 1.121 0 0 0 0-1.586ZM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4a1 1 0 1 1 2 0v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h4a1 1 0 1 1 0 2H6Z" clip-rule="evenodd"></path></svg></button><button type="button" data-docs-agent-close aria-label="Close docs agent" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-secondary transition-colors hover:bg-primary-soft-alpha hover:text-default"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 " ><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></header><div class="relative min-h-0 flex-1"><p data-docs-agent-status class="absolute inset-x-4 top-4 rounded-lg border border-subtle bg-surface-secondary p-3 text-sm text-secondary">
Loading docs agent...
</p><openai-chatkit id="docs-agent-chatkit" class="block h-full w-full"></openai-chatkit></div></div></div><script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js" async></script><script type="module" src="/_astro/DocsAgentLauncher.astro_astro_type_script_index_0_lang.CwPQZKCg.js"></script><script>
  function initializeDocsAgentLauncher() {
    const root = document.querySelector("[data-docs-agent-root]");
    if (!root || root.dataset.initialized === "true") return;

    const mobileOpenButton = root.querySelector("button[data-docs-agent-open]");
    const closeButton = root.querySelector("[data-docs-agent-close]");
    const newButton = root.querySelector("[data-docs-agent-new]");
    const panel = root.querySelector("[data-docs-agent-panel]");
    const status = root.querySelector("[data-docs-agent-status]");
    let chatkit = root.querySelector("openai-chatkit");
    const apiURL = root.dataset.chatkitApiUrl;
    const domainKey = root.dataset.chatkitDomainKey || "local-dev";
    const startGreeting =
      root.dataset.chatkitGreeting || "OpenAI developer docs";
    const startPromptsByParentRoute = (() => {
      try {
        const parsed = JSON.parse(
          root.dataset.chatkitStartPromptsByRoute || "{}"
        );
        return parsed && typeof parsed === "object" && !Array.isArray(parsed)
          ? parsed
          : {};
      } catch {
        return {};
      }
    })();
    const docsAgentSessionStorageKey = "docs-agent.chatkit-session-id";
    const uuidPattern =
      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;

    const randomUuid = () => {
      if (window.crypto?.randomUUID) {
        return window.crypto.randomUUID();
      }

      const bytes = new Uint8Array(16);
      if (window.crypto?.getRandomValues) {
        window.crypto.getRandomValues(bytes);
      } else {
        for (let index = 0; index < bytes.length; index += 1) {
          bytes[index] = Math.floor(Math.random() * 256);
        }
      }
      bytes[6] = (bytes[6] & 0x0f) | 0x40;
      bytes[8] = (bytes[8] & 0x3f) | 0x80;

      const hex = Array.from(bytes, (byte) =>
        byte.toString(16).padStart(2, "0")
      );
      return [
        hex.slice(0, 4).join(""),
        hex.slice(4, 6).join(""),
        hex.slice(6, 8).join(""),
        hex.slice(8, 10).join(""),
        hex.slice(10, 16).join(""),
      ].join("-");
    };

    let docsAgentSessionIdValue = null;

    const storeDocsAgentSessionId = (sessionId) => {
      docsAgentSessionIdValue = sessionId;
      try {
        window.sessionStorage.setItem(docsAgentSessionStorageKey, sessionId);
      } catch {
        // Ignore storage failures.
      }
      return sessionId;
    };

    const resetDocsAgentSessionId = () =>
      storeDocsAgentSessionId(randomUuid().toLowerCase());

    const docsAgentSessionId = () => {
      if (
        docsAgentSessionIdValue &&
        uuidPattern.test(docsAgentSessionIdValue)
      ) {
        return docsAgentSessionIdValue.toLowerCase();
      }
      try {
        const stored = window.sessionStorage.getItem(
          docsAgentSessionStorageKey
        );
        if (stored && uuidPattern.test(stored)) {
          docsAgentSessionIdValue = stored.toLowerCase();
          return docsAgentSessionIdValue;
        }
      } catch {
        // Fall through and create an in-memory session id.
      }
      return resetDocsAgentSessionId();
    };

    if (
      !mobileOpenButton ||
      !closeButton ||
      !newButton ||
      !(panel instanceof HTMLElement) ||
      !chatkit ||
      !apiURL
    ) {
      return;
    }

    let chatkitInitialized = false;
    let chatkitColorTheme = null;
    let chatkitParentRoute = null;
    let previousFocus = null;
    let lastPageSelection = { text: "", capturedAt: 0 };
    let conversationStartedTracked = false;

    const selectedTextLimit = 3000;
    const staleSelectionMs = 2 * 60 * 1000;
    const desktopPanelMedia = window.matchMedia("(min-width: 768px)");
    const syncOpenButtons = (expanded) => {
      document
        .querySelectorAll("button[data-docs-agent-open]")
        .forEach((button) => {
          button.setAttribute("aria-expanded", expanded);
        });
    };

    const syncLayoutTargets = () => {
      const isOpen = root.dataset.open === "true";
      const isDesktopPanel = desktopPanelMedia.matches;
      document.body.classList.toggle("docs-agent-open", isOpen);
      if (isOpen) {
        document.body.dataset.docsAgentOpen = "true";
      } else {
        delete document.body.dataset.docsAgentOpen;
      }
      syncOpenButtons(isOpen ? "true" : "false");
      document.querySelectorAll("[data-docs-agent-page]").forEach((page) => {
        if (page instanceof HTMLElement) {
          page.classList.toggle("is-docs-agent-open", isOpen);
          page.style.width =
            isOpen && isDesktopPanel
              ? "calc(100% - var(--docs-agent-panel-width))"
              : "";
          page.style.transform = isOpen
            ? isDesktopPanel
              ? "none"
              : "translateY(calc(-1 * var(--docs-agent-drawer-height)))"
            : "";
        }
      });

      const header = document.getElementById("header");
      header?.classList.toggle("is-docs-agent-open", isOpen);
      if (header) {
        const headerInner = header.firstElementChild;
        const headerNav = header.querySelector("nav");
        const headerSearchButton = header.querySelector(
          "[data-header-search-button]"
        );
        header.style.width =
          isOpen && isDesktopPanel
            ? "calc(100% - var(--docs-agent-panel-width))"
            : "";
        if (headerInner instanceof HTMLElement) {
          headerInner.style.gridTemplateColumns =
            isOpen && isDesktopPanel ? "auto minmax(0, 1fr) auto" : "";
        }
        if (headerNav instanceof HTMLElement) {
          headerNav.style.minWidth = isOpen && isDesktopPanel ? "0" : "";
          headerNav.style.overflow = "";
        }
        if (headerSearchButton instanceof HTMLElement) {
          headerSearchButton.style.display =
            isOpen && isDesktopPanel ? "none" : "";
        }
      }

      panel.classList.toggle("is-open", isOpen);
      panel.style.transform = isOpen
        ? isDesktopPanel
          ? "translateX(0)"
          : "translateY(0)"
        : "";
    };

    const normalizeAnalyticsText = (value) =>
      typeof value === "string" ? value.replace(/\s+/g, " ").trim() : "";

    const analyticsSlug = (value, fallback) => {
      const slug = normalizeAnalyticsText(value)
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, "_")
        .replace(/^_+|_+$/g, "");
      return slug || fallback;
    };

    const normalizePathname = (pathname) => {
      if (!pathname || pathname === "/") return "/";
      return pathname.replace(/\/+$/, "") || "/";
    };

    const docsAgentParentRoute = (pathname) => {
      const normalized = normalizePathname(pathname);

      if (normalized === "/") return "home";
      if (normalized === "/api" || normalized.startsWith("/api/")) {
        return "api";
      }
      if (normalized === "/codex" || normalized.startsWith("/codex/")) {
        return "codex";
      }
      if (
        normalized === "/chatgpt" ||
        normalized.startsWith("/chatgpt/") ||
        normalized === "/apps-sdk" ||
        normalized.startsWith("/apps-sdk/") ||
        normalized === "/commerce" ||
        normalized.startsWith("/commerce/")
      ) {
        return "chatgpt";
      }
      if (
        normalized === "/learn" ||
        normalized.startsWith("/learn/") ||
        normalized === "/community" ||
        normalized.startsWith("/community/") ||
        normalized === "/cookbook" ||
        normalized.startsWith("/cookbook/") ||
        normalized === "/showcase" ||
        normalized.startsWith("/showcase/") ||
        normalized === "/tracks" ||
        normalized.startsWith("/tracks/") ||
        normalized === "/blog" ||
        normalized.startsWith("/blog/")
      ) {
        return "resources";
      }

      return "home";
    };

    const startPromptsForRoute = (
      pathname = window.location.pathname || "/"
    ) => {
      const parentRoute = docsAgentParentRoute(pathname);
      const prompts = startPromptsByParentRoute[parentRoute];

      if (Array.isArray(prompts)) return prompts;
      return Array.isArray(startPromptsByParentRoute.home)
        ? startPromptsByParentRoute.home
        : [];
    };

    const startPromptAnalyticsForRoute = (pathname) =>
      startPromptsForRoute(pathname)
        .map((prompt, index) => {
          const promptText = normalizeAnalyticsText(prompt?.prompt);
          if (!promptText) return null;
          return {
            id: analyticsSlug(prompt?.label, `prompt_${index + 1}`),
            label:
              normalizeAnalyticsText(prompt?.label) || `Prompt ${index + 1}`,
            position: index + 1,
            text: promptText,
          };
        })
        .filter(Boolean);

    const normalizeSelectedText = (value) =>
      value.replace(/\r\n?/g, "\n").trim().slice(0, selectedTextLimit);

    const nodeIsInDocsAgent = (node) => {
      if (!node) return false;
      const element =
        node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
      return element instanceof Element && root.contains(element);
    };

    const currentPageSelectionText = () => {
      const selection = window.getSelection?.();
      if (!selection || selection.isCollapsed) return "";
      if (
        nodeIsInDocsAgent(selection.anchorNode) ||
        nodeIsInDocsAgent(selection.focusNode)
      ) {
        return "";
      }

      return normalizeSelectedText(selection.toString());
    };

    const rememberPageSelection = () => {
      const text = currentPageSelectionText();
      if (!text) return;
      lastPageSelection = {
        text,
        capturedAt: Date.now(),
      };
    };

    const selectedTextForAgentContext = () => {
      const text = currentPageSelectionText();
      if (text) {
        lastPageSelection = {
          text,
          capturedAt: Date.now(),
        };
        return text;
      }

      if (Date.now() - lastPageSelection.capturedAt <= staleSelectionMs) {
        return lastPageSelection.text;
      }
      return "";
    };

    const docsAgentPageContext = () => {
      const context = {
        route: window.location.pathname || "/",
      };
      const selectedText = selectedTextForAgentContext();
      if (selectedText) {
        context.selectedText = selectedText;
      }
      return context;
    };

    const hasPageSelectionForAnalytics = () => {
      if (currentPageSelectionText()) return true;
      return Date.now() - lastPageSelection.capturedAt <= staleSelectionMs
        ? Boolean(lastPageSelection.text)
        : false;
    };

    const chatKitRequestInputText = (body) => {
      const content = body?.params?.input?.content;
      if (!Array.isArray(content)) return "";

      return content
        .map((part) =>
          part?.type === "input_text" && typeof part.text === "string"
            ? part.text
            : ""
        )
        .filter(Boolean)
        .join("\n")
        .trim();
    };

    const defaultPromptMatch = (body) => {
      const text = normalizeAnalyticsText(chatKitRequestInputText(body));
      if (!text) return null;

      const startPromptByText = new Map(
        startPromptAnalyticsForRoute(window.location.pathname || "/").map(
          (prompt) => [prompt.text, prompt]
        )
      );
      return startPromptByText.get(text) || null;
    };

    const promptAnalyticsData = (prompt) =>
      prompt
        ? {
            prompt_id: prompt.id,
            prompt_label: prompt.label,
            prompt_position: prompt.position,
          }
        : {};

    const isDocsAgentApiRequest = (input) => {
      try {
        const requestUrl =
          typeof input === "string" || input instanceof URL
            ? new URL(input, window.location.href)
            : new URL(input.url);
        const configuredUrl = new URL(apiURL, window.location.href);
        return requestUrl.href === configuredUrl.href;
      } catch {
        return false;
      }
    };

    const docsAgentFetch = (input, init) => {
      if (!isDocsAgentApiRequest(input)) {
        return window.fetch(input, init);
      }

      const nextInit = init ? { ...init } : {};
      if (typeof nextInit.body === "string") {
        try {
          const body = JSON.parse(nextInit.body);
          if (body && typeof body === "object" && !Array.isArray(body)) {
            if (body.type === "threads.create" && !conversationStartedTracked) {
              const prompt = defaultPromptMatch(body);
              const promptData = promptAnalyticsData(prompt);
              conversationStartedTracked = true;
              trackDocsAgentEvent("docs_agent_conversation_started", {
                entry_point: prompt ? "default_prompt" : "composer",
                request_type: body.type,
                has_page_selection: hasPageSelectionForAnalytics(),
                ...promptData,
              });
              if (prompt) {
                trackDocsAgentEvent("docs_agent_default_prompt_selected", {
                  request_type: body.type,
                  ...promptData,
                });
              }
            }

            const metadata =
              body.metadata &&
              typeof body.metadata === "object" &&
              !Array.isArray(body.metadata)
                ? body.metadata
                : {};
            body.metadata = {
              ...metadata,
              pageContext: docsAgentPageContext(),
            };
            nextInit.body = JSON.stringify(body);
          }
        } catch {
          // Preserve the original body if it is not JSON.
        }
      }

      const headers = new Headers(
        nextInit.headers ||
          (input instanceof Request ? input.headers : undefined)
      );
      headers.set("x-docs-agent-user", docsAgentSessionId());
      nextInit.headers = headers;

      return window.fetch(input, nextInit);
    };

    const clearLegacyStoredState = () => {
      try {
        window.localStorage.removeItem("docs-agent.panel-open");
        window.localStorage.removeItem("docs-agent.thread-id");
        window.localStorage.removeItem("docs-agent.user-id");
      } catch {
        // Ignore storage failures.
      }
    };

    const showStatus = (message) => {
      if (!status) return;
      status.textContent = message;
      status.hidden = false;
    };

    const hideStatus = () => {
      if (status) status.hidden = true;
    };

    const getColorTheme = () => {
      const html = document.documentElement;
      return html.dataset.theme === "dark" || html.classList.contains("dark")
        ? "dark"
        : "light";
    };

    const normalizeClientToolArgs = (args) => {
      if (!args) return {};
      if (typeof args === "string") {
        try {
          return JSON.parse(args);
        } catch {
          return {};
        }
      }
      return args;
    };

    const analyticsViewport = () =>
      window.matchMedia("(min-width: 768px)").matches ? "desktop" : "mobile";

    const trackDocsAgentEvent = (name, data = {}) => {
      try {
        window.__docsAgentTrackEvent?.(name, {
          surface: "docs_agent",
          route: window.location.pathname || "/",
          viewport: analyticsViewport(),
          ...data,
        });
      } catch {
        // Ignore analytics failures.
      }
    };

    const navigateToHref = async (href) => {
      if (typeof href !== "string" || !href.trim()) {
        return { ok: false, error: "Missing href." };
      }

      const url = new URL(href, window.location.origin);
      const originalHost = url.host;
      const allowedHosts = new Set([
        window.location.host,
        "developers.openai.com",
      ]);

      if (!allowedHosts.has(originalHost)) {
        return { ok: false, error: "Navigation host is not allowed." };
      }

      const routeHref =
        originalHost === window.location.host ||
        originalHost === "developers.openai.com"
          ? `${url.pathname}${url.search}${url.hash}`
          : url.toString();

      if (
        routeHref.startsWith("/") &&
        typeof window.__docsAgentNavigate === "function"
      ) {
        await window.__docsAgentNavigate(routeHref, { history: "push" });
      } else {
        window.location.assign(routeHref);
      }

      return { ok: true, href: routeHref };
    };

    const buildChatKitOptions = () => ({
      api: {
        url: apiURL,
        domainKey,
        fetch: docsAgentFetch,
      },
      theme: {
        colorScheme: getColorTheme(),
      },
      header: { enabled: false },
      onClientTool(toolCall) {
        const args = normalizeClientToolArgs(
          toolCall?.params || toolCall?.arguments
        );

        if (toolCall?.name === "navigate_to_page") {
          return navigateToHref(args.href);
        }

        if (toolCall?.name === "open_custom_guide") {
          const guideHref =
            args.href ||
            (args.generated_id ? `/custom-guide/${args.generated_id}` : "");
          trackDocsAgentEvent("docs_agent_custom_guide_opened", {
            source: "client_tool",
            guide_id: args.generated_id || "",
            href: guideHref,
          });
          return navigateToHref(guideHref);
        }

        return {
          ok: false,
          error: `Unknown client tool: ${toolCall?.name || "unknown"}.`,
        };
      },
      widgets: {
        onAction(action) {
          const payload = normalizeClientToolArgs(action?.payload);

          if (action?.type === "custom_guide.view") {
            const guideHref =
              payload.href ||
              payload.url ||
              (payload.generated_id
                ? `/custom-guide/${payload.generated_id}`
                : "");
            trackDocsAgentEvent("docs_agent_custom_guide_opened", {
              source: "widget_action",
              guide_id: payload.generated_id || "",
              href: guideHref,
            });

            return navigateToHref(guideHref);
          }

          if (action?.type === "docs_agent.navigate") {
            const href = payload.href || payload.url || "";
            trackDocsAgentEvent("docs_agent_suggested_page_opened", {
              source: "widget_action",
              href,
              suggestion_title: payload.title || "",
              suggestion_type: payload.type || "",
            });

            return navigateToHref(href);
          }

          return {
            ok: false,
            error: `Unknown widget action: ${action?.type || "unknown"}.`,
          };
        },
      },
      composer: {
        placeholder: "Ask about docs or what you want to build",
      },
      startScreen: {
        greeting: startGreeting,
        prompts: startPromptsForRoute(),
      },
    });

    const applyChatKitOptions = () => {
      chatkitColorTheme = getColorTheme();
      chatkitParentRoute = docsAgentParentRoute(
        window.location.pathname || "/"
      );
      chatkit.setOptions(buildChatKitOptions());
    };

    const syncChatKitOptions = () => {
      if (!chatkitInitialized) return;
      const nextTheme = getColorTheme();
      const nextParentRoute = docsAgentParentRoute(
        window.location.pathname || "/"
      );
      if (
        nextTheme === chatkitColorTheme &&
        nextParentRoute === chatkitParentRoute
      ) {
        return;
      }
      applyChatKitOptions();
    };

    const themeObserver = new MutationObserver(syncChatKitOptions);
    themeObserver.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class", "data-theme"],
    });

    const initializeChatKit = async () => {
      if (chatkitInitialized) return;
      showStatus("Loading docs agent...");

      try {
        await customElements.whenDefined("openai-chatkit");

        applyChatKitOptions();
        chatkitInitialized = true;
        hideStatus();
      } catch (error) {
        console.error("Failed to initialize Docs Agent ChatKit", error);
        showStatus("Docs agent is unavailable.");
      }
    };

    const resetChatKit = async () => {
      const nextChatKit = document.createElement("openai-chatkit");
      nextChatKit.id = "docs-agent-chatkit";
      nextChatKit.className = "block h-full w-full";
      chatkit.replaceWith(nextChatKit);
      chatkit = nextChatKit;
      chatkitInitialized = false;
      conversationStartedTracked = false;
      resetDocsAgentSessionId();
      await initializeChatKit();
    };

    const openPanel = () => {
      if (root.dataset.open !== "true") {
        trackDocsAgentEvent("docs_agent_panel_opened", {
          source: "ask_button",
          has_page_selection: hasPageSelectionForAnalytics(),
        });
      }
      previousFocus = document.activeElement;
      document.body.dataset.docsAgentOpen = "true";
      document.body.classList.add("docs-agent-open");
      root.dataset.open = "true";
      root.classList.add("is-open");
      syncLayoutTargets();
      initializeChatKit();
      requestAnimationFrame(() => closeButton.focus());
    };

    const closePanel = () => {
      delete document.body.dataset.docsAgentOpen;
      document.body.classList.remove("docs-agent-open");
      delete root.dataset.open;
      root.classList.remove("is-open");
      syncLayoutTargets();
      if (previousFocus instanceof HTMLElement) {
        previousFocus.focus();
      }
    };

    clearLegacyStoredState();
    desktopPanelMedia.addEventListener("change", syncLayoutTargets);
    document.addEventListener("selectionchange", rememberPageSelection);
    document.addEventListener("astro:page-load", syncLayoutTargets);
    document.addEventListener("astro:page-load", syncChatKitOptions);
    document.addEventListener("pointerdown", (event) => {
      if (
        event.target instanceof Element &&
        event.target.closest("button[data-docs-agent-open]")
      ) {
        rememberPageSelection();
      }
    });
    document.addEventListener("click", (event) => {
      if (
        event.target instanceof Element &&
        event.target.closest("button[data-docs-agent-open]")
      ) {
        openPanel();
      }
    });
    newButton.addEventListener("click", resetChatKit);
    closeButton.addEventListener("click", closePanel);
    panel.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        closePanel();
      }
    });

    root.dataset.initialized = "true";
    syncLayoutTargets();
  }

  document.addEventListener("astro:page-load", initializeDocsAgentLauncher);
  initializeDocsAgentLauncher();
</script> <script type="module" src="/_astro/PageLayout.astro_astro_type_script_index_0_lang.DrXPgUUC.js"></script> </body> </html>