docs/agents/custom-code-agent/connect-components.mdx - next - githubmirror/novu

docs/agents/custom-code-agent/connect-components.mdx
229 строк11 KB
Pawan Jain
fix(docs): enhance agent communication documentation with new channels and capabilities (#12188)
04 авг 2026, 20:50
04 авг 2026, 20:500777b56
---
title: "Connect Components"
description: 'Use prebuilt React components so your users can install and connect Slack, Microsoft Teams, Telegram and other communication platforms to your agent.'
---


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.

## 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.

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

const SlackConnectButtonComponent = () => {
  const subscriberId = 'subscriber-id';
  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;
```

<Prompt description="Add SlackConnectButton to my app" icon="plug" actions={["copy", "cursor"]}>
Add the Novu SlackConnectButton from @novu/react to my app so each of my end users can connect "YOUR_AGENT_NAME" to their own Slack workspace.

Context: The Slack integration already exists in Novu. This is purely a frontend code integration - do NOT run the Novu CLI or the agent-onboarding flow.

Requirements:
- Install @novu/react with my project's package manager.
- Render `<SlackConnectButton />` inside a `<NovuProvider>` configured for the currently signed-in end user.
- Use applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" and integrationIdentifier="YOUR_INTEGRATION_IDENTIFIER" with connectionMode="subscriber". Store applicationIdentifier in an environment variable rather than hardcoding it.
- In subscriber mode each user gets their own connection, so pass the authenticated user's id as subscriberId - source it from my app's existing auth, don't hardcode it.
- Follow my app's existing framework, routing, styling, and TypeScript conventions, place the button in a sensible spot in the UI, and add no unnecessary wrappers.

Optional reference: https://docs.novu.co/agents/custom-code-agent/connect-components
</Prompt>

### API reference

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

<Fields>
  <Field name="integrationIdentifier" type="string" />
  <Field name="connectionIdentifier" type="string" />
  <Field name="subscriberId" type="string" />
  <Field name="context" type="Partial<Record<string, ContextValue>>" />
  <Field name="scope" type="string[]" />
  <Field name="connectionMode" type="ConnectionMode" />
  <Field name="onConnectSuccess" type="(connectionIdentifier: string) => void" />
  <Field name="onConnectError" type="(error: unknown) => void" />
  <Field name="onDisconnectSuccess" type="() => void" />
  <Field name="onDisconnectError" type="(error: unknown) => void" />
  <Field name="connectLabel" type="string" />
  <Field name="connectedLabel" type="string" />
  <Field name="appearance" type="ReactInboxAppearance | ReactSubscriptionAppearance | ReactAllAppearance" />
  <Field name="container" type="any" />
</Fields>

## 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.

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

const MsTeamsConnectButtonComponent = () => {
  const subscriberId = 'subscriber-id';
  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;
```

<Prompt description="Add MsTeamsConnectButton to my app" icon="plug" actions={["copy", "cursor"]}>
Add the Novu MsTeamsConnectButton from @novu/react to my app so each of my end users can connect "YOUR_AGENT_NAME" to their own Microsoft Teams.

Context: The Microsoft Teams integration already exists in Novu. This is purely a frontend code integration - do NOT run the Novu CLI or the agent-onboarding flow.

Requirements:
- Install @novu/react with my project's package manager.
- Render `<MsTeamsConnectButton />` inside a `<NovuProvider>` configured for the currently signed-in end user.
- Use applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" and integrationIdentifier="YOUR_INTEGRATION_IDENTIFIER" with connectionMode="subscriber". Store applicationIdentifier in an environment variable rather than hardcoding it.
- In subscriber mode each user gets their own connection, so pass the authenticated user's id as subscriberId - source it from my app's existing auth, don't hardcode it. autoLinkUser defaults to true in subscriber mode.
- Follow my app's existing framework, routing, styling, and TypeScript conventions, place the button in a sensible spot in the UI, and add no unnecessary wrappers.

Optional reference: https://docs.novu.co/agents/custom-code-agent/connect-components
</Prompt>

### 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](/agents/channels/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.

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

const TelegramConnectButtonComponent = () => {
  const subscriberId = 'subscriber-id';
  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;
```

<Prompt description="Add TelegramConnectButton to my app" icon="plug" actions={["copy", "cursor"]}>
Add the Novu TelegramConnectButton from @novu/react to my app so each of my end users can connect "YOUR_AGENT_NAME" to their own Telegram chat.

Context: The Telegram integration already exists in Novu. This is purely a frontend code integration - do NOT run the Novu CLI or the agent-onboarding flow.

Requirements:
- Install @novu/react with my project's package manager.
- Render `<TelegramConnectButton />` inside a `<NovuProvider>` configured for the currently signed-in end user.
- Use applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" and integrationIdentifier="YOUR_INTEGRATION_IDENTIFIER". Store applicationIdentifier in an environment variable rather than hardcoding it.
- Pass the authenticated user's id as subscriberId - source it from my app's existing auth, don't hardcode it.
- Follow my app's existing framework, routing, styling, and TypeScript conventions, place the button in a sensible spot in the UI, and add no unnecessary wrappers.

Optional reference: https://docs.novu.co/agents/custom-code-agent/connect-components
</Prompt>

### 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. |

## Related

<Columns cols={2}>
  <Card icon="plug" href="/agents/get-started/ai-sdk" title="Connect AI SDK">
    Connect an existing agent to Slack and get a reply in-thread.
  </Card>
  <Card icon="link" href="/agents/custom-code-agent/connecting-your-app" title="Connecting your app">
    Wire the bridge endpoint and register agent handlers in your app.
  </Card>
</Columns>