Connect Components

Novu provides pre-built UI components for chat platforms like Slack, Microsoft Teams, Telegram and other communication platforms. Add these components so users can install the communication platform app in their workspace and connect it to your agent.

Use connect components in production

Each connection belongs to one subscriber. To connect each person to their own Novu subscriber, follow this pattern:

Render the component on an authenticated page in your app, such as a settings or integrations page.
Pass the signed-in user’s id from your auth session as subscriberId, for example session.user.id. Use the same id you use for that user everywhere else in Novu. Do not hardcode it.
Enable distribution so users outside your own workspace can install the app: Slack Public Distribution or Microsoft Teams per-tenant setup. Telegram needs no extra step, because one bot serves every user.

The connect button in the Novu dashboard connects your own account, so you can test the agent. In production, your users connect through the component embedded in your app, with their own subscriberId.

Slack connect button

SlackConnectButton is a pre-built UI component in the @novu/react SDK that connects an agent to a Slack workspace. Check out the example below.

import { SlackConnectButton } from '@novu/react';

// userId: the signed-in user's id from your app's auth session
const SlackConnectButtonComponent = ({ userId }: { userId: string }) => {
  const subscriberId = userId;
  const integrationIdentifier = 'integration-identifier';
  const agent = {
    identifier: 'agent-identifier',
    name: 'agent-name',
  };

  const handleSlackOAuthSuccess = () => {
    // Handle success
  };

  return (
    <SlackConnectButton
      integrationIdentifier={integrationIdentifier}
      connectionIdentifier={`${subscriberId}:${integrationIdentifier}:${agent.identifier}`}
      connectionMode="subscriber"
      connectLabel={`Install ${agent.name} ↗`}
      connectedLabel="Connected to Slack"
      onConnectSuccess={handleSlackOAuthSuccess}
      onConnectError={(error: unknown) => {
        console.error(error);
      }}
    />
  );
};

export default SlackConnectButtonComponent;

Add SlackConnectButton to my app

Open in Cursor

API reference

SlackConnectButton accepts the following props to customize the UI and behavior:

Microsoft Teams connect button

MsTeamsConnectButton is a pre-built UI component in the @novu/react SDK that connects an agent to a user’s Microsoft Teams. In subscriber mode, autoLinkUser defaults to true so the per-user Teams identity is linked after admin consent.

import { NovuProvider, MsTeamsConnectButton } from '@novu/react';

// userId: the signed-in user's id from your app's auth session
const MsTeamsConnectButtonComponent = ({ userId }: { userId: string }) => {
  const subscriberId = userId;
  const integrationIdentifier = 'msteams-integration-identifier';

  return (
    <NovuProvider subscriberId={subscriberId} applicationIdentifier="application-identifier">
      <MsTeamsConnectButton
        integrationIdentifier={integrationIdentifier}
        connectionMode="subscriber"
        connectLabel="Install agent ↗"
        connectedLabel="Connected to MS Teams"
        onConnectSuccess={(connectionIdentifier) => {
          // Workspace linked
          console.log('Connected', connectionIdentifier);
        }}
        onConnectError={(error: unknown) => {
          console.error(error);
        }}
      />
    </NovuProvider>
  );
};

export default MsTeamsConnectButtonComponent;

Add MsTeamsConnectButton to my app

Open in Cursor

API reference

MsTeamsConnectButton accepts the following props:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Teams integration.
`connectionIdentifier`	`string`	Optional. Stable id for the connection.
`subscriberId`	`string`	Optional. Defaults to the `NovuProvider` subscriber.
`connectionMode`	`ConnectionMode`	e.g. `subscriber`.
`autoLinkUser`	`boolean`	Defaults to `true` in subscriber mode.
`onConnectSuccess`	`(connectionIdentifier: string) => void`	Called with the connection identifier after consent succeeds.
`onConnectError`	`(error: unknown) => void`	Called when consent or link fails.
`onDisconnectSuccess`	`() => void`	Called after disconnect.
`onDisconnectError`	`(error: unknown) => void`	Called when disconnect fails.
`connectLabel`	`string`	Label when disconnected.
`connectedLabel`	`string`	Label when connected.
`appearance`	`Appearance`	Style overrides.
`container`	`HTMLElement`	Optional mount element.

If auto-link fails after admin consent, use MsTeamsLinkUser as a follow-up. Channel page: Microsoft Teams.

Telegram connect button

TelegramConnectButton is a pre-built UI component in the @novu/react SDK that links a subscriber’s Telegram chat to your agent. It authenticates with the subscriber JWT from NovuProvider, so no secret key is exposed in the browser. When clicked, the button issues a t.me/<bot>?start=<code> deep link, opens it in a new tab, and polls until the subscriber presses Start in Telegram. Clicking again while connected disconnects the chat.

import { NovuProvider, TelegramConnectButton } from '@novu/react';

// userId: the signed-in user's id from your app's auth session
const TelegramConnectButtonComponent = ({ userId }: { userId: string }) => {
  const subscriberId = userId;
  const integrationIdentifier = 'telegram-integration-identifier';

  return (
    <NovuProvider subscriberId={subscriberId} applicationIdentifier="application-identifier">
      <TelegramConnectButton
        integrationIdentifier={integrationIdentifier}
        connectLabel="Connect Telegram"
        connectedLabel="Connected to Telegram"
        onConnectSuccess={(endpointIdentifier) => {
          console.log('Connected', endpointIdentifier);
        }}
        onConnectError={(error: unknown) => {
          console.error(error);
        }}
        onDisconnectSuccess={() => {
          // Handle disconnect
        }}
      />
    </NovuProvider>
  );
};

export default TelegramConnectButtonComponent;

Add TelegramConnectButton to my app

Open in Cursor

API reference

TelegramConnectButton accepts the following props to customize the UI and behavior:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Telegram integration to link against.
`subscriberId`	`string`	Optional. Subscriber to link. Defaults to the `NovuProvider` subscriber.
`onConnectSuccess`	`(endpointIdentifier: string) => void`	Called once the Telegram chat endpoint is detected.
`onConnectError`	`(error: unknown) => void`	Called when issuing the link fails or polling times out.
`onDisconnectSuccess`	`() => void`	Called after the chat endpoint is removed.
`onDisconnectError`	`(error: unknown) => void`	Called when disconnecting fails.
`connectLabel`	`string`	Label shown when disconnected. Defaults to `Connect Telegram`.
`connectedLabel`	`string`	Label shown when connected. Defaults to `Connected to Telegram`.
`appearance`	`Appearance`	Style overrides reusing the shared `channelConnectButton*` keys.
`container`	`HTMLElement`	Optional element to render the component into.

Connect AI SDK

Connect an existing agent to Slack and get a reply in-thread.

Connecting your app

Wire the bridge endpoint and register agent handlers in your app.

Getting Started

Channels

Custom Code Agent

Managed Agent

Observability

Connect Components

Use connect components in production

Slack connect button

API reference

Microsoft Teams connect button

API reference

Telegram connect button

API reference

Connect AI SDK

Connecting your app

​Use connect components in production

​Slack connect button

​API reference

​Microsoft Teams connect button

​API reference

​Telegram connect button

​API reference

​Related

Connect AI SDK

Connecting your app

Use connect components in production

Slack connect button

API reference

Microsoft Teams connect button

API reference

Telegram connect button

API reference

Related