Creating Courses

Callouttypes: info, tip, warning

Highlight important information, tips, or warnings.

<Callout type="tip" title="Pro tip">
Use callouts sparingly — if everything is highlighted, nothing stands out.
</Callout>

StepByStep + Step

Walk learners through a sequential process.

<StepByStep>
<Step number={1} title="Install the CLI">

Run the install command:

```bash
npm install -g openclaw
```

</Step>
<Step number={2} title="Configure your agent">

Open the setup wizard:

```bash
openclaw setup
```

</Step>
</StepByStep>

Quiz + QuizOption

Test comprehension with multiple-choice questions. Mark one option as correct.

<Quiz question="What command starts the Gateway?">
<QuizOption correct explanation="Correct! The gateway command starts the background service.">openclaw gateway start</QuizOption>
<QuizOption explanation="This installs OpenClaw but doesn't start the Gateway.">npm install openclaw</QuizOption>
<QuizOption explanation="This opens the setup wizard, not the Gateway.">openclaw setup</QuizOption>
</Quiz>

Note: Always put each QuizOption on a single line. Vary which position (A/B/C) is correct across your course.

Prerequisites

List what learners need before starting the lesson.

<Prerequisites items={["OpenClaw installed and Gateway running", "Telegram or Slack connected", "About 10 minutes"]} />

Note: Items must be a single-line array — do NOT split across multiple lines.

CopyBlock

A copyable command with a descriptive label.

<CopyBlock text="openclaw gateway start" label="Start the Gateway" />

MdxTabs + TabItem

Show alternative content for different platforms or approaches.

<MdxTabs>
<TabItem label="macOS">

```bash
brew install openclaw
```

</TabItem>
<TabItem label="Linux">

```bash
curl -fsSL https://get.openclaw.dev | bash
```

</TabItem>
</MdxTabs>

MdxAccordion + AccordionItem

Collapsible sections for optional or supplementary content.

<MdxAccordion>
<AccordionItem title="What if I don't have a Telegram account?">

You can use WhatsApp, Slack, Discord, or any of the 20+ supported platforms.
Telegram is recommended for beginners because setup is fastest.

</AccordionItem>
</MdxAccordion>

VideoEmbed

Embed YouTube, Vimeo, or Loom videos.

<VideoEmbed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Setup walkthrough" caption="Optional caption below the video" />

ImageFigure

Display an image with optional caption. Upload via the media button or use a URL.

<ImageFigure src="/path/to/image.png" alt="Screenshot of the dashboard" caption="The learner dashboard showing enrolled courses" />

AudioPlayer

Embed an audio file with playback controls.

<AudioPlayer src="/path/to/audio.mp3" title="Pronunciation guide" />

ExternalLinkCard

A styled card linking to an external resource.

<ExternalLinkCard url="https://docs.openclaw.dev" title="OpenClaw Documentation" description="Full API reference and configuration guide" />