Corvo Chatbot

The embedabble chatbot client for the Corvo Project

✨ Features

• 🚀 Modern Stack - Built with React 19, TypeScript, Shadcn and Vite
• 🔌 Simple Integration - Single line of code to embed
• 🛠️ Developer Experience - Hot reload, TypeScript, and modern tooling

Getting Started

To get started, follow these steps:

1. Clone this repository to your local machine.
2. Install the dependencies by running pnpm install depending on your preferred package manager.
3. Run the development server by running pnpm dev.
4. Open your browser and navigate to http://localhost:3000 to see the widget in action.

Structure

The project is structured as follows:

.
├── dist/               # Output directory for the widget
├── public/             # Public assets for the widget
├── src/                # Source code for the widget
│   ├── App.css         # CSS file for the development Vite app
│   ├── App.tsx         # Entry point for the development Vite app
│   ├── widget/         # Source code for the widget
│   │   ├── components/ # Components for the widget
│   │   ├── lib/        # Utility functions for the widget
│   │   ├── index.tsx   # Entry point for the widget
│   │   └── styles/     # CSS styles for the widget

1. Widget code: The source code for the widget is located in the src/widget directory.
2. Development app code: The source code for the development app is located in the src directory. Useful for development and testing your widget in a Vite app.
3. Widget distribution: The widget is bundled into the dist directory.
4. Public assets: Public assets like images, fonts, and CSS files are located in the public directory.

Cloning the Repository

To clone the repository, you can use the following command:

git clone https://github.com/Gustavo-Kuze/corvo-chatbot.git

Installing Dependencies

To install the dependencies, you can use the following commands:

pnpm install

Running the Development Server

To run the development server, you can use the following command:

or

pnpm dev

Opening the Widget in Your Browser

Once the development server is running, you can open your browser and navigate to http://localhost:5173 to see the widget in action.

Bundling the Widget

To bundle the widget, you can use the following command:

pnpm build:widget

This will create a dist directory with the bundled widget files.

For running the widget in production mode, you can use the following command:

pnpm build:widget:production

Production mode will use the environment variables from the .env.production file.

Testing the bundled widget

To test the bundled widget, you can use the following command:

pnpm serve

This will start a local server and serve the widget at http://localhost:3333/index.html.

Deploying the Widget to a CDN

Depending on which provider you want to use, you can deploy the widget to a CDN, or simply host it on your own server.

Copy the bundled files from the dist directory to your server and have the consumers of the widget use the script tags to load the widget.

If your widget is hosted on a CDN, you can use the following script tag:

<script async src="https://example.com/widget.js"></script>

Contributing

We welcome contributions to this project. If you find a bug or have a suggestion for improvement, please open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

References and Mentions

The code was based on React Embeddable Widget Starter by MakerKit