auto-generate web component models

platforms/web/package.json

@@ -72,6 +72,9 @@
     "verify": "publint",
     "prepack": "pnpm run build"
   },
+  "dependencies": {
+    "@shopify/checkout-kit-protocol": "workspace:*"
+  },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@types/node": "^22.10.0",

platforms/web/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - '../../protocol/languages/typescript'

platforms/web/src/checkout.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import type { Checkout, CheckoutProtocolMessageMap, UcpErrorResponse } from "./checkout.types";
-import type { CheckoutMessageError } from "./ucp-embed-types";
+import type { CheckoutMessageError } from "@shopify/checkout-kit-protocol/web";
 import "./checkout-web-component";
 import {
   DEFAULT_POPUP_WIDTH,

platforms/web/src/checkout.types.ts

@@ -1,5 +1,6 @@
-// Types for this component are derived from the 2026-04-08 UCP embedded
-// checkout protocol. Embed payload shapes live in `./ucp-embed-types.ts`.
+// Types for this component are derived from the UCP embedded checkout
+// protocol. Wire payload shapes are generated from the canonical JSON schemas
+// in `@shopify/checkout-kit-protocol/web`.
 
 import type {
   Buyer,
@@ -10,7 +11,7 @@ import type {
   OrderConfirmation,
   Total,
   UcpErrorResponse,
-} from "./ucp-embed-types";
+} from "@shopify/checkout-kit-protocol/web";
 
 // This component should follow the custom element conventions set out here:
 // https://github.com/Shopify/ui-api-design/tree/main/codex. In particular,
@@ -262,4 +263,4 @@ export type {
   OrderConfirmation,
   Total,
   UcpErrorResponse,
-} from "./ucp-embed-types";
+} from "@shopify/checkout-kit-protocol/web";