gluestack-ui

Gluestack UI MCP Server provides AI-assisted access to the Gluestack UI React Native component ecosystem. It exposes tools that let your AI assistant discover, inspect, and retrieve component implementations, variants, and metadata, enabling you to generate UI code, examples, and navigation flows with contextual accuracy. Key capabilities include listing all available components, comparing variants (NativeWind, Themed, Unstyled), and drilling into component directories and source code. You can also fetch usage demos and metadata to understand prop types and dependencies, making it easier to generate well-typed, production-ready React Native code. The server is designed to work with Claude Desktop (or similar clients) via a configured MCP endpoint, and can operate in GitHub mode to fetch the latest components directly from the repository when a local Gluestack UI installation isn’t available.

To use it, configure your MCP client to point at the gluestack-ui MCP server. For published package usage, you typically run the server through npx gluestack-ui-mcp-server, optionally setting GLUESTACK_PATH to your local Gluestack UI installation. In local development, you can point the server to a local build (via the build/index.js entry) and set GLUESTACK_PATH to your Gluestack UI workspace. The available tools (list_components, list_component_variants, get_component, get_component_demo, get_component_metadata, get_directory_structure) enable comprehensive exploration and retrieval of component data to drive AI-generated UI code and demos.

Prerequisites:

• Node.js 18+ (and npm/yarn)
• A working environment with either a local Gluestack UI installation or access to the Gluestack UI repository (for GitHub mode)

Installation steps (choose one):

Option A: Install globally from npm (recommended for quick usage)

npm install -g gluestack-ui-mcp-server

Option B: Run via npx (no global install required)

npx gluestack-ui-mcp-server

Option C: Local development setup (source checkout)

# Clone this repository (example URL from README)
git clone https://github.com/gluestack/gluestack-ui-mcp-server
cd gluestack-ui-mcp-server

# Install dependencies
npm install

# Build the project (if applicable)
npm run build

# Run tests (optional)
npm test

Configuration: prepare environment variables if needed. For example, when using a local Gluestack UI install:

export GLUESTACK_PATH="/path/to/your/gluestack-ui"

If using GitHub mode, you may provide a GitHub token via GITHUB_TOKEN and/or configure the MCP client accordingly as shown in the README.

Tips and common notes:

• Environment variables: GLUESTACK_PATH (path to local Gluestack UI), GITHUB_TOKEN (GitHub access token for GitHub mode), LOG_LEVEL (debug|info|warn|error).
• GitHub mode fetches the latest components from the official repository and may require a GitHub token to bypass rate limits.
• In Claude Desktop configuration, you can switch between published package usage (npx) and local development (node with a path to build/index.js) depending on your workflow.
• Ensure Node.js version compatibility (Node 18+ is recommended as per Quick Start prerequisites).
• If you encounter issues with component metadata or demos, use get_component_metadata and get_component_demo to inspect API surface and usage patterns directly from the source.
• For local development, exporting GLUESTACK_PATH helps the MCP server resolve local component sources and improve AI accuracy when generating code.