hub / github.com/cloudflare/realtimekit-ui

github.com/cloudflare/realtimekit-ui @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

2,392 symbols 3,936 edges 237 files 211 documented · 9%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

RealtimeKit UI

This is a monorepo for all of Cloudflare RealtimeKit UI packages.

Here is a short description for all the packages:

Path	Description
`packages/core`	The main source code for all Stencil components. You will write code primarily in this directory.
`packages/react`	The React UI Kit wrapper package
`packages/angular`	The Angular UI Kit wrapper package
`packages/vue`	The Vue UI Kit wrapper package

You can find some core documentation about UI Kit here.

Contributing

To get started, you need to first make changes in the packages/core directory. You can find the code for each component in packages/core/src/components.

You need to cd into packages/core directory and run npm start.

After your changes are made, you need to cd to the root and then run npm run build, so that the wrapper code also gets updated.

Take a look at out contributing guidelines before you start contributing!

Extension points exported contracts — how you extend this code

RtkAi (Interface)

* An AI assistant component for meeting interactions. * Provides AI-powered features like transcription, summarizat

packages/core/src/components.d.ts

RtkAudioVisualizer (Interface)

* An audio visualizer component which visualizes a participants audio. * Commonly used inside `rtk-name-tag`.

packages/core/src/components.d.ts

RtkAvatar (Interface)

* Avatar component which renders a participant's image or their initials.

packages/core/src/components.d.ts

RtkBreakoutRoomParticipants (Interface)

* A component which lists all participants, with ability to * run privileged actions on each participant according

packages/core/src/components.d.ts

RtkBreakoutRoomsToggle (Interface)

* A button which toggles visibility of breakout rooms. * You need to pass the `meeting` object to it.

packages/core/src/components.d.ts

Core symbols most depended-on inside this repo

SyncWithStore

called by 423

packages/core/src/utils/sync-with-store/index.ts

addListener

called by 134

packages/core/src/components/rtk-transcripts/rtk-transcripts.tsx

useLanguage

called by 123

packages/core/src/lib/lang/index.ts

removeEventListener

called by 48

packages/core/src/components.d.ts

addEventListener

called by 45

packages/core/src/components.d.ts

createDefaultConfig

called by 40

packages/core/src/lib/default-ui-config.ts

get

called by 29

packages/core/src/components/rtk-message-list-view/rtk-message-list-view.tsx

add

called by 26

packages/core/src/components/rtk-notifications/rtk-notifications.tsx

Shape

Method 1,032

Interface 623

Class 564

Function 170

Enum 3

Languages

TypeScript100%

Modules by API surface

packages/core/src/components.d.ts578 symbols

packages/angular-library/projects/components/src/lib/stencil-generated/components.ts544 symbols

scripts/generate-stencil-docs.js30 symbols

packages/core/src/utils/breakout-rooms-manager.ts28 symbols

packages/core/src/components/rtk-breakout-rooms-manager/rtk-breakout-rooms-manager.tsx26 symbols

packages/core/src/components/rtk-paginated-list/rtk-paginated-list.tsx19 symbols

packages/core/src/components/rtk-notifications/rtk-notifications.tsx19 symbols

packages/core/src/lib/builder/index.ts17 symbols

packages/core/src/components/rtk-grid/rtk-grid.tsx17 symbols

packages/core/src/utils/chat.ts15 symbols

packages/core/src/components/rtk-meeting/rtk-meeting.tsx15 symbols

packages/core/src/components/rtk-breakout-room-manager/rtk-breakout-room-manager.tsx15 symbols

For agents

$ claude mcp add realtimekit-ui \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact