Skip to content
'; user_status_content.firstChild.appendChild(avatarContainer); } else { // Placeholder for LoggedOutUserMenu let loggedOutContainer = document.createElement('div'); // if LoggedOutUserMenu fallback let userBtn = document.createElement('button'); userBtn.style.width = "33px"; userBtn.style.height = "33px"; userBtn.style.display = "flex"; userBtn.style.alignItems = "center"; userBtn.style.justifyContent = "center"; userBtn.style.color = "var(--ds-gray-900)"; userBtn.style.border = "1px solid var(--ds-gray-300)"; userBtn.style.borderRadius = "100%"; userBtn.style.cursor = "pointer"; userBtn.style.background = "transparent"; userBtn.style.padding = "0"; // user icon ( from geist) let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('data-testid', 'geist-icon'); svg.setAttribute('height', '16'); svg.setAttribute('stroke-linejoin', 'round'); svg.setAttribute('style', 'color:currentColor'); svg.setAttribute('viewBox', '0 0 16 16'); svg.setAttribute('width', '16'); let path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('fill-rule', 'evenodd'); path.setAttribute('clip-rule', 'evenodd'); path.setAttribute('d', 'M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z'); path.setAttribute('fill', 'currentColor'); svg.appendChild(path); userBtn.appendChild(svg); loggedOutContainer.appendChild(userBtn); loggedOutContainer.style.display = 'flex'; loggedOutContainer.style.gap = '8px'; loggedOutContainer.style.alignItems = 'center'; user_status_content.firstChild.appendChild(loggedOutContainer); } })();
Menu

Vercel & OpenAI Integration

Last updated February 24, 2026

Vercel integrates with OpenAI to enable developers to build fast, scalable, and secure AI applications.

You can integrate with any OpenAI model using the AI SDK, including the following OpenAI models:

  • GPT-4o: Understand and generate natural language or code
  • GPT-4.5: Latest language model with enhanced emotional intelligence
  • o3-mini: Reasoning model specialized in code generation and complex tasks
  • DALL·E 3: Generate and edit images from natural language
  • Embeddings: Convert term into vectors

To help you get started, we have built a variety of AI templates integrating OpenAI with Vercel.

Before you begin, ensure you have an OpenAI account. Once registered:

  1. Log into your OpenAI Dashboard and view API keys.

  2. Click on Create new secret key. Copy the generated API key securely.

    Always keep your API keys confidential. Do not expose them in client-side code. Use Vercel Environment Variables for safe storage and do not commit these values to git.

  3. Finally, add the OPENAI_API_KEY environment variable in your project:

    .env.local
    OPENAI_API_KEY='sk-...3Yu5'

Integrating OpenAI into your Vercel project is seamless with the AI SDK.

Install the AI SDK in your project with your favorite package manager:

Terminal
pnpm i ai

You can use the SDK to build AI applications with React (Next.js), Vue (Nuxt), Svelte (SvelteKit), and Node.js.

The AI SDK also has full support for OpenAI Functions (tool calling).

Learn more about using tools with the AI SDK.


Was this helpful?

supported.