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

To integrate Bolt.new AI with Zeplin, you don’t “connect” them directly. There is no built‑in Zeplin plugin for Bolt, and Bolt doesn’t have any special pipeline into Zeplin. What you do instead is use Bolt.new as a workspace to write code that talks to the real Zeplin REST API (or consume Zeplin’s webhooks) just like any other external service. In Bolt, you store your Zeplin API token in environment variables, call Zeplin’s public API endpoints from your backend routes, and optionally build UI that displays data pulled from Zeplin. That’s the real, production‑safe pattern.

 

What “integration” actually means

 

“Integrating Bolt.new AI with Zeplin” means: you use Bolt.new as the environment where you scaffold a backend service (Node/Express for example) that authenticates with Zeplin using a Personal Access Token or an OAuth client, calls Zeplin’s REST API to fetch projects/screens/components, and optionally exposes your own endpoints or UI that consume that data. Bolt itself is just the development environment; your code performs the actual integration.

• You authenticate with Zeplin using a token that you manually create in Zeplin’s dashboard.
• You store that token in Bolt.new’s environment variable panel (safe, not hardcoded).
• Your backend code calls Zeplin’s real API endpoints such as /v1/projects or /v1/screens.
• You can then build UI or automation using that data.

 

Step-by-step: How to integrate Zeplin API inside a Bolt.new project

 

Below is the practical workflow. Everything is real and uses Zeplin’s actual API.

• Inside Zeplin: Go to Account Settings → Developer → Personal Access Tokens, create a new token. Copy it.
• Inside Bolt.new: Open the Environment Variables panel and add ZEPLIN\_TOKEN=your-token-here.
• In your backend code (Node/Express or Next.js API route): add an HTTP client call with the token passed in Authorization header.

 

// Example Express route inside Bolt.new backend
// This fetches all Zeplin projects using a Personal Access Token

import express from "express";
import fetch from "node-fetch";

const router = express.Router();

router.get("/zeplin/projects", async (req, res) => {
  try {
    const response = await fetch("https://api.zeplin.dev/v1/projects", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${process.env.ZEPLIN_TOKEN}`,  // token from Bolt env vars
        "Content-Type": "application/json"
      }
    });

    if (!response.ok) {
      return res.status(response.status).send(await response.text());
    }

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

export default router;

 

This is all you truly need for a working integration. You can repeat the same pattern for fetching screens, components, comments, or any Zeplin asset that their REST API exposes.

 

How to use this in a Bolt.new UI

 

• Create a simple React component that calls your backend route /zeplin/projects.
• Render the list of projects, thumbnails, or metadata that Zeplin provides.
• This gives you a live UI inside Bolt that mirrors actual Zeplin data.

 

// Basic React component to load Zeplin projects from the backend

import { useEffect, useState } from "react";

export default function ZeplinProjects() {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    fetch("/api/zeplin/projects")  // path depends on your backend router config
      .then(res => res.json())
      .then(data => setProjects(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      <h3>Zeplin Projects</h3>
      {projects.map(p => (
        <div key={p.id}>
          <p><strong>{p.name}</strong></p>
          <p>ID: {p.id}</p>
        </div>
      ))}
    </div>
  );
}

 

Notes about authentication and limits

 

• Personal Access Tokens are simplest; use them for internal tools and prototypes.
• OAuth is required if you’re building a tool others will log into using their own Zeplin accounts.
• Zeplin API rate limits apply; treat it like any external API.
• Do not hardcode tokens into code in Bolt — always use environment variables.

 

How this transitions to production

 

You can copy the exact same backend code out of Bolt and deploy it on any real environment (Vercel, AWS, your own server). Replace Bolt’s environment variable storage with the platform’s environment settings. No other changes required, because Zeplin API calls are standard HTTP.

This is the correct, reliable way to integrate Zeplin with anything built in Bolt.new.