AI

AI-powered development with TallStackUI.

# AI-Powered Development

Starting from version 3, 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.

# Component Instructions

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	components/alert.md
Avatar	components/avatar.md
Avatar Group	components/avatar/group.md
Back to Top	components/back-to-top.md
Badge	components/badge.md
Banner	components/banner.md
Boolean	components/boolean.md
Breadcrumbs	components/breadcrumbs.md
Card	components/card.md
Carousel	components/carousel.md
Clipboard	components/clipboard.md
Environment	components/environment.md
Errors	components/errors.md
Icon	components/icon.md
Kbd	components/kbd.md
Key-Value	components/key-value.md
Link	components/link.md
Stats	components/stats.md
Table	components/table.md
Tooltip	components/tooltip.md
Button	components/button/normal.md
Button Circle	components/button/circle.md
Checkbox	components/form/checkbox.md
Color Picker	components/form/color.md
Currency	components/form/currency.md
Date Picker	components/form/date.md
Error	components/form/error.md
Hint	components/form/hint.md
Input	components/form/input.md
Input Select	components/form/input-select.md
Label	components/form/label.md
Number	components/form/number.md
Password	components/form/password.md
Pin	components/form/pin.md
Radio	components/form/radio.md
Range	components/form/range.md
Select Native	components/form/select/native.md
Select Styled	components/form/select/styled.md
Tag	components/form/tag.md
Textarea	components/form/textarea.md
Time Picker	components/form/time.md
Toggle	components/form/toggle.md
Upload	components/form/upload.md
Command Palette	components/command-palette.md
Dialog	components/dialog.md
Dropdown	components/dropdown/main.md
Dropdown Items	components/dropdown/items.md
Dropdown Submenu	components/dropdown/submenu.md
Loading	components/loading.md
Modal	components/modal.md
Slide	components/slide.md
Toast	components/toast.md
Dial	components/dial/main.md
Dial Items	components/dial/items.md
Layout	components/layout/main.md
Layout Header	components/layout/header.md
Sidebar	components/layout/sidebar/main.md
Sidebar Item	components/layout/sidebar/item.md
Sidebar Separator	components/layout/sidebar/separator.md
Step	components/step/main.md
Step Items	components/step/items.md
Tab	components/tab/main.md
Tab Items	components/tab/items.md
Progress Bar	components/progress/bar.md
Progress Circle	components/progress/circle.md
Rating	components/rating.md
Reaction	components/reaction.md
Signature	components/signature.md
Theme Switch	components/theme-switch.md
Floating	components/floating.md
Wrapper Input	components/wrapper/input.md
Wrapper Radio	components/wrapper/radio.md

# MCP Server

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:

# Available Tools

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. Returns matching blocks with override code snippets for Soft Customization.

# Connecting to Claude Code

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/tallstackui

For 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

# Connecting to Cursor

To connect the MCP server to Cursor, create a .cursor/mcp.json file in your project root:

{
    "mcpServers": {
        "tallstackui": {
            "type": "http",
            "url": "https://tallstackui.com/mcp/tallstackui"
        }
    }
}

You can also create this file at ~/.cursor/mcp.json for global access across all projects.

# Connecting to Gemini CLI

The quickest way to connect the MCP server to Gemini CLI is using the CLI command:

gemini mcp add --transport http tallstackui https://tallstackui.com/mcp/tallstackui

Alternatively, add the server to your ~/.gemini/settings.json :

{
    "mcpServers": {
        "tallstackui": {
            "httpUrl": "https://tallstackui.com/mcp/tallstackui"
        }
    }
}