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

To integrate Bolt.new with LiveChat, you don’t “connect Bolt to LiveChat” directly. Instead, you build a small backend inside Bolt (Node.js/Next.js API routes) that talks to LiveChat’s REST API and/or receives their webhooks. Bolt acts as your development workspace where you write code, store environment variables, and test the actual LiveChat integration exactly like you would in any real-world app. The integration is done through LiveChat’s official API (via OAuth or Personal Access Tokens), not through any special Bolt feature.

The core idea is simple: Bolt hosts your code, your code talks to LiveChat.

 

What You Actually Need to Do

 

You integrate Bolt with LiveChat by:

• Creating a small server (API route) in Bolt.new
• Setting a LiveChat API token inside Bolt environment variables
• Calling LiveChat’s REST endpoints (for sending messages, listing chats, etc.)
• Optionally exposing a webhook endpoint to receive new events from LiveChat (incoming messages, chat started, etc.)
• Testing it directly inside Bolt’s browser runtime using standard fetch calls

 

Step‑by‑Step: How to Actually Integrate

 

This is the simplest working approach for most developers.

• Create a LiveChat token. Go to LiveChat → Developer Console → Personal Access Tokens and create a token with the scopes you need (for example: chats.read, chats.write). You will receive a string like: lc\_XXXXXXXXXXXXXXXX.
• Store your token in Bolt.new environment variables. In Bolt, open Environment Variables panel and add:
  LIVECHAT_API_TOKEN=lc\_XXXXXXXXXXXX
• Create an API route inside Bolt that calls LiveChat’s API. Below is a real working example (Node.js with fetch). This can live in /api/sendMessage.js or similar inside a Next.js app scaffolded in Bolt.

 

// /api/sendMessage.js
export default async function handler(req, res) {
  const { chatId, message } = req.body

  const response = await fetch("https://api.livechatinc.com/v3.5/agent/action/send_event", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.LIVECHAT_API_TOKEN}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      chat_id: chatId,
      event: {
        type: "message",
        text: message
      }
    })
  })

  const data = await response.json()
  res.status(response.status).json(data)
}

 

This endpoint lets your Bolt app send messages into LiveChat from anywhere in your UI or automation flows.

 

If You Want Incoming Messages

 

LiveChat can call your Bolt backend when something happens. Bolt automatically creates public URLs for API routes, so you can paste them into the LiveChat webhook configuration:

• Create a route like /api/livechatWebhook
• Log incoming payloads
• Use those events to trigger AI responses or workflows

 

// /api/livechatWebhook.js
export default async function handler(req, res) {
  // LiveChat sends JSON events about new messages, chats, etc.
  console.log("Incoming LiveChat event:", req.body)

  // Always respond 200 quickly so LiveChat doesn't retry
  res.status(200).end()
}

 

How This Works Conceptually

 

• Bolt.new is just a development and execution environment.
• Your code is what actually integrates with LiveChat.
• You communicate through HTTPS API requests using tokens stored in env vars.
• Webhooks allow LiveChat to push events back into your Bolt APIs.

That is the entire integration pattern — no special connector, just real APIs, real HTTPS, real tokens.