# Lawrence's Personal MCP Server

A Model Context Protocol (MCP) server providing development tools for Figma integration, accessibility checking, and code generation.

## Features

### 🎨 Figma Tools
- `figma_get_file` - Fetch Figma file structure and metadata
- `figma_get_component` - Get detailed component information
- `figma_extract_design_tokens` - Extract colors, typography, and spacing
- `figma_search_components` - Search for components by name

### ♿ Accessibility Tools
- `a11y_audit_component` - Audit components for WCAG compliance
- `a11y_suggest_improvements` - Get accessibility improvement suggestions

### 🔧 Code Generation Tools
- `codegen_react_component` - Generate React components from Figma
- `codegen_design_tokens` - Generate CSS/TypeScript design tokens

## Setup

### 1. Install Dependencies
```bash
npm install
```

### 2. Configure Environment
Copy `.env.example` to `.env` and add your Figma access token:
```bash
cp .env.example .env
```

Edit `.env`:
```
FIGMA_ACCESS_TOKEN=your_figma_personal_access_token
```

### 3. Build
```bash
npm run build
```

## Usage with Claude Desktop

Add this to your Claude Desktop configuration file:

**MacOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`

```json
{
  "mcpServers": {
    "lawrence-mcp": {
      "command": "node",
      "args": ["/Users/lawrence/dev/mcp-server/dist/index.js"]
    }
  }
}
```

Then restart Claude Desktop.

## Development

### Run in watch mode
```bash
npm run watch
```

### Run directly with tsx
```bash
npm run dev
```

## Adding New Tools

1. Create a new tool file in `src/tools/`
2. Define your tools array and handler function
3. Import and add to `src/index.ts`

Example:
```typescript
// src/tools/my-tools.ts
export const myTools: Tool[] = [
  {
    name: 'my_tool',
    description: 'Does something cool',
    inputSchema: { /* ... */ }
  }
];

export async function handleMyTool(name: string, args: any) {
  // Implementation
}
```

## License

MIT