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

 

Setting Up Dependencies

 

Since Bolt.new AI doesn’t have a terminal, you need to add required dependencies directly in your project’s package.json file. Open (or create) the package.json file in the root of your project and add (or include) the following under the "dependencies" section:

{
  "dependencies": {
    "axios": "^0.27.2"
  }
}

Make sure to save the file so Bolt.new AI can detect the new dependency.

 

Creating the Mural Integration File

 

Create a new file named mural.ts in your project’s source folder. This file will contain functions to interact with Mural’s API. For example, insert the following code into mural.ts:

import axios from 'axios';

const MURALAPIBASE_URL = 'https://api.mural.co'; // Replace with the actual API base URL if different.
const MURALAPITOKEN = 'YOURMURALAPI_TOKEN'; // Replace with your actual Mural API token.

export async function createMuralBoard(boardName: string): Promise {
  try {
    const response = await axios.post(
      ${MURAL_API_BASE_URL}/v1/boards,
      { name: boardName },
      { headers: { Authorization: Bearer ${MURAL_API_TOKEN} } }
    );
    return response.data;
  } catch (error) {
    console.error('Error creating mural board:', error);
    throw error;
  }
}

export async function updateMuralBoard(boardId: string, content: any): Promise {
  try {
    const response = await axios.patch(
      ${MURAL_API_BASE_URL}/v1/boards/${boardId},
      { content },
      { headers: { Authorization: Bearer ${MURAL_API_TOKEN} } }
    );
    return response.data;
  } catch (error) {
    console.error('Error updating mural board:', error);
    throw error;
  }
}

Remember to replace 'YOURMURALAPI_TOKEN' with your real Mural API token and adjust the API endpoint URLs if necessary.

 

Integrating Mural Functions Into Your Main Code

 

Next, open your main TypeScript file (for instance, main.ts or index.ts) in your project. Here you will import the mural functions and use them where needed (e.g., upon a user action or during the application initialization). Insert the following code snippet at the appropriate location in your main file:

import { createMuralBoard, updateMuralBoard } from './mural';

// This function demonstrates how to use the Mural integration functions.
async function handleMuralIntegration() {
  try {
    // Create a new Mural board with a specified name.
    const board = await createMuralBoard('New Board from Bolt.new');
    console.log('Created board:', board);

    // Example: Update the board with custom content.
    const updatedBoard = await updateMuralBoard(board.id, { content: 'Updated content here' });
    console.log('Updated board:', updatedBoard);
  } catch (error) {
    console.error('Mural integration error:', error);
  }
}

// Call the integration function. You can also attach this call to a specific event.
handleMuralIntegration();

This code imports the functions from mural.ts, then creates and updates a board. Adjust the function calls as necessary depending on your project’s flow.

 

Finalizing the Integration

 

• Ensure that the package.json file includes the axios dependency so that your code can import and use axios.
• Verify that mural.ts exists in your source folder and has the integration code as provided.
• Confirm that your main TypeScript file imports the mural functions and calls them as shown.
• Adjust API endpoints, tokens, and request payloads as needed based on Mural’s documentation.

By following these steps and inserting the code snippets at the indicated locations, your Bolt.new AI project will be integrated with Mural.