DEV Community: Tahmid Bin Taslim Rafi

AI Era for Shopify merchants

Tahmid Bin Taslim Rafi — Tue, 03 Feb 2026 07:17:58 +0000

If you run a Shopify store, you are entering a new phase of e-commerce where "SEO" (Search Engine Optimization) is being overtaken by "AEO" (AI Engine Optimization).

Millions of shoppers are now using AI assistants to find products, but the journey usually breaks at the most critical moment: checkout or transaction.

UCP (Universal Commerce Protocol) is the fix. It’s a new on-ramp that lets AI “shopping agents” discover your products, ask the right questions (variants, shipping, returns), and move a buyer from intent → checkout → order with fewer clicks and less drop-off.

Crucially, this isn't just some random tech. UCP is an open standard powered by Google and co-developed with e-commerce giants like Shopify. It defines the common language for that end-to-end flow across platforms, merchants, payment providers, and credential providers.

What the f*** is UCP actually?

Technically, UCP is a standard. Commercially, it is the universal translator between your Shopify store and the AI world. It handles three critical things:

The Handshake (Discovery): Your store tells the AI, "I am open for business, and here is exactly what I can do." This ensures the AI knows you are a trusted merchant, not just another random website.
The Actions (Capabilities): These are the "verbs" of commerce. Instead of just reading text, the AI can trigger real business logic: Checkout, Check Inventory, Apply Discount, or Link Identity. It turns a conversation into a transaction.
The Connection (Bindings): Whether the customer is on WhatsApp, a Google Search AI result, or a voice assistant, UCP ensures the transaction works the same way. It maps these commercial actions 1:1 to modern tools (like MCP) so you can build once and sell everywhere.

For the technical folks (The Specs):

Discovery & negotiation: Agents and merchants “handshake” on what each supports (versions + capabilities).
Capabilities (think: verbs): e.g., Checkout, Order Management, Identity Linking, plus extensions (discounts, fulfillment, consent, etc.).
Bindings / transports: The same capability can be invoked over HTTP/REST, MCP (Model Context Protocol) tools, or A2A—UCP maps capabilities 1:1 to MCP tools.

A quick mental model:

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

Google is explicitly positioning UCP as a path to turn AI interactions into purchases across its AI surfaces (e.g., Gemini / AI Mode), starting with direct buying.
Business impact: capture incremental demand from high-intent shoppers who never reach a traditional PDP/cart flow.

2) Lower friction checkout = fewer abandoned carts

UCP’s checkout primitives let an agent complete the purchase with status-driven steps (create → update → complete), and optionally escalate to a trusted embedded checkout UI when needed.
Business impact: fewer “form fatigue” drop-offs, especially on mobile and cross-border.

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Once agents can reliably identify:

buyer intent (“I need a crewneck sweater, sustainable, ships to US”),
variant constraints,
shipping/returns requirements,

…you can shape what the agent recommends:

Bundles (“sweater + care kit”)
Threshold incentives (“free shipping over $X”)
Smart add-ons (size/compatibility safe cross-sell)
Time-bounded offers surfaced at decision time

UCP supports extensions (e.g., discount/fulfillment extending checkout) in the protocol itself.

Now I want this, how?

There are two practical paths:

Path A — Merchant checklist (no-code / low-code)

This is how most Shopify merchants should start:

Make product data agent-friendly
Clean titles, consistent variants, accurate inventory
Strong shipping/returns policies
Rich attributes (materials, sizing, compatibility) so agents can filter accurately
Enable fast, reliable checkout behaviors
Make sure checkout works smoothly end-to-end (especially shipping rates + payment methods).
Keep discount rules predictable (agents don’t handle weird edge cases well).
If you want Google AI surfaces: follow Google’s UCP onboarding guidance
Google’s guide positions UCP as “turn AI interactions into instant sales” and provides an implementation/onboarding path (including business profile + capability negotiation).

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

Shopify provides MCP servers that are UCP-compliant, covering discovery, checkout, and orders.
This is the fastest “developer path” to a working demo that can later become:

an on-site AI concierge,
a WhatsApp/LINE assistant,
a support + reorder agent,
a partner integration.

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

Below is a minimal, beginner-friendly walkthrough using the same primitives Shopify documents:
Authenticate → Search catalog → Create checkout → (Update) → Complete.

0) Pre-requirements

Node.js installed on your pc
Access to Shopify Dev Dashboard (to generate credentials / tokens for agent APIs)
VsCode or any IDE

1) Get a bearer token (JWT) for Shopify agent APIs

Shopify’s agent docs: you generate a global access token that authenticates your agent with Catalog + Checkout MCP servers.

Create a .env in your local VsCode:

BEARER_TOKEN=your_jwt_token_here
CATALOG_ID=your_catalog_id_here

(Do not commit .env. Use .gitignore file to exclude .env.)

2) Search products (Catalog MCP → `search_global_products`)

Create search-catalog.js:

import 'dotenv/config';

const bearerToken = process.env.BEARER_TOKEN;
const catalogId = process.env.CATALOG_ID;

async function main() {
  const res = await fetch('https://discover.shopifyapps.com/global/mcp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'search_global_products',
        arguments: {
          saved_catalog: catalogId,
          query: 'I need a crewneck sweater',
          context: 'buyer looking for sustainable fashion',
          ships_to: 'US',
          min_price: 50,
          max_price: 200,
          limit: 3,
        },
      },
    }),
  });

  const data = await res.json();

  // Shopify’s example parses the returned text payload as JSON.
  if (data?.result?.content?.[0]?.text) {
    data.result.content[0].text = JSON.parse(data.result.content[0].text);
  }

  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This is directly aligned with Shopify’s “search catalog” tutorial structure and parameters.

What you’re looking for in results: a product variant ID (you’ll pass it to checkout) and the shop domain.

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

Once you have:

shopDomain (example: your-store.myshopify.com)
variantId (a gid://shopify/ProductVariant/...)

Create checkout.js:

import 'dotenv/config';
import { randomUUID } from 'crypto';

const bearerToken = process.env.BEARER_TOKEN;

const shopDomain = 'YOUR_SHOP_DOMAIN.myshopify.com';
const variantId = 'gid://shopify/ProductVariant/1234567890';

async function main() {
  const res = await fetch(`https://${shopDomain}/api/ucp/mcp`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'create_checkout',
        arguments: {
          _meta: {
            ucp: {
              // Platform profile is required by UCP MCP binding for negotiation/versioning.
              profile: 'https://agent.example/profiles/shopping-agent.json',
            },
          },
          checkout: {
            idempotency_key: randomUUID(),
            currency: 'USD',
            line_items: [{ quantity: 1, item: { id: variantId } }],
            buyer: { email: 'buyer@example.com' },
          },
        },
      },
    }),
  });

  const data = await res.json();
  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This follows Shopify’s “complete checkout” tutorial and UCP’s MCP requirement that _meta.ucp.profile is included for every tool invocation.

4) Update + complete checkout (status-driven)

Shopify describes the flow as: create → update until ready → complete when status becomes ready_for_complete.

Two important gotchas from Shopify:

Checkout updates replace the whole checkout state—if you omit fields, they’re removed.
Sometimes the checkout returns requires_escalation and provides a continue_url (meaning: hand off to embedded/trusted UI).

In practice your agent loop looks like:

create_checkout
if status === incomplete → update_checkout with missing info
if status === requires_escalation → open the continue_url in embedded checkout UI
if status === ready_for_complete → complete_checkout

(Shopify’s tutorial includes example payloads for complete_checkout and the intermediate update steps.)

Shopify is building the foundation for agentic commerce.

Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate.

It’s open by default, so platforms and agents can use UCP to start transacting… pic.twitter.com/Gs0vzvfjra
— tobi lutke (@tobi) January 11, 2026

What Shopify merchants should do this week to adapt quickly?

Audit product data like an agent would
- Can a bot pick the right variant from your descriptions?
- Are shipping/returns explicit and consistent?
Create 2–3 “AOV plays” that are easy for an agent to apply
- “Free shipping over $X”
- “Bundle discount”
- “Add-on with the top 3 products”
Decide your strategy
- If you want quick wins: build an on-site agent that uses Shopify’s UCP-compliant MCP tools.
- If you want distribution via Google AI surfaces: start with Google’s UCP guide and required profile/onboarding steps.

🚀 Ready to make your store AI and Agent Ready?

The shift to Agentic Commerce is technical and moves fast. While the potential for revenue is huge, implementing UCP and MCP protocols correctly requires deep technical understanding.

You don't have to figure this out alone.

If you need someone to architect and build a UCP integration for your Shopify store (or any e-commerce platform), I can help you turn this new technology into a competitive advantage.

🌐 See what I build: tahmid.space
🤝 Specific questions or need a consultation? Connect with me on LinkedIn

New Era for Shopify merchants

Tahmid Bin Taslim Rafi — Tue, 03 Feb 2026 07:16:14 +0000

If you run a Shopify store, you are entering a new phase of e-commerce where "SEO" (Search Engine Optimization) is being overtaken by "AEO" (AI Engine Optimization).

Millions of shoppers are now using AI assistants to find products, but the journey usually breaks at the most critical moment: checkout or transaction.

What the f*** is UCP actually?

Technically, UCP is a standard. Commercially, it is the universal translator between your Shopify store and the AI world. It handles three critical things:

The Handshake (Discovery): Your store tells the AI, "I am open for business, and here is exactly what I can do." This ensures the AI knows you are a trusted merchant, not just another random website.
The Actions (Capabilities): These are the "verbs" of commerce. Instead of just reading text, the AI can trigger real business logic: Checkout, Check Inventory, Apply Discount, or Link Identity. It turns a conversation into a transaction.
The Connection (Bindings): Whether the customer is on WhatsApp, a Google Search AI result, or a voice assistant, UCP ensures the transaction works the same way. It maps these commercial actions 1:1 to modern tools (like MCP) so you can build once and sell everywhere.

For the technical folks (The Specs):

Discovery & negotiation: Agents and merchants “handshake” on what each supports (versions + capabilities).
Capabilities (think: verbs): e.g., Checkout, Order Management, Identity Linking, plus extensions (discounts, fulfillment, consent, etc.).
Bindings / transports: The same capability can be invoked over HTTP/REST, MCP (Model Context Protocol) tools, or A2A—UCP maps capabilities 1:1 to MCP tools.

A quick mental model:

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Once agents can reliably identify:

buyer intent (“I need a crewneck sweater, sustainable, ships to US”),
variant constraints,
shipping/returns requirements,

…you can shape what the agent recommends:

Bundles (“sweater + care kit”)
Threshold incentives (“free shipping over $X”)
Smart add-ons (size/compatibility safe cross-sell)
Time-bounded offers surfaced at decision time

UCP supports extensions (e.g., discount/fulfillment extending checkout) in the protocol itself.

Now I want this, how?

There are two practical paths:

Path A — Merchant checklist (no-code / low-code)

This is how most Shopify merchants should start:

Make product data agent-friendly
Clean titles, consistent variants, accurate inventory
Strong shipping/returns policies
Rich attributes (materials, sizing, compatibility) so agents can filter accurately
Enable fast, reliable checkout behaviors
Make sure checkout works smoothly end-to-end (especially shipping rates + payment methods).
Keep discount rules predictable (agents don’t handle weird edge cases well).
If you want Google AI surfaces: follow Google’s UCP onboarding guidance
Google’s guide positions UCP as “turn AI interactions into instant sales” and provides an implementation/onboarding path (including business profile + capability negotiation).

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

Shopify provides MCP servers that are UCP-compliant, covering discovery, checkout, and orders.
This is the fastest “developer path” to a working demo that can later become:

an on-site AI concierge,
a WhatsApp/LINE assistant,
a support + reorder agent,
a partner integration.

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

Below is a minimal, beginner-friendly walkthrough using the same primitives Shopify documents:
Authenticate → Search catalog → Create checkout → (Update) → Complete.

0) Pre-requirements

Node.js installed on your pc
Access to Shopify Dev Dashboard (to generate credentials / tokens for agent APIs)
VsCode or any IDE

1) Get a bearer token (JWT) for Shopify agent APIs

Shopify’s agent docs: you generate a global access token that authenticates your agent with Catalog + Checkout MCP servers.

Create a .env in your local VsCode:

BEARER_TOKEN=your_jwt_token_here
CATALOG_ID=your_catalog_id_here

(Do not commit .env. Use .gitignore file to exclude .env.)

2) Search products (Catalog MCP → `search_global_products`)

Create search-catalog.js:

import 'dotenv/config';

const bearerToken = process.env.BEARER_TOKEN;
const catalogId = process.env.CATALOG_ID;

async function main() {
  const res = await fetch('https://discover.shopifyapps.com/global/mcp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'search_global_products',
        arguments: {
          saved_catalog: catalogId,
          query: 'I need a crewneck sweater',
          context: 'buyer looking for sustainable fashion',
          ships_to: 'US',
          min_price: 50,
          max_price: 200,
          limit: 3,
        },
      },
    }),
  });

  const data = await res.json();

  // Shopify’s example parses the returned text payload as JSON.
  if (data?.result?.content?.[0]?.text) {
    data.result.content[0].text = JSON.parse(data.result.content[0].text);
  }

  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This is directly aligned with Shopify’s “search catalog” tutorial structure and parameters.

What you’re looking for in results: a product variant ID (you’ll pass it to checkout) and the shop domain.

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

Once you have:

shopDomain (example: your-store.myshopify.com)
variantId (a gid://shopify/ProductVariant/...)

Create checkout.js:

import 'dotenv/config';
import { randomUUID } from 'crypto';

const bearerToken = process.env.BEARER_TOKEN;

const shopDomain = 'YOUR_SHOP_DOMAIN.myshopify.com';
const variantId = 'gid://shopify/ProductVariant/1234567890';

async function main() {
  const res = await fetch(`https://${shopDomain}/api/ucp/mcp`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'create_checkout',
        arguments: {
          _meta: {
            ucp: {
              // Platform profile is required by UCP MCP binding for negotiation/versioning.
              profile: 'https://agent.example/profiles/shopping-agent.json',
            },
          },
          checkout: {
            idempotency_key: randomUUID(),
            currency: 'USD',
            line_items: [{ quantity: 1, item: { id: variantId } }],
            buyer: { email: 'buyer@example.com' },
          },
        },
      },
    }),
  });

  const data = await res.json();
  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This follows Shopify’s “complete checkout” tutorial and UCP’s MCP requirement that _meta.ucp.profile is included for every tool invocation.

4) Update + complete checkout (status-driven)

Shopify describes the flow as: create → update until ready → complete when status becomes ready_for_complete.

Two important gotchas from Shopify:

Checkout updates replace the whole checkout state—if you omit fields, they’re removed.
Sometimes the checkout returns requires_escalation and provides a continue_url (meaning: hand off to embedded/trusted UI).

In practice your agent loop looks like:

create_checkout
if status === incomplete → update_checkout with missing info
if status === requires_escalation → open the continue_url in embedded checkout UI
if status === ready_for_complete → complete_checkout

(Shopify’s tutorial includes example payloads for complete_checkout and the intermediate update steps.)

Shopify is building the foundation for agentic commerce.

Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate.

It’s open by default, so platforms and agents can use UCP to start transacting… pic.twitter.com/Gs0vzvfjra
— tobi lutke (@tobi) January 11, 2026

What Shopify merchants should do this week to adapt quickly?

Audit product data like an agent would
- Can a bot pick the right variant from your descriptions?
- Are shipping/returns explicit and consistent?
Create 2–3 “AOV plays” that are easy for an agent to apply
- “Free shipping over $X”
- “Bundle discount”
- “Add-on with the top 3 products”
Decide your strategy
- If you want quick wins: build an on-site agent that uses Shopify’s UCP-compliant MCP tools.
- If you want distribution via Google AI surfaces: start with Google’s UCP guide and required profile/onboarding steps.

🚀 Ready to make your store AI and Agent Ready?

The shift to Agentic Commerce is technical and moves fast. While the potential for revenue is huge, implementing UCP and MCP protocols correctly requires deep technical understanding.

You don't have to figure this out alone.

If you need someone to architect and build a UCP integration for your Shopify store (or any e-commerce platform), I can help you turn this new technology into a competitive advantage.

🌐 See what I build: tahmid.space
🤝 Specific questions or need a consultation? Connect with me on LinkedIn

Agentic Commerce for Shopify merchants

Tahmid Bin Taslim Rafi — Tue, 03 Feb 2026 07:14:31 +0000

If you run a Shopify store, you are entering a new phase of e-commerce where "SEO" (Search Engine Optimization) is being overtaken by "AEO" (AI Engine Optimization).

Millions of shoppers are now using AI assistants to find products, but the journey usually breaks at the most critical moment: checkout or transaction.

What the f*** is UCP actually?

Technically, UCP is a standard. Commercially, it is the universal translator between your Shopify store and the AI world. It handles three critical things:

The Handshake (Discovery): Your store tells the AI, "I am open for business, and here is exactly what I can do." This ensures the AI knows you are a trusted merchant, not just another random website.
The Actions (Capabilities): These are the "verbs" of commerce. Instead of just reading text, the AI can trigger real business logic: Checkout, Check Inventory, Apply Discount, or Link Identity. It turns a conversation into a transaction.
The Connection (Bindings): Whether the customer is on WhatsApp, a Google Search AI result, or a voice assistant, UCP ensures the transaction works the same way. It maps these commercial actions 1:1 to modern tools (like MCP) so you can build once and sell everywhere.

For the technical folks (The Specs):

Discovery & negotiation: Agents and merchants “handshake” on what each supports (versions + capabilities).
Capabilities (think: verbs): e.g., Checkout, Order Management, Identity Linking, plus extensions (discounts, fulfillment, consent, etc.).
Bindings / transports: The same capability can be invoked over HTTP/REST, MCP (Model Context Protocol) tools, or A2A—UCP maps capabilities 1:1 to MCP tools.

A quick mental model:

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Once agents can reliably identify:

buyer intent (“I need a crewneck sweater, sustainable, ships to US”),
variant constraints,
shipping/returns requirements,

…you can shape what the agent recommends:

Bundles (“sweater + care kit”)
Threshold incentives (“free shipping over $X”)
Smart add-ons (size/compatibility safe cross-sell)
Time-bounded offers surfaced at decision time

UCP supports extensions (e.g., discount/fulfillment extending checkout) in the protocol itself.

Now I want this, how?

There are two practical paths:

Path A — Merchant checklist (no-code / low-code)

This is how most Shopify merchants should start:

Make product data agent-friendly
Clean titles, consistent variants, accurate inventory
Strong shipping/returns policies
Rich attributes (materials, sizing, compatibility) so agents can filter accurately
Enable fast, reliable checkout behaviors
Make sure checkout works smoothly end-to-end (especially shipping rates + payment methods).
Keep discount rules predictable (agents don’t handle weird edge cases well).
If you want Google AI surfaces: follow Google’s UCP onboarding guidance
Google’s guide positions UCP as “turn AI interactions into instant sales” and provides an implementation/onboarding path (including business profile + capability negotiation).

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

Shopify provides MCP servers that are UCP-compliant, covering discovery, checkout, and orders.
This is the fastest “developer path” to a working demo that can later become:

an on-site AI concierge,
a WhatsApp/LINE assistant,
a support + reorder agent,
a partner integration.

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

Below is a minimal, beginner-friendly walkthrough using the same primitives Shopify documents:
Authenticate → Search catalog → Create checkout → (Update) → Complete.

0) Pre-requirements

Node.js installed on your pc
Access to Shopify Dev Dashboard (to generate credentials / tokens for agent APIs)
VsCode or any IDE

1) Get a bearer token (JWT) for Shopify agent APIs

Shopify’s agent docs: you generate a global access token that authenticates your agent with Catalog + Checkout MCP servers.

Create a .env in your local VsCode:

BEARER_TOKEN=your_jwt_token_here
CATALOG_ID=your_catalog_id_here

(Do not commit .env. Use .gitignore file to exclude .env.)

2) Search products (Catalog MCP → `search_global_products`)

Create search-catalog.js:

import 'dotenv/config';

const bearerToken = process.env.BEARER_TOKEN;
const catalogId = process.env.CATALOG_ID;

async function main() {
  const res = await fetch('https://discover.shopifyapps.com/global/mcp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'search_global_products',
        arguments: {
          saved_catalog: catalogId,
          query: 'I need a crewneck sweater',
          context: 'buyer looking for sustainable fashion',
          ships_to: 'US',
          min_price: 50,
          max_price: 200,
          limit: 3,
        },
      },
    }),
  });

  const data = await res.json();

  // Shopify’s example parses the returned text payload as JSON.
  if (data?.result?.content?.[0]?.text) {
    data.result.content[0].text = JSON.parse(data.result.content[0].text);
  }

  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This is directly aligned with Shopify’s “search catalog” tutorial structure and parameters.

What you’re looking for in results: a product variant ID (you’ll pass it to checkout) and the shop domain.

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

Once you have:

shopDomain (example: your-store.myshopify.com)
variantId (a gid://shopify/ProductVariant/...)

Create checkout.js:

import 'dotenv/config';
import { randomUUID } from 'crypto';

const bearerToken = process.env.BEARER_TOKEN;

const shopDomain = 'YOUR_SHOP_DOMAIN.myshopify.com';
const variantId = 'gid://shopify/ProductVariant/1234567890';

async function main() {
  const res = await fetch(`https://${shopDomain}/api/ucp/mcp`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'create_checkout',
        arguments: {
          _meta: {
            ucp: {
              // Platform profile is required by UCP MCP binding for negotiation/versioning.
              profile: 'https://agent.example/profiles/shopping-agent.json',
            },
          },
          checkout: {
            idempotency_key: randomUUID(),
            currency: 'USD',
            line_items: [{ quantity: 1, item: { id: variantId } }],
            buyer: { email: 'buyer@example.com' },
          },
        },
      },
    }),
  });

  const data = await res.json();
  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This follows Shopify’s “complete checkout” tutorial and UCP’s MCP requirement that _meta.ucp.profile is included for every tool invocation.

4) Update + complete checkout (status-driven)

Shopify describes the flow as: create → update until ready → complete when status becomes ready_for_complete.

Two important gotchas from Shopify:

Checkout updates replace the whole checkout state—if you omit fields, they’re removed.
Sometimes the checkout returns requires_escalation and provides a continue_url (meaning: hand off to embedded/trusted UI).

In practice your agent loop looks like:

create_checkout
if status === incomplete → update_checkout with missing info
if status === requires_escalation → open the continue_url in embedded checkout UI
if status === ready_for_complete → complete_checkout

(Shopify’s tutorial includes example payloads for complete_checkout and the intermediate update steps.)

Shopify is building the foundation for agentic commerce.

Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate.

It’s open by default, so platforms and agents can use UCP to start transacting… pic.twitter.com/Gs0vzvfjra
— tobi lutke (@tobi) January 11, 2026

What Shopify merchants should do this week to adapt quickly?

Audit product data like an agent would
- Can a bot pick the right variant from your descriptions?
- Are shipping/returns explicit and consistent?
Create 2–3 “AOV plays” that are easy for an agent to apply
- “Free shipping over $X”
- “Bundle discount”
- “Add-on with the top 3 products”
Decide your strategy
- If you want quick wins: build an on-site agent that uses Shopify’s UCP-compliant MCP tools.
- If you want distribution via Google AI surfaces: start with Google’s UCP guide and required profile/onboarding steps.

🚀 Ready to make your store AI and Agent Ready?

The shift to Agentic Commerce is technical and moves fast. While the potential for revenue is huge, implementing UCP and MCP protocols correctly requires deep technical understanding.

You don't have to figure this out alone.

If you need someone to architect and build a UCP integration for your Shopify store (or any e-commerce platform), I can help you turn this new technology into a competitive advantage.

🌐 See what I build: tahmid.space
🤝 Specific questions or need a consultation? Connect with me on LinkedIn

Universal Commerce Protocol (UCP) for Shopify merchants

Tahmid Bin Taslim Rafi — Tue, 03 Feb 2026 07:11:41 +0000

If you run a Shopify store, you are entering a new phase of e-commerce where "SEO" (Search Engine Optimization) is being overtaken by "AEO" (AI Engine Optimization).

Millions of shoppers are now using AI assistants to find products, but the journey usually breaks at the most critical moment: checkout or transaction.

What the f*** is UCP actually?

Technically, UCP is a standard. Commercially, it is the universal translator between your Shopify store and the AI world. It handles three critical things:

The Handshake (Discovery): Your store tells the AI, "I am open for business, and here is exactly what I can do." This ensures the AI knows you are a trusted merchant, not just another random website.
The Actions (Capabilities): These are the "verbs" of commerce. Instead of just reading text, the AI can trigger real business logic: Checkout, Check Inventory, Apply Discount, or Link Identity. It turns a conversation into a transaction.
The Connection (Bindings): Whether the customer is on WhatsApp, a Google Search AI result, or a voice assistant, UCP ensures the transaction works the same way. It maps these commercial actions 1:1 to modern tools (like MCP) so you can build once and sell everywhere.

For the technical folks (The Specs):

Discovery & negotiation: Agents and merchants “handshake” on what each supports (versions + capabilities).
Capabilities (think: verbs): e.g., Checkout, Order Management, Identity Linking, plus extensions (discounts, fulfillment, consent, etc.).
Bindings / transports: The same capability can be invoked over HTTP/REST, MCP (Model Context Protocol) tools, or A2A—UCP maps capabilities 1:1 to MCP tools.

A quick mental model:

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Once agents can reliably identify:

buyer intent (“I need a crewneck sweater, sustainable, ships to US”),
variant constraints,
shipping/returns requirements,

…you can shape what the agent recommends:

Bundles (“sweater + care kit”)
Threshold incentives (“free shipping over $X”)
Smart add-ons (size/compatibility safe cross-sell)
Time-bounded offers surfaced at decision time

UCP supports extensions (e.g., discount/fulfillment extending checkout) in the protocol itself.

Now I want this, how?

There are two practical paths:

Path A — Merchant checklist (no-code / low-code)

This is how most Shopify merchants should start:

Make product data agent-friendly
Clean titles, consistent variants, accurate inventory
Strong shipping/returns policies
Rich attributes (materials, sizing, compatibility) so agents can filter accurately
Enable fast, reliable checkout behaviors
Make sure checkout works smoothly end-to-end (especially shipping rates + payment methods).
Keep discount rules predictable (agents don’t handle weird edge cases well).
If you want Google AI surfaces: follow Google’s UCP onboarding guidance
Google’s guide positions UCP as “turn AI interactions into instant sales” and provides an implementation/onboarding path (including business profile + capability negotiation).

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

Shopify provides MCP servers that are UCP-compliant, covering discovery, checkout, and orders.
This is the fastest “developer path” to a working demo that can later become:

an on-site AI concierge,
a WhatsApp/LINE assistant,
a support + reorder agent,
a partner integration.

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

Below is a minimal, beginner-friendly walkthrough using the same primitives Shopify documents:
Authenticate → Search catalog → Create checkout → (Update) → Complete.

0) Pre-requirements

Node.js installed on your pc
Access to Shopify Dev Dashboard (to generate credentials / tokens for agent APIs)
VsCode or any IDE

1) Get a bearer token (JWT) for Shopify agent APIs

Shopify’s agent docs: you generate a global access token that authenticates your agent with Catalog + Checkout MCP servers.

Create a .env in your local VsCode:

BEARER_TOKEN=your_jwt_token_here
CATALOG_ID=your_catalog_id_here

(Do not commit .env. Use .gitignore file to exclude .env.)

2) Search products (Catalog MCP → `search_global_products`)

Create search-catalog.js:

import 'dotenv/config';

const bearerToken = process.env.BEARER_TOKEN;
const catalogId = process.env.CATALOG_ID;

async function main() {
  const res = await fetch('https://discover.shopifyapps.com/global/mcp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'search_global_products',
        arguments: {
          saved_catalog: catalogId,
          query: 'I need a crewneck sweater',
          context: 'buyer looking for sustainable fashion',
          ships_to: 'US',
          min_price: 50,
          max_price: 200,
          limit: 3,
        },
      },
    }),
  });

  const data = await res.json();

  // Shopify’s example parses the returned text payload as JSON.
  if (data?.result?.content?.[0]?.text) {
    data.result.content[0].text = JSON.parse(data.result.content[0].text);
  }

  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This is directly aligned with Shopify’s “search catalog” tutorial structure and parameters.

What you’re looking for in results: a product variant ID (you’ll pass it to checkout) and the shop domain.

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

Once you have:

shopDomain (example: your-store.myshopify.com)
variantId (a gid://shopify/ProductVariant/...)

Create checkout.js:

import 'dotenv/config';
import { randomUUID } from 'crypto';

const bearerToken = process.env.BEARER_TOKEN;

const shopDomain = 'YOUR_SHOP_DOMAIN.myshopify.com';
const variantId = 'gid://shopify/ProductVariant/1234567890';

async function main() {
  const res = await fetch(`https://${shopDomain}/api/ucp/mcp`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'create_checkout',
        arguments: {
          _meta: {
            ucp: {
              // Platform profile is required by UCP MCP binding for negotiation/versioning.
              profile: 'https://agent.example/profiles/shopping-agent.json',
            },
          },
          checkout: {
            idempotency_key: randomUUID(),
            currency: 'USD',
            line_items: [{ quantity: 1, item: { id: variantId } }],
            buyer: { email: 'buyer@example.com' },
          },
        },
      },
    }),
  });

  const data = await res.json();
  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This follows Shopify’s “complete checkout” tutorial and UCP’s MCP requirement that _meta.ucp.profile is included for every tool invocation.

4) Update + complete checkout (status-driven)

Shopify describes the flow as: create → update until ready → complete when status becomes ready_for_complete.

Two important gotchas from Shopify:

Checkout updates replace the whole checkout state—if you omit fields, they’re removed.
Sometimes the checkout returns requires_escalation and provides a continue_url (meaning: hand off to embedded/trusted UI).

In practice your agent loop looks like:

create_checkout
if status === incomplete → update_checkout with missing info
if status === requires_escalation → open the continue_url in embedded checkout UI
if status === ready_for_complete → complete_checkout

(Shopify’s tutorial includes example payloads for complete_checkout and the intermediate update steps.)

Shopify is building the foundation for agentic commerce.

Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate.

It’s open by default, so platforms and agents can use UCP to start transacting… pic.twitter.com/Gs0vzvfjra
— tobi lutke (@tobi) January 11, 2026

What Shopify merchants should do this week to adapt quickly?

Audit product data like an agent would
- Can a bot pick the right variant from your descriptions?
- Are shipping/returns explicit and consistent?
Create 2–3 “AOV plays” that are easy for an agent to apply
- “Free shipping over $X”
- “Bundle discount”
- “Add-on with the top 3 products”
Decide your strategy
- If you want quick wins: build an on-site agent that uses Shopify’s UCP-compliant MCP tools.
- If you want distribution via Google AI surfaces: start with Google’s UCP guide and required profile/onboarding steps.

🚀 Ready to make your store AI and Agent Ready?

The shift to Agentic Commerce is technical and moves fast. While the potential for revenue is huge, implementing UCP and MCP protocols correctly requires deep technical understanding.

You don't have to figure this out alone.

If you need someone to architect and build a UCP integration for your Shopify store (or any e-commerce platform), I can help you turn this new technology into a competitive advantage.

🌐 See what I build: tahmid.space
🤝 Specific questions or need a consultation? Connect with me on LinkedIn

Universal Commerce Protocol (UCP) for Shopify merchants

Tahmid Bin Taslim Rafi — Tue, 03 Feb 2026 06:53:03 +0000

If you run a Shopify store, you are entering a new phase of e-commerce where "SEO" (Search Engine Optimization) is being overtaken by "AEO" (AI Engine Optimization).

Millions of shoppers are now using AI assistants to find products, but the journey usually breaks at the most critical moment: checkout or transaction.

What the f*** is UCP actually?

Technically, UCP is a standard. Commercially, it is the universal translator between your Shopify store and the AI world. It handles three critical things:

The Handshake (Discovery): Your store tells the AI, "I am open for business, and here is exactly what I can do." This ensures the AI knows you are a trusted merchant, not just another random website.
The Actions (Capabilities): These are the "verbs" of commerce. Instead of just reading text, the AI can trigger real business logic: Checkout, Check Inventory, Apply Discount, or Link Identity. It turns a conversation into a transaction.
The Connection (Bindings): Whether the customer is on WhatsApp, a Google Search AI result, or a voice assistant, UCP ensures the transaction works the same way. It maps these commercial actions 1:1 to modern tools (like MCP) so you can build once and sell everywhere.

For the technical folks (The Specs):

Discovery & negotiation: Agents and merchants “handshake” on what each supports (versions + capabilities).
Capabilities (think: verbs): e.g., Checkout, Order Management, Identity Linking, plus extensions (discounts, fulfillment, consent, etc.).
Bindings / transports: The same capability can be invoked over HTTP/REST, MCP (Model Context Protocol) tools, or A2A—UCP maps capabilities 1:1 to MCP tools.

A quick mental model:

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Once agents can reliably identify:

buyer intent (“I need a crewneck sweater, sustainable, ships to US”),
variant constraints,
shipping/returns requirements,

…you can shape what the agent recommends:

Bundles (“sweater + care kit”)
Threshold incentives (“free shipping over $X”)
Smart add-ons (size/compatibility safe cross-sell)
Time-bounded offers surfaced at decision time

UCP supports extensions (e.g., discount/fulfillment extending checkout) in the protocol itself.

Now I want this, how?

There are two practical paths:

Path A — Merchant checklist (no-code / low-code)

This is how most Shopify merchants should start:

Make product data agent-friendly
Clean titles, consistent variants, accurate inventory
Strong shipping/returns policies
Rich attributes (materials, sizing, compatibility) so agents can filter accurately
Enable fast, reliable checkout behaviors
Make sure checkout works smoothly end-to-end (especially shipping rates + payment methods).
Keep discount rules predictable (agents don’t handle weird edge cases well).
If you want Google AI surfaces: follow Google’s UCP onboarding guidance
Google’s guide positions UCP as “turn AI interactions into instant sales” and provides an implementation/onboarding path (including business profile + capability negotiation).

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

Shopify provides MCP servers that are UCP-compliant, covering discovery, checkout, and orders.
This is the fastest “developer path” to a working demo that can later become:

an on-site AI concierge,
a WhatsApp/LINE assistant,
a support + reorder agent,
a partner integration.

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

Below is a minimal, beginner-friendly walkthrough using the same primitives Shopify documents:
Authenticate → Search catalog → Create checkout → (Update) → Complete.

0) Pre-requirements

Node.js installed on your pc
Access to Shopify Dev Dashboard (to generate credentials / tokens for agent APIs)
VsCode or any IDE

1) Get a bearer token (JWT) for Shopify agent APIs

Shopify’s agent docs: you generate a global access token that authenticates your agent with Catalog + Checkout MCP servers.

Create a .env in your local VsCode:

BEARER_TOKEN=your_jwt_token_here
CATALOG_ID=your_catalog_id_here

(Do not commit .env. Use .gitignore file to exclude .env.)

2) Search products (Catalog MCP → `search_global_products`)

Create search-catalog.js:

import 'dotenv/config';

const bearerToken = process.env.BEARER_TOKEN;
const catalogId = process.env.CATALOG_ID;

async function main() {
  const res = await fetch('https://discover.shopifyapps.com/global/mcp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'search_global_products',
        arguments: {
          saved_catalog: catalogId,
          query: 'I need a crewneck sweater',
          context: 'buyer looking for sustainable fashion',
          ships_to: 'US',
          min_price: 50,
          max_price: 200,
          limit: 3,
        },
      },
    }),
  });

  const data = await res.json();

  // Shopify’s example parses the returned text payload as JSON.
  if (data?.result?.content?.[0]?.text) {
    data.result.content[0].text = JSON.parse(data.result.content[0].text);
  }

  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This is directly aligned with Shopify’s “search catalog” tutorial structure and parameters.

What you’re looking for in results: a product variant ID (you’ll pass it to checkout) and the shop domain.

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

Once you have:

shopDomain (example: your-store.myshopify.com)
variantId (a gid://shopify/ProductVariant/...)

Create checkout.js:

import 'dotenv/config';
import { randomUUID } from 'crypto';

const bearerToken = process.env.BEARER_TOKEN;

const shopDomain = 'YOUR_SHOP_DOMAIN.myshopify.com';
const variantId = 'gid://shopify/ProductVariant/1234567890';

async function main() {
  const res = await fetch(`https://${shopDomain}/api/ucp/mcp`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${bearerToken}`,
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      method: 'tools/call',
      id: 1,
      params: {
        name: 'create_checkout',
        arguments: {
          _meta: {
            ucp: {
              // Platform profile is required by UCP MCP binding for negotiation/versioning.
              profile: 'https://agent.example/profiles/shopping-agent.json',
            },
          },
          checkout: {
            idempotency_key: randomUUID(),
            currency: 'USD',
            line_items: [{ quantity: 1, item: { id: variantId } }],
            buyer: { email: 'buyer@example.com' },
          },
        },
      },
    }),
  });

  const data = await res.json();
  console.log(JSON.stringify(data, null, 2));
}

main().catch(console.error);

This follows Shopify’s “complete checkout” tutorial and UCP’s MCP requirement that _meta.ucp.profile is included for every tool invocation.

4) Update + complete checkout (status-driven)

Shopify describes the flow as: create → update until ready → complete when status becomes ready_for_complete.

Two important gotchas from Shopify:

Checkout updates replace the whole checkout state—if you omit fields, they’re removed.
Sometimes the checkout returns requires_escalation and provides a continue_url (meaning: hand off to embedded/trusted UI).

In practice your agent loop looks like:

create_checkout
if status === incomplete → update_checkout with missing info
if status === requires_escalation → open the continue_url in embedded checkout UI
if status === ready_for_complete → complete_checkout

(Shopify’s tutorial includes example payloads for complete_checkout and the intermediate update steps.)

Shopify is building the foundation for agentic commerce.

Universal Commerce Protocol, which we co-developed with Google, is now live. UCP will make it faster for agents and retailers to integrate.

It’s open by default, so platforms and agents can use UCP to start transacting… pic.twitter.com/Gs0vzvfjra
— tobi lutke (@tobi) January 11, 2026

What Shopify merchants should do this week to adapt quickly?

Audit product data like an agent would
- Can a bot pick the right variant from your descriptions?
- Are shipping/returns explicit and consistent?
Create 2–3 “AOV plays” that are easy for an agent to apply
- “Free shipping over $X”
- “Bundle discount”
- “Add-on with the top 3 products”
Decide your strategy
- If you want quick wins: build an on-site agent that uses Shopify’s UCP-compliant MCP tools.
- If you want distribution via Google AI surfaces: start with Google’s UCP guide and required profile/onboarding steps.

🚀 Ready to make your store AI and Agent Ready?

The shift to Agentic Commerce is technical and moves fast. While the potential for revenue is huge, implementing UCP and MCP protocols correctly requires deep technical understanding.

You don't have to figure this out alone.

If you need someone to architect and build a UCP integration for your Shopify store (or any e-commerce platform), I can help you turn this new technology into a competitive advantage.

🌐 See what I build: tahmid.space
🤝 Specific questions or need a consultation? Connect with me on LinkedIn

Kubernetes Ingress-NGINX Is Retiring in March 2026

Tahmid Bin Taslim Rafi — Tue, 20 Jan 2026 09:36:23 +0000

TL;DR: If you run ingress-nginx in production, treat March 2026 as a hard deadline. After retirement, you should not expect new releases or security fixes. Start migrating to Kubernetes Gateway API (or another supported ingress/gateway implementation) now.

Quick checklist

List every Ingress + annotations
Identify snippet usage
Install Gateway API CRDs
Choose a Gateway API implementation
Convert 1 low-risk service first
Run parallel + test
Cut over with rollback ready
Repeat service-by-service

Why you should care?

If your cluster’s north–south traffic depends on Ingress-NGINX, you’re likely relying on:

TLS termination
path/host routing
HTTP header rewrites
rate limits / auth integrations
“magic” annotation behaviors

Retirement means: your current setup may keep running… until a CVE, a Kubernetes upgrade, or a cloud load balancer change turns it into a pager storm.

Ingress vs Gateway API

Ingress was a simple contract:

one resource (Ingress)
annotations for “advanced” behaviors
controller-specific knobs

Gateway API splits responsibilities and makes traffic management portable across implementations:

GatewayClass — which controller provides gateway capability
Gateway — the actual data-plane entry point (listeners, TLS, addresses)
HTTPRoute / TCPRoute / GRPCRoute — routing rules
policies (e.g., TLS policies) — portable behaviors that don’t require annotations

How Resources are connected?

Migration plan

Step 0 — Inventory what you’re actually using

Most Ingress-NGINX clusters are annotation-heavy.

Run these to find your “hidden complexity”:

# List all ingresses and controllers
kubectl get ingress -A

# Show every annotation in ingresses (quick scan)
kubectl get ingress -A -o json | jq -r '
  .items[] |
  "\(.metadata.namespace)/\(.metadata.name)\t" +
  ((.metadata.annotations // {}) | to_entries | map("\(.key)=\(.value)") | join("; "))
'

# Find the scary ones (snippets, custom templates)
kubectl get ingress -A -o json | jq -r '
  .items[] |
  select((.metadata.annotations // {}) | has("nginx.ingress.kubernetes.io/server-snippet")
  or has("nginx.ingress.kubernetes.io/configuration-snippet")) |
  "\(.metadata.namespace)/\(.metadata.name)"
'

Make a list of:

TLS behavior (single cert? wildcard? per-host?)
rewrites and redirects
auth (OIDC, basic auth, external auth)
rate-limits
custom NGINX snippets

Rule: the more snippets you have, the more you must treat this as an application migration—not just YAML changes.

Step 1 — Install Gateway API CRDs

You can install the Gateway API CRDs via your preferred method (Helm / kustomize / manifests), but don’t attach production traffic yet.

Verify CRDs exist:

kubectl get crd | grep gateway
kubectl api-resources | grep -E 'gateway|httproute|tcproute|grpcroute'

Step 2 — Pick an implementation

Gateway API is a spec. You still need an implementation.

Common choices:

Managed gateways (cloud-provider)
Service mesh gateways
Dedicated gateway controllers

Pick based on:

features you need (TCP/UDP? WAF? mTLS?)
operational complexity
observability and rate-limiting
support and upgrade story

Step 3 — Convert one Ingress

Let’s migrate a typical Ingress:

Before: Ingress-NGINX

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: app
  namespace: prod
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  ingressClassName: nginx
  tls:
  - hosts:
    - app.example.com
    secretName: app-tls
  rules:
  - host: app.example.com
    http:
      paths:
      - path: /?(.*)
        pathType: Prefix
        backend:
          service:
            name: app-svc
            port:
              number: 80

After: Gateway + HTTPRoute

Note: the exact fields can vary slightly by implementation.

Gateway

apiVersion: gateway.networking.k8s.io/v1
kind: Gateway
metadata:
  name: prod-gateway
  namespace: prod
spec:
  gatewayClassName: example-gatewayclass
  listeners:
  - name: https
    protocol: HTTPS
    port: 443
    hostname: app.example.com
    tls:
      mode: Terminate
      certificateRefs:
      - kind: Secret
        name: app-tls

HTTPRoute

apiVersion: gateway.networking.k8s.io/v1
kind: HTTPRoute
metadata:
  name: app-route
  namespace: prod
spec:
  parentRefs:
  - name: prod-gateway
  hostnames:
  - app.example.com
  rules:
  - matches:
    - path:
        type: PathPrefix
        value: /
    backendRefs:
    - name: app-svc
      port: 80

Rewrite behavior: what to do instead of `rewrite-target`

Ingress-NGINX had lots of rewrite tricks.

In Gateway API, you’ll typically use filters (implementation support varies):

apiVersion: gateway.networking.k8s.io/v1
kind: HTTPRoute
metadata:
  name: app-route
  namespace: prod
spec:
  parentRefs:
  - name: prod-gateway
  hostnames:
  - app.example.com
  rules:
  - matches:
    - path:
        type: PathPrefix
        value: /api
    filters:
    - type: URLRewrite
      urlRewrite:
        path:
          type: ReplacePrefixMatch
          replacePrefixMatch: /
    backendRefs:
    - name: app-svc
      port: 80

If your rewrite logic depends on regex capture groups (/$1), you may need to:

refactor routes
move logic into the app
or pick an implementation that supports your needs

Step 4 — Run both in parallel

Option A: Separate DNS names (cleanest)

Keep app.example.com on Ingress-NGINX
Create app-gw.example.com on Gateway
Test, load-test, verify metrics
Switch DNS once stable

Option B: Weighted traffic (advanced)

Some gateways support traffic splitting between backends or routes.

If supported, roll out progressively:

1% → 10% → 50% → 100%

Step 5 — Validate

Functional checks

# TLS and SNI
curl -vk https://app.example.com/

# Host routing
curl -H 'Host: app.example.com' https://<gateway-lb-ip>/

# Path behavior
curl -I https://app.example.com/api/health

Load and latency checks

p95/p99 latency
error rate (4xx/5xx)
upstream timeouts
connection reuse

Common pitfalls

Annotation-only features: Snippets and custom NGINX directives rarely translate 1:1.
Auth flows: External auth in NGINX may need a dedicated auth service or gateway plugin.
TLS edge cases: Wildcard certs + SNI + multiple hosts = test carefully.
Path matching differences: Prefix vs regex behaviors differ.
Observability: Make sure you have equivalent access logs, metrics, tracing.

Rollback plan

Keep Ingress-NGINX resources intact during migration.
Make DNS changes reversible.
Use low TTLs during cutover.
Maintain a “back to old gateway” runbook.

Rollback should be one command or one DNS change, not a 2-hour YAML surgery.

Agentic UI (A2UI + AG-UI) — Build UIs Your Agent Can Update in Real Time

Tahmid Bin Taslim Rafi — Thu, 08 Jan 2026 08:07:07 +0000

If you only ship a chat box, your agent will spend all its time describing interfaces instead of using them.

Agentic UI changes that. It lets agents drive real UI elements—forms, pickers, checklists, tables, charts, and confirmations—in real time.

This guide shows you how to build it using two key technologies:

A2UI: A declarative, updateable UI specification that agents can generate and stream
AG-UI: An event stream protocol connecting agent backends to client UIs

You'll also learn where MCP Apps (UI for tools) and A2A (agent-to-agent communication) fit into the ecosystem.

What Is Agentic UI?

Agentic UI enables agents to render, update, and react to UI state in real time—not just return text.

There are three main approaches:

Static UI: Hardcoded interfaces where agents only populate data
Declarative UI: Agents output UI blueprints (like A2UI) that clients render using trusted components
Generated UI: Agents output raw HTML/JSX—fast for prototyping but risky in production

Agentic UI typically refers to approach #2: declarative, component-based interfaces.

Why It Matters

Chat-only flows create friction:

Users type details one message at a time
Agents ask endless clarifying questions
The conversation becomes a worse version of a form

With agentic UI, agents can surface the right interface at the right moment. Users click instead of type, and you get structured input immediately.

Here's an example reservation flow powered by A2UI:

A2UI-style reservation interface: fewer chat turns, more structured input

How the Pieces Fit Together

Think of the agentic UI stack like this:

AG-UI handles the plumbing: events, streaming, tool calls, and UI updates
A2UI defines the payload format: UI blueprints and incremental patches
MCP provides tool access; MCP Apps can include tool-specific UI in sandboxed HTML
A2A enables agent-to-agent communication across systems

This diagram illustrates the complete data flow from agent to UI to tools:

Complete flow: agents stream UI and state updates; clients render and send user actions back

Use this checklist when planning your implementation:

Essential components for production-ready agent-driven UI: rendering, actions, state, and safety

Quick Demo: Run A2UI Locally

See A2UI in action with this complete example using a Lit renderer and agent.

Prerequisites

Node.js v18 or higher
A Gemini API key

Installation

git clone https://github.com/google/a2ui.git
cd a2ui

export GEMINI_API_KEY="your_gemini_api_key_here"

cd samples/client/lit
npm install
npm run demo:all

Try These Prompts

"book a table for 2"
"find italian restaurants near me"
"i want 7pm tomorrow"

What to Observe

The UI adapts its structure based on user intent
Users interact through clicks and selections, not just text input
The interface updates incrementally as the agent processes requests

How A2UI Works Under the Hood

Unlike generated HTML, A2UI streams structured messages that reference a predefined component catalog. This approach prioritizes safety and consistency.

A2UI component catalog: agents select from trusted components instead of generating arbitrary markup

Core Message Types

Most A2UI applications use three fundamental message types:

surfaceUpdate: Defines component structure (IDs and specifications)
dataModelUpdate: Provides data bindings for components
beginRendering: Instructs the client to render the interface

Example: Building a Reservation Form

1. Define the Surface Structure

{
  "surfaceUpdate": {
    "surfaceId": "main",
    "components": [
      {
        "id": "title",
        "component": {
          "Text": {
            "text": { "literalString": "Book a table" },
            "usageHint": "h1"
          }
        }
      },
      {
        "id": "date",
        "component": {
          "DateTimeInput": {
            "label": { "literalString": "Date" },
            "value": { "path": "/reservation/date" },
            "enableDate": true
          }
        }
      },
      {
        "id": "time",
        "component": {
          "DateTimeInput": {
            "label": { "literalString": "Time" },
            "value": { "path": "/reservation/time" },
            "enableTime": true
          }
        }
      },
      {
        "id": "confirm",
        "component": {
          "Button": {
            "child": "confirmText",
            "action": { "name": "confirm_booking" }
          }
        }
      },
      {
        "id": "confirmText",
        "component": {
          "Text": {
            "text": { "literalString": "Confirm" }
          }
        }
      }
    ]
  }
}

2. Populate the Data Model

{
  "dataModelUpdate": {
    "surfaceId": "main",
    "contents": [
      {
        "key": "reservation",
        "valueMap": [
          { "key": "date", "valueString": "2026-01-10" },
          { "key": "time", "valueString": "19:00" }
        ]
      }
    ]
  }
}

3. Trigger Rendering

{
  "beginRendering": {
    "surfaceId": "main",
    "root": "title"
  }
}

Why This Beats Agent-Generated HTML

A2UI treats UI as data, which provides critical advantages:

The client maintains a catalog of vetted, trusted components
Agents can only request components from this approved catalog
Messages are declarative specifications, not executable code
Remote agents can't inject arbitrary markup or scripts

This architectural choice becomes essential when dealing with multi-agent systems or untrusted agent sources.

Quick Demo: Scaffold an AG-UI Application

AG-UI creates a unified event protocol that makes agents and UIs feel like a single cohesive system.

Create a New Project

npx create-ag-ui-app@latest
npm run dev

What AG-UI Provides

AG-UI gives you a standardized event stream for building:

Streaming text responses
Tool call handling
Real-time UI updates (including A2UI payloads)
Bidirectional agent-client communication

Minimal AG-UI Streaming Server

This pattern provides everything you need for a production application using Server-Sent Events (SSE).

// server.ts
import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

app.post("/run", async (req, res) => {
  // Configure SSE headers
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  // Helper function for sending events
  const send = (evt: any) => {
    res.write(`data: ${JSON.stringify(evt)}\n\n`);
  };

  // Start the agent run
  send({ type: "RunStarted", runId: crypto.randomUUID() });

  // Stream a text update
  send({ 
    type: "MessageDelta", 
    role: "assistant", 
    delta: "Finding options…" 
  });

  // Send an A2UI surface as a UI event
  send({
    type: "GenerativeUI",
    format: "a2ui",
    message: {
      surfaceUpdate: {
        surfaceId: "main",
        components: [
          {
            id: "title",
            component: {
              Text: { 
                text: { literalString: "Pick a time" }, 
                usageHint: "h2" 
              }
            }
          }
        ]
      }
    }
  });

  // Complete the run
  send({ type: "RunFinished" });
  res.end();
});

app.listen(3030, () => console.log("SSE server running on :3030"));

Key Takeaways

AG-UI uses an event-driven architecture
Transport can be SSE (shown here) or WebSockets
A2UI messages travel inside AG-UI events
Events are structured, typed, and loggable

Closing the Loop: Handling User Actions

Rendering UI is straightforward. The real challenge is processing user input cleanly.

The Complete Interaction Cycle

Agent streams a surface definition
User interacts with UI elements
Client emits typed user action events
Agent processes actions and patches UI incrementally

Why Incremental Updates Matter

When you send only the changes instead of rebuilding the entire interface, the UI remains stable and responsive. The agent doesn't waste tokens or bandwidth resending unchanged components.

A2UI vs MCP Apps: When to Use Each

Both technologies are valuable—they solve different problems.

MCP Apps

Best for: Tool-specific interfaces that need custom functionality

Tools return text/html content
UI renders in sandboxed iframes for security
Ideal when a tool needs its own specialized mini-application
Each tool controls its own interface design

A2UI

Best for: Native-feeling interfaces integrated into your main application

Agents send blueprints referencing your component catalog
UI matches your application's styling, accessibility, and behavior
Ideal when the agent needs to orchestrate your product's native UI
Maintains consistent user experience across all agent interactions

Rule of thumb: If your UI must feel like a native part of your application, choose A2UI. If you need isolated, tool-specific UI panels, use MCP Apps.

Trade-offs to Consider

Advantages

Faster user flows: Reduces back-and-forth messaging by surfacing the right interface at the right time

Enhanced safety: Declarative components are safer than agent-generated HTML

Better accessibility: Native components inherit your existing accessibility implementation

Improved observability: Event-based architecture makes logging and debugging straightforward

Challenges

Component maintenance: You need to build and maintain a component catalog

Schema validation: Requires robust validation and graceful fallback handling

Agent prompt engineering: Agents need clear guidelines on when and how to use UI

Runtime complexity: You're building a binding system, action handlers, and state synchronization

Getting Started

The best way to learn is to build. Start with the demos above, then:

Define your core component catalog based on your most common UI patterns
Implement a minimal AG-UI event stream
Add A2UI message handling for your key use cases
Iterate based on real user interactions

The agent-driven UI paradigm is still evolving, but the foundation is solid. These protocols give you the building blocks to create interfaces that feel both intelligent and responsive.

Resources

Top 15 React Component Libraries to Use in 2026

Tahmid Bin Taslim Rafi — Sat, 20 Dec 2025 05:05:31 +0000

React continues to be one of the most popular frameworks for building robust user interfaces — and a big reason why is the ecosystem of component libraries that saves you from rewriting basic UI patterns like buttons, modals, navigation, and forms from scratch.

In this guide, we’ll explore the top React component libraries for 2026, what makes them valuable, and when to choose each one. This is based on the latest ecosystem analysis from Builder.io’s 2026 roundup.

What Is a React Component Library?

A React component library is a curated collection of pre-built UI elements — often with styling, accessibility, themes, and responsive behavior included — that you can import and reuse in your apps. These reduce development time and help enforce consistency across your UI.

Why Component Libraries Matter

Boost productivity: No need to re-implement basic UI.
Consistency: Shared design language across your app.
Accessibility & performance: Many libraries ship accessible markup and optimized bundles out of the box.

Complete Design Systems

If you want a rich, professional UI set with strong documentation and components for almost every use case:

Material UI (MUI)

A full design system implementing Google’s Material Design — extensive component set with advanced tools like data grids.

Ant Design

Enterprise-ready UI library with advanced form support, data tables, and dashboard components — ideal for business apps.

Chakra UI

Developer-friendly with intuitive styling props, built-in accessibility, dark mode, and responsive utilities.

Tailwind CSS-Friendly Libraries

React libraries that pair beautifully with Tailwind CSS:

shadcn/ui

A copy-and-paste-ready component collection built with Tailwind and Radix primitives. You own the code, no dependency headaches.

Headless UI

Unstyled components with complete logic — you style everything using Tailwind classes.

DaisyUI

Adds semantic UI classes to Tailwind (e.g., btn, btn-primary) with multiple theme options.

Unstyled & Headless Libraries

These give behavior and accessibility without enforcing styles — great when you want full design control:

React Aria

Adobe’s accessibility-focused primitives handle keyboard navigation and ARIA behavior.

Radix UI

Low-level primitives (Dialog, Tooltip, Dropdown) that you style yourself and compose into design systems.

Base UI

Unstyled building blocks emphasizing accessibility and performance — works with Tailwind or plain CSS.

Rapid Prototyping Libraries

Libraries offering lots of ready-to-use components so you can ship quickly:

Mantine

100+ components + helpful hooks, form utilities, and theming — great for MVPs.

HeroUI

Beautiful default styles, smooth animations, dark mode support, and easy integration with modern stacks.

PrimeReact

Huge component catalog including charts, tables, and advanced widgets with themes and templates.

React-Admin

Turn REST/GraphQL APIs into admin dashboards with built-in authentication, layouts, and patterns.

Specialty Libraries

Sometimes you don’t need a full system — you just need dependable UI tools in specific niches:

React Bootstrap

Bootstrap components fully rewritten for React — perfect for migrating Bootstrap projects.

Semantic UI React

Natural, human-readable React components with intuitive HTML-like syntax.

How to Choose the Right Library

Here are some practical criteria for evaluating component libraries:

Factor	Why It Matters
Design fit	Will it match your brand style or require heavy overrides?
TypeScript support	Better IDE autocomplete and fewer runtime errors.
Bundle size	Smaller bundles = faster load times.
Accessibility	Built-in WCAG support reduces rework.
Maintenance & community	Frequent updates and responsive issues are crucial.

Before adopting anything, check its GitHub activity, issue responses, and how recent releases have been.

Bonus: Syncing Designs With Code

Bridging the gap between Figma designs and real React components is still a common challenge — many devs end up rewriting prototypes because generic code generators don’t match their component APIs.

Tools like Builder.io Fusion can generate React code that uses your actual component library, respects your import patterns, and even generates Storybook stories.

Final Thoughts

React’s ecosystem for component libraries is richer than ever in 2026. Whether you prefer opinionated design systems, unstyled primitives, or Tailwind-ready components, there’s a library that fits your stack — just evaluate against performance, accessibility, and long-term maintenance before you commit.

Happy building! 🚀

If you enjoyed this guide, smash that 💜 and share it with your frontend friends!

Next.js vs TanStack in 2025: A Practical Comparison

Tahmid Bin Taslim Rafi — Mon, 15 Dec 2025 12:00:00 +0000

Over the last decade, Next.js became the de facto full-stack React framework, praised for its integrated server rendering, routing conventions, and performance optimizations. In 2025, however, a new competitor has emerged from the creators of TanStack Query and Router: TanStack Start — a framework geared toward type safety, explicit architecture, and modern tooling. Many developers are re-evaluating their tooling decisions as both ecosystems evolve.

Below we explore the technical, developer-experience, and architectural trade-offs between these frameworks.

Community Sentiment and Adoption

Many developers express frustration with the increasing complexity of Next.js, particularly after the introduction of the App Router, React Server Components (RSC), and frequent large releases:

Next.js lost me with the constant changes and complexity. The benefits don’t justify the cognitive overload.

Concerns also include perceived coupling with Vercel and the mental overhead required to master Next.js conventions.

Meanwhile, developers adopting TanStack Start often highlight its:

Type safety and compile-time guarantees
Explicit routing and data contracts
Flexibility in deployment and toolchain

This shift reflects a broader desire for predictable developer experiences in full-stack JavaScript.

Architectural Overview

Next.js

Next.js features a server-first architecture that centers around:

File-based routing
Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR)
React Server Components (App Router) with client/server component boundaries
First-party optimizations for SEO and analytics

These features make Next.js suitable for content-heavy applications and SEO-driven sites.

TanStack Start

TanStack Start, on the other hand, is designed from the ground up on:

TanStack Router: a fully type-safe routing system
Vite for development server and build
Nitro for SSR and server functions
Explicit configuration for routes and server APIs

The philosophy prioritizes explicit code and type safety over conventions and “framework magic.”

Feature Comparison

Capability	Next.js	TanStack Start
File-based routing	Yes	Yes
Type-safe routing params	Partial	Yes (compile time)
Server components	Yes	Planned / leverage full-stack server functions
SSR & streaming	Yes	Yes
Server functions	Yes	Yes (integrated)
Framework abstractions	Opinionated	Explicit / less magic
Dev server speed	Integrated	Vite-powered (fast)
Deployment options	Vercel-first, others supported	Multiple presets (Vite/Nitro)

Sources for comparison data include official docs and community analyses.

Code Examples

Simple Route: Next.js

// app/page.tsx
export default function HomePage() {
  return <h1>Welcome to Next.js</h1>;
}

Simple Route: TanStack Start

// src/app/index.tsx
export default function HomePage() {
  return <h1>Welcome to TanStack Start</h1>;
}

Type-safe Routing in TanStack Router

With TanStack Router, routes and parameters are inferred at compile time:

import { createRouter, RouterProvider } from "@tanstack/router";

const router = createRouter({
  routeTree: rootRoute.addChildren([
    homeRoute,
    blogRoute,
  ])
});

This produces type-safe navigation and route parameters, reducing runtime errors. (blog.prototyp.digital)

Server Functions in TanStack Start

// src/app/api/hello.ts
export default function hello() {
  return new Response(JSON.stringify({ message: "Hello from server function" }));
}

Server functions run on the server and can be called from the client with full type safety. (blog.prototyp.digital)

Performance Metrics

Empirical benchmarks show that smaller, client-focused framework approaches (like TanStack Start with Vite) can yield faster reloads and leaner development builds compared to heavier server-centric frameworks. Specific metrics vary by workload, but developers report notable differences in bundle sizes and dev server speed. (lorenstew.art)

This example illustrates typical relative speeds during development. The actual performance will vary based on project size.

Deployment and Ecosystem

Next.js integrates deeply with Vercel and offers edge hosting, automated code splitting, and built-in optimizations. TanStack Start uses Nitro and Vite and supports many hosting providers with flexible presets. (prototyp.digital)

The trade-off here is between out-of-the-box opinionated optimizations (Next.js) and toolchain flexibility (TanStack Start).

Supporting Video

Below is a recent community comparison that walks through the developer experience side-by-side:

An Honest Review of TanStack vs Next.js by Ankita Kulkarni (YouTube)

Quote from a Thought Leader

John Resig (creator of jQuery) commented publicly on the benefits of TanStack Start:

“I’ve been using TanStack Start for a new project and it’s super good. The server functions completely replace the need for TRPC/GraphQL/REST, the middleware is composable and fully typed…” (InfoQ)

This highlights the shift toward built-in developer workflows and type safety.

Considerations and Trade-offs

This analysis acknowledges that:

Next.js remains strong for SEO, established conventions, and large ecosystems.
TanStack Start offers superior developer control, type safety, and Vite-first workflows.
Migration costs should be considered; many teams combine TanStack Query with Next.js rather than fully replacing their stack. (SaaS Path)

Conclusion

In 2025, TanStack Start and Router represent a compelling alternative for modern React developers seeking clarity, type safety, and predictable developer experience without heavy abstractions. Next.js continues to excel where its conventions and render optimizations align with project requirements.

The choice between Next.js and TanStack Start should be informed by project needs, team expertise, and long-term maintainability considerations, rather than tribal preferences.

What matters most is understanding the trade-offs and selecting the tool that best supports your engineering goals.

Prisma ORM v7 — What’s New & How to Migrate from v6 to v7

Tahmid Bin Taslim Rafi — Fri, 28 Nov 2025 07:22:05 +0000

The team behind Prisma officially released Prisma ORM 7.0.0 — and it brings major changes under the hood. If you’re currently on Prisma v6 (or older), upgrading can give you significant performance, developer-experience, and deployment benefits. In this article, I’ll walk you through what’s new in v7, why it matters, and a step-by-step migration guide to move your project from v6 → v7 safely.

What’s New in Prisma ORM v7

The v7 release is a major milestone for Prisma. Highlights:

Rust-free Prisma Client (default) — Prisma Client no longer depends on a Rust-based query engine. Instead, the core logic is now implemented in TypeScript/JavaScript. (Prisma)
Much smaller bundles + better performance — With v7: ~ 90% smaller bundle output, up to 3× faster query execution, and lower CPU/memory usage. Deployments (e.g. serverless, edge) become simpler and more robust. (Prisma)
Generated Client now lives in your source tree, not node_modules — Instead of hiding generated client code in node_modules, Prisma now outputs generated client code (and types) under your project source (e.g. src/generated/…). This helps build tools, watchers, bundlers to treat it like part of your app — improving DX. (Prisma)
New config file: prisma.config.ts (or similar) — Prisma moves configuration (schema paths, adapter settings, env variables, etc.) into a dedicated config file instead of scattered package.json or schema metadata. This brings more structure and flexibility. (Prisma)
Faster & leaner type generation / type checking — Prisma claims ~ 98% fewer types needed to evaluate a schema; ~ 45% fewer types for query evaluation; and ~ 70% faster full type-checks. (Prisma)
Better support for modern environments (E.g. ES Modules, edge, serverless, etc.) — v7 aims to make Prisma more compatible with ESM, bundlers, Cloudflare Workers / edge runtimes, monorepos, etc. (Prisma)
Ecosystem changes: driver adapters, database support, new Prisma Studio version, updated minimum Node/TypeScript versions, etc. (Prisma)

All together — v7 represents a strategic overhaul to make Prisma leaner, faster, more flexible, and more in tune with modern JS/TS / deployment ecosystems.

Why the Changes Matter (Especially for Medium-to-Large Projects)

If you are working on a non-trivial project (multiple models, relations, custom schema, serverless or edge deployment, bundlers, etc.), v7 makes a lot of sense:

Smaller bundle + no native binaries → simpler deployments, fewer compatibility headaches (important for serverless, edge, or bundler-based setups).
Generated code in source + new config → better maintainability, easier code reviews, version control, CI/CD, and clearer project structure.
Faster type-checking & leaner types → smoother developer experience, especially with large schemas or frequent changes.
Broader ecosystem support (ESM, adapter-based drivers, modern runtime environments) → future-proofing your codebase and easier adoption of new deployment targets.
Less overhead for teams: easier collaboration, simpler onboarding, fewer environment assumptions (no Rust, no binary engine dependencies).

If you build a complicated schema — e.g. many models, relations, custom logic — or target serverless/edge, v7 is a solid win.

Migration Guide: From Prisma v6 → v7

Here’s a recommended step-by-step migration path to upgrade your project from Prisma v6 to Prisma v7. Adapt to your project’s structure (directory layout, TS/JS, build tools, etc.).

1. Update dependencies

npm install @prisma/client@7 prisma@7 --save
# or using yarn/pnpm

You need to bump both prisma and @prisma/client to version 7. (Prisma)

2. Update Prisma schema / generator block

In your schema.prisma, update the generator client block. For example, change from something like (v6-style):

generator client {
  provider      = "prisma-client-js"
  engineType    = "binary"
  output        = "./generated"
}

to the new default for v7:

generator client {
  provider = "prisma-client"
  // optional: you can omit output (uses default), or define custom output dir
}

Depending on your preferences, you may also explicitly set an output path. (Medium)

NOTE: Because Prisma v7 changes how the generated client is used, the previous import path (import { PrismaClient } from "@prisma/client") may no longer work out-of-the-box if you use a custom output directory. In that case, you need to import from the generated folder (e.g. import { PrismaClient } from "@/generated/prisma/client" or similar). (GitHub)

3. Create (or migrate to) new config file

Prisma v7 introduces a dedicated config file (e.g. prisma.config.ts, or .config/prisma.ts). Use it to configure schema paths, environment variables, driver adapters, seeds, etc. This centralizes configuration in one place instead of scattering it. (Prisma)

Here’s a minimal example (TypeScript):

// prisma.config.ts
import { defineConfig, env } from "prisma/config";
import path from "path";

export default defineConfig({
  engine: "classic",  // or default, depending on what you need
  datasource: {
    url: env("DATABASE_URL"),
  },
  schema: path.join("prisma", "schema.prisma"),
  // other config options if needed
});

If you use environment variables (e.g. via .env), note that Prisma CLI no longer automatically loads .env by default — you may need to load them manually (e.g. with dotenv) before running CLI commands, or rely on tooling in your build chain. (Prisma)

4. Prisma Client generation

After updating schema and config, run:

npx prisma generate

This should generate the updated Prisma Client (in your chosen output directory), now based on the Rust-free, JS/TS implementation.

5. Update imports and code usage

Modify import paths: if you previously imported from @prisma/client, you may need to change to the new output path, e.g.:

import { PrismaClient } from "./generated/prisma/client";

(or whatever relative path fits your project) (GitHub)

If you used any driver-specific features, native-engine assumptions, binary targets, or engine-specific configs, review and adjust. The new Rust-free client may require driver adapters for certain databases (e.g. for PostgreSQL, SQLite, etc.), depending on your setup. (Prisma)

6. Test & verify

Run your application + test suite (if any).
Test queries, migrations, type safety, and especially database interactions (reads/writes) to ensure nothing broke.
If you use migrations (prisma migrate), verify that migrations still run and schema sync is correct.

7. Clean up old config / dependencies (optional)

If you had old settings (e.g. binaryTargets, previewFeatures related to legacy Rust engine, custom output paths, etc.), you can clean them up now, since v7’s defaults already incorporate many improvements (ESM, new generator, etc.).

Also review .gitignore, build configs, bundler settings, runtime environment configs — to ensure that the new generated client and config file are properly integrated.

Common Pitfalls & What to Watch Out For

Import paths: If you use a custom output directory, importing from @prisma/client will likely break — make sure to update imports. (GitHub)
Environment variable loading: Because Prisma no longer auto-loads .env in config, you may need to manually load env variables (e.g. via dotenv) depending on your setup. (Prisma)
Driver adapters for some DBs: With the removal of the Rust engine, Prisma now may require explicit driver adapters (depending on the database) — so double-check dependencies if you use non-default databases. (Prisma)
Breaking changes in schema / generator: Changing the generator provider, output path, or config structure could affect build tools, watchers, deployment scripts, or CI/CD pipelines. Plan accordingly.
Test thoroughly: For apps with many models/relations (like e-commerce), there might be edge cases — ensure sufficient testing before rolling out to production.

Example Migration (Minimal Project) — Before & After

Before (v6)

package.json with dependencies: "prisma": "^6.x", "@prisma/client": "^6.x"
prisma/schema.prisma with generator:

generator client {
  provider      = "prisma-client-js"
  engineType    = "binary"
  output        = "./generated"
}

Code import:

import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();

After (v7)

Update dependencies to v7.
Update generator:

generator client {
  provider = "prisma-client"
  // (optionally specify output path)
}

Add prisma.config.ts:

import { defineConfig, env } from "prisma/config";
import path from "path";

export default defineConfig({
  engine: "classic",
  datasource: { url: env("DATABASE_URL") },
  schema: path.join("prisma", "schema.prisma"),
});

Regenerate client:

npx prisma generate

Update code import:

import { PrismaClient } from "./generated/prisma/client";
const prisma = new PrismaClient();

Run and test — ensure database queries & migrations work as before.

Should You Upgrade Now? My Recommendation

If you are working on a medium-to-large project, especially with TypeScript + complex schema + potential for serverless/edge deployment, then yes — upgrading to Prisma v7 is worth it.

The performance improvements, smaller bundle size, simpler deployment, and improved DX make it a strong win. For smaller projects or quick prototypes, you may also benefit, but the migration overhead should be weighed.

If you have a complex existing codebase with many dependencies, plan a staged migration (e.g. a branch, thorough testing) before rolling out to production — especially if you use custom schema structure, custom DB drivers, or special build/deploy configs.

Summary

Prisma ORM v7 is a major evolution: a fully Rust-free, JS/TS-native client; better performance; modern project structure; improved type safety; and better fit for modern runtime environments. Migrating from v6 → v7 requires a few steps (dependency bump, schema generator update, config file, import paths changes), but nothing too drastic — given proper testing, most projects should migrate smoothly and benefit greatly.

References

Top AI-Powered IDEs for Vibe Coding in 2025

Tahmid Bin Taslim Rafi — Tue, 25 Nov 2025 07:10:28 +0000

Vibe coding, where developers use natural language to guide AI in generating, editing, and testing code, has exploded with agentic tools that handle complex tasks autonomously. Research suggests the leading options balance intuitive AI assistance with robust performance, though no single IDE dominates due to varying user needs and rapid advancements.

Cursor stands out for seamless agentic workflows, making it ideal for developers seeking a balance of speed and control in vibe coding.
Google Antigravity emerges as a strong contender for advanced agent orchestration, especially for those prioritizing free access and multi-model integration, but it may have minor glitches in early previews.
VS Code with GitHub Copilot remains a reliable foundation, offering broad extensibility for AI features, though it requires setup for full agentic capabilities.
Zed excels in performance and collaboration, appealing to teams needing fast, offline AI assistance.
Other notables like Windsurf, Tabnine, PearAI, Trae, and AWS Kiro provide specialized strengths, such as privacy-focused suggestions or structured vibe-to-production pipelines, with free tiers available in many cases.

Key Considerations for Choosing an IDE

When selecting a vibe code IDE, consider your workflow: Beginners might prefer Cursor's intuitive chat modes, while enterprises could lean toward Tabnine's secure, customizable agents. Pricing ranges from free (e.g., Antigravity preview, VS Code) to $40/month for premium features. Always test for compatibility with your languages and hardware, as performance varies.

Emerging Trends

The evidence leans toward agentic IDEs becoming standard, with tools like Antigravity and Kiro addressing "chaos" in casual vibe coding by adding structure. For more, explore official sites like cursor.com for Cursor or antigravity.google for Google's offering.

A Comprehensive Guide to Top Vibe Code IDEs: Comparing AI-Powered Editors in 2025

In the fast-evolving landscape of software development, "vibe coding" has become a buzzword synonymous with intuitive, AI-driven programming. This approach allows developers to describe ideas in natural language, letting AI agents handle the intricacies of code generation, debugging, testing, and deployment. By November 2025, vibe coding has shifted from a niche trend to a mainstream practice, fueled by advancements in large language models (LLMs) and agentic systems. Tools like Google's Antigravity and Cursor are often hailed as pioneers, enabling "flow-state" coding where human creativity meets AI execution.

This in-depth comparison draws from recent reviews, official documentation, and community discussions on platforms like X (formerly Twitter). We'll evaluate nine leading IDEs: Visual Studio Code (with GitHub Copilot), Cursor, Google Antigravity, Zed, Windsurf (formerly associated with Codeium), Tabnine, PearAI, Trae, and AWS Kiro. Criteria include features, AI integration, performance, pricing, supported languages and environments, pros/cons, and suitability for vibe coding. While VS Code provides a solid baseline, newer agentic IDEs like Antigravity and Kiro push boundaries by automating entire workflows, though they introduce complexities like model dependency and occasional glitches.

Understanding Vibe Coding and Its Role in Modern Development

Vibe coding emphasizes casual, descriptive inputs over traditional syntax-heavy programming. For instance, a user might say, "Build a responsive webpage with a login form and test it in the browser," and the IDE's agents would plan, code, execute, and verify. Discussions on X highlight its appeal for rapid prototyping, with posts noting how tools like Antigravity enable "developer superpowers" by integrating browser control and artifact generation. However, critics point to potential "chaos" in unstructured vibe sessions, which IDEs like Kiro address through automated planning and checks.

This style suits solo developers, teams, and even non-coders entering tech, but it requires reliable AI to avoid errors. In 2025, most top IDEs support multiple LLMs (e.g., Gemini 3 Pro, Claude Sonnet 4.5, GPT-5), allowing flexibility. Community feedback suggests vibe coding boosts productivity by 30-50% in prototyping but demands verification for production code.

Detailed Comparisons of Top IDEs

1. Visual Studio Code (VS Code) with GitHub Copilot

VS Code, Microsoft's free, open-source editor, serves as the foundation for many AI-enhanced workflows. With GitHub Copilot, it transforms into a vibe coding powerhouse.

Features: Built-in Git support, customizable UI, remote development, multibuffer editing. Copilot adds autocomplete, code generation from comments, chat for explanations, and agent mode for multi-step tasks like refactoring or endpoint implementation.
AI Integration: Supports extensions like Copilot, Claude Code, and Gemini. Agent sessions handle codebase indexing, terminal commands, and cloud delegation for async tasks.
Performance: Lightweight and fast, with low latency; excels in large codebases via GPU acceleration.
Pricing: Free for VS Code; Copilot: Free for students/open-source, $10/month Individual, $19/user/month Business.
Supported Languages/IDEs: Nearly all languages; runs on macOS, Windows, Linux, and web (vscode.dev).
Pros/Cons: Pros: Vast ecosystem, reliable for enterprises; Cons: Requires extension setup for full agentic features, less "out-of-the-box" than dedicated AI IDEs.
Vibe Coding Suitability: Excellent entry point; natural language chats enable intuitive edits, though not as agent-focused as Cursor.

2. Cursor

Cursor, a fork of VS Code, is tailored for AI-first coding and often tops lists for vibe workflows.

Features: Three modes (Agent, Ask, Manual); chat interface, multi-file editing, bug identification, terminal autocompletion. Includes codebase embeddings for context recall and custom commands (e.g., code-review).
AI Integration: Delegates tasks to agents using models from OpenAI, Anthropic, Gemini, xAI; supports scoped changes and multi-line predictions.
Performance: Smooth and responsive, with rapid autocomplete; built for productivity in complex projects.
Pricing: 14-day Pro trial; Pro: $20/month; Business: $40/user/month; API key integration for custom models.
Supported Languages/IDEs: All major languages; macOS, Windows, Linux; integrates with Slack and mobile.
Pros/Cons: Pros: Clean interface, powerful for understanding codebases; Cons: Learning curve for modes, manual copy-paste in some setups.
Vibe Coding Suitability: High; agentic modes allow natural language delegation, making it a "game-changer" for flow-state coding.

3. Google Antigravity

Launched in late 2025, Antigravity is Google's agent-first IDE, built for Gemini 3 Pro and positioned as a "Cursor killer."

Features: Editor view for tab completions, Manager surface for agent orchestration, task delegation (e.g., feature writing, bug fixes), artifacts (screenshots, plans) for verification, knowledge base for learning.
AI Integration: Autonomous agents handle editor, terminal, browser tasks; supports Gemini 3 Pro, Claude Sonnet 4.5, GPT-OSS.
Performance: Cross-platform; smooth for most, but early glitches in browser subagent noted.
Pricing: Free in public preview.
Supported Languages/IDEs: Broad support; macOS, Windows, Linux.
Pros/Cons: Pros: Free, superior models, elegant agent management; Cons: Some glitches, requires Google account.
Vibe Coding Suitability: Exceptional; enables "next-level" vibe coding with browser integration and verifiable outputs.

4. Zed

Zed focuses on speed and collaboration, integrating AI without vendor lock-in.

Features: Multiplayer editing, built-in terminal, Vim bindings, outline view, custom snippets, Markdown preview.
AI Integration: LLM support for code generation/transform/analysis; works with any agent, including local Ollama models.
Performance: Blazing-fast (Rust-based), offline-first, low latency.
Pricing: Free; paid APIs for premium models.
Supported Languages/IDEs: Via Language Server Protocol; macOS, Linux, Windows.
Pros/Cons: Pros: Exceptional speed, collaborative; Cons: Less feature-rich for non-AI tasks.
Vibe Coding Suitability: Strong for teams; context-aware AI aids intuitive editing.

5. Windsurf (Codeium IDE)

Windsurf, evolving from Codeium, offers "agentic" assistance in a VS Code fork.

Features: Cascade agent for scripts/iterations, AI Flows, live previews, MCP support, drag-and-drop images.
AI Integration: Modes (Write, Chat, Legacy); anticipates needs, runs tests.
Performance: Feature-rich but with a learning curve.
Pricing: Free with 2-week Pro; Pro: $15/month.
Supported Languages/IDEs: Major languages; JetBrains integration.
Pros/Cons: Pros: Advanced automation; Cons: Complex interface.
Vibe Coding Suitability: Ideal for synchronized workflows; "agentic" features enhance vibe sessions.

6. Tabnine

Tabnine emphasizes privacy and enterprise customization as an AI assistant.

Features: Code suggestions, test creation, explanations, fixes; Org-Native Agents for SDLC stages.
AI Integration: Context-aware with repository history; supports multiple LLMs.
Performance: Accurate in enterprise settings; secure deployments.
Pricing: Not specified; enterprise-focused.
Supported Languages/IDEs: Wide range, including VS Code, IntelliJ, Eclipse.
Pros/Cons: Pros: Privacy champion, adapts to styles; Cons: Less agentic than IDEs like Cursor.
Vibe Coding Suitability: Good for secure vibe inputs; fine-tuned models align with org standards.

7. PearAI

PearAI is a browser-friendly editor with deep context awareness.

Features: Router for best models, Agent for bug fixes, Creator for projects, Markdown/Jupyter support.
AI Integration: Modes for chat/write/refactor; collaborative intelligence.
Performance: Clean, zen-like; good for onboarding.
Pricing: Free trial; Pro: $15/month.
Supported Languages/IDEs: Broad; downloadable.
Pros/Cons: Pros: Privacy-focused, easy for juniors; Cons: Some features coming soon.
Vibe Coding Suitability: High; acts as an "intellectual collaborator" for natural language tasks.

8. Trae

Trae provides a distraction-free environment with analytical AI.

Features: Explains/refactors code, PR reviews, multi-file support, real-time previews.
AI Integration: Analytical partner for complex problems; handles complete statements.
Performance: Sophisticated but understated.
Pricing: Free.
Supported Languages/IDEs: Major languages.
Pros/Cons: Pros: Robust for research; Cons: Limited details available.
Vibe Coding Suitability: Solid; free AI for debugging and explanations.

9. AWS Kiro

Kiro targets structured vibe coding, moving prototypes to production.

Features: Prompt breakdown, auto-plans/blueprints, MCP support, agentic chat, code checks.
AI Integration: Agents for tasks; steering rules for behavior.
Performance: Reduces boilerplate; excels in team alignment.
Pricing: Free preview (50 interactions/month); Pro: $19/user/month (1,000); Pro+: $39 (3,000).
Supported Languages/IDEs: Broad; AWS ecosystem.
Pros/Cons: Pros: Ends "chaos"; Cons: Interaction limits in free tier.
Vibe Coding Suitability: Excellent for maturing vibe ideas; adds rigor to casual inputs.

Comparative Table: Key Metrics at a Glance

IDE	Pricing (Starting)	AI Focus (Agentic/Autocomplete)	Performance Highlights	Best For Vibe Coding?	Supported Platforms
VS Code + Copilot	Free / $10/mo	Both; multi-step agents	Lightweight, extensible	Entry-level intuition	All major OS
Cursor	$20/mo	High agentic; codebase recall	Responsive, multi-file	Flow-state delegation	macOS/Win/Linux
Antigravity	Free (preview)	Agent orchestration; browser	Smooth with glitches	Advanced automation	All major OS
Zed	Free	Flexible LLM integration	Ultra-fast, offline	Team collaboration	macOS/Linux/Win
Windsurf	$15/mo	Agentic flows; iterations	Feature-rich	Workflow synchronization	JetBrains+
Tabnine	Enterprise-varies	Context-aware suggestions	Secure, accurate	Privacy-sensitive	Multiple IDEs
PearAI	$15/mo	Collaborative agents	Clean, context-deep	Onboarding juniors	Downloadable
Trae	Free	Analytical refactoring	Distraction-free	Research-oriented	Broad
Kiro	Free / $19/mo	Structured prompts; checks	Reduces debt	Prototype to prod	AWS-integrated

Challenges and Future Outlook

While these IDEs empower vibe coding, challenges persist: Dependency on cloud models raises privacy concerns (addressed by Tabnine's air-gapped options), and glitches in new tools like Antigravity highlight preview-stage risks. Community sentiment on X leans positive, with users praising Antigravity for "vibe coding for real" but noting resource usage. Looking ahead, expect deeper on-chain integrations (e.g., InfinityG AI's Web3 vibe coding) and hybrid local-cloud models.

In summary, Cursor and Antigravity lead for pure vibe experiences, while VS Code offers versatility. Test multiple to find your fit—vibe coding's future is bright, but grounded in thoughtful tool selection.

Key Citations

Easy Steps to Learn Machine Learning for Python Beginners

Tahmid Bin Taslim Rafi — Sun, 15 Jun 2025 09:45:45 +0000

Welcome to the world of Machine Learning (ML)! If you’re just starting and know the basics of Python, you’re in the perfect spot. Machine learning can sound intimidating, but with a step-by-step approach, it becomes both fun and rewarding.

🤖 What is Machine Learning?

At its core, machine learning is the process of teaching computers to learn from data — and then make predictions or decisions without being explicitly programmed.

📌 Think of it like teaching a child to recognize fruits: show enough examples of apples and bananas, and they’ll eventually distinguish between them even with new, unseen examples.

🔍 Types of Machine Learning

Let’s break it down:

1. Supervised Learning

Think: Learning with a teacher.
Data: Labeled (input → output).
Example: Predicting house prices based on size and location.

2. Unsupervised Learning

Think: Learning without a teacher.
Data: Unlabeled.
Example: Grouping customers into clusters based on purchasing behavior.

3. Reinforcement Learning

Think: Learning by trial and error.
Environment: Reward-based feedback.
Example: A robot learning to walk by receiving rewards for staying balanced.

🧠 Key Concepts to Understand

Features : The input variables (e.g., age, salary).
Labels : The output you want to predict (e.g., will buy or not).
Training vs. Testing :
Train your model on one part of the data.
Test how well it performs on unseen data.
Model Evaluation :
Use metrics like Accuracy , Precision , Recall , and F1-Score depending on your task.

🛠️ Step-by-Step: Building a Machine Learning Model

1. Data Collection

Use CSV files, APIs, databases, or scrape data from websites.

2. Data Preprocessing

Handle missing data
Encode categorical variables
Scale features (e.g., normalization)

4. Choose a Model

Start with simple ones: Linear Regression, KNN, Decision Trees

4. Train the Model

Fit your model on the training dataset.

5. Evaluate

Test the model’s performance on test data.

6. Tune Hyperparameters

Use grid search or cross-validation to improve performance.

7. Deploy

Save and use your model to predict new, real-world data!

🧰 Tools and Libraries for Python Beginners

Task Library Data Handling pandas, numpy Visualization matplotlib, seaborn ML Models scikit-learn Deep Learning (later) tensorflow, keras, pytorch

📚 Top Resources to Learn ML with Python

Courses:
Coursera — Andrew Ng’s ML
Udemy — Machine Learning A-Z
Google’s ML Crash Course
Books:
Hands-On ML with Scikit-Learn, Keras, and TensorFlow by Aurélien Géron
Python Machine Learning by Sebastian Raschka
Websites:
Towards Data Science
KDnuggets
Analytics Vidhya
Communities:
r/learnmachinelearning
Stack Overflow
Kaggle Forums

✅ Final Tips

Practice with datasets from Kaggle
Start small: Try Titanic survival prediction or digit recognition
Don’t memorize — understand!
Keep experimenting 🧪

🚀 Ready to Get Started?

Machine learning is a journey. Start small, keep learning, and apply your skills to real-world problems. Python gives you the tools — all you need is curiosity and consistency.

✨ “The best way to learn is by doing.”

DEV Community: Tahmid Bin Taslim Rafi

AI Era for Shopify merchants

What the f*** is UCP actually?

For the technical folks (The Specs):

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Now I want this, how?

Path A — Merchant checklist (no-code / low-code)

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

0) Pre-requirements

1) Get a bearer token (JWT) for Shopify agent APIs

2) Search products (Catalog MCP → search_global_products)

3) Create a checkout session (Shop’s MCP endpoint → create_checkout)

4) Update + complete checkout (status-driven)

What Shopify merchants should do this week to adapt quickly?

🚀 Ready to make your store AI and Agent Ready?

New Era for Shopify merchants

What the f*** is UCP actually?

For the technical folks (The Specs):

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Now I want this, how?

Path A — Merchant checklist (no-code / low-code)

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

0) Pre-requirements

1) Get a bearer token (JWT) for Shopify agent APIs

2) Search products (Catalog MCP → search_global_products)

3) Create a checkout session (Shop’s MCP endpoint → create_checkout)

4) Update + complete checkout (status-driven)

What Shopify merchants should do this week to adapt quickly?

🚀 Ready to make your store AI and Agent Ready?

Agentic Commerce for Shopify merchants

What the f*** is UCP actually?

For the technical folks (The Specs):

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Now I want this, how?

Path A — Merchant checklist (no-code / low-code)

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

0) Pre-requirements

1) Get a bearer token (JWT) for Shopify agent APIs

2) Search products (Catalog MCP → search_global_products)

3) Create a checkout session (Shop’s MCP endpoint → create_checkout)

4) Update + complete checkout (status-driven)

What Shopify merchants should do this week to adapt quickly?

🚀 Ready to make your store AI and Agent Ready?

Universal Commerce Protocol (UCP) for Shopify merchants

What the f*** is UCP actually?

For the technical folks (The Specs):

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

Now I want this, how?

Path A — Merchant checklist (no-code / low-code)

Path B — Build (or hire someone to build) an agent that sells via Shopify’s UCP-compliant tools

An Example Step-by-step: build a simple “Shopify UCP” shopping agent (Node.js)

0) Pre-requirements

1) Get a bearer token (JWT) for Shopify agent APIs

2) Search products (Catalog MCP → search_global_products)

3) Create a checkout session (Shop’s MCP endpoint → create_checkout)

4) Update + complete checkout (status-driven)

What Shopify merchants should do this week to adapt quickly?

🚀 Ready to make your store AI and Agent Ready?

Universal Commerce Protocol (UCP) for Shopify merchants

What the f*** is UCP actually?

For the technical folks (The Specs):

How this boosts revenue (conversion + AOV) for Shopify merchants

1) You become “agent-ready” where shoppers already are

2) Lower friction checkout = fewer abandoned carts

3) Higher AOV via “agent-native” upsell logic (without being spammy)

2) Search products (Catalog MCP → `search_global_products`)

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

2) Search products (Catalog MCP → `search_global_products`)

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

2) Search products (Catalog MCP → `search_global_products`)

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

2) Search products (Catalog MCP → `search_global_products`)

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

2) Search products (Catalog MCP → `search_global_products`)

3) Create a checkout session (Shop’s MCP endpoint → `create_checkout`)

Rewrite behavior: what to do instead of `rewrite-target`