Skip to main content

​
Overview

The @databite/connect package provides React components to seamlessly integrate Databite connectors into your web applications. This guide shows how to add authentication flows and connection management to your frontend. The package also includes utility functions for server communication, so you don’t need to make manual API calls. All the examples below use these built-in utilities.

​
Prerequisites

  • A running Databite server (see Setting Up Your First Server)
  • React application (Next.js, Vite, or Create React App)
  • Your server’s API URL

​
Step 1: Install Dependencies

npm install @databite/connect @databite/types

​
Step 2: Set Up Environment Variables

Add your server URL to your environment: 
# .env.local
NEXT_PUBLIC_DATABITE_API_URL=http://localhost:3001

​
Step 3: Create a Connection Component

Create a component to handle connector authentication: 
// components/ConnectButton.tsx
import React, { useState } from "react";
import { ConnectModal } from "@databite/connect";

interface ConnectButtonProps {
  integrationId: string;
  onConnectionSuccess?: (connection: any) => void;
}

export function ConnectButton({
  integrationId,
  onConnectionSuccess,
}: ConnectButtonProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Connect Service
      </button>

      <ConnectModal
        open={isOpen}
        onOpenChange={setIsOpen}
        integrationId={integrationId}
        baseUrl={process.env.NEXT_PUBLIC_DATABITE_API_URL!}
        syncInterval={10}
        onAuthSuccess={async (connection) => {
          console.log(sonnection.id)
        }}
        onAuthError={(error) => {
          console.error("Authentication failed:", error);
        }}
      />
    </>
  );
}

​
Step 4: Execute Actions

Once connected, you can execute actions on behalf of users: 
import { executeAction } from "@databite/connect";

// Execute a Slack message action
const sendMessage = async (
  connectionId: string,
  channel: string,
  text: string
) => {
  try {
    const result = await executeAction(
      process.env.NEXT_PUBLIC_DATABITE_API_URL!,
      connectionId,
      "sendMessage",
      { channelId: channel, text }
    );
    console.log("Action result:", result);
  } catch (error) {
    console.error("Action failed:", error);
  }
};

// Example usage
sendMessage("conn-123", "#general", "Hello from my app!");