> ## Documentation Index > Fetch the complete documentation index at: https://openai-hd4n6.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Compare Models export const ModelCard = ({img, href, title, description}) => { return
{title}

{title}

{description}

; }; export const ModelSpecs = ({modelName}) => { const modelData = { 'o4-mini': { reasoning: 4, speed: 3, intelligence: 4, input: { text: true, image: true, audio: false }, output: { text: true, image: false, audio: false }, reasoningTokens: true, pricing: { input: '$1.10', cachedInput: '$0.28', output: '$4.40' }, context: { window: '200,000', maxOutputTokens: '100,000' }, knowledgeCutoff: 'May 31, 2024' }, 'o3': { reasoning: 5, speed: 1, intelligence: 5, input: { text: true, image: true, audio: false }, output: { text: true, image: false, audio: false }, reasoningTokens: true, pricing: { input: '$2.00', cachedInput: '$0.50', output: '$8.00' }, context: { window: '200,000', maxOutputTokens: '100,000' }, knowledgeCutoff: 'May 31, 2024' }, 'GPT-4.1': { reasoning: 4, speed: 3, intelligence: 4, input: { text: true, image: true, audio: false }, output: { text: true, image: false, audio: false }, reasoningTokens: false, pricing: { input: '$2.00', cachedInput: '$0.50', output: '$8.00' }, context: { window: '1,047,576', maxOutputTokens: '32,768' }, knowledgeCutoff: 'May 31, 2024' } }; const data = modelData[modelName]; if (!data) return null; const renderRatingDots = (rating, maxRating = 5) => { return
{[...Array(maxRating)].map((_, i) =>
)}
; }; const renderSpeedIcons = speed => { return
{[...Array(3)].map((_, i) => )}
; }; const renderIntelligenceIcons = intelligence => { return
{[...Array(4)].map((_, i) => )}
; }; const renderInputOutputIcons = capabilities => { const textIcon = ; const imageIcon = ; const audioDisabledIcon = ; return
{textIcon} {imageIcon} {audioDisabledIcon}
; }; const renderReasoningTokens = hasReasoningTokens => { const checkIcon = ; const xIcon = ; return {hasReasoningTokens ? checkIcon : xIcon} ; }; return
Reasoning {renderIntelligenceIcons(data.reasoning)}
Speed {renderSpeedIcons(data.speed)}
Intelligence {renderRatingDots(data.intelligence)}
Input {renderInputOutputIcons(data.input)}
Output {renderInputOutputIcons(data.output)}
Reasoning tokens {renderReasoningTokens(data.reasoningTokens)}
PRICING PER 1M TOKENS
Input {data.pricing.input}
Cached Input {data.pricing.cachedInput}
Output {data.pricing.output}
CONTEXT
Window {data.context.window}
Max Output Tokens {data.context.maxOutputTokens}
Knowledge Cutoff {data.knowledgeCutoff}
; }; export const ModelSelector = ({label = "Select Model", options = [], selected, setSelected, searchable = true, placeholder = "Search models..."}) => { const [dropdownOpen, setDropdownOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const filteredOptions = searchable ? options.filter(option => option.toLowerCase().includes(searchTerm.toLowerCase())) : options; const handleOptionClick = option => { setSelected(option); setDropdownOpen(false); setSearchTerm(''); }; return
{dropdownOpen &&
{ setDropdownOpen(false); setSearchTerm(''); }} />} {dropdownOpen &&
{searchable &&
setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 bg-primary-light dark:bg-[#202123] text-gray-900 dark:text-white rounded-lg border-2 border-[#10a37f] focus:border-green-00 focus:outline-none placeholder-gray-900 dark:placeholder-gray-400 text-sm" autoFocus />
}
{filteredOptions.length > 0 ? filteredOptions.map((option, index) => ) :
No models found
Try adjusting your search
}
}
; }; export const LearnTitle = ({children}) => { return
{children}
; }; export const availableModels = ['o4-mini', 'o3', 'GPT-4.1']; export const CompareModelsLayout = () => { const [selectedModel1, setSelectedModel1] = useState('GPT-4.1'); const [selectedModel2, setSelectedModel2] = useState('o4-mini'); const [selectedModel3, setSelectedModel3] = useState('o3'); const getModelDetails = model => { switch (model) { case 'o4-mini': return { title: 'o4-mini', description: 'Faster, more affordable reasoning model', img: 'https://mintlify-assets.b-cdn.net/o4-mini.svg' }; case 'o3': return { title: 'o3', description: 'Our most powerful reasoning model', img: 'https://mintlify-assets.b-cdn.net/o3-image.svg' }; case 'GPT-4.1': return { title: 'GPT-4.1', description: 'Flagship GPT model for complex tasks', img: 'https://mintlify-assets.b-cdn.net/gpt-4.1.svg' }; default: return null; } }; const renderColumn = (defaultModel, selectedModel, setSelectedModel) => { const modelDetail = getModelDetails(selectedModel); return
; }; return
{renderColumn('o4-mini', selectedModel2, setSelectedModel2)} {renderColumn('o3', selectedModel3, setSelectedModel3)} {renderColumn('GPT-4.1', selectedModel1, setSelectedModel1)}
; };

Compare Models

Explore all available models and compare their capabilities.