Connect an existing AI tool to Swarmary

Step 1: put the backend verification key in a backend `.env` file

Open the folder that runs your backend. It normally contains `server.js`, `app.py`, `package.json`, or `requirements.txt`. Create `.env` in that folder. Paste the full key shown in the developer dashboard to the right of the equals sign.

For Vercel, Render, Railway, or Zeabur: do not upload `.env`. Open your project Settings -> Environment Variables, add `DEVELOPER_API_KEY`, paste the key, then redeploy.

Step 2: let Swarmary open your tool inside the marketplace

This setting belongs in your own server, not Swarmary, not HTML, and not a buyer's browser. Choose the code that matches your project and put it in the named file. Redeploy after editing or buyers will see a blank page.

// File: server.js or app.js
// Put this immediately AFTER: const app = express()
// Put it BEFORE every app.get(...) or app.post(...) route.
app.use((req, res, next) => {
  res.setHeader(
    "Content-Security-Policy",
    "frame-ancestors 'self' https://www.swarmary.com",
  );
  next();
});

# File: app.py
# Put this immediately BELOW: app = Flask(__name__)
@app.after_request
def allow_swarmary_embed(response):
    response.headers["Content-Security-Policy"] = (
        "frame-ancestors 'self' https://www.swarmary.com"
    )
    return response

// File: next.config.js
// Replace your config with this shape, or add headers() inside it.
const nextConfig = {
  async headers() {
    return [{
      source: "/:path*",
      headers: [{
        key: "Content-Security-Policy",
        value: "frame-ancestors 'self' https://www.swarmary.com",
      }],
    }];
  },
};

module.exports = nextConfig;

Step 3: forward the short-lived access token from frontend to backend

Open the frontend file that sends a request after a buyer clicks Generate, Send, or Start. Find its `fetch(...)`; common files are `src/App.tsx`, `src/pages/index.tsx`, or `app/page.tsx`. Add `token` and `X-Marketplace-Token` to that request. Never put the developer key in frontend code.

// File: the frontend file that calls YOUR backend
// Example: src/App.tsx, src/pages/index.tsx, or app/page.tsx
// Put this next to the fetch(...) used by your Generate button.
const token = new URLSearchParams(window.location.search).get("token");

await fetch("/api/run-tool", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Marketplace-Token": token ?? "",
  },
  body: JSON.stringify({ prompt: "Hello" }),
});

Step 4: verify in your backend before calling an AI model

Open the backend file that calls OpenAI, DashScope, Claude, or another model, usually `server.js` or `app.py`. Find the model call, such as `openai.chat...`. Paste the verification block immediately before it: return 403 when it fails, and call the model only after it succeeds.

// File: server.js / app.js
// Put this INSIDE the route that calls your paid AI model.
// Put it immediately BEFORE openai.chat..., dashscope..., etc.
const token = req.get("X-Marketplace-Token");

const verified = await fetch("https://www.swarmary.com/api/verify-token", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.DEVELOPER_API_KEY}`,
  },
  body: JSON.stringify({ token }),
}).then((response) => response.json());

if (!verified.valid) {
  return res.status(403).json({ error: "Access denied" });
}

// Only BELOW this line: call OpenAI / DashScope / Claude.

Step 5: redeploy and test

Redeploy both frontend and backend. Run Embed check in the Swarmary developer dashboard, then open the tool with a buyer account that owns it.