Community Showcase

rtc-agent’s integration is flexible — from online editors to full business apps, all empowered through the same “declarative API + Agent” pattern. This page collects real cases from the community.

💡 If your project also integrates rtc-agent, submit it via GitHub PR.

Mermaid Live Editor

Showcase #1

The official Mermaid online diagram editor. Integrated with less than 30 lines of glue code — AI draws, validates, and fixes diagrams via natural language.

• Exposes window.editorAPI (getCode / setCode / validate / waitForReady)
• Zero changes to upstream source, modification rate < 2%

View case details → · Live demo ↗

Peep — Chinese Metaphysics Workbench

Showcase #2

A React metaphysics app. Integrated via npm + embedded maximized mode — AI operates person profiles, three divination engines (Ziwei / Da Liu Ren / Liu Yao), and a knowledge base.

• Zod Schema declares 6 groups of business functions (40+ functions), auto-generates OpenAPI docs
• Custom AuthProvider authentication + write operation confirmation mechanism
• 5:3 split layout with AI assistant always embedded in the right panel

View case details → · Live demo ↗

RTC Agent Official Docs

Showcase #3

The RTC Agent official docs site you’re reading right now. Integrated via CDN NPM package — AI assistant helps users learn, navigate, and get answers.

• Uses jsdelivr CDN, no build tools required
• Floating window mode (minimized at bottom-right)
• 6 documentation-specific functions (search, navigate, code extraction)

View case details → · Live demo ↗

Integration Patterns

Typical integration patterns across different scenarios:

Loading Method	Host Stack	Window Mode	Use Case	Example
CDN	Astro / static sites	Floating	Docs, blogs, landing pages	RTC Agent Docs
npm / pnpm	Svelte	Floating	SPA, lightweight integration	Mermaid Live Editor
npm	React / Vue / any framework	Embedded	Complex business app, multi-module	Peep

Common Integration Steps

Regardless of pattern, the core flow is always three steps:

1. Expose host API on window — so Agent can read/write your business state
2. Declare Agent identity and tools — describe persona and functions via agentConfig
3. Mount the <rtc-agent> component — configure app-label / scenarios-url / server-url

Full tutorial at Getting Started →