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

To integrate Bolt.new with Shippo, you treat Bolt as the place where you write and run normal backend code that calls Shippo’s public REST API. There is no “direct Bolt → Shippo” coupling. You integrate by writing API calls from Bolt’s server-side runtime, storing your Shippo API key as an environment variable, and then building your shipping workflows (create shipment, get rates, buy labels, track packages) through those API endpoints. Think of Bolt as your editor + execution sandbox, and Shippo as the external shipping service you talk to via HTTPS. That’s the whole model.

 

What Integration Means Here

 

You’ll be doing a standard REST API integration. Shippo exposes endpoints for rates, labels, tracking, and more. Bolt.new gives you a Node.js backend in which you can write fetch() or axios calls to Shippo’s API. The only requirement is storing your Shippo private token safely as an environment variable in Bolt's workspace.

• You authenticate to Shippo using a Bearer token.
• You send JSON payloads to Shippo’s REST endpoints.
• You receive JSON responses with rates, label URLs, tracking info, etc.

 

Step-by-Step: Integrating Shippo Inside a Bolt.new Project

 

• Create a backend route in Bolt where you’ll call Shippo from server-side code. This prevents exposing your API key to the browser.
• Add your Shippo API key under Bolt.new environment variables:
  Name: SHIPPO_API_KEY
  Value: your-live-or-test-token
• Inside Bolt’s backend (typically an Express route), make a call to Shippo’s API using the environment variable.

 

Example: Create Shipment + Request Rates (Node.js backend in Bolt)

 

// backend/routes/shippo.js

import express from "express";

const router = express.Router();

router.post("/rates", async (req, res) => {
  try {
    const response = await fetch("https://api.goshippo.com/shipments/", {
      method: "POST",
      headers: {
        "Authorization": `ShippoToken ${process.env.SHIPPO_API_KEY}`, // Shippo uses ShippoToken, not Bearer
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        address_from: {
          name: "Sender",
          street1: "215 Clayton St.",
          city: "San Francisco",
          state: "CA",
          zip: "94117",
          country: "US"
        },
        address_to: {
          name: "Receiver",
          street1: "965 Mission St.",
          city: "San Francisco",
          state: "CA",
          zip: "94103",
          country: "US"
        },
        parcels: [{
          length: "5",
          width: "5",
          height: "5",
          distance_unit: "in",
          weight: "2",
          mass_unit: "lb"
        }],
        async: false
      })
    });

    const data = await response.json();
    res.json(data); // Return the rates back to the frontend
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

export default router;

 

Example: Purchasing a Label

 

// backend/routes/shippo.js

router.post("/buy-label", async (req, res) => {
  try {
    const { rateId } = req.body; // rateId comes from earlier Shippo response

    const response = await fetch("https://api.goshippo.com/transactions/", {
      method: "POST",
      headers: {
        "Authorization": `ShippoToken ${process.env.SHIPPO_API_KEY}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        rate: rateId,
        label_file_type: "PDF",
        async: false
      })
    });

    const data = await response.json();
    res.json(data); // Contains label URL
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

 

How to Trigger This From Bolt’s Frontend

 

The frontend calls your backend, NOT Shippo directly, because Shippo keys must stay server-side.

// frontend example
const getRates = async () => {
  const response = await fetch("/api/shippo/rates", { method: "POST" });
  const data = await response.json();
  console.log(data); // shows rate list, pick a rate ID
};

 

Hardening for Real Deployment (Outside Bolt)

 

• Never expose your Shippo token in client-side JavaScript.
• Move env vars to your real hosting provider (e.g., Vercel, Render, Railway).
• Validate user inputs before sending them to Shippo (addresses, parcel dimensions).
• Use HTTPS only when deploying.

 

Important Notes

 

• Shippo token uses ShippoToken prefix, not Bearer.
• Bolt.new does not auto-install SDKs; Shippo’s Node SDK exists but REST is simpler in Bolt.
• Shippo test tokens can buy “test” labels that cost $0 — ideal for development.

 

This is the complete real-world integration path: store Shippo token safely in Bolt’s environment, make authenticated server-side REST calls, expose backend routes, and use the responses in your app. This pattern works identically both inside Bolt.new and when deployed to a real environment.