AI Integration Components

Give AI the full guide, and it builds with 7onic components and tokens. Props, sub-component structure, form recipes — all included.
For token-only usage, see the Token AI Integration.

https://7onic.design/llms-full.txt

llms.txt is already included when you install the package. Copy this URL to quickly re-instruct your AI when needed.

Supported AI Tools

llms.txt (Full) — llms.txt is an open standard. Any AI tool that can read text files can use it.

Claude Code

Cursor

GitHub Copilot

ChatGPT

How to Use

Choose the method that fits your AI tool and workflow.

Local — Package Installed

Claude Code, Cursor, Copilot — AI can read local files directly.

Reference Path

Recommended

Point your AI tool to the file in node_modules.

Rules: node_modules/@7onic-ui/react/llms.txt

Direct Prompt

Tell the AI to read llms.txt from node_modules directly.

Read node_modules/@7onic-ui/react/llms.txt and build a dashboard with 7onic

Web — No Local Access

ChatGPT and other web-based AI tools that cannot read local files.

URL Reference

Recommended

Use the domain URL for web-based AI tools.

Read https://7onic.design/llms-full.txt and build with 7onic components

Copy & Integrate

Copy llms-full.txt content into your project's AI rules file.

# 7onic Components + Tokens
(paste llms-full.txt content here)

What AI Does Automatically

With the full guide, AI handles components and tokens together.

Uses 7onic Components

Instead of building custom buttons/modals/forms, AI uses your existing components with correct Props.

Complete Sub-component Sets

AI knows Modal needs ModalContent, Tooltip needs TooltipTrigger — no missing parts.

Token Classes Only

Uses bg-primary instead of bg-blue-500. All styling follows your design tokens.

Form Patterns

AI wraps inputs in Field, adds FieldLabel with required, and uses correct error handling.

Before / After

The same UI, built with and without the component guide

Without llms.txt

<button
  className="bg-blue-500 text-white px-4 py-2
    rounded-lg hover:bg-blue-600"
>
  Save Changes
</button>

<div className="fixed inset-0 bg-black/50 z-[9999]">
  <div className="bg-white rounded-lg p-6 max-w-md">
    <h2>Confirm</h2>
    <p className="text-gray-500">Are you sure?</p>
  </div>
</div>

With llms.txt

<Button variant="solid">
  Save Changes
</Button>

<Modal>
  <ModalTrigger asChild>
    <Button>Open</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalTitle>Confirm</ModalTitle>
    <ModalDescription>
      Are you sure?
    </ModalDescription>
  </ModalContent>
</Modal>

Components handle dark mode, accessibility, z-index layering, and animations automatically. No manual implementation needed.

Token Rules

Components use design tokens for all styling. For the complete token guide, see AI Integration (Tokens).

bg-blue-500

bg-primary

text-gray-700

text-foreground

p-[17px]

p-4

rounded-[7px]

rounded-md

Troubleshooting

Common issues and how to fix them

AI builds custom components instead of using 7onic

Tell it: "Re-read llms.txt. Use existing 7onic components, don't build custom ones."

AI forgets required sub-components

Remind it: "Modal requires ModalContent and ModalTitle. Check the component structure in llms.txt."

AI passes wrong Props

Say: "Check the Props table in llms.txt. Only use documented prop values."

Disclaimer

AI is not perfect. Always review AI-generated code before deployment. Verify design requirements, accessibility, and token usage are correct.