docs: explain how custom React components appear in Markdown export

agent-context/context/skills/mintlify/reference/components.md

@@ -530,7 +530,7 @@ Props:
 
 ## Visibility
 
-Show different content to humans (web UI), AI agents (Markdown output), or readers based on sign-in state and groups. Content marked `for="humans"` renders on the site but is excluded from `.md` URLs; content marked `for="agents"` is hidden on the site but included in Markdown output. The same rules apply to `llms-full.txt` and to `<Visibility>` inside snippets and custom components. Markdown output converts built-in components (callouts become alerts, cards and accordions become blockquotes, steps become numbered titles), so wrap a visual custom component in `for="humans"` and give agents a simpler form, such as a `Card`, in `for="agents"`.
+Show different content to humans (web UI), AI agents (Markdown output), or readers based on sign-in state and groups. Content marked `for="humans"` renders on the site but is excluded from `.md` URLs; content marked `for="agents"` is hidden on the site but included in Markdown output. The same rules apply to `llms-full.txt` and to `<Visibility>` inside snippets and custom components. Markdown output converts built-in components (callouts become alerts, cards and accordions become blockquotes, steps become numbered titles), and never includes custom component source or imported data, so `Visibility` isn't needed to keep code out of Markdown. Interactive custom components (calculators, filterable galleries, charts) keep only their children and `title`, `description`, `alt`, and `href` props, so wrap them in `for="humans"` and give agents a static form, such as a table or `Card`, in `for="agents"`.
 
 ```mdx
 <Visibility for="humans">

agent-context/context/skills/mintlify/reference/customization/react-and-snippets.md

@@ -24,6 +24,7 @@ import { ExampleCounter } from "/snippets/example-counter.jsx";
 - Access browser APIs only in effects and handlers, with cleanup.
 - Write Tailwind classes as complete literals, not concatenated strings.
 - Most custom components render client-side, so they're absent from the server-rendered HTML. MDX snippets imported as content render on the server. A component defined with `export` in an MDX file also renders on the server when it only places its props into HTML elements and built-in components (no state, hooks, function calls, conditionals, event handlers, or `style` attributes) and every usage passes only plain string attributes.
+- Markdown output (`.md` URLs and `llms-full.txt`) never includes component source or imported data. Components with static output render as Markdown; interactive components keep only their children and `title`, `description`, `alt`, and `href` props, or are omitted. Give agents a static version of interactive content with `<Visibility for="agents">`.
 
 ## Nesting
 

ai/markdown-export.mdx

@@ -103,6 +103,16 @@
 
 `<Visibility>` inside a snippet or a custom component follows the same audience rules as on the page. Use it when a custom component is visual and you want agents to read a simpler form, such as a [`Card`](/components/cards).
 
+### Custom React components
+
+Markdown exports never include component source code. When a page imports [custom React components](/customize/react-components) or data from snippet files, the Markdown export contains what those components display, not the code that defines them.
+
+- **Components with static output** render as Markdown. For example, a component that returns a link, a list, or a table appears as that link, list, or table.
+- **Interactive components** build their output from state or browser APIs, such as calculators, filterable galleries, and charts. They keep only their children and their `title`, `description`, `alt`, and `href` props. A component with none of these is omitted.
+- **Imported data**, such as an object passed to a component as a prop, does not appear in Markdown exports.
+
+Give agents a static version of an interactive component's content with the [visibility](/components/visibility) component. See [Interactive components](/components/visibility#interactive-components) for an example.
+
 ## API reference pages
 
 By default, Markdown exports of API reference pages include the full OpenAPI or AsyncAPI specification so AI tools have complete context about each endpoint.

components/visibility.mdx

@@ -59,7 +59,7 @@
 
 ## Show content by sign-in state or group
 
 If your site uses [authentication](/deploy/authentication-setup), you can show content based on whether a reader is signed in or which [groups](/deploy/authentication-setup#control-access-with-groups) they belong to.
 
 ```mdx
 <Visibility for="signed-in">
@@ -101,6 +101,28 @@
   Sign-in and group rules hide content in the browser only. Mintlify still sends the hidden content to every reader's browser. To restrict access to sensitive content, put it on a separate page and use the [`groups` frontmatter property](/deploy/authentication-setup#control-access-with-groups).
 </Warning>
 
+## Interactive components
+
+Interactive components such as calculators, filterable galleries, and charts build their output in the browser, so they display little or nothing in [Markdown output](/ai/markdown-export#custom-react-components). Wrap the interactive component in `for="humans"` and add a static version of the same information in `for="agents"`.
+
+```mdx
+import { PricingCalculator } from "/snippets/pricing-calculator.jsx"
+import { PRICING } from "/snippets/pricing-data.jsx"
+
+<Visibility for="humans">
+  <PricingCalculator data={PRICING} />
+</Visibility>
+
+<Visibility for="agents">
+  | Plan | Price per 1M tokens |
+  | --- | --- |
+  | Standard | $1.00 |
+  | Pro | $3.00 |
+</Visibility>
+```
+
+Markdown output never includes component source code or imported data such as `PRICING`, so you don't need `Visibility` to keep code out of Markdown. Use it to control what each audience reads.
+
 ## Properties
 
 <ResponseField name="for" type="string | object" required>

es/ai/markdown-export.mdx

@@ -119,6 +119,18 @@ Los snippets muestran el contenido del archivo importado, no la etiqueta, como `
 
 `<Visibility>` dentro de un snippet o de un componente personalizado sigue las mismas reglas de audiencia que en la página. Úsalo cuando un componente personalizado sea visual y quieras que los agentes lean una forma más sencilla, como una [`Card`](/es/components/cards).
 
+<div id="custom-react-components">
+  ### Componentes de React personalizados
+</div>
+
+Las exportaciones a Markdown nunca incluyen el código fuente de los componentes. Cuando una página importa [componentes de React personalizados](/es/customize/react-components) o datos desde archivos de snippet, la exportación a Markdown contiene lo que esos componentes muestran, no el código que los define.
+
+- **Componentes con salida estática**: se convierten en Markdown. Por ejemplo, un componente que devuelve un enlace, una lista o una tabla aparece como ese enlace, esa lista o esa tabla.
+- **Componentes interactivos**: generan su salida a partir del estado o de APIs del navegador, como calculadoras, galerías con filtros y gráficos. Solo conservan sus elementos hijos y sus props `title`, `description`, `alt` y `href`. Un componente sin ninguno de ellos se omite.
+- **Datos importados**: como un objeto que se pasa a un componente como prop, no aparecen en las exportaciones a Markdown.
+
+Ofrece a los agentes una versión estática del contenido de un componente interactivo con el componente [visibility](/es/components/visibility). Consulta [Componentes interactivos](/es/components/visibility#interactive-components) para ver un ejemplo.
+
 <div id="api-reference-pages">
   ## Páginas de referencia de API
 </div>

es/components/visibility.mdx

@@ -105,6 +105,30 @@ Para comprobar estas reglas localmente, ejecuta [`mint dev --signed-in` o `mint
   Las reglas de inicio de sesión y de grupo solo ocultan el contenido en el navegador. Mintlify sigue enviando el contenido oculto al navegador de cada lector. Para restringir el acceso a contenido sensible, colócalo en una página independiente y usa la [propiedad de frontmatter `groups`](/es/deploy/authentication-setup#control-access-with-groups).
 </Warning>
 
+<div id="interactive-components">
+  ## Componentes interactivos
+</div>
+
+Los componentes interactivos, como calculadoras, galerías con filtros y gráficos, generan su salida en el navegador, por lo que muestran poco o nada en la [salida Markdown](/es/ai/markdown-export#custom-react-components). Envuelve el componente interactivo en `for="humans"` y añade una versión estática de la misma información en `for="agents"`.
+
+```mdx
+import { PricingCalculator } from "/snippets/pricing-calculator.jsx"
+import { PRICING } from "/snippets/pricing-data.jsx"
+
+<Visibility for="humans">
+  <PricingCalculator data={PRICING} />
+</Visibility>
+
+<Visibility for="agents">
+  | Plan | Precio por 1M de tokens |
+  | --- | --- |
+  | Standard | $1.00 |
+  | Pro | $3.00 |
+</Visibility>
+```
+
+La salida Markdown nunca incluye el código fuente de los componentes ni datos importados como `PRICING`, así que no necesitas `Visibility` para mantener el código fuera de Markdown. Úsalo para controlar lo que lee cada audiencia.
+
 <div id="properties">
   ## Propiedades
 </div>

fr/ai/markdown-export.mdx

@@ -119,6 +119,18 @@ Les snippets affichent le contenu du fichier importé, et non la balise telle qu
 
 `<Visibility>` à l'intérieur d'un snippet ou d'un composant personnalisé suit les mêmes règles d'audience que sur la page. Utilisez-le lorsqu'un composant personnalisé est visuel et que vous souhaitez que les agents lisent une forme plus simple, comme une [`Card`](/fr/components/cards).
 
+<div id="custom-react-components">
+  ### Composants React personnalisés
+</div>
+
+Les exports Markdown n'incluent jamais le code source des composants. Lorsqu'une page importe des [composants React personnalisés](/fr/customize/react-components) ou des données depuis des fichiers de snippet, l'export Markdown contient ce que ces composants affichent, et non le code qui les définit.
+
+- **Composants à sortie statique** : ils sont convertis en Markdown. Par exemple, un composant qui renvoie un lien, une liste ou un tableau apparaît sous la forme de ce lien, de cette liste ou de ce tableau.
+- **Composants interactifs** : ils construisent leur sortie à partir de l'état ou des API du navigateur, comme les calculateurs, les galeries filtrables et les graphiques. Ils ne conservent que leurs enfants et leurs props `title`, `description`, `alt` et `href`. Un composant sans aucun de ces éléments est omis.
+- **Données importées** : comme un objet passé à un composant en tant que prop, elles n'apparaissent pas dans les exports Markdown.
+
+Fournissez aux agents une version statique du contenu d'un composant interactif avec le composant [visibility](/fr/components/visibility). Consultez [Composants interactifs](/fr/components/visibility#interactive-components) pour un exemple.
+
 <div id="api-reference-pages">
   ## Pages de référence d'API
 </div>

fr/components/visibility.mdx

@@ -105,6 +105,30 @@ Pour vérifier ces règles en local, exécutez [`mint dev --signed-in` ou `mint
   Les règles de connexion et de groupe masquent le contenu uniquement dans le navigateur. Mintlify envoie tout de même le contenu masqué au navigateur de chaque lecteur. Pour restreindre l'accès à un contenu sensible, placez-le sur une page distincte et utilisez la [propriété de frontmatter `groups`](/fr/deploy/authentication-setup#control-access-with-groups).
 </Warning>
 
+<div id="interactive-components">
+  ## Composants interactifs
+</div>
+
+Les composants interactifs, comme les calculateurs, les galeries filtrables et les graphiques, construisent leur sortie dans le navigateur. Ils affichent donc peu de chose, voire rien, dans la [sortie Markdown](/fr/ai/markdown-export#custom-react-components). Encapsulez le composant interactif dans `for="humans"` et ajoutez une version statique des mêmes informations dans `for="agents"`.
+
+```mdx
+import { PricingCalculator } from "/snippets/pricing-calculator.jsx"
+import { PRICING } from "/snippets/pricing-data.jsx"
+
+<Visibility for="humans">
+  <PricingCalculator data={PRICING} />
+</Visibility>
+
+<Visibility for="agents">
+  | Offre | Prix pour 1M de tokens |
+  | --- | --- |
+  | Standard | 1,00 $ |
+  | Pro | 3,00 $ |
+</Visibility>
+```
+
+La sortie Markdown n'inclut jamais le code source des composants ni les données importées comme `PRICING` : vous n'avez donc pas besoin de `Visibility` pour garder le code hors du Markdown. Utilisez-le pour contrôler ce que lit chaque audience.
+
 <div id="properties">
   ## Propriétés
 </div>

zh/ai/markdown-export.mdx

@@ -119,6 +119,18 @@ Markdown 导出会在 Agent 读取页面之前，将组件和 HTML 转换为 Mar
 
 代码片段或自定义组件中的 `<Visibility>` 遵循与页面相同的受众规则。当自定义组件以视觉展示为主，而你希望 Agent 读取更简单的形式（例如 [`Card`](/zh/components/cards)）时，可以使用它。
 
+<div id="custom-react-components">
+  ### 自定义 React 组件
+</div>
+
+Markdown 导出从不包含组件源代码。当页面从代码片段文件导入[自定义 React 组件](/zh/customize/react-components)或数据时，Markdown 导出包含这些组件显示的内容，而不是定义它们的代码。
+
+- **静态输出的组件**会渲染为 Markdown。例如，返回链接、列表或表格的组件会显示为对应的链接、列表或表格。
+- **交互式组件**根据状态或浏览器 API 生成输出，例如计算器、可筛选的图库和图表。它们只保留子元素以及 `title`、`description`、`alt` 和 `href` 属性。不包含其中任何一项的组件会被省略。
+- **导入的数据**（例如作为属性传给组件的对象）不会出现在 Markdown 导出中。
+
+使用 [visibility](/zh/components/visibility) 组件为 Agent 提供交互式组件内容的静态版本。示例请参见[交互式组件](/zh/components/visibility#interactive-components)。
+
 <div id="api-reference-pages">
   ## API 参考页面
 </div>

zh/components/visibility.mdx

@@ -105,6 +105,30 @@ Markdown 页面视图和 `llms-full.txt` 对每位读者都是相同的，因此
   登录和分组规则仅在浏览器中隐藏内容。Mintlify 仍会将被隐藏的内容发送到每位读者的浏览器。要限制对敏感内容的访问，请将其放在单独的页面上，并使用 [`groups` frontmatter 属性](/zh/deploy/authentication-setup#control-access-with-groups)。
 </Warning>
 
+<div id="interactive-components">
+  ## 交互式组件
+</div>
+
+计算器、可筛选的图库和图表等交互式组件在浏览器中生成输出，因此在 [Markdown 输出](/zh/ai/markdown-export#custom-react-components)中几乎不显示内容。将交互式组件包裹在 `for="humans"` 中，并在 `for="agents"` 中添加相同信息的静态版本。
+
+```mdx
+import { PricingCalculator } from "/snippets/pricing-calculator.jsx"
+import { PRICING } from "/snippets/pricing-data.jsx"
+
+<Visibility for="humans">
+  <PricingCalculator data={PRICING} />
+</Visibility>
+
+<Visibility for="agents">
+  | 套餐 | 每 100 万 token 价格 |
+  | --- | --- |
+  | Standard | $1.00 |
+  | Pro | $3.00 |
+</Visibility>
+```
+
+Markdown 输出从不包含组件源代码或 `PRICING` 等导入的数据，因此无需使用 `Visibility` 将代码排除在 Markdown 之外。用它来控制每类受众读到的内容。
+
 <div id="properties">
   ## 属性
 </div>