gluestack-ui-mcp-server is a Model Context Protocol (MCP) server built specifically for React Native-first development, with the goal of providing comprehensive support for cross-platform app development using Gluestack UI through AI assistants. It gives AI assistants access to the Gluestack UI component library, covering iOS, Android, and Web, and provides components, source code, and examples optimized for React Native workflows.
Primary purpose The server is aimed at React Native developers using Gluestack UI, helping AI assistants obtain accurate component context when generating interfaces, components, and navigation flows, thereby accelerating development and improving code quality.
Main capabilities
- React Native-first: provides 70+ production-ready React Native components, supports a single codebase for iOS, Android, and Web, is compatible with Expo workflows, Expo Router, and EAS Build, and has built-in support for navigation patterns such as stack, tab, and drawer; components automatically adapt to iOS and Android design guidelines.
- Multi-variant architecture: supports NativeWind (optimized based on Tailwind CSS and react-native-css-interop), Themed (using the Gluestack design token system), and Unstyled (unstyled headless components for maximum customization).
- React Native-optimized intelligence: TypeScript-first, with complete component property definitions; can recognize Platform.OS detection and platform-specific code; built-in examples of real Expo usage patterns and React Native performance best practices.
- Cross-platform support: write once, run on iOS, Android, and Web; responsive design adapts to different screen sizes and orientations; supports React Native Web integration.
- Development acceleration: supports GitHub mode to directly fetch the latest components from the repository, or use a local Gluestack UI installation for rapid iteration; AI can assist in generating React Native screens, components, and navigation flows; components come with accessibility labels and test IDs.
- Component discovery and navigation: list 126+ available components and their variants; compare and select the NativeWind, Themed, and Unstyled versions of specific components; browse the gluestack-ui monorepo directory.
- Code, examples, and metadata: get the complete unmodified source code of any component variant; get verified usage examples from Storybook; extract TypeScript properties, import dependencies, and annotation documentation.
How to use Prerequisites include React Native CLI or Expo CLI, an iOS simulator (Mac) and/or Android emulator, the Metro bundler, and a component source (local Gluestack UI installation/clone, or a GitHub Personal Access Token). After installation, the server can be added to the Claude Desktop configuration file (~/.config/claude/config.json) or used from the command line.
Configuration options Environment variables include GLUESTACK_PATH (local Gluestack UI installation path), GITHUB_TOKEN (GitHub Personal Access Token), and LOG_LEVEL (debug, info, warn, error). Command-line arguments include --gluestack-path, --log-level, and --help.
GitHub mode No local installation is required; the latest components can be fetched from the main branch of the official repository; you need to generate a classic Personal Access Token with public_repo permission, and the token starts with ghp_; authenticated requests can obtain a higher GitHub API rate limit (5000/hour vs 60/hour), and always fetch the latest components without local maintenance.
Available tools list_components: list all 70+ available components; get_component: get component source code; get_component_demo: get component examples and stories; get_component_metadata: extract properties, dependencies, and examples; list_component_variants: show all variants of a component.
Supported component examples Layout (Box, Center, HStack, VStack, Grid, Divider), forms (Input, Textarea, Button, Checkbox, Radio, Select, Slider, Switch), feedback (Alert, Toast, Progress, Spinner, Skeleton), overlays (Modal, AlertDialog, Popover, Tooltip, ActionSheet), data display (Avatar, Badge, Card, Image, Table), navigation (Tabs, Menu, Link), media (Image, ImageViewer), utilities (Portal, Pressable, SafeAreaView), and more, totaling 126+ components.
Use cases Suitable for scenarios that need AI-assisted generation of React Native interfaces, rapid prototyping, cross-platform component selection and code generation, projects using Expo or React Native CLI, and teams hoping to reduce manual documentation lookup and improve development consistency and accessibility practices.
Limitations Requires a React Native development environment; local mode requires installing or cloning Gluestack UI; GitHub mode requires a Personal Access Token; some specific installation commands, pricing, and billing information are not yet provided in the materials.
