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

To integrate Bolt.new with Clockify, you simply call the Clockify REST API from within your Bolt.new project using a real Clockify API key stored in environment variables. Bolt.new doesn’t have a built‑in Clockify connector — you integrate it the same way you would in any Node/React full‑stack app: create API routes in the Bolt backend, pass your Clockify API key via headers, and then expose functions to your frontend or AI agent. That’s the whole model. Everything else is about doing it clean, secure, and testable inside the Bolt.new sandbox.

 

What Clockify Integration Really Means in Bolt.new

 

Clockify provides a REST API. Bolt.new gives you a Node.js backend and a React frontend, plus an AI agent that can write code for you. Integration = sending authenticated HTTP requests from your Bolt backend to Clockify's endpoints.

• Auth model: Clockify uses simple API key auth via a header (X-Api-Key). No OAuth required.
• Data flows: your backend calls Clockify → returns sanitized data → your frontend displays or triggers actions.
• Security: the API key must live in Bolt.new environment variables, never in the frontend.

 

Step-by-step: How to integrate Bolt.new AI with Clockify

 

This is the simplest, safest pattern you should teach any junior dev.

• Step: Create a Clockify API key
  Go to Clockify → Profile → API → generate an API key.
• Step: Add it to Bolt.new environment variables
  In Bolt: Project Settings → Environment Variables → add CLOCKIFY_API_KEY.
• Step: Create a backend route that calls Clockify
  You never call Clockify directly from the frontend. You proxy through your backend.

 

// backend/routes/clockify.js

import express from "express";
import axios from "axios";

const router = express.Router();

router.get("/workspaces", async (req, res) => {
  try {
    const response = await axios.get(
      "https://api.clockify.me/api/v1/workspaces",
      {
        headers: {
          "X-Api-Key": process.env.CLOCKIFY_API_KEY // required by Clockify
        }
      }
    );

    res.json(response.data); // send workspace list to frontend
  } catch (err) {
    console.error("Clockify error:", err.response?.data || err.message);
    res.status(500).json({ error: "Clockify request failed" });
  }
});

export default router;

 

• Step: Register that route in your backend server

 

// backend/server.js

import express from "express";
import clockifyRoutes from "./routes/clockify.js";

const app = express();
app.use("/api/clockify", clockifyRoutes);

app.listen(3001, () => {
  console.log("Backend running on 3001");
});

 

• Step: Call your backend route from the frontend

 

// frontend/src/App.jsx

import { useEffect, useState } from "react";

export default function App() {
  const [workspaces, setWorkspaces] = useState([]);

  useEffect(() => {
    fetch("/api/clockify/workspaces")
      .then((res) => res.json())
      .then((data) => setWorkspaces(data))
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      <h3>Clockify Workspaces:</h3>
      <ul>
        {workspaces.map((ws) => (
          <li key={ws.id}>{ws.name}</li>
        ))}
      </ul>
    </div>
  );
}

 

How Bolt.new AI Helps with Integration

 

In Bolt.new, the AI agent can scaffold all this for you, but nothing magical happens. The AI just writes code like the examples above. You still need to:

• insert the Clockify API key into environment variables
• ensure all API calls happen server-side
• test routes using Bolt’s built-in API tester

From there, you can expand: creating time entries, tracking user timers, listing projects, etc., all via the same REST pattern.

 

Key Clockify Endpoints You Will Use

 

• GET /workspaces – list workspaces
• GET /workspaces/{workspaceId}/projects – list projects
• POST /workspaces/{workspaceId}/time-entries – create time entry
• PATCH /workspaces/{workspaceId}/user/{userId}/time-entries – manage timers

All use the same header: X-Api-Key: YOUR\_KEY.

 

What Not To Do

 

• Don’t put your Clockify API key in frontend code.
• Don’t call Clockify directly from the UI — browsers expose your key.
• Don’t commit the key into the repo.

 

This is the correct, real, production-valid way to integrate Bolt.new with Clockify: backend REST calls + environment variables + clean routing.