v0 and Freightos integration: Step-by-Step Guide 2025

 

Step 1: Adding the Freightos Client File

 

• Create a new file in your project directory and name it freightosClient.ts. This file will contain all the functions needed to communicate with the Freightos API.
• Copy and paste the following TypeScript code into the new file. This code defines interfaces for the input and response of a freight quote and creates a FreightosClient class to call the Freightos API.

export interface FreightQuoteInput {
  origin: string;
  destination: string;
  cargoDetails: {
    weight: number;
    dimensions: {
      length: number;
      width: number;
      height: number;
    };
  };
}

export interface FreightQuoteResponse {
  quoteId: string;
  price: number;
  currency: string;
  estimatedDelivery: string;
}

export class FreightosClient {
  private apiKey: string;
  private baseUrl: string;

  constructor(apiKey: string, baseUrl: string) {
    this.apiKey = apiKey;
    this.baseUrl = baseUrl;
  }

  async getQuote(input: FreightQuoteInput): Promise {
    const response = await fetch(${this.baseUrl}/quotes, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': Bearer ${this.apiKey}
      },
      body: JSON.stringify({
        origin: input.origin,
        destination: input.destination,
        cargoDetails: input.cargoDetails
      })
    });
    if (!response.ok) {
      throw new Error(Error fetching quote: ${response.statusText});
    }
    return await response.json();
  }
}

 

Step 2: Integrating the Freightos Client in Your Main Code

 

• Open your main TypeScript file where you want to integrate Freightos functionality (for example, main.ts or the relevant file in your project).
• Insert the following code snippet at an appropriate location where you need to trigger the Freightos API call. This snippet imports the FreightosClient, creates an instance with your API key and base URL, and calls the getQuote method.

// Import the FreightosClient from the file you just created
import { FreightosClient, FreightQuoteInput } from "./freightosClient";

// Replace these with your actual Freightos API key and base URL
const freightosApiKey = "YOURAPIKEY_HERE";
const freightosBaseUrl = "https://api.freightos.com"; // Adjust the URL based on Freightos documentation

// Create an instance of the FreightosClient
const freightosClient = new FreightosClient(freightosApiKey, freightosBaseUrl);

// Function to request a freight quote
async function requestFreightQuote() {
  try {
    // Define your freight quote input (customize these values as needed)
    const input: FreightQuoteInput = {
      origin: "NYC",
      destination: "LAX",
      cargoDetails: {
        weight: 200,
        dimensions: {
          length: 10,
          width: 5,
          height: 3
        }
      }
    };

    // Get the quote from Freightos
    const quote = await freightosClient.getQuote(input);
    console.log("Freight Quote:", quote);
  } catch (error) {
    console.error("Error fetching freight quote:", error);
  }
}

// Call the function to execute the API request
requestFreightQuote();

 

Step 3: Managing Dependencies Without a Terminal

 

• Since your v0 project does not have a terminal, you cannot run npm install commands directly. Instead, ensure that your project environment supports TypeScript and the Fetch API natively.
• If the Fetch API is not available in your environment, include a lightweight polyfill by adding the polyfill code directly in your project. For example, you can insert the following snippet at the beginning of your main file:

// Polyfill for fetch if it is not available in your environment
if (typeof fetch !== "function") {
  // Minimal fetch polyfill implementation (for example purposes only)
  const fetch = require('node-fetch');
}

• If you need to add external dependencies manually, include their compiled JavaScript files in your project and add corresponding script tags in your HTML file.

 

Step 4: Testing the Integration

 

• Save all your changes in the respective files (freightosClient.ts and your main TypeScript file).
• Run your v0 project (using your project’s built-in runner). The console should log the freight quote or an error if something is misconfigured.
• Verify that the API request reaches Freightos and that you see the expected JSON output in your console.

 

Step 5: Final Adjustments and Customization

 

• Customize the FreightQuoteInput parameters based on your project requirements or additional Freightos API specifications.
• Add error handling and logging as needed to ensure smooth integration and easier debugging.
• Ensure your API key and sensitive data are secured; avoid hardcoding them in the source code when deploying to production. Instead, use environment variables if your v0 environment supports reading them from a configuration file.