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

 

Understanding the Integration Requirements

 

This guide explains how to integrate Toggl’s time-tracking API into your Bolt.new AI project using TypeScript. You will create a new service file for Toggl API requests, add the code into your main project file, and configure dependency installation using code snippets.

 

Prerequisites

 

• An active Bolt.new AI project.
• A Toggl API token (from your Toggl account).
• Your basic project structure in Bolt.new that supports TypeScript.

 

Step 1: Creating the Toggl Service File

 

We will create a new file in your project called togglService.ts that will contain the code needed to make requests to the Toggl API. Paste the following code in the new file.

// Replace "yourapitoken_here" with your actual Toggl API token
const TOGGLAPITOKEN = "yourapitoken_here"; 
// Replace with your email or any identifier for user agent purposes
const TOGGLUSERAGENT = "[email protected]";

// Function to encode credentials to Base64
function encodeCredentials(token: string): string {
  return btoa(token + ":api_token");
}

// Example function to get user details from Toggl, which include workspace info
export async function getUserDetails(): Promise {
  const url = "https://api.track.toggl.com/api/v8/me";
  const headers = {
    "Authorization": "Basic " + encodeCredentials(TOGGLAPITOKEN),
    "Content-Type": "application/json",
    "User-Agent": TOGGLUSERAGENT
  };

  const response = await fetch(url, { method: "GET", headers });
  if (!response.ok) {
    throw new Error("Error fetching user details: " + response.statusText);
  }
  return response.json();
}

Place this file in the root or an appropriate folder (for example, a folder called "services") of your Bolt.new project.

 

Step 2: Installing Dependencies via Code

 

Since Bolt.new AI does not provide a terminal, you must declare required dependencies directly in your code. If you need to use node-fetch (for environments where fetch is not available), add a new file called package.json in your project with the following content.

{
  "dependencies": {
    "node-fetch": "^2.6.1"
  }
}

Also, incorporate this snippet at the top level of your main file to conditionally import node-fetch when necessary. (In many environments, fetch is built-in so this step might be optional.)

let fetchFunc: typeof fetch;

try {
  // @ts-ignore
  fetchFunc = fetch;
} catch (e) {
  // If fetch is not available, import node-fetch
  // @ts-ignore
  fetchFunc = require('node-fetch');
}

In your togglService.ts file, replace calls to fetch with fetchFunc so the code becomes:

// Replace the fetch call with fetchFunc to support environments without a built-in fetch
export async function getUserDetails(): Promise {
  const url = "https://api.track.toggl.com/api/v8/me";
  const headers = {
    "Authorization": "Basic " + encodeCredentials(TOGGLAPITOKEN),
    "Content-Type": "application/json",
    "User-Agent": TOGGLUSERAGENT
  };

  const response = await fetchFunc(url, { method: "GET", headers });
  if (!response.ok) {
    throw new Error("Error fetching user details: " + response.statusText);
  }
  return response.json();
}

Make sure both the package.json and the conditional import code are added to your project, ensuring dependency installation is interpreted by Bolt.new’s environment.

 

Step 3: Integrating Toggl Service into Your Main Code

 

Now, import and invoke the Toggl API call in your main code file (for example, main.ts). Paste the following code snippet where you would like to trigger the Toggl integration (for instance, during initialization or on a button click event).

import { getUserDetails } from "./togglService";

(async () => {
  try {
    const togglData = await getUserDetails();
    console.log("Toggl Data:", togglData);
    // You can now use togglData further in your Bolt.new AI app logic.
  } catch (error) {
    console.error("Error calling Toggl API:", error);
  }
})();

Adjust the import path if your togglService.ts file is in a subfolder (e.g., use ./services/togglService).

 

Step 4: Configuring and Testing the Integration

 

• Ensure that your Toggl API token in togglService.ts is correctly set.
• Save all changes in your Bolt.new AI project.
• Run your project using Bolt.new AI’s run mechanism. Check the console for a log output showing "Toggl Data" with the fetched information.
• If errors occur, review your dependency setup and API token configuration.

 

Step 5: Finalizing the Integration

 

• Once the integration is verified, you may add further functions in togglService.ts for additional Toggl API endpoints such as creating time entries or listing projects.
• Use the same pattern to make more API calls and integrate them into your main application code as needed.
• Document any further changes within your project to assist with future maintenance.

 

By following these steps, you integrate Toggl into your Bolt.new AI project with TypeScript, ensuring that each part of your project is clearly organized and that dependencies are managed within the code itself.