AI
AI-powered development with TallStackUI.
TallStackUI ships with AI-ready documentation in its .ai/ directory, designed to give AI assistants (GitHub Copilot, Claude, Cursor, etc.) full component knowledge. Each component has a dedicated markdown file with attributes, slots, usage examples, and customization options. In addition, TallStackUI provides an MCP server hosted on this documentation website, giving AI assistants real-time access to component documentation without needing local files.
The following component instruction files are available in the .ai/ directory of the TallStackUI package. Each file contains comprehensive documentation for AI assistants, including attributes, slots, usage examples, and soft customization options.
| Component | Instructions |
|---|---|
| Alert | |
| Avatar | |
| Avatar Group | |
| Back to Top | |
| Badge | |
| Banner | |
| Boolean | |
| Breadcrumbs | |
| Calendar | |
| Card | |
| Carousel | |
| Chart | |
| Clipboard | |
| Editor | |
| Environment | |
| Errors | |
| Gallery | |
| Icon | |
| Kbd | |
| Key-Value | |
| Link | |
| List | |
| List Items | |
| QrCode | |
| Stats | |
| Table | |
| Timeline | |
| Timeline Items | |
| Tooltip | |
| Button | |
| Button Circle | |
| Button Group | |
| Autocomplete | |
| Checkbox | |
| Checkbox Group | |
| Color Picker | |
| Currency | |
| Date Picker | |
| Error | |
| Hint | |
| Input | |
| Input Select | |
| Label | |
| Number | |
| Password | |
| Pin | |
| Radio | |
| Radio Group | |
| Range | |
| Select Native | |
| Select Styled | |
| Swap | |
| Tag | |
| Textarea | |
| Time Picker | |
| Toggle | |
| Upload | |
| Upload Async | |
| Command Palette | |
| Dialog | |
| Dropdown | |
| Dropdown Items | |
| Dropdown Submenu | |
| Loading | |
| Modal | |
| Slide | |
| Toast | |
| Accordion | |
| Accordion Items | |
| Dial | |
| Dial Items | |
| Layout | |
| Layout Header | |
| Sidebar | |
| Sidebar Item | |
| Sidebar Separator | |
| Step | |
| Step Items | |
| Tab | |
| Tab Items | |
| Progress Bar | |
| Progress Circle | |
| Rating | |
| Reaction | |
| Signature | |
| Spinner | |
| Theme Switch | |
| Floating | |
| Wrapper Input | |
| Wrapper Radio | |
| Soft Customization Internal Scopes |
The Model Context Protocol (MCP) is an open standard that allows AI tools to access external data sources. TallStackUI provides an MCP server hosted on this documentation website, giving AI assistants real-time access to component documentation without needing local files. The MCP server endpoint is available at:
The MCP server provides the following tools for AI assistants:
| Tool | Description |
|---|---|
| list_components | List all available components, optionally filtered by category. |
| get_component | Get full documentation for a specific component. |
| search_documentation | Full-text search across all component documentation. |
| search_customization | Search CSS class customization options for components. |
| search_classes | Search for specific CSS classes across all components. |
| Resource | URI | Description |
|---|---|---|
| component-index | tallstackui://docs/index | Full Markdown index of the documentation: every component grouped by category, global configuration, and customization guides. |
| internal-scopes | tallstackui://docs/internal-scopes | Canonical list of every internal scope="..." declared when a component renders nested components. Required reading before customizing nested component instances independently of their standalone versions. |
The MCP server also ships prompts: ready-made workflows that guide AI assistants step by step through common tasks:
| Prompt | Description |
|---|---|
| customize-component | Guided workflow to customize the CSS of a component through Soft Customization: it fetches the component blocks, locates the target classes, resolves nested scopes, and writes the TallStackUi::customize() code in a service provider. Accepts a required component argument and an optional goal describing the desired change. |
The quickest way to connect the MCP server to Claude Code is using the CLI command:
claude mcp add --transport http tallstackui https://tallstackui.com/mcp/tallstackuiFor team sharing, create a .mcp.json file in your project root. This file can be committed to version control so all team members have access:
{ "mcpServers": { "tallstackui": { "type": "http", "url": "https://tallstackui.com/mcp/tallstackui" } }}For personal use across all projects, add the server to your ~/.claude/settings.json :
{ "mcp": { "mcpServers": { "tallstackui": { "type": "http", "url": "https://tallstackui.com/mcp/tallstackui" } } }}After configuration, verify the server is connected:
claude mcp list