@fencyai/react

The official React SDK for Fency.ai.

For more information, visit docs.fency.ai.

Setup

Mount FencyProvider once, at the app root. Every useAgentTasks hook and every agent task under it shares the same streams. Do not add a provider per page, component, hook, or task.

import { loadFency } from '@fencyai/js'
import { FencyProvider, useAgentTasks } from '@fencyai/react'

const fency = loadFency({ publishableKey: 'pk_your_publishable_key' })

export default function App() {
  return (
    <FencyProvider
      fency={fency}
      fetchCreateStreamClientToken={async () => {
        const res = await fetch('/api/stream-client-token', { method: 'POST' })
        return res.json()
      }}
    >
      <Chat />
      <Search />
    </FencyProvider>
  )
}

function Chat() {
  const { createAgentTask } = useAgentTasks({
    fetchCreateAgentTaskClientToken: fetchChatToken,
  })
  return null
}

function Search() {
  const { createAgentTask } = useAgentTasks({
    fetchCreateAgentTaskClientToken: fetchSearchToken,
  })
  return null
}

fetchCreateStreamClientToken is not called per task. The provider reuses a stream for about 5 minutes, then mints a new one. Your backend should POST /v1/sessions with { createStream: {} } and return { clientToken }.