Connect To Your Server From Your Frontend

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!");

Getting Started

Guides

Connect To Your Server From Your Frontend

Overview

Prerequisites

Step 1: Install Dependencies

Step 2: Set Up Environment Variables

Step 3: Create a Connection Component

Step 4: Execute Actions

​Overview

​Prerequisites

​Step 1: Install Dependencies

​Step 2: Set Up Environment Variables

​Step 3: Create a Connection Component

​Step 4: Execute Actions

Overview

Prerequisites

Step 1: Install Dependencies

Step 2: Set Up Environment Variables

Step 3: Create a Connection Component

Step 4: Execute Actions