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

The direct answer is: you integrate Bolt.new with Filestack the same way you integrate any frontend or backend app with Filestack — by using Filestack’s client-side JavaScript SDK for uploads and its REST API for server-side operations, and you place your Filestack API key (and if needed, your security policy/signature) into Bolt.new’s environment variables panel. Bolt.new itself does not have native Filestack integration; you wire it manually using normal web APIs inside the project you scaffold inside Bolt.new.

 

What “integration” actually means in Bolt.new

 

Bolt.new is a code workspace running your project (React, Next.js, Express, etc.) in a sandbox. It doesn’t connect to Filestack by magic. You integrate Filestack the same way you would in any real-world web app:

• Frontend upload widget using Filestack’s JavaScript SDK.
• Backend API routes using Filestack’s REST API if you need secure operations.
• Environment variables stored in Bolt.new’s environment panel.

That’s it. If you know how to integrate Filestack in a normal JS app, you already know how to integrate it inside Bolt.new.

 

Step-by-step: Filestack inside Bolt.new (frontend)

 

This is the simplest, production-valid way to use Filestack inside a Bolt.new React or Next.js project. It uses only public client-side upload traffic (safe with Filestack’s restricted policy if you need upload limits).

• Inside Bolt.new, open the “Environment Variables” panel.
• Add FILSTACK_API_KEY="your_filestack_key\_here".
• Restart the dev server.
• Add the Filestack SDK to your project.

npm install filestack-js

Then use it in a component:

// example React component in Bolt.new
import React from "react";
import * as filestack from "filestack-js";

const client = filestack.init(process.env.FILSTACK_API_KEY); // safe to expose for uploads

export default function UploadWidget() {
  const handleUpload = async () => {
    const result = await client.picker({
      onUploadDone: (res) => {
        console.log("Upload complete:", res); // returns file handle + metadata
      },
    }).open();
  };

  return (
    <button onClick={handleUpload}>
      Upload File
    </button>
  );
}

This works instantly inside Bolt.new preview and behaves the same way in production.

 

Step-by-step: Filestack inside Bolt.new (backend API routes)

 

If you want to do secure things — delete files, transform files, run workflows — you must use a backend route and authenticate with Filestack’s secret key (this should never touch the browser).

• Go to Bolt.new’s environment panel.
• Add FILSTACK_SECRET="your_filestack_app_secret".
• Create an API route (e.g., in Next.js /app/api/delete/route.js).

// example Next.js API route inside Bolt.new project
export async function POST(req) {
  const { handle } = await req.json();

  const response = await fetch(`https://www.filestackapi.com/api/file/${handle}`, {
    method: "DELETE",
    headers: {
      Authorization: `Bearer ${process.env.FILSTACK_SECRET}`, // secure server-side only
    },
  });

  if (!response.ok) {
    return new Response("Failed", { status: 400 });
  }

  return new Response("Deleted");
}

This route runs server-side only, so your Filestack secret stays protected.

 

Security policies in Filestack and how they apply in Bolt.new

 

Filestack lets you restrict what anonymous uploads can do. If your integration requires security policies (e.g. max file size, allowed mimetypes), you generate a policy + signature on the backend.

Here is how you’d generate them in an API route inside Bolt.new:

// minimal example of generating a Filestack policy+signature in an API route
import crypto from "crypto";

export async function GET() {
  const policyObj = {
    expiry: Math.floor(Date.now() / 1000) + 3600, // 1 hour
    call: ["pick", "read"],
  };

  const policy = Buffer.from(JSON.stringify(policyObj)).toString("base64");

  const signature = crypto
    .createHmac("sha256", process.env.FILSTACK_SECRET)
    .update(policy)
    .digest("hex");

  return Response.json({ policy, signature });
}

The frontend then passes that policy+signature when initializing the picker. This keeps your uploads secure and controlled even inside Bolt.new’s sandbox.

 

What you should remember

 

• Bolt.new doesn’t have native Filestack integration; you use Filestack’s real SDK and REST APIs.
• Uploads happen on the frontend using the Filestack JS SDK.
• Secure operations happen in backend routes using your Filestack secret key.
• Everything sensitive goes into Bolt.new environment variables.
• The code you write inside Bolt.new is identical to what you would deploy to production later.