Skip to main content
codingstairs

Step 5

Step 5 — Context7 · Figma MCP

10 views

Table of contents

LLMs only know what they were trained on. Context7 brings live library docs; Figma MCP brings design files.

Context7 — library docs

claude mcp add context7 -- npx -y @upstash/context7-mcp

> Show me the Next.js 16 App Router metadata spec — use context7

Claude Code calls Context7 to fetch the current official docs.

Why this matters

LLM training is frozen. Right after a release, the model may be wrong. Context7 fills that gap with a live index.

Figma MCP — design to code

claude mcp add figma -- npx -y @figma/mcp

> Convert the LoginScreen frame in Figma file abc123 to a React component

Picks up colors, spacing, typography tokens precisely.

Combine MCPs for real power

> 1. Read the ProductCard frame in Figma
  2. Confirm Tailwind v4 classes via Context7
  3. Generate components/ProductCard.tsx

Three tools, one flow.

Other useful MCPs

  • @modelcontextprotocol/server-fetch — fetch any URL
  • @playwright/mcp — browser automation
  • @modelcontextprotocol/server-postgres — PostgreSQL queries
  • @modelcontextprotocol/server-memory — persistent memory
  • mcp-server-google-calendar — schedule lookup

Try it

Register Context7 and ask "give me React 19 Compiler safe-hook patterns — use context7". Watch for cited fresh docs.

Going deeper

Next

Final step 6 — composing into workflows.