# AI Integration
> Bridging the gap between Vera and AI tools.

Vera Design System documentation is now optimized for AI consumption, making it easier for AI assistants and tools to understand and utilize 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

Vera offers two versions of AI-optimized 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>

<Callout variant="tip">

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

</Callout>

## Vera MCP Server

The [Vera MCP Server](https://github.com/Volue/vera/tree/next/mcp#readme) integrates Vera 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 Vera'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 color palettes, spacing scales and other design primitives
- **Icons**: Browse and search the complete Vera icon library
- **Patterns**: Get guidance on common UI patterns and best practices

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

## Claude Code Plugin

<Callout variant="important">

Experimental. Feedback welcome.

</Callout>

The [Vera Claude Code plugin](https://github.com/Volue/vera/tree/next/cli#claude-code-plugin) offers a lightweight alternative to the MCP server for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) users.

<Card
  href="https://github.com/Volue/vera/tree/next/cli#claude-code-plugin"
  title="Vera Claude Code Plugin"
  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 [Vera MCP Server](#vera-mcp-server) to provide a more complete design-to-code experience.

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

<Card
  href="https://github.com/Volue/vera-vite-example#readme"
  title="Vera 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"
/>