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

 

Step 1: Create a Configuration File for Zeplin Credentials

 

In your Bolt.new AI project, create a new file called config.ts. This file will store your Zeplin API URL and token. Replace the placeholder with your actual API token from Zeplin.

export const ZEPLINAPIURL = 'https://api.zeplin.dev';
export const ZEPLINAPITOKEN = 'YOURZEPLINAPI_TOKEN'; // Replace with your actual token

 

Step 2: Create the Zeplin Integration Module

 

Create a new file named zeplinIntegration.ts in your project (for example, in a folder called src or integrations). This file contains the TypeScript code that handles API calls to Zeplin. We are using the built-in fetch API available in modern browsers. If your project runs in a Node.js environment where fetch is not natively available, please add a polyfill by including its code snippet inline.

import { ZEPLINAPIURL, ZEPLINAPITOKEN } from './config';

export async function fetchZeplinProjects(): Promise<any> {
  const response = await fetch(${ZEPLIN_API_URL}/projects, {
    headers: {
      'Authorization': Bearer ${ZEPLIN_API_TOKEN},
      'Content-Type': 'application/json'
    }
  });
  
  if (!response.ok) {
    throw new Error('Failed to fetch projects from Zeplin');
  }
  
  return await response.json();
}

 

Step 3: Integrate the Zeplin Module into Your Main Application Code

 

Open your main application file (for example, main.ts or index.ts) in your Bolt.new AI project. Then import and use the fetchZeplinProjects function to retrieve Zeplin project data. Insert the following code snippet into your main file at the location where you want to make the API call or handle Zeplin data.

import { fetchZeplinProjects } from './zeplinIntegration';

// Example function to load and process Zeplin projects
async function loadZeplinData() {
  try {
    const projects = await fetchZeplinProjects();
    console.log('Zeplin Projects:', projects);
    // Insert any additional processing or UI updates here
  } catch (error) {
    console.error('Error loading Zeplin data:', error);
  }
}

// Call the function to load Zeplin data when needed (e.g., on component mount or page load)
loadZeplinData();

 

Step 4: Handling Dependency Installation Without a Terminal

 

Bolt.new AI does not provide direct terminal access. If your code environment requires a fetch polyfill (for example, in a Node.js context without native fetch support), add the polyfill code directly at the top of your zeplinIntegration.ts file. For instance, you can include the following snippet that loads a lightweight fetch implementation:

// If 'fetch' is not available in your environment, uncomment the lines below to include a polyfill
// import * as nodeFetch from 'node-fetch';
// (global as any).fetch = nodeFetch;

Make sure to uncomment these lines only if you need to support environments without a native fetch implementation.

 

Step 5: Testing Your Integration

 

After inserting the code snippets in their respective files, save all changes in your Bolt.new AI project. Run your project by clicking the appropriate run button provided by the platform. Open the browser console to verify that the Zeplin project data is logged without errors. Any issues will be shown in the console for debugging.