# Quick Start Guide
## 1. Test the Server
Run the server directly to test it:
```bash
uv run mui-mcp-server
```
The server will start and wait for MCP client connections via stdio.
## 2. Connect to Claude Desktop
### Step 1: Locate your Claude Desktop config file
**Windows:**
```
%APPDATA%\Claude\claude_desktop_config.json
```
**macOS:**
```
~/Library/Application Support/Claude/claude_desktop_config.json
```
### Step 2: Add this server configuration
Open the config file and add:
```json
{
"mcpServers": {
"mui-mcp-server": {
"command": "uv",
"args": [
"--directory",
"C:\\Users\\TejasBorate\\Desktop\\MUI-MCP-SERVER",
"run",
"mui-mcp-server"
]
}
}
}
```
**Note:** Update the path to match your actual installation directory!
### Step 3: Restart Claude Desktop
Close and reopen Claude Desktop completely.
### Step 4: Verify Connection
In Claude Desktop, look for the MCP tools indicator (usually a tool/hammer icon). You should see the mui-mcp-server tools available.
## 3. Example Prompts to Try
Once connected, try these prompts in Claude:
1. **"What MUI components are available?"**
- Uses: `list_all_components`
2. **"Show me how to use a Button component"**
- Uses: `get_mui_component` with component_name="Button"
3. **"Generate a TextField for email input"**
- Uses: `generate_mui_component` with appropriate props
4. **"Search for input components"**
- Uses: `search_mui_components` with query="input"
5. **"Create a Card with a title and actions"**
- Uses: `generate_mui_component` for Card
## 4. Troubleshooting
### Server not showing up in Claude
- Check that the path in the config is correct
- Verify uv is installed: `uv --version`
- Try running the server manually: `uv run mui-mcp-server`
- Check Claude's logs (usually in the same directory as the config)
### Dependencies issues
```bash
# Reinstall dependencies
uv sync --reinstall
```
### Python version issues
- Ensure Python 3.10 or higher is installed
- Check: `python --version`
## 5. Using in Your React Project
This MCP server helps you:
1. **Learn MUI components** - Get instant documentation and examples
2. **Generate boilerplate** - Create component code quickly
3. **Explore options** - See all available props and variants
4. **Find components** - Search by functionality
### Example Workflow:
1. Ask Claude: "I need a form with email and password fields"
2. Claude will use the MUI server to:
- Search for TextField components
- Generate the code with proper props
- Include import statements
3. Copy the generated code into your React project!
## 6. Adding More Components
Edit [src/mui_mcp_server/server.py](src/mui_mcp_server/server.py) and add to the `MUI_COMPONENTS` dictionary:
```python
"ComponentName": {
"description": "What it does",
"props": {
"propName": "type or values"
},
"example": "JSX example code",
"import": "import statement"
}
```
Then reload the server in Claude.
