Skip to main content

The Octostar Platform React SDK

The @octostar/platform-react package provides React components and hooks for integrating with the Octostar shell.

OctostarContextProvider​

Wraps your entire app. It establishes the connection with the Octostar shell and makes platform APIs available to all child components via context.

import { OctostarContextProvider } from '@octostar/platform-react'

export default function App() {
  return (
    <OctostarContextProvider>
      {/* rest of your app */}
    </OctostarContextProvider>
  )
}

The template places OctostarContextProvider at the root in App.tsx. It is safe to nest multiple instances — the provider is idempotent.

useOctostarContext​

The primary hook for accessing Octostar platform APIs. Must be called inside an OctostarContextProvider.

import { useOctostarContext } from '@octostar/platform-react'

const { ContextAPI, OntologyAPI, DesktopAPI } = useOctostarContext()

The template uses ContextAPI to retrieve the session JWT on startup:

// from StateProvider.tsx
const { ContextAPI } = useOctostarContext()

ContextAPI.getContext().then((ctx) => {
  if (ctx?.token) api.setToken(ctx.token)
})

OntologyAPI and DesktopAPI are available for querying the knowledge graph and interacting with the Octostar desktop respectively — see the TypeScript API reference for their full signatures. 

OsDropzone​

A drag-and-drop target that accepts entities from the Octostar sidebar:

import { OsDropzone } from '@octostar/platform-react'

<OsDropzone
  accept={{ entities: true }}
  onDropEntities={(entities) => handleDrop(entities)}
  texts={{
    idle: 'Drag files here from the sidebar',
    active: 'Release to drop',
  }}
/>

Find all the other information regarding Typescript API in Typescript API Documentation.