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:
- Call
list_componentsto see all available components - Identify the component that matches your needs
- Use
get_componentorget_component_metadatafor 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.
get_component
Retrieves the complete source code for any gluestack-ui component.
When to use: When you need to copy component code into your project or understand the implementation details.
Example workflow:
- Use
list_componentsto find the component name - Use
list_component_variantsto choose a variant - Call
get_componentwith the component name and variant - Copy the source code into your project's
components/ui/directory
get_component_demo
Accesses Storybook examples showing real-world usage patterns for components.
When to use: When you need to see how a component is used in practice, including prop combinations and composition patterns.
What you get:
- Working code examples
- Different prop combinations
- Composition patterns with sub-components
- Interactive states and variations
get_component_metadata
Retrieves TypeScript props, dependencies, and other metadata for a component.
When to use: When you need to understand the TypeScript interface, required props, or peer dependencies for a component.
Information provided:
- TypeScript prop types and interfaces
- Required vs optional props
- Default values
- Peer dependencies
- Import statements
Common Workflows
Adding a New Component to Your Project
- Discover:
list_components- Find the component you need - Explore variants:
list_component_variants- Choose NativeWind, Themed, or Unstyled - Get source:
get_component- Retrieve the full source code - Check demos:
get_component_demo- See usage examples - Copy to project: Add the code to your
components/ui/directory
Understanding Component API
- Get metadata:
get_component_metadata- See TypeScript props - Check demos:
get_component_demo- See prop usage in context - Read source:
get_component- Understand the implementation
Exploring Available Components
- List all:
list_components- See the full component library - Check structure:
get_directory_structure- Understand organization - Review demos:
get_component_demo- See component capabilities
Best Practices
1. Start with Discovery
Always use list_components first when exploring. This gives you the canonical names to use with other tools.
# Good: Start with discovery
1. list_components -> find "Button"
2. get_component("Button", "nativewind")
# Avoid: Guessing component names
get_component("Btn") -> might not find it2. Choose the Right Variant
- NativeWind: Best for new projects using Tailwind CSS
- Themed: Best when you have an existing design token system
- Unstyled: Best when you need complete styling control
3. Check Demos Before Implementing
The Storybook demos show real-world usage patterns that may reveal:
- Required composition patterns (e.g., Button needs ButtonText)
- Prop combinations that work well together
- Edge cases and accessibility considerations
4. Verify Dependencies
Use get_component_metadata to understand:
- Peer dependencies that need to be installed
- Other components that are used internally
- TypeScript types that may need importing
Environment Configuration
The MCP server can operate in two modes:
GitHub Mode (Default)
Fetches components directly from the gluestack-ui GitHub repository.
# Optional: Increase API rate limits
export GITHUB_TOKEN="your-token-here"Local Mode
Uses a local clone of the gluestack-ui repository for offline access.
# Point to your local clone
export GLUESTACK_PATH="/path/to/gluestack-ui"Integration with Other Skills
Combine MCP tools with other gluestack skills:
- gluestack-components: After getting source code, use component skill for implementation patterns
- gluestack-theming: Use with Themed variant components for design token integration
- gluestack-accessibility: Ensure retrieved components are implemented accessibly
Troubleshooting
Component Not Found
- Verify the exact component name using
list_components - Component names are case-sensitive
- Some components may be grouped (e.g., FormControl components)
Rate Limiting
If using GitHub mode without a token:
- Set
GITHUB_TOKENfor increased limits - Or clone the repo locally and set
GLUESTACK_PATH
Outdated Components
The MCP server fetches from the latest gluestack-ui repository. If you need a specific version:
- Clone the specific version locally
- Set
GLUESTACK_PATHto your local clone