Documentation | Codiris

BrainboardProvider

Provides the Brainboard client context to all child components.

import { BrainboardProvider } from 'codiris-brainboard-sdk/react';

function App() {
  return (
    <BrainboardProvider
      config={{
        apiKey: 'your-api-key',
        workspaceId: 'optional-workspace-id',
        debug: false,
      }}
    >
      <YourApp />
    </BrainboardProvider>
  );
}

Components

BrainboardEmbed

Full-featured embedded board editor via iframe.

import { BrainboardEmbed } from 'codiris-brainboard-sdk/react';

<BrainboardEmbed
  boardId="board_xxxxx"
  width="100%"
  height="600px"
  readOnly={false}
  showToolbar={true}
  showSidebar={false}
  showComments={true}
  showMinimap={true}
  theme="light"
  onReady={() => console.log('Ready!')}
  onBoardChange={(board) => console.log(board)}
  onObjectSelect={(objects) => console.log(objects)}
/>

Prop	Type	Default	Description
boardId	string	-	Board ID to display (required)
width	string \| number	'100%'	Container width
height	string \| number	'600px'	Container height
readOnly	boolean	false	Disable editing
showToolbar	boolean	true	Show toolbar
showSidebar	boolean	false	Show sidebar
showComments	boolean	true	Enable comments
showMinimap	boolean	true	Show minimap
theme	'light' \| 'dark' \| 'system'	'system'	Color theme
onReady	() => void	-	Called when loaded
onBoardChange	(board: Board) => void	-	Called on changes
onObjectSelect	(objects: BoardObject[]) => void	-	Called on selection

BrainboardViewer

Read-only viewer optimized for displaying boards.

import { BrainboardViewer } from 'codiris-brainboard-sdk/react';

<BrainboardViewer
  boardId="board_xxxxx"
  width="100%"
  height="400px"
  showNavigation={true}
  autoFit={true}
/>

BrainboardThumbnail

Small preview thumbnail of a board.

import { BrainboardThumbnail } from 'codiris-brainboard-sdk/react';

<BrainboardThumbnail
  board={board}
  width={200}
  height={150}
  onClick={() => navigate(`/boards/${board.id}`)}
/>

BrainboardList

Grid display of multiple boards.

import { BrainboardList } from 'codiris-brainboard-sdk/react';

<BrainboardList
  boards={boards}
  gridColumns={3}
  onSelect={(board) => setSelectedBoard(board)}
  emptyMessage="No boards found"
/>

Hooks

useBoard

Fetch and manage a single board.

const { board, loading, error, refetch, updateBoard } = useBoard(boardId);

// Update the board
await updateBoard({ name: 'New Name' });

useBoards

List and manage boards.

const { boards, total, loading, createBoard, deleteBoard } = useBoards({
  status: 'active',
  search: 'project',
  page: 1,
});

// Create a new board
const board = await createBoard({ name: 'New Board' });

// Delete a board
await deleteBoard(boardId);

useBoardObjects

Manage objects on a board.

const {
  objects,
  selectedIds,
  selectedObjects,
  createObject,
  updateObject,
  deleteObject,
  selectObject,
  clearSelection,
} = useBoardObjects(boardId);

// Add a sticky note
await createObject({
  type: 'sticky',
  x: 100, y: 100,
  text: 'New note',
});

// Update an object
await updateObject(objectId, { fill: '#ff0000' });

useBoardMembers

Manage board members.

const { members, inviteMember, removeMember } = useBoardMembers(boardId);

// Invite a member
await inviteMember('user@example.com', 'editor');

useBoardComments

Manage comments on a board.

const { comments, addComment, deleteComment } = useBoardComments(boardId, objectId);

// Add a comment
await addComment('Great idea!');

useBrainboardChat

AI chat with board context.

const { messages, loading, sendMessage, clearMessages } = useBrainboardChat(boardId);

// Send a message with source grounding
const response = await sendMessage('What are the main themes?', true);

console.log(response.content);
console.log(response.sources); // Cited objects

useBrainboardGenerate

Generate content with AI.

const { loading, generate } = useBrainboardGenerate();

const result = await generate({
  prompt: 'Create a flowchart for user onboarding',
  type: 'diagram',
  boardId,
});

// Add generated objects
if (result.objects) {
  await createObjects(result.objects);
}

useBrainboardEvent

Listen to real-time events.

useBrainboardEvent('object:created', (event) => {
  console.log('New object:', event.data);
});

useBrainboardEvent('user:joined', (event) => {
  console.log('User joined:', event.data.name);
});

// Event types: board:loaded, board:updated, object:created,
// object:updated, object:deleted, object:selected,
// object:deselected, camera:moved, user:joined, user:left,
// cursor:moved, comment:added, error

useTemplates

Manage board templates.

const { templates, createFromTemplate } = useTemplates('planning');

// Create board from template
const board = await createFromTemplate(templateId, 'My Board');

React Components