> ## Documentation Index
> Fetch the complete documentation index at: https://docs.databite.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect To Your Server From Your Frontend

> Guide to integrate Databite connectors into React applications using the connect library

## 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](/guides/setting-up-your-first-server))
* React application (Next.js, Vite, or Create React App)
* Your server's API URL

## Step 1: Install Dependencies

```bash theme={null}
npm install @databite/connect @databite/types
```

## Step 2: Set Up Environment Variables

Add your server URL to your environment:

```bash theme={null}
# .env.local
NEXT_PUBLIC_DATABITE_API_URL=http://localhost:3001
```

## Step 3: Create a Connection Component

Create a component to handle connector authentication:

```tsx theme={null}
// 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:

```tsx theme={null}
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!");
```