Criando um agente especializado na VTEX

Neste exemplo, você aprenderá a criar um agente especializado na VTEX, que pode ser usado para realizar ações específicas na plataforma.

Requisitos

• Ter a configuração necessária no Ambiente do seu Aplicativo para comunicação com a VTEX.

• Adicionar a dependência eitri-shopping-vtex-shared ao seu projeto.

  • Para adicionar a dependência, insira no seu eitri-app.conf.js:

        "eitri-app-dependencies": {
            "eitri-shopping-vtex-shared": { version: "1.3.4", isEitriAppShared: true },
        },

Criando o agente

1. Crie uma pasta chamada agents na raiz do seu projeto.
2. Dentro da pasta agents, crie um arquivo Markdown chamado SellerAgent.md.
3. Adicione o seguinte conteúdo ao arquivo SellerAgent.md:

---
tools: getProducts, addToCart, goToCheckout
---

Você é um assistente especialista em vendas. Seu principal objetivo é ajudar os usuários a encontrar os produtos que estão procurando com precisão e eficiência. Seu tom deve ser prestativo e profissional.

**Diretrizes Principais:**

1. **Foco na Solicitação Atual:** Preste bastante atenção à mensagem mais recente do usuário. Suas respostas e ações devem se basear na última solicitação do usuário, não em interações anteriores que não estejam relacionadas. Trate cada nova busca de produto como um pedido independente, a menos que o usuário esteja explicitamente fazendo uma pergunta de acompanhamento sobre a interação imediatamente anterior.

2. **Interação Conversacional:** Para perguntas gerais ou cumprimentos (ex.: "Olá", "Como você está?", "Obrigado"), responda de forma educada e conversacional em texto simples. Não utilize uma ferramenta para essas interações.

3. **Busca de Produtos:** Quando o usuário solicitar um produto (ex.: "Qual é o preço do laptop?", "Você pode recomendar um smartphone?"), você DEVE usar a ferramenta `getProducts` para encontrar os produtos relevantes e retorná-los em formato JSON. Sua resposta sobre o produto DEVE conter a imagem no formato de imagem markdown.

4. **Adicionar ao Carrinho:** Quando o usuário solicitar para adicionar um produto ao carrinho (ex.: "adicionar laptop ao carrinho", "adicionar smartphone ao carrinho"), você DEVE usar a ferramenta `addToCart` para adicionar o produto ao carrinho do usuário.

5. **Ir para o Checkout:** Quando o usuário solicitar ir para o checkout (ex.: "ir para o checkout", "checkout") ou finalizar o pedido (ex.: "finalizar pedido", "finalizar meu pedido"), você DEVE usar a ferramenta `goToCheckout` para direcionar o usuário para a página de checkout.

Criando ferramentas para o agente

1. Crie uma pasta chamada tools dentro da pasta agents.
2. Dentro da pasta tools, crie um arquivo TypeScript chamado getProducts.ts.
3. Adicione o seguinte conteúdo ao arquivo getProducts.ts:

import { Vtex } from "eitri-shopping-vtex-shared";

interface GetProductArgsType {
  text: string;
}

export default async function getProducts(args: GetProductArgsType) {
  const query = args.text;

  try {
    const data = await Vtex.catalog.searchProduct(query);

    return data.products.slice(0, 5).map((product) => ({
      productId: product.productId || product.id || product.productI,
      productName: product.productName,
      images: product.items?.[0]?.images,
      price: product.items?.[0]?.sellers?.[0]?.commertialOffer?.Price,
    }));
  } catch (error) {
    console.error("Error fetching products from VTEX API:", error);
    return [];
  }
}

4. Dentro da pasta tools, crie um arquivo TypeScript chamado addToCart.ts.
5. Adicione o seguinte conteúdo ao arquivo addToCart.ts:

import { Vtex } from "eitri-shopping-vtex-shared";

interface AddToCartArgsType {
  productId: string;
}

export default async function addToCart(args: AddToCartArgsType) {
  const productId = args.productId;

  try {
    await Vtex.cart.addItemToCart(productId);
    return "Item adicionado ao carrinho com sucesso.";
  } catch (error) {
    console.error("Error adding product to cart:", error);
    return "Ocorreu um erro ao adicionar o produto ao carrinho.";
  }
}

6. Dentro da pasta tools, crie um arquivo TypeScript chamado goToCheckout.ts.
7. Adicione o seguinte conteúdo ao arquivo goToCheckout.ts:

import Eitri from "eitri-bifrost";
import { Vtex } from "eitri-shopping-vtex-shared";

interface CheckoutParams {
  orderFormId?: string;
}

export default async function goToCheckout(params: CheckoutParams) {
  if (!params?.orderFormId) {
    const cart = await Vtex.cart.getCartIfExists();
    params.orderFormId = cart?.orderFormId;
  }
  console.log("Navegando para checkout", { orderFormId: params.orderFormId });

  await Eitri.navigation.open({
    slug: "my-eitri-app-checkout", // Altere para o slug do seu app de checkout
    initParams: { orderFormId: params.orderFormId },
  });

  // Caso o checkout seja uma tela no seu Eitri-App, navegue da seguinte forma:
  // await Eitri.navigation.navigate({
  //   path: "/Checkout", // Altere para o caminho da sua tela de checkout
  //   initParams: { orderFormId: params.orderFormId },
  // });
}

Por fim dessa forma, você tem criado um agente especializado na VTEX que pode ser usado para realizar ações específicas na plataforma.