# Stitch + FDSA Integration

Configure Google Stitch Skills across Pi Agent, OpenCode, and Grok CLI.
Combined with FDSA agentic engineering skills for a full design-to-deployment pipeline.

---

## 1. Pi Coding Agent

```bash
# Install the Stitch extension
pi install npm:@zyvra-labs/pi-stitch-tools

# Set API key (add to .env or shell profile)
export STITCH_API_KEY="your-key-here"

# Verify inside Pi session
/stitch-status
```

Stack with FDSA security skills:
```bash
pi -e extensions/damage-control.ts    # Safety first
# Stitch design skills now available in the same session
```

## 2. OpenCode CLI

Create `opencode.json` in your project root:

```json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@google-labs-code/stitch-skills"],
      "env": {
        "STITCH_API_KEY": "your-key-here"
      }
    }
  }
}
```

Stack with FDSA security via cascade routing config:

```json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@google-labs-code/stitch-skills"],
      "env": {
        "STITCH_API_KEY": "your-key-here"
      }
    }
  },
  "models": {
    "default": "opencode-go/deepseek-v4-flash"
  }
}
```

## 3. Grok CLI

```bash
# Install Stitch skills via npx
npx skills add google-labs-code/stitch-skills

# Grok auto-discovers skills from global node configs
# No additional setup needed
```

## 4. FDSA Skills + Stitch — Full Stack

```bash
# Install FDSA skills (security, orchestration, etc.)
bash install.sh

# Install Stitch skills (design-to-code)
npx skills add google-labs-code/stitch-skills

# Now your agent can:
# /stitch::generate-design "landing page"  (Google Stitch)
# /whitelist-hook                          (FDSA security)
# /agent-team                             (FDSA orchestration)
```

## Pipeline

```
User prompt -> FDSA agent selects tools
  +-- Stitch skills (design generation)
  +-- FDSA security skills (bash protection)
  +-- FDSA orchestration skills (multi-agent teams)
```

All skills share the same MCP protocol. No conflicts.