MCP Server Setup

This document describes the setup of the Gluestack Components MCP (Model Context Protocol) server for AI-assisted component generation.

What is MCP?

The Model Context Protocol (MCP) is a standardized way for AI assistants (like GitHub Copilot, Claude, etc.) to access external tools and documentation. The Gluestack MCP server provides three tools:

1. get_all_components_metadata - Lists all available Gluestack UI components with descriptions
2. select_components - Selects specific components to work with
3. get_selected_components_docs - Retrieves full documentation for selected components

Installation Location

The Gluestack MCP server is installed at:

~/Documents/MCP/gluestack-mcp/

VS Code Configuration

The MCP server is configured in VS Code user settings at:

~/Library/Application Support/Code/User/settings.json

Configuration:

{
  "mcpServers": {
    "gluestack-components": {
      "command": "node",
      "args": ["/Users/tomwellnitz/Documents/MCP/gluestack-mcp/index.js"]
    }
  }
}

System Prompt

The MCP server provides the following system prompt to AI assistants:

You are a React and React Native expert. Generate COMPLETE and RUNNABLE code using only my design system components and tools sequentially: get_all_components_metadata, select_components, get_selected_components_docs. Requirements: no external component libraries, no HTML tags (div, button, input, etc), no StyleSheet, use TailwindCSS classes via className prop. Images must be from unsplash.com only. Import all components individually. Prefer VStack/HStack over Box component. Ensure screens are scrollable, responsive, and mobile-friendly.

Usage with AI Assistants

When using GitHub Copilot Chat or other AI assistants that support MCP, the Gluestack component documentation will be automatically available. The AI can:

• Query available components
• Get detailed documentation for specific components
• Generate code using the correct import patterns and props
• Follow the DiveSuite theme and styling conventions

Verification

To verify the MCP server is configured correctly:

1. Check VS Code settings contain the mcpServers configuration
2. The server should appear in the MCP tools menu of your AI assistant
3. Test by asking the AI: “What Gluestack UI components are available?”

Manual Testing

To manually test the MCP server:

cd ~/Documents/MCP/gluestack-mcp
node index.js

The server will start and wait for MCP protocol messages on stdin.

Repository

Original repository: https://github.com/gluestack/mcp

Notes

• The MCP server runs automatically when called by AI assistants - no need to manually start it
• The server provides documentation for all Gluestack UI v3 components
• Components are already installed in the DiveSuite project at components/ui/
• The theme is customized with DiveSuite colors in components/ui/gluestack-ui-provider/config.ts