Neurophysiologically Pseudoscientific Manatee
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


0.5.0 • Public • Published

Symbl Elements

Plug in components by Symbl to use in your react web applications

Total Downloads


  • Plug n Play
  • Full featured UI components for both Offline and Realtime conversations
  • Custom hooks to build your own components
  • Full Typescript support


# using npm 
npm i @symblai/react-elements
# using yarn 
yarn add @symblai/react-elements


The project is still in early development. New components will be added regularly over the coming months.


The <SymblProvider /> component lets all the child components access the Symbl config inside it.

Normally, like any any other Providers, <SymblProvider /> should be at the top level, with the component tree inside it.


import { SymblProvider } from '@symblai/react-elements';
const symblConfig = {
  appId: '__appId__',
  appSecret: '__appSecret__',
function App({ children }) {
  return (
    <SymblProvider config={symblConfig}>


Prop Type Description
config Object (Config) The Symbl config object


Key Type Description
appId String Can be generated from Symbl Developer Platform
appSecret String Can be generated from Symbl Developer Platform
accessToken String Generated accessToken
basePath String (Default: '')

Note: One of appId/appSecret or accessToken is a required parameter.


The <Transcripts /> can be used to directly add a Transcript component in your app without much configuration and only need a conversationId to enable it.

Example - Transcripts

import { Transcripts } from '@symblai/react-elements';
function App(props) {
  return (
    // ...
    // ...

Props - Transcripts

Prop Type Description
conversationId String The id of the conversation
messages Array Array of messages retrieved from the symbl realtime api - Message response
highlightPhrases Array Highlight key points, actionable texts in the transcript. To style the highlighting a global class is available for each type. Available type action_phrase
showAvatar Boolean (Deafault: true) toggle the avatar in the transcription
mediaElementRefOrId String / ReactRef Id of the audio/video element for mapping it to transcripts or ref to the element
transcriptsWrapperClassName String Wrapper class for the whole transcript body
transcriptRowClassName String Class for handling the styling of the transcript row
transcriptClassName String Class for handling the styling of transcript text
transcriptRowHeaderClassName String Class for handling the style of the header section of transcript
avatarClassName String Class for styling the avatar

Note: When a conversationId is passed the Transcripts is retrieved from the Conversation API and is required if the messages prop is not passed

Note: action_phrase is only available when you pass detectActionPhraseForMessages=true during submiting the request in Async and Websocket API. Link

Highlight classes

Type ClassName
action_phrase action-phrase-highlighted


The <Topics /> will render a list of topic pills ordered by confidence score.

Example - Topics

import { Topics } from '@symblai/react-elements';
function App(props) {
  return (
    // ...
    // ...

Props - Topics

Prop Type Description
conversationId String required The id of the conversation
confidenceThreshold Number A value between 0 to 1 which will be used to filter the topics
orderBy String Sort topics based on either score or text
colorize Boolean Toggle to enable the coloring of the topic pills
color String Change the text color.
backgroundColor String Change the background color
onTopicClick Function Callback called when clicked a pill




npm i @symblai/react-elements

DownloadsWeekly Downloads






Unpacked Size

846 kB

Total Files


Last publish


  • avatar
  • avatar
  • avatar