# AI integration
> Bridging the gap between Wave and AI tools.

Wave Design System documentation is now optimised for AI consumption, making it easier for AI assistants and tools to understand and use our components, patterns, and guidelines.

## LLMs.txt

We provide our documentation in the [llms.txt format](https://llmstxt.org/), an emerging standard for making documentation available to large language models (LLMs).

### Available documentation files

Wave offers two versions of AI-optimised documentation:

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
  rowGap="spacingS"
>
  <GridItem>
    <Card
      href="/llms.txt"
      title="llms.txt"
      subTitle="Basic information"
      actionIcon="arrowRight"
    />
  </GridItem>
  <GridItem>
    <Card
      href="/llms-full.txt"
      title="llms-full.txt"
      subTitle="Complete documentation"
      actionIcon="arrowRight"
    />
  </GridItem>
</Grid>

> **Tip**
>
> You can use [@Docs feature in Cursor](https://cursor.com/docs/context/symbols) to include the LLMs.txt files in your project.

## Claude Code plugin

The [Wave Claude Code plugin](https://github.com/Volue/ai-skills) offers a lightweight alternative to the MCP server for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) users. It is built on the [Agent Skills standard](https://agentskills.io/) and lives in the [Volue AI Skills](https://github.com/Volue/ai-skills) marketplace alongside other Volue skills.

<Card
  href="https://github.com/Volue/ai-skills#install"
  title="Wave Claude Code plugin"
  subTitle="Setup instructions"
  actionIcon="externalLink"
/>

## Wave MCP server

The [Wave MCP server](https://github.com/Volue/wave/tree/next/mcp#readme) integrates Wave Design System documentation directly into your AI-assisted workflow through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/).

It works with MCP-compatible clients including GitHub Copilot, Claude Code, and Cursor, giving your AI assistant direct access to Wave's up-to-date knowledge base for more accurate and documentation-backed solutions and answers.

### Features

- **Component documentation**: Access React component APIs, props, and usage examples
- **Design tokens**: Query colour palettes, spacing scales and other design primitives
- **Icons**: Browse and search the complete Wave icon library
- **Patterns**: Get guidance on common UI patterns and best practices

<Card
  href="https://github.com/Volue/wave/tree/next/mcp#readme"
  title="Wave MCP server"
  subTitle="Setup instructions"
  actionIcon="externalLink"
/>

## Figma MCP server

The [Figma MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server) extends your AI workflow by connecting directly to Figma designs. It works alongside the [Wave MCP Server](#wave-mcp-server) to provide a more complete design-to-code experience.

The quickest way to start using Wave and Figma MCP together is through our starter template:

<Card
  href="https://github.com/Volue/wave-vite-example#readme"
  title="Wave Vite example"
  subTitle="Pre-configured template with both MCP servers and custom instructions"
  actionIcon="externalLink"
/>

Or set up Figma MCP manually:

<Card
  href="https://developers.figma.com/docs/figma-mcp-server/remote-server-installation"
  title="Figma MCP server"
  subTitle="Setup instructions"
  actionIcon="externalLink"
/>