stitch-sdk-pipeline

Jalankan pipeline generasi Stitch SDK secara penuh. Gunakan saat alat baru ditambahkan, atau SDK perlu dihasilkan ulang dari awal hingga akhir.

npx skills add https://github.com/google-labs-code/stitch-sdk --skill stitch-sdk-pipeline

Stitch SDK Pipeline

This skill orchestrates the full SDK generation pipeline β€” from capturing MCP tool schemas to publishing a tested, validated package. Use this when:

  • The Stitch MCP server adds or changes tools
  • You need to regenerate the SDK from scratch
  • You want to verify the pipeline is healthy

[!IMPORTANT] Stage 2 is the only step requiring agent intelligence. All other stages are deterministic scripts. For Stage 2, use the stitch-sdk-domain-design skill.


Prerequisites

  • STITCH_API_KEY environment variable set
  • bun installed
  • Working directory: project root (stitch-sdk/)

Pipeline Stages

Stage 1: Capture Tool Schemas πŸ€–

// turbo
npm run capture

Connects to the Stitch MCP server, calls tools/list, and writes the raw schemas to packages/sdk/generated/tools-manifest.json. Updates the manifest section of stitch-sdk.lock.

Output: packages/sdk/generated/tools-manifest.json (includes inputSchema + outputSchema for every tool)

When to skip: If tools-manifest.json is already up to date and no server-side changes occurred.


Stage 2: Domain Design 🧠 (Agent)

Use the stitch-sdk-domain-design skill for this stage.

Read tools-manifest.json and edit packages/sdk/generated/domain-map.json to map tools β†’ classes β†’ methods.

Key decisions at this stage:

  • Which class owns each tool?
  • What are the arg routing rules (self, param, computed, selfArray)?
  • What is the response projection path?
  • Should the method cache data from the construction response?

Input: tools-manifest.json + scripts/ir-schema.ts (the canonical IR contract) Output: packages/sdk/generated/domain-map.json

When to skip: If domain-map.json already has the correct bindings and you only changed ir-schema.ts or generate-sdk.ts.


Stage 3: Generate TypeScript πŸ€–

// turbo
npm run generate

Validates the IR (Zod schema) and every projection (against outputSchema), then emits TypeScript files via ts-morph into packages/sdk/generated/src/.

Output: packages/sdk/generated/src/*.ts + updated stitch-sdk.lock

If this fails with a projection error, go back to Stage 2 and fix domain-map.json.


Stage 4: Build πŸ€–

// turbo
npm run build

TypeScript compilation: packages/sdk/ β†’ packages/sdk/dist/.


Stage 5: Unit Tests πŸ€–

// turbo
npm run test

Runs core unit tests (vitest) β€” mocked callTool, verifying generated method signatures, caching, and error handling.


Stage 6: Script Tests πŸ€–

// turbo
npm run test:scripts

Runs contract tests (IR schema acceptance/rejection) and logic tests (expression builders) using bun:test.


Stage 7: E2E Tests πŸ€–

npm run test:e2e

Live API tests against the built package. Requires STITCH_API_KEY (and GEMINI_API_KEY for AI SDK tests). Two test suites:

  • live.test.ts β€” Direct SDK calls: create projects, generate screens, verify responses.
  • ai-sdk-e2e.test.ts β€” AI SDK integration via stitchTools(): Gemini autonomously calls Stitch tools, generates designs, extracts HTML + Tailwind config, produces modular React components, validates via SWC, and scaffolds a Vite preview app at .stitch/preview/.

Stage 8: Lock Validation πŸ€–

// turbo
npm run validate:generated

Verifies that stitch-sdk.lock hashes match the actual generated files. Catches drift (someone edited generated files manually or forgot to regenerate).

[!IMPORTANT] Always run after Stage 3 (Generate). If you run Capture (Stage 1) then Validate without re-generating, the hashes will mismatch because the manifest hash changed.


Stage 9: Skill Audit 🧠 (Agent)

After the pipeline passes, audit agent skills for freshness. Read the current source of truth and update any skills that reference stale methods, args, or examples.

Inputs:

  • packages/sdk/src/index.ts (public surface)
  • Generated class files in packages/sdk/generated/src/
  • packages/sdk/src/spec/errors.ts (error codes)
  • packages/sdk/src/spec/client.ts (config schema)

Skills to audit (in priority order):

  1. stitch-sdk-usage β€” highest churn, references specific methods and constructor signatures
  2. stitch-sdk-readme β€” must document stitchTools(), toolDefinitions, and AI SDK integration examples
  3. stitch-sdk-development β€” check cache examples match current domain-map patterns
  4. stitch-sdk-domain-design β€” check code examples in the cache section

Skills to skip: stitch-sdk-pipeline (self-referential), red-green-yellow (generic methodology).

What to check:

  • Every method name in a code example exists on its class
  • Every import in an example matches an export in index.ts
  • Constructor signatures match the actual constructors
  • Config fields match StitchConfigSchema
  • Error codes match StitchErrorCode

When to skip: If only infrastructure code changed (packages/sdk/src/client.ts, packages/sdk/src/proxy/) and no public API surface changed.


Quick Reference

Full pipeline (script stages only)

npm run pipeline

Runs Stage 1 β†’ 3 β†’ 4 β†’ 5 in sequence. Does not include Stage 2 (agent), Stage 7 (e2e), or Stage 9 (skill audit).

Starting from a specific stage

ScenarioStart from
New tool added to MCP serverStage 1
Need to change how a tool maps to a methodStage 2
Changed ir-schema.ts or generate-sdk.tsStage 3
Changed code in packages/sdk/src/ (client, errors)Stage 4
Just want to verify everything worksStage 5
Changed AI SDK tools adapter or tool definitionsStage 5
Public API surface changedStage 9

Key files

FileLocationRole
tools-manifest.jsonpackages/sdk/generated/Raw MCP tool schemas (Stage 1 output)
domain-map.jsonpackages/sdk/generated/IR: tool β†’ class β†’ method mappings (Stage 2 output)
tool-definitions.tspackages/sdk/generated/src/Generated JSON Schema tool definitions for AI SDK
tools-adapter.tspackages/sdk/src/stitchTools() β€” AI SDK v6 adapter (imported via @google/stitch-sdk/ai)
ir-schema.tsscripts/Zod schema defining valid IR structure
tool-schema.tsscripts/TypeScript types for JSON Schema
generate-sdk.tsscripts/ts-morph codegen (Stage 3)
stitch-sdk.lockpackages/sdk/generated/Integrity hashes for drift detection
stitch-html.tspackages/sdk/test/helpers/Stitch HTML parser (Tailwind config + font extraction)
component-validator.tspackages/sdk/test/helpers/SWC AST validator for generated React components

Lebih banyak skill dari google-labs-code

typed-service-contracts
google-labs-code
Standar arsitektur untuk membangun layanan TypeScript yang kokoh dan aman tipe menggunakan pola "Spec and Handler". Gunakan saat membangun CLI, pustaka, atau sistem kompleks…
stitch::code-to-design
google-labs-code
Konversi kode frontend (Vite, React, dll.) menjadi Stitch Design dengan merantai ekstraksi HTML statis, ekstraksi sistem desain, dan unggah berkas. **SELALU** gunakan ini…
react-vite-dashboard
google-labs-code
Ubah desain Stitch menjadi dasbor React + Vite produksi dengan TanStack Query, token yang dapat diakses dari DESIGN.md, dan pola siap Web3 (ethers/viem).
stitch::extract-design-md
google-labs-code
Ekstrak sistem desain yang komprehensif (DESIGN.md) langsung dari kode sumber frontend β€” React, Vue, Svelte, Angular, HTML/CSS biasa, atau kerangka web apa pun.
remotion
google-labs-code
Buat video walkthrough profesional dari desain aplikasi Stitch menggunakan Remotion dengan transisi halus dan overlay teks. Mengambil layar dari proyek Stitch dan mengaturnya menjadi komposisi video Remotion dengan efek zoom, transisi fade, dan overlay teks kontekstual. Mendukung arsitektur komponen modular dengan komponen ScreenSlide dan WalkthroughComposition, serta fitur lanjutan seperti hotspot interaktif dan integrasi sulih suara. Menghasilkan manifes layar, mengunduh...
ink
google-labs-code
Perender terminal Ink untuk json-render yang mengubah spesifikasi JSON menjadi UI terminal interaktif. Gunakan saat bekerja dengan @json-render/ink, membangun UI terminal dari…
tdd-red-green-refactor
google-labs-code
Keterampilan ini menerapkan kerangka kerja struktural untuk pemrograman berbantuan AI guna memastikan setiap baris kode dapat diverifikasi, memiliki tipe, dan memiliki tujuan.
automate-github-issues
google-labs-code
Siapkan triase dan resolusi isu GitHub otomatis menggunakan agen pengkodean Jules paralel