Bolt.new AI and OpenAI GPT integration: Step-by-Step Guide 2025

You integrate Bolt.new with OpenAI GPT the same way you would in any normal full‑stack project: you call the OpenAI REST API from your Bolt backend files using your OpenAI API key stored in Bolt environment variables. Bolt itself does not have a special or hidden integration layer — you write the API call yourself in a server route, tie it to UI components, and test it directly in the Bolt preview. The flow is simple: put your API key in Bolt env vars, import the official OpenAI SDK (or use fetch), create an API route (like /api/gpt), call the OpenAI endpoint, and return the data to your frontend.

 

How to integrate Bolt.new with OpenAI GPT (the real, working way)

 

This is the practical, production‑valid pattern. Nothing magic — just environment variables, API calls, and the official OpenAI client.

• You store secrets in Bolt under Environment Variables (never hardcode keys into files).
• You create a backend API route such as api/gpt.js or routes/gpt.js depending on your Bolt template.
• You call OpenAI using either fetch or the @openai/openai SDK.
• You connect your frontend UI code to hit that route.
• Bolt handles running the code; you handle the integration.

 

Step‑by‑step explanation

 

Environment variable: In Bolt, open the left sidebar → Environment → add:

OPENAI_API_KEY=sk-...

 

Install the official OpenAI JavaScript SDK:

npm install openai

 

Create a backend route inside Bolt (example: api/gpt.js):

// api/gpt.js
import OpenAI from "openai";

export async function POST(req) {
  try {
    const { prompt } = await req.json();

    const client = new OpenAI({
      apiKey: process.env.OPENAI_API_KEY // loaded from Bolt env vars
    });

    // Call the GPT model
    const chatCompletion = await client.chat.completions.create({
      model: "gpt-4.1-mini", // or "gpt-4.1", "o3-mini", etc.
      messages: [
        { role: "user", content: prompt }
      ]
    });

    return new Response(
      JSON.stringify({ reply: chatCompletion.choices[0].message.content }),
      { status: 200 }
    );
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500 });
  }
}

 

This file becomes a real server route inside Bolt.new. Your frontend can just fetch it.

 

Add a simple frontend call: (React example inside Bolt)

async function askGPT(prompt) {
  const res = await fetch("/api/gpt", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt })
  });

  const data = await res.json();
  return data.reply;
}

 

What’s important to understand

 

• Bolt does not auto‑connect to OpenAI. You build the connection using normal API patterns.
• All secrets stay in environment variables. They never go in code.
• Your server route is the gateway. The frontend never talks directly to OpenAI.
• You can swap models anytime because the integration is just a function call.
• This remains valid outside Bolt — the code is portable to any Node server.

 

Summary

 

You integrate Bolt.new with OpenAI GPT by writing a normal API route inside Bolt that calls the OpenAI REST API using your API key stored in Bolt environment variables. Then your UI calls that route. Nothing proprietary, no hidden glue — just standard full‑stack integration patterns done inside Bolt’s workspace.