2.0 KiB

Raw Permalink Blame History

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

# 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:

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:

{
  "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:

{
  "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

# 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

# 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.

2.0 KiB Raw Permalink Blame History