> ## Documentation Index
> Fetch the complete documentation index at: https://www.beeq.design/llms.txt
> Use this file to discover all available pages before exploring further.

# AI tools

> Use BEEQ documentation with AI assistants, MCP clients, llms.txt, and skill.md resources.

AI tools can help you search BEEQ documentation, compare implementation options, and generate code with current docs as context. Treat the output as a starting point: review it against the component page, source code, accessibility requirements, and your product needs before shipping.

## What BEEQ exposes to AI tools

BEEQ documentation is built with [Mintlify](https://www.mintlify.com/), so the published site can expose AI-friendly entry points that agents and assistants know how to read.

| Resource        | Path                                                | Use it for                                                                         |
| --------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- |
| MCP server      | `/mcp`                                              | Let MCP-compatible tools search the published documentation.                       |
| `llms.txt`      | `/llms.txt` or `/.well-known/llms.txt`              | Give AI tools a structured index of available documentation pages.                 |
| `llms-full.txt` | `/llms-full.txt` or `/.well-known/llms-full.txt`    | Give AI tools the full public documentation content in one file.                   |
| `skill.md`      | `/skill.md`                                         | Describe what agents can do with BEEQ and which docs or workflows they should use. |
| Markdown pages  | Page URL with `.md` when supported by the docs host | Let tools read a specific page as Markdown instead of rendered HTML.               |

<Note>
  `skill.md` can be generated by Mintlify from the documentation or replaced later with custom skill files. Use it as agent guidance, not as a replacement for the source code or component API reference.
</Note>

## Connect an AI tool

Use the contextual menu on any documentation page to copy AI-friendly resources or connect the docs to supported tools. The menu can expose options for copying page context, opening the page in ChatGPT or Claude, copying the MCP server URL, and connecting the MCP server to Cursor or VS Code.

If your tool asks for an MCP server URL, use the published documentation domain with `/mcp`:

```txt theme={"theme":{"light":"one-light","dark":"night-owl"}}
https://www.beeq.design/mcp
```

After connecting the MCP server, ask your tool what documentation sources it can access. A healthy connection should expose BEEQ documentation search, and may also expose `skill.md` resources when the published site supports them.

<Tip>
  Use the page actions menu at the top of any documentation page to copy the page as Markdown, open the page in ChatGPT or Claude, copy the MCP server URL, or connect the docs MCP server to Cursor and VS Code.
</Tip>

## Where AI helps

<AccordionGroup>
  <Accordion title="Component usage questions">
    Ask which BEEQ component fits a task, how to combine slots and props, or which component handles a specific interaction pattern. Link the relevant component page when you already know the component.
  </Accordion>

  <Accordion title="Framework setup">
    Ask for setup steps for Angular, React, Next.js, Vue, or HTML/Web Components. Include your framework and build tool so the answer follows the right integration guide.
  </Accordion>

  <Accordion title="Tokens and theming">
    Ask for BEEQ token names, CSS custom properties, Tailwind preset utilities, or theme override patterns. Ask the tool to cite the foundation or theming page it used.
  </Accordion>

  <Accordion title="Accessibility review">
    Ask the tool to check labels, source order, focus behavior, keyboard support, and semantic structure against the component documentation. Keep a human accessibility review in the workflow.
  </Accordion>

  <Accordion title="Migration and refactoring">
    Ask for help replacing one component pattern with another, moving from custom CSS to BEEQ tokens, or updating examples to match current documentation conventions.
  </Accordion>
</AccordionGroup>

## Prompting guidance

Good prompts give the assistant enough context to search the right docs and produce reusable output.

<CardGroup cols={2}>
  <Card title="Be specific" icon="bullseye">
    Include the framework, component, desired behavior, and constraints. For example: “In React, show a BEEQ Select with grouped options and a visible label.”
  </Card>

  <Card title="Ask for source-backed answers" icon="magnifying-glass">
    Ask the tool to use BEEQ docs first and name the pages it relied on. This keeps answers closer to current implementation.
  </Card>

  <Card title="Request the right output" icon="code">
    Tell the assistant whether you need HTML, React, Angular Standalone, Vue, CSS custom properties, or design guidance.
  </Card>

  <Card title="Ask for checks" icon="list-check">
    Ask the assistant to review the answer for accessibility, token usage, event names, and API alignment before you use it.
  </Card>
</CardGroup>

## Example prompts

Use these prompts as starting points.

<Prompt description="Create an accessible Angular Standalone alert" icon="sparkles" actions={["copy", "cursor"]}>
  Use the BEEQ docs to show how to create an accessible Alert with a title, description, and action button in Angular Standalone. Verify the props and slots against the component API.
</Prompt>

<Prompt description="Choose components for a React form" icon="list-check" actions={["copy", "cursor"]}>
  I am building a React form. Compare BEEQ Input, Select, Checkbox, Radio, and Textarea usage patterns, then suggest the right component for each field type.
</Prompt>

<Prompt description="Find tokens for a custom settings panel" icon="ruler" actions={["copy", "cursor"]}>
  Find the BEEQ spacing and radius tokens I should use for a custom settings panel. Use CSS custom properties, not hardcoded pixel values.
</Prompt>

<Prompt description="Review a BEEQ Button example" icon="shield-check" actions={["copy", "cursor"]}>
  Review this BEEQ Button example for accessibility and API alignment. Check event names, disabled/loading behavior, and whether the label is clear.
</Prompt>

<Tip>
  The `Copy prompt` action copies the full prompt text inside the card, not the short description shown at the top.
</Tip>

## Limits and responsibilities

AI tools work best when they use current documentation as context. They still need review.

* Verify generated code against the component page and the source when behavior matters.
* Test examples in your application, especially events, overlays, forms, and framework wrappers.
* Review accessibility manually; AI can catch common issues, but it cannot validate the full user experience.
* Keep product, design, and security decisions with the team responsible for the application.
* Prefer BEEQ tokens, component CSS variables, and documented APIs over one-off styles or undocumented internals.

## Resources

<CardGroup cols={2}>
  <Card title="Framework guides" icon="code" href="/getting-started/for-developers">
    Choose the integration path for your stack.
  </Card>

  <Card title="Components" icon="boxes-stacked" href="/components/overview">
    Browse component usage, examples, and API references.
  </Card>

  <Card title="Theming and customization" icon="palette" href="/theming/themes-and-modes">
    Learn how BEEQ themes, modes, and tokens work.
  </Card>

  <Card title="Storybook" icon="book" href="https://storybook.beeq.design">
    Explore component states and examples interactively.
  </Card>
</CardGroup>