@shopify/ui-extensions 2026.1.0 → 2026.1.2

package/src/surfaces/admin/api/checkout-rules/launch-options.ts

@@ -1,33 +1,45 @@
+/**
+ * A [metafield](/docs/apps/build/metafields) that stores validation function configuration data. Use metafields to persist settings that control how your validation function behaves, such as minimum quantities, restricted shipping zones, or custom validation rules.
+ */
 interface Metafield {
+  /** A human-readable description explaining the metafield's purpose and how it affects validation behavior. Use this to document your settings for other developers. */
   description?: string;
+  /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */
   id: string;
+  /** The namespace that organizes related metafields together. All metafields for a validation should use a consistent namespace to group related settings. */
   namespace: string;
+  /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_quantity'` or `'blocked_countries'`). */
   key: string;
+  /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */
   value: string;
+  /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */
   type: string;
 }
+
+/**
+ * A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.
+ */
 interface Validation {
-  /**
-   * the validation's gid when active in a shop
-   */
+  /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */
   id: string;
-  /**
-   * the metafields owned by the validation
-   */
+  /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */
   metafields: Metafield[];
 }
 
+/**
+ * A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.
+ */
 interface ShopifyFunction {
-  /**
-   * the validation function's unique identifier
-   */
+  /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */
   id: string;
 }
 
 /**
- * The object that exposes the validation with its settings.
+ * The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.
  */
 export interface ValidationData {
+  /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */
   validation?: Validation;
+  /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */
   shopifyFunction: ShopifyFunction;
 }

package/src/surfaces/admin/api/checkout-rules/metafields.ts

@@ -1,31 +1,66 @@
 import {SupportedDefinitionType} from '../shared';
 
+/**
+ * A metafield update or creation operation. Use this to set or modify metafield values that store validation function configuration data.
+ */
 interface MetafieldUpdateChange {
+  /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */
   type: 'updateMetafield';
+  /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_quantity'` or `'shipping_restriction'`). */
   key: string;
+  /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */
   namespace?: string;
+  /** The metafield value to store. Can be a string or number depending on your configuration needs. */
   value: string | number;
+  /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */
   valueType?: SupportedDefinitionType;
 }
 
+/**
+ * A metafield removal operation. Use this to delete metafields that are no longer needed for your validation configuration.
+ */
 interface MetafieldRemoveChange {
+  /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */
   type: 'removeMetafield';
+  /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */
   key: string;
+  /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */
   namespace: string;
 }
 
+/**
+ * A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify validation settings stored in metafields.
+ */
 type MetafieldChange = MetafieldUpdateChange | MetafieldRemoveChange;
+
+/**
+ * A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.
+ */
 interface MetafieldChangeResultError {
+  /** Indicates the operation failed. Check this value to determine if you need to handle an error. */
   type: 'error';
+  /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */
   message: string;
 }
+
+/**
+ * A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.
+ */
 interface MetafieldChangeSuccess {
+  /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */
   type: 'success';
 }
+
+/**
+ * The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.
+ */
 type MetafieldChangeResult =
   | MetafieldChangeSuccess
   | MetafieldChangeResultError;
 
+/**
+ * A function that applies metafield changes to validation settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.
+ */
 export type ApplyMetafieldChange = (
   change: MetafieldChange,
 ) => Promise<MetafieldChangeResult>;

package/src/surfaces/admin/api/checkout-rules/validation-settings.ts

@@ -1,15 +1,19 @@
-import type {StandardApi} from '../standard/standard';
+import type {StandardRenderingExtensionApi} from '../standard/standard-rendering';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 
 import {ApplyMetafieldChange} from './metafields';
 import {ValidationData} from './launch-options';
 
+/**
+ * The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.
+ */
 export interface ValidationSettingsApi<
   ExtensionTarget extends AnyExtensionTarget,
-> extends StandardApi<ExtensionTarget> {
+> extends StandardRenderingExtensionApi<ExtensionTarget> {
   /**
-   * Applies a change to the validation settings.
+   * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.
    */
   applyMetafieldChange: ApplyMetafieldChange;
+  /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */
   data: ValidationData;
 }

package/src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts

@@ -2,42 +2,54 @@ import type {StandardApi} from '../standard/standard';
 import type {I18n} from '../../../../api';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 
+/**
+ * The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.
+ */
 export interface CustomerSegmentTemplateApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends StandardApi<ExtensionTarget> {
-  /* Utilities for translating content according to the current `localization` of the admin. */
+  /** Utilities for translating template content into the merchant's language. */
   i18n: I18n;
   /** @private */
   __enabledFeatures: string[];
 }
 
+/**
+ * Standard customer metafields that can be referenced as template dependencies.
+ */
 export type CustomerStandardMetafieldDependency = 'facts.birth_date';
+
+/**
+ * Defines a customer segment template that merchants can use to create targeted customer groups.
+ */
 export interface CustomerSegmentTemplate {
   /**
-   * The localized title of the template.
+   * The template title in the merchant's language.
    */
   title: string;
   /**
-   * The localized description of the template. An array can be used for multiple paragraphs.
+   * The template description in the merchant's language. Use an array for multiple paragraphs.
    */
   description: string | string[];
   /**
-   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
+   * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.
    */
   query: string;
   /**
-   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
+   * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.
    */
   queryToInsert: string;
   /**
-   * The list of customer standard metafields or custom metafields used in the template's query.
+   * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.
    */
   dependencies?: {
+    /** Standard Shopify customer metafields used in the query. */
     standardMetafields?: CustomerStandardMetafieldDependency[];
+    /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */
     customMetafields?: string[];
   };
   /**
-   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
+   * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a "New" badge.
    */
   createdOn: string;
 }

package/src/surfaces/admin/api/customer-segment-template/examples/abandoned-cart-recovery.jsx

@@ -0,0 +1,30 @@
+export default () => {
+  return {
+    templates: [
+      {
+        title: 'Cart abandoners',
+        description: [
+          'Customers who abandoned carts in the last 7 days',
+          'Use this segment for email recovery campaigns',
+        ],
+        query: `{
+  abandoned_checkouts_count: {
+    min: 1
+  }
+  last_abandoned_order_date: {
+    min: "${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()}"
+  }
+}`,
+        queryToInsert: `{
+  abandoned_checkouts_count: {
+    min: 1
+  }
+  last_abandoned_order_date: {
+    min: "LAST_7_DAYS"
+  }
+}`,
+        createdOn: '2025-01-15T00:00:00Z',
+      },
+    ],
+  };
+};

package/src/surfaces/admin/api/customer-segment-template/examples/birthday-this-month.jsx

@@ -0,0 +1,32 @@
+export default () => {
+  return {
+    templates: [
+      {
+        title: 'Birthday this month',
+        description: 'Customers with birthdays in the current month',
+        query: `{
+  metafields: {
+    key: "birth_date"
+    namespace: "customer"
+    value: {
+      month: ${new Date().getMonth() + 1}
+    }
+  }
+}`,
+        queryToInsert: `{
+  metafields: {
+    key: "birth_date"
+    namespace: "customer"
+    value: {
+      month: ${new Date().getMonth() + 1}
+    }
+  }
+}`,
+        dependencies: {
+          standardMetafields: ['facts.birth_date'],
+        },
+        createdOn: '2025-01-15T00:00:00Z',
+      },
+    ],
+  };
+};

package/src/surfaces/admin/api/customer-segment-template/examples/high-value-customers.jsx

@@ -0,0 +1,27 @@
+export default () => {
+  return {
+    templates: [
+      {
+        title: shopify.i18n.translate('templates.highValue.title'),
+        description: shopify.i18n.translate('templates.highValue.description'),
+        query: `{
+  total_spent: {
+    min: 500
+  }
+  orders_count: {
+    min: 5
+  }
+}`,
+        queryToInsert: `{
+  total_spent: {
+    min: 500
+  }
+  orders_count: {
+    min: 5
+  }
+}`,
+        createdOn: '2025-01-15T00:00:00Z',
+      },
+    ],
+  };
+};

package/src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts

@@ -4,13 +4,18 @@ import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-target
 import {ApplyMetafieldChange} from './metafields';
 import {DiscountFunctionSettingsData, DiscountsApi} from './launch-options';
 
+/**
+ * The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.
+ */
 export interface DiscountFunctionSettingsApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends Omit<BlockExtensionApi<ExtensionTarget>, 'data'> {
   /**
-   * Applies a change to the discount function settings.
+   * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.
    */
   applyMetafieldChange: ApplyMetafieldChange;
+  /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */
   data: DiscountFunctionSettingsData;
+  /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */
   discounts: DiscountsApi;
 }

package/src/surfaces/admin/api/discount-function-settings/examples/configure-discount-threshold.jsx

@@ -0,0 +1,39 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [threshold, setThreshold] = useState('50.00');
+  const [saved, setSaved] = useState(false);
+
+  const handleSave = async () => {
+    const result = await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'discount-config',
+      key: 'minimum_purchase',
+      value: threshold,
+      valueType: 'number_decimal',
+    });
+
+    if (result.type === 'success') {
+      setSaved(true);
+    } else {
+      console.error('Configuration failed:', result.message);
+    }
+  };
+
+  return (
+    <s-function-settings>
+      <s-text-field
+        label="Minimum purchase amount"
+        value={threshold}
+        onChange={(value) => setThreshold(value)}
+      />
+      <s-button onClick={handleSave}>Save Threshold</s-button>
+      {saved && <s-banner status="success">Threshold configured!</s-banner>}
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/discount-function-settings/examples/configure-eligibility-rules.jsx

@@ -0,0 +1,45 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [tags, setTags] = useState('vip, wholesale, premium');
+  const [maxUses, setMaxUses] = useState('5');
+
+  const handleSave = async () => {
+    await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'discount-config',
+      key: 'eligible_customer_tags',
+      value: JSON.stringify(tags.split(',').map((t) => t.trim())),
+      valueType: 'json',
+    });
+
+    await shopify.applyMetafieldChange({
+      type: 'updateMetafield',
+      namespace: 'discount-config',
+      key: 'max_uses_per_customer',
+      value: maxUses,
+      valueType: 'number_integer',
+    });
+  };
+
+  return (
+    <s-function-settings>
+      <s-text-field
+        label="Eligible customer tags (comma-separated)"
+        value={tags}
+        onChange={(value) => setTags(value)}
+      />
+      <s-number-field
+        label="Max uses per customer"
+        value={maxUses}
+        onChange={(value) => setMaxUses(value)}
+      />
+      <s-button onClick={handleSave}>Save Eligibility Rules</s-button>
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/discount-function-settings/examples/load-existing-settings.jsx

@@ -0,0 +1,45 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [settings, setSettings] = useState({});
+
+  useEffect(() => {
+    const initializeSettings = async () => {
+      const existingSettings = data.metafields.reduce((acc, field) => {
+        acc[field.key] = field.value;
+        return acc;
+      }, {});
+
+      setSettings(existingSettings);
+
+      if (!existingSettings.eligible_tags) {
+        await shopify.applyMetafieldChange({
+          type: 'updateMetafield',
+          namespace: 'discount-config',
+          key: 'eligible_tags',
+          value: JSON.stringify(['vip', 'wholesale']),
+          valueType: 'json',
+        });
+      }
+    };
+
+    initializeSettings();
+  }, [data]);
+
+  return (
+    <s-function-settings>
+      <s-text>Current settings:</s-text>
+      {Object.entries(settings).map(([key, value]) => (
+        <s-text key={key}>
+          {key}: {String(value)}
+        </s-text>
+      ))}
+    </s-function-settings>
+  );
+}

package/src/surfaces/admin/api/discount-function-settings/launch-options.ts

@@ -3,47 +3,65 @@ import type {
   UpdateSignalFunction,
 } from '../../../../shared';
 
+/**
+ * A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.
+ */
 interface Metafield {
+  /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */
   description?: string;
+  /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */
   id: string;
+  /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */
   namespace: string;
+  /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */
   key: string;
+  /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */
   value: string;
+  /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */
   type: string;
 }
 
-type DiscountClass = 'product' | 'order' | 'shipping';
+/**
+ * The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).
+ */
+export enum DiscountClass {
+  /** The discount applies to specific products or product variants. Use this for discounts that reduce the price of individual line items (for example, "20% off selected products"). */
+  Product = 'PRODUCT',
+  /** The discount applies to the entire order total. Use this for cart-wide discounts that reduce the subtotal (for example, "$10 off orders over $50"). */
+  Order = 'ORDER',
+  /** The discount applies to shipping costs. Use this for free shipping or reduced shipping rate discounts (for example, "Free shipping on orders over $100"). */
+  Shipping = 'SHIPPING',
+}
 
+/**
+ * The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.
+ */
 type DiscountMethod = 'automatic' | 'code';
 
 /**
- * The object that exposes the validation with its settings.
+ * The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.
  */
 export interface DiscountFunctionSettingsData {
-  /**
-   * The unique identifier for the discount.
-   */
+  /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */
   id: string;
-  /**
-   * The discount metafields.
-   */
+  /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */
   metafields: Metafield[];
 }
 
 /**
- * Reactive Api for managing discount function configuration.
+ * The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.
  */
 export interface DiscountsApi {
   /**
-   * A signal that contains the discount classes.
+   * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.
    */
   discountClasses: ReadonlySignalLike<DiscountClass[]>;
   /**
-   * A function that updates the discount classes.
+   * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.
    */
   updateDiscountClasses: UpdateSignalFunction<DiscountClass[]>;
   /**
-   * A signal that contains the discount method.
+   * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.
    */
   discountMethod: ReadonlySignalLike<DiscountMethod>;
 }

package/src/surfaces/admin/api/discount-function-settings/metafields.ts

@@ -1,31 +1,66 @@
 import {SupportedDefinitionType} from '../shared';
 
+/**
+ * A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.
+ */
 interface MetafieldUpdateChange {
+  /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */
   type: 'updateMetafield';
+  /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */
   key: string;
+  /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */
   namespace?: string;
+  /** The metafield value to store. Can be a string or number depending on your configuration needs. */
   value: string | number;
+  /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */
   valueType?: SupportedDefinitionType;
 }
 
+/**
+ * A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.
+ */
 interface MetafieldRemoveChange {
+  /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */
   type: 'removeMetafield';
+  /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */
   key: string;
+  /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */
   namespace: string;
 }
 
+/**
+ * A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.
+ */
 type MetafieldChange = MetafieldUpdateChange | MetafieldRemoveChange;
+
+/**
+ * A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.
+ */
 interface MetafieldChangeResultError {
+  /** Indicates the operation failed. Check this value to determine if you need to handle an error. */
   type: 'error';
+  /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */
   message: string;
 }
+
+/**
+ * A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.
+ */
 interface MetafieldChangeSuccess {
+  /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */
   type: 'success';
 }
+
+/**
+ * The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.
+ */
 type MetafieldChangeResult =
   | MetafieldChangeSuccess
   | MetafieldChangeResultError;
 
+/**
+ * A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.
+ */
 export type ApplyMetafieldChange = (
   change: MetafieldChange,
 ) => Promise<MetafieldChangeResult>;

package/src/surfaces/admin/api/intents/examples/create-article.jsx

@@ -0,0 +1,35 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [result, setResult] = useState(null);
+  const [creating, setCreating] = useState(false);
+
+  const handleCreate = async () => {
+    setCreating(true);
+    
+    const activity = await shopify.intents.invoke('create:shopify/Article');
+    const response = await activity.complete;
+
+    setResult(response);
+    setCreating(false);
+  };
+
+  return (
+    <s-admin-block heading="Create Article">
+      <s-button onClick={handleCreate} disabled={creating}>
+        {creating ? 'Creating...' : 'Launch Article Creator'}
+      </s-button>
+      {result?.code === 'ok' && (
+        <s-banner status="success">Article created successfully!</s-banner>
+      )}
+      {result?.code === 'closed' && (
+        <s-text>Creation cancelled</s-text>
+      )}
+    </s-admin-block>
+  );
+}