urban-bot

Introduction to Urban-Bot

Urban-Bot is a powerful and universal chatbot library designed to simplify the process of creating chatbots across various messaging platforms using the popular React framework. The library offers several key features that make it an attractive choice for developers of all skill levels.

Key Features

• Declarative Approach: Urban-Bot enables developers to create chatbots without the need to understand the specific API of each messaging platform. Instead, developers can write simple React components, making the process more intuitive and less time-consuming.

• Multiplatform Support: With Urban-Bot, developers can write code once and deploy it across different messaging platforms, thereby maximizing reach and efficiency. This multiplatform support distinguishes it in the chatbot development space.

• Reusable Components: The library encourages code reuse, allowing developers to easily share logic between different chatbots or integrate commonly used components. This feature reduces redundancy and speeds up the development process.

• Session Management: Urban-Bot renders unique sessions for every chat, ensuring that each conversation feels personalized. Developers can build their applications as if they are rendering on the client side, offering seamless interaction.

• TypeScript Support: Full support for TypeScript provides type safety and can help detect potential errors during development, enhancing reliability and maintainability.

Supported Platforms

Urban-Bot currently supports several popular messaging platforms:

• Telegram
• Discord
• Slack
• Facebook Messenger

Additionally, support for platforms like WhatsApp, VK, and Viber is on the horizon, further expanding its reach and applicability.

Getting Started

Urban-Bot offers a zero-configuration starter for quick setup:

• For TypeScript:

  npx create-urban-bot my-app
  

• For JavaScript:

  npx create-urban-bot my-app --template js
  

Alternatively, developers can install Urban-Bot manually using npm:

npm i react @urban-bot/core @urban-bot/telegram @urban-bot/facebook ...

Example

Here is a simple example demonstrating how to create chatbots using Urban-Bot for Telegram and Slack. This example includes a basic Echo function that repeats user input and a Counter function that increments or decrements a displayed number with button clicks.

import React from 'react';
import { render, Route, Router, Root, Text, ButtonGroup, Button, useText } from '@urban-bot/core';
import { UrbanBotTelegram } from '@urban-bot/telegram';
import { UrbanBotSlack } from '@urban-bot/slack';

function Echo() {
    const [text, setText] = React.useState('Say something');

    useText(({ text }) => {
        setText(text);
    });

    return (
        <Text>
            <i>{text}</i>
        </Text>
    );
}

function Counter() {
    const [count, setCount] = React.useState(0);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);

    return (
        <ButtonGroup title={count} isNewMessageEveryRender={false}>
            <Button onClick={increment}>+1</Button>
            <Button onClick={decrement}>-1</Button>
        </ButtonGroup>
    );
}

function App() {
    return (
        <Router>
            <Route path="/echo">
                <Echo />
            </Route>
            <Route path="/counter">
                <Counter />
            </Route>
        </Router>
    );
}

const urbanBotTelegram = new UrbanBotTelegram({
    token: 'telegramToken',
});

const urbanBotSlack = new UrbanBotSlack({
    signingSecret: 'slackSigningSecret',
    token: 'slackToken',
});

render(
    <Root bot={urbanBotTelegram}>
        <App />
    </Root>
);

render(
    <Root bot={urbanBotSlack}>
        <App />
    </Root>
);

Conclusion

Urban-Bot is a versatile and powerful tool that simplifies the chatbot development process for a range of messaging platforms using React. Its declarative nature, multiplatform support, and easy integration make it a comprehensive choice for developers looking to create responsive and interactive chatbots quickly and efficiently.