---
title: "Rocket Chat Livechat Environment Setup"
slug: "omnichannel-environment-setup"
description: "Set up the Omnichannel development environment in Rocket Chat. Build secure customer communication apps and integrations."
updated: 2025-06-13T09:44:27Z
published: 2025-06-13T09:44:27Z
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Livechat Environment Setup

This documentation will guide you through setting up your Rocket.Chat Omnichannel Livechat development environment.

## Prerequisites

Ensure you have the following installed on your device.

- [Git](http://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
- [Node.js](https://nodejs.org)
- [Yarn](http://yarnpkg.com/) is recommended instead of npm.

## Set up Livechat

This [Livechat platform](https://docs.rocket.chat/docs/livechat-widget-installation) is a minimal, lightweight application developed with [Preact](https://preactjs.com/). It is a critical feature of Rocket.Chat Omnichannel capability as it facilitates communication between your agents and visitors.

> This setup is done assuming you have a Rocket.Chat server running. We will use a local instance at `http://localhost:3000` for this guide.

To set up the Omnichannel Livechat,

1. Clone the Livechat source code from the [GitHub repository](https://github.com/RocketChat/Rocket.Chat/tree/develop/packages/livechat) by running this command:

```bash
git clone https://github.com/RocketChat/Rocket.Chat.git
```
2. Navigate to the Livechat folder in the cloned directory.

```bash
cd Rocket.Chat
cd packages/livechat
```
3. Install dependencies by running:

```bash
yarn
```

> You can check the recommended version of *node* and *yarn* in the `package.json` file in the root directory.
4. Compile the Preact application to the `/build` folder by running:

```bash
yarn dev
```
5. In another terminal, start the development server with hot reload capabilities on `http://localhost:8080`:

```bash
yarn start
```
6. Open the `widget-demo.html` file in your browser by accessing `http://localhost:8080/widget-demo.html`. You should see a page with the Livechat initiation icon at the bottom right, as shown in the following screenshots:

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(81).png)

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image (1).png)

> For better performance, you can run this `widget-demo.html` on an [HTTP server](https://github.com/http-party/http-server).

This example uses local instance. To select a different host for your local widget, navigate to the `/src/api.ts` file in the project directory. Within the file, look for the server URL, which by default should be `http://localhost:3000`, and change it to your desired host.

## Available CLI commands

```bash
# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn start

# build preact application to "build" folder
yarn dev

# build for production with minification
yarn build

# test the production build locally
yarn serve

# run the storybook
yarn storybook
```

## Livechat customization

The Livechat widget can be fully customized using the [**Storybook components**](https://rocketchat.github.io/Rocket.Chat.Livechat/).****To extend its functionalities, you can also use the [**LiveChat Widget API**](/v1/docs/livechat-widget-api).