Vercel Shop chega à disponibilidade geral: vitrines na Shopify aprendem a vender para agentes de IA

A Vercel anunciou a disponibilidade geral do Vercel Shop, um template aberto de vitrine em Next.js para lojas na Shopify. Ao mesmo tempo, chegou ao GA a Hydrogen SDK reescrita, que agora funciona com diferentes stacks JavaScript, e não com um único framework.

A premissa é simples: os agentes já compram na web, mas usam páginas e ferramentas feitas para pessoas e mecanismos de busca. Vercel e Shopify propõem tratar o agente como um comprador de pleno direito e dar a ele uma camada própria de dados e ações. Como argumento, as empresas citam a PAIGE.

Depois da reformulação da plataforma de e-commerce, a marca registrou +22% de receita e +76% de conversão na Black Friday e na Cyber Monday, sem nenhuma indisponibilidade.

Um único URL para a pessoa e para o agente

A principal mecânica do Vercel Shop é que a ficha do produto existe em duas versões no mesmo endereço. A pessoa vê uma página visual. O agente recebe preço, disponibilidade e variantes do produto como conteúdo legível por máquina, sem precisar interpretar o layout para extrair esses campos. Para mecanismos de busca e answer engines, o template traz dados estruturados nas páginas e no sitemap, para que encontrem e entendam os produtos.

A base é a Hydrogen SDK. Ela dá acesso ao catálogo, ao carrinho, ao gerenciamento de pedidos, aos pagamentos e ao checkout. No início deste ano, Vercel e Shopify anunciaram planos de reescrever a Hydrogen para diferentes frameworks JavaScript. Agora isso está pronto, e a SDK está em disponibilidade geral.

UCP e MCP: como o agente monta o carrinho

A segunda camada trata das ações. A Shopify participou do desenvolvimento do Universal Commerce Protocol (UCP). Ele define uma forma padrão de o agente pesquisar no catálogo, ler a ficha do produto, verificar a disponibilidade, montar o carrinho e receber o link do checkout. O Vercel Shop disponibiliza esses recursos no domínio do próprio lojista. O agente se conecta via MCP, busca produtos e monta o carrinho sem navegar pelo site.

No Vercel Ship SF, Tobi Lütke e Guillermo Rauch falaram sobre o tema. Lütke destacou que o checkout é complexo e exige "20 anos de refinamento". Por isso, a Shopify está aberta a que desenvolvedores peguem partes do seu checkout e montem o que quiserem com elas. Rauch descreveu o template como rápido, bem projetado e pronto para trabalhar com agentes.

O que vem no template

• Vitrine em Next.js sobre o catálogo, o carrinho e o checkout da Shopify.
• Fichas legíveis por máquina: preço, disponibilidade, opções.
• Dados estruturados e sitemap para mecanismos de busca e answer engines.
• Ferramentas para agentes via UCP, acessíveis por MCP no domínio do lojista.
• Assistente integrado baseado em eve, que encontra produtos e os coloca no carrinho.
• Carrinho único para a vitrine tradicional e para o assistente.
• Skills para agentes de programação: ajudam na configuração, na personalização e na atualização do template.

Vitrine e assistente ficam no mesmo repositório. A equipe pode alterar o design e o comportamento do assistente em conjunto, sem manter dois projetos separados. O comprador pode começar a busca pelo assistente, ir para a página do produto e não perder o carrinho.

Como experimentar

O primeiro exemplo em produção é a loja de merchandising vercel.store, com drops limitados. Ela foi construída com o Vercel Shop, e seu agente de compras seleciona produtos, adiciona ao carrinho e conduz o cliente até a finalização do pedido. A combinação de Shopify, Next.js e Vercel já funciona na AG1, na Bombas e na PAIGE.

Para começar, basta um comando:

`pnpm create next-app@latest my-store --example https://github.com/vercel/shop`

Depois, é preciso conectar a loja Shopify e configurar a vitrine conforme a documentação. Para equipes que já têm um catálogo na Shopify, vale verificar como as fichas aparecem para o agente: se preço, disponibilidade e opções estão presentes em formato legível. Quem está começando do zero ou reconstruindo o front-end recebe a camada para agentes já pronta no template. Os números da PAIGE se referem à reformulação geral da plataforma, e não apenas ao canal de agentes. Por isso, o impacto dos agentes em si deve ser medido separadamente, com os dados da própria loja.