@groo.dev/ai-react

React components and hooks for Groo AI - chat and search.

Installation

npm install @groo.dev/ai-react

Usage

Setup Provider

Wrap your app with AIProvider:

import { AIProvider } from '@groo.dev/ai-react'

function App() {
  return (
    <AIProvider
      projectId="your-project-id"
      auth={{
        accountsUrl: 'https://accounts.groo.dev',
        clientId: 'your-client-id',
      }}
    >
      <YourApp />
    </AIProvider>
  )
}

Chat Component

import { GrooChat } from '@groo.dev/ai-react'

function ChatPage() {
  return <GrooChat />
}

Search Component

import { Search } from '@groo.dev/ai-react'

function SearchPage() {
  return <Search />
}

Hooks

useChat

import { useChat } from '@groo.dev/ai-react'

function CustomChat() {
  const { messages, input, setInput, sendMessage, isLoading } = useChat()

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>{msg.content}</div>
      ))}
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage} disabled={isLoading}>
        Send
      </button>
    </div>
  )
}

useSearch

import { useSearch } from '@groo.dev/ai-react'

function CustomSearch() {
  const { results, search, isLoading } = useSearch()

  return (
    <div>
      <input onChange={(e) => search(e.target.value)} />
      {results.map((result) => (
        <a key={result.path} href={result.path}>
          {result.title}
        </a>
      ))}
    </div>
  )
}

useAuth

import { useAuth } from '@groo.dev/ai-react'

function AuthStatus() {
  const { user, isLoading, login, logout } = useAuth()

  if (isLoading) return <div>Loading...</div>
  if (!user) return <button onClick={login}>Sign in</button>

  return <button onClick={logout}>Sign out</button>
}

License

MIT