@boverse/react

React components and hooks for integrating BoVerse workflows into your applications.

Installation

npm install @boverse/react
# or
yarn add @boverse/react
# or
pnpm add @boverse/react

Quick Start

1. Get Your Credentials

Go to BoVerse and open your workflow
Click the Embed button
Copy your workflow_id and create an API key

2. Use Components

Simple Embed (Easiest)

import { BoVerseEmbed } from '@boverse/react';

function App() {
  return (
    <BoVerseEmbed
      workflowId="your-workflow-id"
      apiKey="your-api-key"
      type="workflow" // or "chat"
    />
  );
}

Workflow Component

import { BoVerseWorkflow } from '@boverse/react';

function App() {
  return (
    <BoVerseWorkflow
      workflowId="your-workflow-id"
      apiKey="your-api-key"
      placeholder="Ask me anything..."
      buttonText="Run"
      onResult={(result) => console.log(result)}
    />
  );
}

Chat Component

import { BoVerseChat } from '@boverse/react';

function App() {
  return (
    <BoVerseChat
      workflowId="your-workflow-id"
      apiKey="your-api-key"
      title="My AI Assistant"
      height={500}
    />
  );
}

3. Use Hooks (Full Control)

useWorkflow

import { useWorkflow } from '@boverse/react';

function MyComponent() {
  const { execute, result, isLoading, error } = useWorkflow({
    workflowId: 'your-workflow-id',
    apiKey: 'your-api-key',
  });

  const handleSubmit = async () => {
    const result = await execute('Generate a poem about coding');
    console.log(result.final_output);
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={isLoading}>
        {isLoading ? 'Running...' : 'Generate'}
      </button>
      {result && <p>{result.final_output}</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

useChat

import { useChat } from '@boverse/react';

function MyChatComponent() {
  const { messages, sendMessage, isLoading } = useChat({
    workflowId: 'your-workflow-id',
    apiKey: 'your-api-key',
  });

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}
      <button onClick={() => sendMessage('Hello!')}>
        Send
      </button>
    </div>
  );
}

4. Direct API Client

import { createBoVerseClient } from '@boverse/react';

const client = createBoVerseClient({
  apiKey: 'your-api-key',
});

// Execute a workflow
const result = await client.executeWorkflow({
  workflowId: 'your-workflow-id',
  query: 'Generate a summary',
});

console.log(result.final_output);

API Reference

Components

Component	Description
`BoVerseEmbed`	iframe-based embed (simplest)
`BoVerseWorkflow`	Workflow input/output UI
`BoVerseChat`	Chat interface UI

Hooks

Hook	Description
`useWorkflow`	Execute workflows programmatically
`useChat`	Manage chat conversations

BoVerseWorkflow Props

Prop	Type	Default	Description
`workflowId`	`string`	required	Your workflow ID
`apiKey`	`string`	required	Your API key
`baseUrl`	`string`	production URL	Custom API URL
`placeholder`	`string`	"Enter your input..."	Input placeholder
`buttonText`	`string`	"Run Workflow"	Button label
`onResult`	`function`	-	Callback on success
`onError`	`function`	-	Callback on error
`renderResult`	`function`	-	Custom result renderer

BoVerseChat Props

Prop	Type	Default	Description
`workflowId`	`string`	required	Your workflow ID
`apiKey`	`string`	required	Your API key
`title`	`string`	"AI Assistant"	Chat header title
`placeholder`	`string`	"Type your message..."	Input placeholder
`height`	`number\|string`	500	Container height

BoVerseEmbed Props

Prop	Type	Default	Description
`workflowId`	`string`	required	Your workflow ID
`apiKey`	`string`	required	Your API key
`type`	`'workflow'\|'chat'`	"workflow"	Embed type
`title`	`string`	-	Chat title (for chat type)
`width`	`number\|string`	"100%"	iframe width
`height`	`number\|string`	540	iframe height

Integration with Lovable

In your Lovable project, add the package and use any of the components:

// pages/index.tsx in Lovable
import { BoVerseWorkflow } from '@boverse/react';

export default function Home() {
  return (
    <main className="p-8">
      <h1>My AI App</h1>
      <BoVerseWorkflow
        workflowId={process.env.BOVERSE_WORKFLOW_ID}
        apiKey={process.env.BOVERSE_API_KEY}
      />
    </main>
  );
}

License

MIT