Bolt.new AI and Khan Academy API integration: Step-by-Step Guide 2025

 

Creating the Khan Academy API Integration File

 

• Create a new file in your Bolt.new AI project called khanAcademyAPI.ts. This file will hold all functions related to interacting with the Khan Academy API.
• Paste the following code into khanAcademyAPI.ts. This code defines an interface for content items, a constant for the API base URL, and a function fetchContent that calls Khan Academy’s API using the built-in fetch function. Adjust the mapping as needed depending on the actual API response structure.

export interface ContentItem {
  title: string;
  description: string;
  url: string;
}

const APIBASEURL = 'https://www.khanacademy.org/api/v1';

export async function fetchContent(topic: string): Promise<ContentItem[]> {
  const response = await fetch(${API_BASE_URL}/topic/${topic});
  if (!response.ok) {
    throw new Error(Error fetching data: ${response.statusText});
  }
  const data = await response.json();
  
  // Adjust this mapping based on the actual structure returned by the Khan Academy API.
  // For example, assume data.content contains an array of items.
  return data.content.map((item: any) => ({
    title: item.title,
    description: item.description,
    url: item.url,
  }));
}

 

Using the API Integration in Your Main Code

 

• Open your primary file (for example, index.ts) where you want to use the Khan Academy data.
• Import the fetchContent function from khanAcademyAPI.ts and call it within an asynchronous function. The following snippet demonstrates how to fetch content for a given topic (for example, "math") and log the data to the console.

import { fetchContent } from './khanAcademyAPI';

async function displayContent() {
  try {
    const contentItems = await fetchContent('math'); // Replace 'math' with your desired topic
    console.log('Khan Academy content:', contentItems);
  } catch (error) {
    console.error('Error fetching content:', error);
  }
}

displayContent();

 

Adding Configuration for API Keys or Secrets

 

• If the Khan Academy API requires an API key or any secret credentials, create a new file called config.ts in your project.
• Add the following code to config.ts to centrally manage your configuration values. Replace 'yourapikey_here' with your actual API key. If the Khan Academy API does not require one, you can skip this step.

export const KHANAPIKEY = 'yourapikey_here'; // Replace with your actual API key if needed

• If needed, modify khanAcademyAPI.ts to include the API key in your requests. For example:

import { KHANAPIKEY } from './config';

export async function fetchContent(topic: string): Promise<ContentItem[]> {
  const response = await fetch(${API_BASE_URL}/topic/${topic}?api_key=${KHAN_API_KEY});
  // ... rest of the code remains the same ...
}

 

Handling Dependencies Without a Terminal in Bolt.new AI

 

• Bolt.new AI projects do not offer a terminal, so you cannot run commands like npm install to add dependencies manually.
• In this example, we are using the built-in fetch function for making HTTP requests, so there is no need for an external library like Axios.
• If you ever need a dependency, check Bolt.new AI documentation for integrating external modules by adding them directly in your code or via project settings.

 

Final Integration Check

 

• Ensure that your new files (khanAcademyAPI.ts and optionally config.ts) are saved in your project.
• Make sure the import paths in your code match the file structure of your project.
• Trigger your main file (index.ts) in the Bolt.new AI interface to see if the Khan Academy API call is working as expected.