gluestack-mcp-tools

# gluestack-ui MCP Tools

Expert knowledge for using the gluestack-ui MCP server tools to discover, explore, and retrieve component source code and metadata.

## Overview

The gluestack-ui MCP server provides direct access to the gluestack-ui component library through 6 specialized tools. Use these tools to explore available components, understand their variants, retrieve source code, and access Storybook demos.

## When to Use These Tools

Use the MCP tools when you need to:

- Discover what components are available in gluestack-ui
- Get the actual source code for a component to copy into a project
- Understand the variants (NativeWind, Themed, Unstyled) of a component
- Access Storybook demos showing component usage patterns
- Retrieve TypeScript props and dependencies for a component
- Navigate the gluestack-ui monorepo structure

## Available Tools

### list_components

Lists all 70+ gluestack-ui components with their names and basic descriptions.

**When to use:** Start here when you need to know what components are available or find a component by name.

**Example workflow:**

1. Call `list_components` to see all available components
2. Identify the component that matches your needs
3. Use `get_component` or `get_component_metadata` for details

### list_component_variants

Shows the available style variants for a specific component: NativeWind, Themed, and Unstyled.

**When to use:** After identifying a component, use this to understand which styling approaches are supported.

**Variants explained:**

- **NativeWind**: Tailwind CSS classes for React Native (recommended for new projects)
- **Themed**: Token-based theming with design system integration
- **Unstyled**: Base component with no styles (for complete customization)

### get_directory_structure

Navigate the gluestack-ui monorepo to understand the package organization.

**When to use:** When you need to understand how gluestack-ui organizes its packages or find specific files within the repository.

#