--- name: gluestack-mcp-tools-c19fa5af5241 user-invocable: false description: Use when discovering, exploring, or retrieving gluestack-ui components via MCP tools. Provides access to component source code, variants, demos, and metadata. allowed-tools: - Read - Write - Edit - Bash - Glob - Grep --- # 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. ### 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:** 1. Use `list_components` to find the component name 2. Use `list_component_variants` to choose a variant 3. Call `get_component` with the component name and variant 4. 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 1. **Discover**: `list_components` - Find the component you need 2. **Explore variants**: `list_component_variants` - Choose NativeWind, Themed, or Unstyled 3. **Get source**: `get_component` - Retrieve the full source code 4. **Check demos**: `get_component_demo` - See usage examples 5. **Copy to project**: Add the code to your `components/ui/` directory ### Understanding Component API 1. **Get metadata**: `get_component_metadata` - See TypeScript props 2. **Check demos**: `get_component_demo` - See prop usage in context 3. **Read source**: `get_component` - Understand the implementation ### Exploring Available Components 1. **List all**: `list_components` - See the full component library 2. **Check structure**: `get_directory_structure` - Understand organization 3. **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 it ``` ### 2. 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. ```bash # 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. ```bash # 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_TOKEN` for 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_PATH` to your local clone --- Source attribution: TheBushidoCollective Original project: https://github.com/TheBushidoCollective/han/blob/19caa51d5fd144ef6b2764f2332f4c856aa5d1af/plugins/frameworks/gluestack/skills/gluestack-mcp-tools/SKILL.md License: Apache-2.0 License information: https://www.apache.org/licenses/LICENSE-2.0 Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice # Functional Source License, Version 1.1, ALv2 Future License ## Abbreviation FSL-1.1-ALv2 ## Notice Copyright 2025 The Bushido Collective ## Terms and Conditions ### Licensor ("We") The party offering the Software under these Terms and Conditions. ### The Software The "Software" is each version of the software that we make available under these Terms and Conditions, as indicated by our inclusion of these Terms and Conditions with the Software. ### License Grant Subject to your compliance with this License Grant and the Patents, Redistribution and Trademark clauses below, we hereby grant you the right to use, copy, modify, create derivative works, publicly perform, publicly display and redistribute the Software for any Permitted Purpose identified below. ### Permitted Purpose A Permitted Purpose is any purpose other than a Competing Use. A Competing Use means making the Software available to others in a commercial product or service that: 1. substitutes for the Software; 2. substitutes for any other product or service we offer using the Software that exists as of the date we make the Software available; or 3. offers the same or substantially similar functionality as the Software. Permitted Purposes specifically include using the Software: 1. for your internal use and access; 2. for non-commercial education; 3. for non-commercial research; and 4. in connection with professional services that you provide to a licensee using the Software in accordance with these Terms and Conditions. ### Patents To the extent your use for a Permitted Purpose would necessarily infringe our patents, the license grant above includes a license under our patents. If you make a claim against any party that the Software infringes or contributes to the infringement of any patent, then your patent license to the Software ends immediately. ### Redistribution The Terms and Conditions apply to all copies, modifications and derivatives of the Software. If you redistribute any copies, modifications or derivatives of the Software, you must include a copy of or a link to these Terms and Conditions and not remove any copyright notices provided in or with the Software. ### Disclaimer THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT. IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES, EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE. ### Trademarks Except for displaying the License Details and identifying us as the origin of the Software, you have no right under these Terms and Conditions to use our trademarks, trade names, service marks or product names. ## Grant of Future License We hereby irrevocably grant you an additional license to use the Software under the Apache License, Version 2.0 that is effective on the second anniversary of the date we make the Software available. On or after that date, you may use the Software under the Apache License, Version 2.0, in which case the following will apply: Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. # Mega AI Hub resource metadata Creator / publisher: TheBushidoCollective Original project: https://github.com/TheBushidoCollective/han/blob/19caa51d5fd144ef6b2764f2332f4c856aa5d1af/plugins/frameworks/gluestack/skills/gluestack-mcp-tools/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering, Product Management Roles: Frontend Developer, Product Manager, UX Designer Specialties: Frontend Tools: Gluestack Ui Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 0256bad7574e4dbd67ca29176a75af1b6b512bf880551c56f78a9a1c23bb3905