@syncagent/react

@syncagent/react

React SDK for SyncAgent — drop-in AI database chat widget & hooks.

Install

npm install @syncagent/react @syncagent/js

Quick Start

import { SyncAgentChat } from "@syncagent/react";

export default function App() {
  return (
    <SyncAgentChat
      config={{
        apiKey: "sa_your_api_key",
        baseUrl: "https://your-syncagent-instance.com",
        connectionString: process.env.DATABASE_URL,
      }}
    />
  );
}

Widget Props

Prop	Type	Default
config	{ apiKey, baseUrl, connectionString }	Required
mode	"floating" | "inline"	"floating"
position	"bottom-right" | "bottom-left"	"bottom-right"
defaultOpen	boolean	false
title	string	"✨ AI Assistant"
placeholder	string	"Ask about..."
accentColor	string	"#10b981"

Custom UI with Hooks

import { SyncAgentProvider, useSyncAgent } from "@syncagent/react";

function App() {
  return (
    <SyncAgentProvider config={{ apiKey: "...", baseUrl: "...", connectionString: "..." }}>
      <MyChat />
    </SyncAgentProvider>
  );
}

function MyChat() {
  const { messages, isLoading, sendMessage, stop, reset } = useSyncAgent();
  // Build your own UI
}

Hook Returns

Return	Type	Description
messages	Message[]	Chat history
isLoading	boolean	Currently streaming
error	Error | null	Last error
sendMessage	(content: string) => void	Send a message
stop	() => void	Abort current stream
reset	() => void	Clear messages