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

 

Setting Up Dependencies in package.json

 

• Since Bolt.new AI projects do not offer a terminal, you need to manually add any dependencies directly in your project configuration. Open your project’s package.json file.
• Under the "dependencies" section, add the following line to include Axios, which we will use to make HTTP requests to CoStar:

{
  "dependencies": {
    "axios": "^0.27.2"
    // ... any other dependencies
  }
}

• Save the changes to package.json. Bolt.new AI will automatically load the dependency for you.

 

Creating the CoStar Integration Module

 

• Create a new file in your project called CoStarIntegration.ts. This file will contain the code that interacts with the CoStar API.
• Paste the following code snippet into CoStarIntegration.ts. This code defines a class with methods to query CoStar. Be sure to replace YOURCOSTARAPI_KEY and https://api.costar.com/endpoint with your actual API key and endpoint:

import axios from 'axios';

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

  constructor() {
    // Use your CoStar API key. Optionally, you can store this in environment variables.
    this.apiKey = 'YOURCOSTARAPI_KEY';
    // Replace with the actual CoStar API base URL
    this.baseUrl = 'https://api.costar.com/endpoint';
  }

  async fetchPropertyDetails(propertyId: string): Promise {
    try {
      const response = await axios.get(`${this.baseUrl}/properties/${propertyId}`, {
        headers: {
          'Authorization': `Bearer ${this.apiKey}`
        }
      });
      return response.data;
    } catch (error) {
      console.error('Error fetching property details:', error);
      throw error;
    }
  }
}

• This module uses Axios to send GET requests to CoStar. The fetchPropertyDetails method demonstrates how to query the API for property details using a property ID.

 

Integrating CoStar Module into Your Main Code

 

• Open your main TypeScript file (for example, index.ts or the main file where you initialize your project).
• Import the CoStarIntegration class at the top of your file:

import { CoStarIntegration } from './CoStarIntegration';

• Create an instance of the CoStarIntegration and use it where needed. For instance, you might want to call it when a user selects a property:

async function handlePropertyRequest(propertyId: string) {
  const coStar = new CoStarIntegration();
  try {
    const propertyDetails = await coStar.fetchPropertyDetails(propertyId);
    console.log('Property Details:', propertyDetails);
    // Process the property details as needed in your application
  } catch (error) {
    console.error('Failed to retrieve property details:', error);
  }
}

// Example usage: Replace '12345' with a real property id.
handlePropertyRequest('12345');

• This code demonstrates how to utilize the newly created CoStar integration to fetch and process property details.

 

Configuring Environment Variables (Optional)

 

• If you want to keep your API key secure, consider storing it as an environment variable.
• Create a file called .env in your project root and add your API key like this:

COSTARAPIKEY=YOURCOSTARAPI_KEY

• Then, update your CoStarIntegration.ts file to read from the environment rather than hard coding the key:

import axios from 'axios';

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

  constructor() {
    // Use the environment variable for security
    this.apiKey = process.env.COSTARAPIKEY || 'fallbackapikey';
    this.baseUrl = 'https://api.costar.com/endpoint';
  }

  async fetchPropertyDetails(propertyId: string): Promise {
    try {
      const response = await axios.get(`${this.baseUrl}/properties/${propertyId}`, {
        headers: {
          'Authorization': `Bearer ${this.apiKey}`
        }
      });
      return response.data;
    } catch (error) {
      console.error('Error fetching property details:', error);
      throw error;
    }
  }
}

• Please note that if your project environment does not support .env files directly, you might need to adjust your configuration according to Bolt.new AI guidelines.

 

Testing Your Integration

 

• After completing the above steps, run your project using Bolt.new AI's built-in run mechanism.
• Open your browser’s console or review your project logs to see the output from the handlePropertyRequest function and verify that property details are being fetched correctly from CoStar.
• If any errors occur, check the endpoint URL, API key, and network connectivity.