@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

1. Go to BoVerse and open your workflow
2. Click the Embed button
3. 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