Bolt.new AI and Smooch (now Zendesk Sunshine Conversations) integration: Step-by-Step Guide 2025

 

Step 1: Creating the Smooch Client Setup File

 

• Create a new file in your project called smoochClient.ts (e.g. inside a folder named integrations).
• Add the following TypeScript code to initialize the Smooch (Sunshine Conversations) client. This file sets up the connection using your API credentials. (Since Bolt.new AI does not let you run terminal commands, you include dependency import statements directly in your code. The dependency will be automatically installed if it’s defined in your project’s package configuration.)

import SmoochCore from 'smooch-core';

const smoochClient = new SmoochCore({
  keyId: process.env.SMOOCHKEYID || 'yourkeyid',
  secret: process.env.SMOOCHSECRET || 'yoursecret'
});

export default smoochClient;

• Replace 'yourkeyid' and 'your_secret' with your actual Sunshine Conversations API credentials or set them via environment variables.

 

Step 2: Creating the Webhook Handler File

 

• Create a new file called smoochWebhook.ts (for example, inside a folder named webhooks).
• This file will process incoming webhook events from Sunshine Conversations. Paste the code snippet below:

import { Request, Response } from 'express';

// This function handles incoming webhook events from Smooch/Sunshine Conversations.
export const handleSmoochWebhook = async (req: Request, res: Response) => {
  try {
    // Log the incoming webhook data for debugging
    console.log('Received Smooch webhook:', req.body);

    // Process the webhook event.
    // For example, if it is a message event, you might extract details:
    const event = req.body;
    if (event && event.trigger === 'message:appUser') {
      // Extract relevant data
      const appUserId = event.appUser && event.appUser._id;
      const message = event.message && event.message.text;
      console.log(Message from app user ${appUserId}: ${message});
      
      // Add your custom logic here (e.g. send this message to Bolt.new AI for further processing)
    }

    // Respond with 200 OK to acknowledge receipt
    res.status(200).send('Webhook received');
  } catch (error) {
    console.error('Error processing Smooch webhook:', error);
    res.status(500).send('Internal Server Error');
  }
};

• This webhook handler simply logs incoming data and can be extended to tie into any further business logic in your Bolt.new AI project.

 

Step 3: Exposing the Webhook Endpoint in Your Bolt.new AI Project

 

• Locate your main application file (commonly index.ts or app.ts).
• Depending on how your project is structured, you will add an endpoint so Sunshine Conversations can send webhook events to your application. Insert the following code where you register your Express routes:

import express from 'express';
import bodyParser from 'body-parser';
import { handleSmoochWebhook } from './webhooks/smoochWebhook';

const app = express();

// Middleware to parse JSON bodies
app.use(bodyParser.json());

// Define your webhook endpoint
app.post('/webhook', handleSmoochWebhook);

// Other routes and middleware may already exist here

// Start your server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(Server is running on port ${PORT});
});

• This code creates a POST endpoint at /webhook that will receive JSON data from Sunshine Conversations.

 

Step 4: Sending a Message via the Smooch Client

 

• Create a new file named sendMessage.ts (you may put it in a services folder).
• This file will contain a function that sends a message using the Smooch client.
• Insert the code snippet below:

import smoochClient from './smoochClient';

export const sendMessage = async (appUserId: string, messageText: string) => {
  try {
    const response = await smoochClient.appUsers.sendMessage(appUserId, {
      type: 'text',
      text: messageText
    });
    console.log('Message sent successfully:', response);
    return response;
  } catch (error) {
    console.error('Error sending message:', error);
    throw error;
  }
};

• You can call sendMessage from anywhere in your project. For example, integrate it in your conversational logic to respond to users.

 

Step 5: Configuring Your Environment Variables

 

• Since Bolt.new AI does not provide a terminal, you may have to define your environment variables within your project’s configuration file (if available) or directly in your code for testing.
• If you have an option to add environment variables in your project’s settings, add the following keys:

// Example of how you might set defaults in your code
process.env.SMOOCHKEYID = 'yourkeyid';
process.env.SMOOCHSECRET = 'yoursecret';

• Replace the placeholder texts with your real API credentials. Be sure not to expose sensitive information in production code.

 

Step 6: Testing Your Integration

 

• Ensure that your webhook endpoint (/webhook) is publicly accessible by Sunshine Conversations. You might need to set up an HTTPS endpoint or use a tunnel service during development.
• Simulate a webhook event by sending a POST request with sample payload data. You can use online tools or your project’s interface to trigger and monitor responses.
• Verify that messages are logged and that your sendMessage function sends a message as expected.

 
By following these steps, you integrate Zendesk Sunshine Conversations (formerly Smooch) into your Bolt.new AI project. Each change is contained in specific files to keep your project modular and easy to manage.