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

 

Creating the Clockify Configuration File

 

• Create a new file in your Bolt.new AI project named clockifyConfig.ts. This file will store your Clockify API key and workspace ID. Since Bolt.new AI does not have a terminal, manually add this file using the file explorer in your project.
• In clockifyConfig.ts, add the following code snippet. Replace the placeholders with your actual Clockify API key and workspace ID.

export const CLOCKIFYAPIKEY = "YOURCLOCKIFYAPI_KEY";
export const CLOCKIFYWORKSPACEID = "YOURWORKSPACEID";

 

Creating the Clockify Service Integration File

 

• Create another new file called clockifyService.ts in your project. This file will handle the API interactions with Clockify.
• Insert the following TypeScript code. It contains functions to get time entries and create a new time entry by calling Clockify’s API. Note that we use the built‐in fetch available in modern environments.

import { CLOCKIFYAPIKEY, CLOCKIFYWORKSPACEID } from "./clockifyConfig";

const BASE_URL = "https://api.clockify.me/api/v1";

const headers = {
  "Content-Type": "application/json",
  "X-Api-Key": CLOCKIFYAPIKEY
};

/**
- Fetch all time entries for a given user.
- Replace 'userId' with the actual Clockify user ID.
 */
export async function getTimeEntries(userId: string) {
  const url = ${BASE_URL}/workspaces/${CLOCKIFY_WORKSPACE_ID}/user/${userId}/time-entries;
  const response = await fetch(url, { headers });
  if (!response.ok) {
    throw new Error("Failed to fetch time entries: " + response.statusText);
  }
  return await response.json();
}

/**
- Create a new time entry.
- Adjust the payload as needed.
 */
export async function createTimeEntry(userId: string, data: any) {
  const url = ${BASE_URL}/workspaces/${CLOCKIFY_WORKSPACE_ID}/user/${userId}/time-entries;
  const response = await fetch(url, {
    method: "POST",
    headers,
    body: JSON.stringify(data)
  });
  if (!response.ok) {
    throw new Error("Failed to create time entry: " + response.statusText);
  }
  return await response.json();
}

 

Integrating the Clockify Service into Your Bolt.new AI Project

 

• Identify where in your project you want to initiate Clockify API calls. For example, if you have a main file like index.ts or a specific module handling business logic, open that file.
• Import the functions from clockifyService.ts and call them when needed. Below is an example snippet that demonstrates calling getTimeEntries and logging the result. Insert this code block into the appropriate module in your project.

import { getTimeEntries, createTimeEntry } from "./clockifyService";

// Replace with the actual Clockify user ID.
const clockifyUserId = "YOURCLOCKIFYUSER_ID";

// Example: Fetch and log time entries for a user.
async function fetchAndLogTimeEntries() {
  try {
    const entries = await getTimeEntries(clockifyUserId);
    console.log("Time Entries:", entries);
  } catch (error) {
    console.error("Error fetching time entries:", error);
  }
}

fetchAndLogTimeEntries();

// Example: Create a new time entry.
// Prepare your payload according to Clockify API documentation.
// Adjust fields such as description, start, and end as required.
async function addTimeEntry() {
  const entryData = {
    description: "Meeting with client",
    start: new Date().toISOString(),
    // You may add an 'end' field if required.
    billable: true
  };

  try {
    const newEntry = await createTimeEntry(clockifyUserId, entryData);
    console.log("Created Time Entry:", newEntry);
  } catch (error) {
    console.error("Error creating time entry:", error);
  }
}

// Uncomment below to test creating a time entry.
// addTimeEntry();

 

Handling Dependencies Without a Terminal

 

• Since Bolt.new AI does not offer a terminal for installing dependencies, ensure your project’s environment supports the fetch API and TypeScript. Modern browsers and Node environments (if using a bundler) usually include a global fetch implementation.
• If you encounter issues with fetch in a Node.js environment, consider adding a polyfill by creating a file named polyfills.ts and inserting the following code. Then import it at the very top of your main file (for example, index.ts).

/ polyfills.ts /
import "whatwg-fetch";

• Since Bolt.new AI cannot run terminal commands, manually add the whatwg-fetch library as an external dependency using your project’s dependency management interface (if available). If such interface isn’t available, verify that the environment already supports fetch.

 

Final Integration Steps

 

• Review your project structure to ensure the new files (clockifyConfig.ts, clockifyService.ts, and optionally polyfills.ts) are correctly placed.
• Test your application by triggering the functions you integrated. Use the Bolt.new AI built-in preview or run feature to view console logs.
• Adjust configuration details like user IDs or payload formats as required by your Clockify account and API specifications.