This is what an AI/RAG pipeline sees when it indexes this page — the same output served at https://camelmind-docs.vercel.app/api/llms/getting-started/mdx-components.Back to doc

Rendered doc

Use MDX Components

Build richer documentation with CamelMind's built-in MDX components. No imports required.

CamelMind includes built-in MDX components to make your documentation easier to read and navigate. Every component is available in any .mdx file—no imports or setup required.

Add Callout components

Use the Callout component to highlight notes, tips, warnings, important information, critical warnings, or success messages.

CamelMind provides the following Callout types:

mdx
<Callout type="note">A general note.</Callout>

<Callout type="tip">A helpful tip.</Callout>

<Callout type="warning">
Something to watch out for.
</Callout>

<Callout type="important">
Pay close attention.
</Callout>

<Callout type="danger">
A critical warning.
</Callout>

<Callout type="success">
Configuration saved successfully.
</Callout>
Note
A general note.
Tip
A helpful tip.
Warning
Something to watch out for.
Important
Pay close attention.
Danger
A critical warning.
Success
Configuration saved successfully.

Customize a Callout title

Use the title prop to set a custom title for a Callout instead of its default heading.

mdx
<Callout
  type="warning"
  title="Rate limits apply"
>
The API accepts up to 1,000 requests per minute.
</Callout>
Rate limits apply

The API accepts up to 1,000 requests per minute.

Customize a Callout icon

Use the icon prop to replace the default Callout icon with a Lucide icon.

mdx
<Callout type="tip" icon="rocket">
Ready to launch.
</Callout>
Tip

Ready to launch.

Add Steps components

Use the Steps component to present installation instructions, tutorials, and other sequential workflows as a series of ordered steps.

mdx
<Steps>
  <Step n={1} title="Install">
    Run the installer.
  </Step>

  <Step n={2} title="Start">
    Launch the development server.
  </Step>
</Steps>

rendered as:

1

Install

Run the installer.

2

Start

Launch the development server.

Add tabs components

Use tabs to organize related content that readers can switch between, such as instructions for different operating systems, languages, or configuration options.

mdx
  === "Tab 1"

  Camels have remarkable desert adaptations. A hump stores up to 80 pounds of fat for energy rather than water.

  === "Tab 2"
  Camels are surprisingly fast, able to run up to 40 miles per hour. They can carry up to 900 pounds for 25 miles a day.

  ===

rendered as:

Camels have remarkable desert adaptations. A hump stores up to 80 pounds of fat for energy rather than water.

Add Details components

Use Details to hide optional or advanced information behind a collapsible section.

mdx
<Details summary="Advanced configuration">

These settings are only needed for enterprise deployments.

</Details>

rendered as:

Advanced configuration

These settings are only needed for enterprise deployments.

Anchor-linkable details

Give a Details component an id to create a shareable link.

mdx
<Details
  id="rate-limits"
  summary="Rate limits"
>

Content...

</Details>

rendered as:

Rate limits

Content...

Display code blocks

Use standard Markdown code fences to display syntax-highlighted code with built-in copy, line-wrapping, and dark-mode support.

typescript
function greet(name: string) {
  return `Hello ${name}`;
}

Control AI-visible content with LLMOnly and LLMIgnore

Use LLMOnly and LLMIgnore to control whether specific documentation content is visible to AI systems through llms.txt.

Content inside LLMOnly is included in llms.txt but hidden from the rendered documentation.

mdx
<LLMIgnore>

Internal implementation details.

</LLMIgnore>

See llms.txt for more information.

What the AI sees

1> For a complete documentation index, see /llms.txt. To read any public page as Markdown, append .md to the URL.
2 
3CamelMind includes built-in MDX components to make your documentation easier to read and navigate. Every component is available in any `.mdx` file—no imports or setup required.
4 
5---
6 
7## Add Callout components
8 
9Use the `Callout` component to highlight notes, tips, warnings, important information, critical warnings, or success messages.
10 
11CamelMind provides the following Callout types:
12 
13```mdx
14<Callout type="note">A general note.</Callout>
15 
16<Callout type="tip">A helpful tip.</Callout>
17 
18<Callout type="warning">
19Something to watch out for.
20</Callout>
21 
22<Callout type="important">
23Pay close attention.
24</Callout>
25 
26<Callout type="danger">
27A critical warning.
28</Callout>
29 
30<Callout type="success">
31Configuration saved successfully.
32</Callout>
33```
34 
35<Callout type="note">A general note.</Callout>
36 
37<Callout type="tip">A helpful tip.</Callout>
38 
39<Callout type="warning">Something to watch out for.</Callout>
40 
41<Callout type="important">Pay close attention.</Callout>
42 
43<Callout type="danger">A critical warning.</Callout>
44 
45<Callout type="success">Configuration saved successfully.</Callout>
46 
47### Customize a Callout title
48 
49Use the `title` prop to set a custom title for a Callout instead of its default heading.
50 
51```mdx
52<Callout
53 type="warning"
54 title="Rate limits apply"
55>
56The API accepts up to 1,000 requests per minute.
57</Callout>
58```
59 
60<Callout
61 type="warning"
62 title="Rate limits apply"
63>
64The API accepts up to 1,000 requests per minute.
65</Callout>
66 
67### Customize a Callout icon
68 
69Use the `icon` prop to replace the default Callout icon with a [Lucide](https://lucide.dev/icons/) icon.
70 
71```mdx
72<Callout type="tip" icon="rocket">
73Ready to launch.
74</Callout>
75```
76 
77<Callout type="tip" icon="rocket">
78Ready to launch.
79</Callout>
80 
81---
82 
83## Add Steps components
84 
85Use the `Steps` component to present installation instructions, tutorials, and other sequential workflows as a series of ordered steps.
86 
87```mdx
88<Steps>
89 <Step n={1} title="Install">
90 Run the installer.
91 </Step>
92 
93 <Step n={2} title="Start">
94 Launch the development server.
95 </Step>
96</Steps>
97 
98```
99rendered as:
100 
101<Steps>
102 <Step n={1} title="Install">
103 Run the installer.
104 </Step>
105 
106 <Step n={2} title="Start">
107 Launch the development server.
108 </Step>
109</Steps>
110 
111---
112 
113## Add tabs components
114 
115Use tabs to organize related content that readers can switch between, such as instructions for different operating systems, languages, or configuration options.
116 
117```mdx
118 === "Tab 1"
119 
120 Camels have remarkable desert adaptations. A hump stores up to 80 pounds of fat for energy rather than water.
121 
122 === "Tab 2"
123 Camels are surprisingly fast, able to run up to 40 miles per hour. They can carry up to 900 pounds for 25 miles a day.
124 
125 ===
126```
127rendered as:
128 
129=== "Tab 1"
130 
131Camels have remarkable desert adaptations. A hump stores up to 80 pounds of fat for energy rather than water.
132 
133=== "Tab 2"
134Camels are surprisingly fast, able to run up to 40 miles per hour. They can carry up to 900 pounds for 25 miles a day.
135 
136===
137 
138---
139 
140## Add Details components
141 
142Use `Details` to hide optional or advanced information behind a collapsible section.
143 
144```mdx
145<Details summary="Advanced configuration">
146 
147These settings are only needed for enterprise deployments.
148 
149</Details>
150```
151rendered as:
152 
153<Details summary="Advanced configuration">
154 
155These settings are only needed for enterprise deployments.
156 
157</Details>
158 
159### Anchor-linkable details
160 
161Give a `Details` component an `id` to create a shareable link.
162 
163```mdx
164<Details
165 id="rate-limits"
166 summary="Rate limits"
167>
168 
169Content...
170 
171</Details>
172```
173 
174rendered as:
175 
176<Details
177 id="rate-limits"
178 summary="Rate limits"
179>
180 
181Content...
182 
183</Details>
184 
185---
186 
187## Display code blocks
188 
189Use standard Markdown code fences to display syntax-highlighted code with built-in copy, line-wrapping, and dark-mode support.
190 
191```typescript
192function greet(name: string) {
193 return `Hello ${name}`;
194}
195```
196 
197---
198 
199## Control AI-visible content with LLMOnly and LLMIgnore
200 
201Use `LLMOnly` and `LLMIgnore` to control whether specific documentation content is visible to AI systems through `llms.txt`.
202 
203<Tabs>
204<Tab label="LLMOnly">
205 
206Content inside `LLMOnly` is included in `llms.txt` but hidden from the rendered documentation.
207 
208```mdx
209 
210```
211</Tab>
212<Tab label="LLMIgnore">
213 
214Content inside `LLMIgnore` is visible to readers but omitted from `llms.txt`.
215 
216```mdx
217 
218```
219</Tab>
220</Tabs>
221 
222See [llms.txt](/features/llms-txt) for more information.

Issues (1)

Notes (1)