mcp-ui-expo-tamagui
Generates React Native/Expo UI components using AI, including search of Expo documentation.
Uses Google Gemini AI to generate, optimize, and theme UI components based on natural language descriptions.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-ui-expo-tamaguiCreate a login form component with email and password fields."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
๐จ MCP UI Expo Tamagui Server
AI-Powered UI Component Generator for Expo + Tamagui with Claude Desktop Integration
๐ Automatically generate React Native/Expo components using AI Gemini through Model Context Protocol (MCP)
โจ Features
๐ค AI Component Generation: Create components with natural language descriptions
๐ Real-time Docs Search: Search Expo & Tamagui documentation
โก Code Optimization: Optimize components for performance
๐จ Theme Configuration: Generate theme configs automatically
๐ก Smart Suggestions: Intelligent component recommendations
๐ณ Docker Ready: Production-ready containerization
๐ง TypeScript Support: Full type safety
Related MCP server: React Native MCP Server
๐ Quick Start
1. Installation & Build
git clone https://github.com/yourusername/mcp-ui-expo-tamagui.git
cd mcp-ui-expo-tamagui
npm install
npm run build2. Configure API Key
export GEMINI_API_KEY=your-gemini-api-key3. Test MCP Server
./test-mcp-tools.sh๐ Claude Desktop Integration
Add to your claude_desktop_config.json:
{
"mcpServers": {
"mcp-ui-expo-tamagui": {
"command": "node",
"args": ["/path/to/mcp-ui-expo-tamagui/build/index.js"],
"env": {
"GEMINI_API_KEY": "your-gemini-api-key"
}
}
}
}Usage with Claude
๐ฌ "Create a Button component with title, onPress, and variant props"
๐ฌ "How to implement navigation in Expo?"
๐ฌ "Suggest components for an e-commerce screen"
๐ฌ "Optimize this component for performance"
๐ฌ "Create dark theme with purple primary color"๐ ๏ธ MCP Tools
Tool | Description | Parameters |
| Generate UI component with AI | name, description, props, styling, platform |
| Search Expo documentation | query |
| Search Tamagui documentation | query |
| Get component suggestions | context, requirements |
| Optimize component code | code, optimizationType |
| Create theme configuration | colorScheme, primaryColors, components |
๐ณ Docker Deployment
Build & Run
# Build Docker image
docker build -t mcp-ui-expo-tamagui .
# Run with Docker Compose
docker-compose up
# Run standalone
docker run -e GEMINI_API_KEY=your-key mcp-ui-expo-tamagui๐งช Testing
# Test MCP tools
./test-mcp-tools.sh
# Test Docker
./test-docker.sh
# TypeScript validation
npm run lint
# Jest tests
npm test๐ Project Structure
mcp-ui-expo-tamagui/
โโโ src/
โ โโโ index.ts # Main MCP server
โ โโโ types/interfaces.ts # Type definitions
โ โโโ services/ # Core services
โ โโโ utils/ # Utilities
โโโ build/ # Compiled output
โโโ Dockerfile # Docker configuration
โโโ docker-compose.yml # Docker Compose
โโโ README.md # Documentation๐ฏ Example Use Cases
E-commerce Product Card
{
name: "ProductCard",
description: "Product card with image, title, price, rating, add to cart",
props: [
{ name: "product", type: "Product", required: true },
{ name: "onAddToCart", type: "function", required: true }
]
}Social Media Post
{
name: "PostCard",
description: "Post card with avatar, content, reactions",
styling: { theme: "dark", responsive: true }
}๐ง Development
npm run dev # Development mode
npm run build # Build production
npm run test # Run tests
npm run lint # TypeScript check๐จ Environment Variables
GEMINI_API_KEY- Google Gemini AI API key (required)NODE_ENV- Environment (optional)LOG_LEVEL- Logging level (optional)
๐ License
MIT License - see LICENSE file for details.
๐ Ready to Go!
Start creating amazing UI components with AI! ๐โจ
Happy Coding!
Available Tools
6 toolscreate_theme_configB
Generate Tamagui theme configuration
| Name | Required | Description | Default |
|---|---|---|---|
| components | No | Components to include in theme | |
| colorScheme | Yes | Color scheme preference | |
| designSystem | No | Design system to follow | |
| primaryColor | No | Primary color (hex code) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It only says 'Generate', without explaining what the output is (file, object, snippet), side effects, or prerequisites. This is a significant gap for a generation tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence, front-loaded with the action and resource, with no unnecessary words or redundant information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite having 4 parameters, 2 enums, and no output schema, the description provides no detail on what the generated theme configuration contains, how parameters influence output, or what the expected result is. This is inadequate for an agent to select and invoke the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the parameters are already described in the schema. The description adds no additional semantics, but the baseline of 3 is appropriate given the schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Generate Tamagui theme configuration' uses a specific verb ('Generate') and resource ('Tamagui theme configuration'), clearly distinguishing it from siblings like 'generate_ui_component' and 'search_tamagui_docs'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description offers no guidance on when to use this tool versus alternatives, such as 'generate_ui_component' or 'optimize_component'. There are no exclusions or context signals, leaving the agent without direction.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_ui_componentC
Generate UI component using Expo + Tamagui with AI assistance
| Name | Required | Description | Default |
|---|---|---|---|
| style | No | Design style preference | |
| features | No | Specific features to include (animations, gestures, etc.) | |
| platform | No | Target platform | |
| description | Yes | Description of the UI component to generate | |
| componentType | Yes | Type of component to generate |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It does not state whether this tool modifies the filesystem, calls external AI services, or returns code snippets, nor does it mention any side effects or required permissions. The generation aspect is implied but its practical implications are undisclosed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, direct sentence with no filler. It front-loads the core action and technology context, though it is so brief that some might see it as under-specified. For conciseness, it scores well.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 5 parameters, no output schema, and no annotations, this one-sentence description is insufficient for an agent to understand important behavioral aspects like what the generated component will be, how it integrates with the project, or what the expected result looks like. It does not complete the picture, especially alongside sibling tools.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides complete coverage of all 5 parameters with descriptions and enum constraints, so the baseline score of 3 applies. The description adds no additional parameter nuance beyond what the schema declares.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: generating a UI component. It specifies the tech stack (Expo + Tamagui) and adds context about AI assistance, distinguishing it from sibling tools like search_expo_docs and optimize_component. However, it lacks explicit detail about the form of the generated output (e.g., code, files), so it stops short of being fully specific.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives. There is no mention of complementary or alternative sibling tools, nor any context about prerequisites or typical use cases. The description leaves the agent to infer when generation is appropriate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_suggestionsB
Get AI-powered component suggestions based on requirements
| Name | Required | Description | Default |
|---|---|---|---|
| context | No | Additional context about the app or use case | |
| preferences | No | ||
| requirement | Yes | App or feature requirement description |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden for behavioral disclosure. It only mentions 'AI-powered', but doesn't disclose whether it's read-only, side effects, rate limits, or response structure. This is insufficient for a tool that likely makes external AI calls.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single, front-loaded sentence that concisely states the tool's purpose without unnecessary words. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema and no annotations, so the description must explain return values and usage context. It does not specify what the suggestions look like, how many are returned, or the format for preferences. This is a significant gap for a tool that generates suggestions.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description maps 'requirements' to the required 'requirement' parameter, which is already documented in the schema. It adds no new information about 'context' or 'preferences'; schema descriptions cover those adequately. At 67% schema coverage, the description provides marginal additional value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: retrieving AI-powered component suggestions based on a requirement. The verb 'Get' and resource 'component suggestions' distinguish it from sibling tools like generate_ui_component or optimize_component, even without explicitly naming alternatives.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to choose this tool over alternatives like generate_ui_component or search_tamagui_docs. The description simply states the function without context, prerequisites, or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
optimize_componentC
Optimize existing component code with AI suggestions
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Existing component code to optimize | |
| targetPlatform | No | Target platform for optimization | |
| optimizationGoals | No | Optimization goals |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full responsibility for disclosing behavior. It says 'optimize with AI suggestions' but does not clarify whether the tool directly modifies the code, returns a diff, or only provides suggestions. It also lacks details on side effects, required permissions, or output format.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence with no redundancy or filler. It front-loads the key action and resource, making it easy to parse. However, it is somewhat under-specified, which is penalized in other dimensions.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Without an output schema, the description should indicate what the tool returns (e.g., optimized code, suggestion list, explanation). It does not. It also lacks context about how the tool handles different scenarios, making it insufficient for an agent to fully anticipate the tool's behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema covers all three parameters with descriptions (100% coverage), so the baseline is 3. The description itself adds no extra meaning to the parameters, such as how targetPlatform or optimizationGoals influence the optimization process.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('optimize') and resource ('existing component code'), identifying the tool's core purpose. It implicitly distinguishes from generate_ui_component (generation vs. optimization) but does not explicitly differentiate from the closely related sibling get_component_suggestions, so it's not a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool instead of siblings like get_component_suggestions, generate_ui_component, or search_expo_docs. There is no mention of use cases, prerequisites, or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_expo_docsC
Search Expo documentation for specific topics
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query for Expo documentation | |
| category | No | Documentation category to search in |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It only states that it searches, giving no information about return format, pagination, whether results are snippets or full pages, or any limitations. This is minimal beyond what the name implies.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence with no redundant or extraneous content. It is front-loaded with the action and resource, making it efficient to parse, though it could be slightly more informative without becoming verbose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has only two parameters, both documented, and no output schema. The description is adequate for a simple search operation but does not explain return values or usage context. Given the low complexity and clear schema, it is minimally sufficient but has gaps in behavioral expectations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema describes both parameters (query and category) with clear descriptions and an enum for category, covering 100% of parameters. The description adds little beyond the schema, but since schema coverage is high, a baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool searches Expo documentation, which is a specific resource. It is distinct from the sibling tool search_tamagui_docs based on the resource named, though it does not explicitly call out that distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like search_tamagui_docs. There is no mention of prerequisites, exclusions, or specific scenarios, leaving the agent to infer usage only from the tool's name and basic description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_tamagui_docsB
Search Tamagui documentation for components and styling
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query for Tamagui documentation | |
| category | No | Documentation category to search in |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses that the tool performs a search but does not describe the return format, whether it is read-only, or any limitations. As a search tool, the behavior is relatively low-risk, but the description adds little beyond the tool's name.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence with no redundant words. It front-loads the action and resource without any filler, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given that there is no output schema, the description should explain what the tool returns or how results are presented, but it does not. It also fails to mention the additional search categories (animations, themes, config) that are available, leaving a significant gap for an agent deciding whether this tool fits the task.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is complete (100%) with descriptions for both 'query' and 'category', and the category enum is also provided. The description only vaguely references 'components and styling', which partially maps to the category parameter but does not add meaningful details beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the verb 'Search' and the resource 'Tamagui documentation', and distinguishes it from sibling tools like search_expo_docs by specifying the Tamagui ecosystem. However, the scope is understated as 'components and styling', while the schema allows additional categories such as animations, themes, and config, creating a slight mismatch.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The usage context is only implied by the tool name and description; there is no explicit guidance on when to choose this tool over alternatives. The sibling 'search_expo_docs' suggests a division by documentation source, but the description does not state this or any exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
6 tool updates
v1.0.0- First observed
create_theme_config - First observed
generate_ui_component - First observed
get_component_suggestions - First observed
optimize_component - First observed
search_expo_docs - First observed
search_tamagui_docs
TDQS
Scored across 6 tools
Most tools are distinct actions (search vs optimize vs theme creation), but generate_ui_component and get_component_suggestions both target new component creation, creating potential confusion about which to use for a given task. The descriptions hint at a difference (final code vs recommendations) but are brief enough to cause misselection.
All tool names follow a consistent verb_noun pattern in snake_case (generate, search, get, optimize, create). The two search tools are parallel (search_expo_docs, search_tamagui_docs), and every name clearly starts with an action verb. No mixed conventions or irregularities.
With six tools, the set is well-scoped for the server's purpose of UI development with Expo and Tamagui. Each tool addresses a specific need (generation, documentation, suggestions, optimization, theming) without redundant or excess additions. The count feels complete and not bloated.
The tool surface covers the primary lifecycle of UI component development: design/generate, get suggestions, optimize, search docs, and configure themes. Minor gaps exist, such as no explicit tool for previewing components or managing component dependencies, but these are not critical for the core workflow and can be worked around with existing tools.
Maintenance
Related MCP Connectors
Your Expo and EAS project in natural language: up to date SDK docs, cloud builds (status, logs, trig
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
WHOOP recovery, strain, sleep and workouts in Claude via official WHOOP OAuth. Free, open source.
Use AI models for chat, image, and video generation from Claude Code and other MCP hosts.
Related MCP Servers
- AlicenseBqualityDmaintenancereact-mcp integrates with Claude Desktop, enabling the creation and modification of React apps based on user prompts99 npm76MIT
- AlicenseAqualityCmaintenanceProvides comprehensive tools for React Native development, automating project initialization, version management, upgrades, Expo integration, and development workflows through AI assistance.226 npm21MIT
- AlicenseCqualityDmaintenanceAn extensible Model Context Protocol server that enables AI assistants like Claude to generate React Native components and perform development tasks through a standardized interface.1MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to view and analyze screenshots from React Native/Expo applications for AI-powered mobile UI development. Integrates with Claude, Cursor, VS Code and other MCP-compatible editors.6 npm15MIT