@arbidocs/react

React hooks and provider for building ARBI-powered apps. Includes @arbidocs/sdk and @tanstack/react-query — one install gets you everything.

Quickstart

npm install @arbidocs/react

1. Set up providers

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ArbiProvider } from '@arbidocs/react'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ArbiProvider url="https://www.arbidocs.com">
        <Chat />
      </ArbiProvider>
    </QueryClientProvider>
  )
}

2. Build a streaming chat

import { useState, useRef } from 'react'
import { useArbi, useDocuments, useAssistantQuery } from '@arbidocs/react'

function Chat() {
  const arbi = useArbi()
  const [workspaceId, setWorkspaceId] = useState<string>()

  if (!workspaceId) {
    return (
      <button onClick={async () => {
        await arbi.login('[email protected]', 'password')
        const ws = await arbi.workspaces.list()
        await arbi.selectWorkspace(ws[0].external_id)
        setWorkspaceId(ws[0].external_id)
      }}>
        Connect
      </button>
    )
  }

  return <ChatWindow workspaceId={workspaceId} />
}

function ChatWindow({ workspaceId }: { workspaceId: string }) {
  const { data: docs } = useDocuments(workspaceId)
  const mutation = useAssistantQuery()
  const [input, setInput] = useState('')
  const [response, setResponse] = useState('')
  const lastId = useRef<string | null>(null)

  return (
    <div>
      <div>{response}</div>
      <form onSubmit={(e) => {
        e.preventDefault()
        setResponse('')
        mutation.mutate({
          question: input,
          docIds: docs?.map((d) => d.external_id) ?? [],
          previousResponseId: lastId.current,
          onToken: (t) => setResponse((r) => r + t),
          onStreamStart: ({ assistant_message_ext_id }) => {
            lastId.current = assistant_message_ext_id
          },
        })
        setInput('')
      }}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit" disabled={mutation.isPending}>Send</button>
      </form>
    </div>
  )
}

That's it — three hooks and you have a streaming RAG chat.

Hooks

| Hook | Returns | Auto-enabled when | |------|---------|-------------------| | useArbi() | Arbi instance | Always | | useWorkspaces() | User's workspaces | Logged in | | useDocuments(workspaceId) | Workspace documents | Workspace selected | | useConversations(workspaceId) | Workspace conversations | Workspace selected | | useTags(workspaceId) | Workspace tags | Workspace selected | | useAssistantQuery() | Streaming mutation | Call .mutate() | | useHealth() | Backend status | Pass { enabled: true } |

Streaming callbacks

Pass these to mutation.mutate() alongside question and docIds:

| Callback | Description | |----------|-------------| | onToken(token) | Each text chunk as it streams | | onStreamStart({ assistant_message_ext_id }) | Stream started — save the ID for follow-up queries | | onAgentStep(step) | Agent tool usage (searching, reading, etc.) | | onError(message) | Error during streaming | | onComplete() | Stream finished |

Cache invalidation

import { arbiQueryKeys } from '@arbidocs/react'
import { useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()
queryClient.invalidateQueries({ queryKey: arbiQueryKeys.documents(workspaceId) })

Peer dependencies

• react >= 18