Getting Started
Components
- Agent Status
- Agent Template Card
- API Key Card
- Audio Player
- Bar Visualizer
- Channel Status Card
- Chat Composer
- Code Editor
- Condition Builder
- Confirm Dialog
- Conversation
- Conversation Bar
- Dataset Card
- Document Status Badge
- Extraction Strategy Select
- File Icon
- File Upload
- Indexing Progress
- Live Waveform
- Matrix
- Message
- Mic Selector
- Model Diff View
- Model Selector
- Model Type Filter
- Node Catalog
- Option Editor
- Orb
- Output Variables View
- Package Card
- Prompt Editor
- Provider Status Card
- Radio Card
- Resource Card
- Resource Sidebar
- Response
- Run Node List
- Scrub Bar
- Segment Card
- Shimmering Text
- Speech Input
- Token Trend Chart
- Tool Call Card
- Transcript Viewer
- Usage Stat Card
- Variable Binding Editor
- Variable Selector
- Voice Button
- Voice Picker
- Waveform
- Workflow Node Card
- Workspace Selector
Installing ZGI UI components is straightforward. Every component is published to the ZGI registry and can be added with the standard shadcn CLI.
pnpm dlx shadcn@latest add https://ui.zgi.ai/r/orb.json
Prerequisites
Before installing ZGI UI, make sure your environment meets the following requirements:
- Node.js version 18 or later
- A Next.js project
- shadcn/ui setup in your project. If you don't have it setup, running any install command will set it up for you.
Installing components
You can install ZGI UI components using the shadcn CLI with a component's registry URL. This adds the selected component’s code and any needed dependencies to your project.
The CLI will download the component's code and integrate it into your project's directory (usually under your components folder).
After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
Deploy and Scale Agents with ZGI
ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.
Talk to an expert