Custom Lightning Types + LWC: Como Criar uma Experiência Visual Premium no Agentforce

A release de Summer ’25 trouxe uma das evoluções mais aguardadas para o ecossistema de IA da Salesforce: a possibilidade de substituir respostas genéricas em texto por componentes LWC (Lightning Web Components) totalmente customizados.

Se você quer transformar a interface do seu agente inteligente, veja como essa engrenagem funciona na prática.

O Problema: Agentes que Só Sabem Digitar

Quem já configurou um agente no Agentforce conhece o cenário: ele entende o contexto, executa as ações perfeitamente, mas entrega o resultado em uma parede de texto sem graça.

Em um fluxo de busca de voos, por exemplo, o usuário recebia uma lista corrida com origem, destino, preço e horários. Funcionava? Sim. Mas a experiência era engessada. O usuário precisava ler tudo, interpretar os dados e mudar de tela para tomar uma decisão.

Com a chegada dos Custom Lightning Types (CLTs), você pode trocar esses inputs e outputs de texto por componentes visuais e interativos. O nome parece complexo, mas o impacto na usabilidade é enorme.

O Que São Custom Lightning Types?

Um Lightning Type é o metadado que conecta um dado a um elemento de interface — da mesma forma que o tipo “Date” gera automaticamente um calendário na tela. A diferença é que agora você pode criar os seus próprios tipos para os agentes.

A estrutura usa três arquivos JSON essenciais:

• schema.json: Define a estrutura dos dados (vinculada a uma classe Apex com @InvocableVariable).
• editor.json: Aponta para o LWC que servirá como entrada de dados (input) na conversa.
• renderer.json: Aponta para o LWC que vai renderizar a resposta (output) do agente.

No seu projeto Salesforce DX, organize os arquivos dentro da pasta lightningTypes:

force-app/main/default/
  └── lightningTypes/
      └── myCustomLightningTypeName/
          ├── schema.json
          └── lightningDesktopGenAi/
              ├── editor.json
              └── renderer.json

force-app/main/default/
  └── lightningTypes/
      └── myCustomLightningTypeName/
          ├── schema.json
          └── lightningDesktopGenAi/
              ├── editor.json
              └── renderer.json

O Fluxo da Conversa com CLTs

Para entender onde a mágica acontece, pense no caminho que a informação faz:

1. O usuário pede algo (“Busque voos para Orlando”).
2. O Atlas Reasoning Engine processa o pedido e monta o plano de ação.
3. Se faltarem dados, o agente pede mais detalhes.
4. O usuário responde.
5. O agente executa a tarefa e exibe o resultado.

Em qualquer ponto de troca de dados (passos 3 e 5), o CLT entra em cena. Como as propriedades de entrada e saída das ações apontam para tipos Apex, nós mapeamos esses tipos para os nossos LWCs customizados.

Customizando as Entradas (Inputs)

Em vez de forçar o usuário a digitar filtros complexos em formato de texto livre, você pode exibir uma interface amigável.

Imagine um componente flightRequestFilter com sliders de preço e checkboxes de companhias aéreas. O JavaScript do seu LWC segue este padrão estrutural:

import { api, LightningElement } from "lwc";

export default class FlightRequestFilter extends LightningElement {
  @api readOnly;

  @api
  get value() {
    return {
      price: this.price,
      discountPercentage: this.discountPercentage
    };
  }
  set value(value) {
    this.price = value?.price || 20000;
    this.discountPercentage = value?.discountPercentage || 0;
  }

  price;
  discountPercentage;

  handleInputChange(event) {
    this[event.target.name] = event.detail.value;
    this.dispatchEvent(
      new CustomEvent("valuechange", {
        detail: { value: this.value }
      })
    );
  }
}

import { api, LightningElement } from "lwc";

export default class FlightRequestFilter extends LightningElement {
  @api readOnly;

  @api
  get value() {
    return {
      price: this.price,
      discountPercentage: this.discountPercentage
    };
  }
  set value(value) {
    this.price = value?.price || 20000;
    this.discountPercentage = value?.discountPercentage || 0;
  }

  price;
  discountPercentage;

  handleInputChange(event) {
    this[event.target.name] = event.detail.value;
    this.dispatchEvent(
      new CustomEvent("valuechange", {
        detail: { value: this.value }
      })
    );
  }
}

O componente usa o getter/setter de value com o decorator @api para expor os dados e dispara o evento valuechange a cada atualização. No arquivo de configuração do LWC, basta adicionar o target lightning__AgentforceInput apontando para o seu CLT.

Depois, o administrador só precisa mudar o tipo de exibição do parâmetro na configuração da ação de “Apex type” para o CLT criado.

Customizando as Respostas (Outputs)

Do lado da resposta, o ganho visual é ainda maior. Em vez de ler “Voo 1234: R$ 2.500, 2 escalas”, o usuário recebe um card completo e acionável.

Com o target lightning__AgentforceOutput configurado no LWC, você pode desenhar um card com o logotipo da empresa, preço destacado e, o mais importante: um botão “Reservar Voo”. Quando clicado, esse botão dispara a próxima ação do agente ali mesmo, fechando o ciclo sem que o usuário saia do chat.

Por Que Isso Muda o Jogo?

1. Validação Direta no Frontend: Com sliders e seletores, o usuário não erra a formatação do dado. Isso evita o vaivém de mensagens de erro e poupa chamadas desnecessárias ao Atlas Reasoning Engine.
2. Menos Esforço Cognitivo: O cérebro humano processa blocos visuais e cards muito mais rápido do que linhas de texto corrido.
3. Conversas Práticas: Elementos interativos transformam o chat de uma ferramenta de consulta para um ambiente de execução direta.

Bônus: LWC Quick Actions no Consumer Goods Cloud Offline

Aproveitando o ganho de eficiência com LWC, a Summer ’25 também trouxe ótimas notícias para o setor de varejo e execução de campo (retail execution).

O aplicativo mobile offline do Consumer Goods Cloud agora aceita LWC Quick Actions em dispositivos iOS (Beta). Isso significa que você pode aproveitar componentes criados para a web e rodá-los como ações rápidas no ambiente mobile nativo, sem ter que remodelar o app do zero ou se preocupar com lógica complexa de sincronização.

O representante de campo ganha agilidade para gerenciar contratos ou abrir casos direto do celular. Além disso, a atualização trouxe melhorias pesadas para o ecossistema de vendas:

• Direct Store Delivery: Ajuste de quantidades de pré-venda durante a entrega física e recebimento de pagamentos parciais em dinheiro.
• Operações Híbridas: Perfis de usuário que unem rotas de entrega e tarefas de auditoria de loja.
• Impressão Térmica: Emissão de recibos via Bluetooth diretamente pelo app.
• Trade Promotion Management (TPM): Análise de receita de produtos descontinuados (estoque remanescente) e previsões de uplift considerando o efeito de forward buy (antecipação de compras pelo varejista), aumentando a precisão das promoções.

Como Começar com CLTs (Passo a Passo)

1. Crie a Classe Apex: Backend. Desenvolva a classe com as propriedades @InvocableVariable que vão estruturar os dados de entrada ou saída.
2. Desenvolva o LWC: Interface. Construa o componente utilizando a lógica de getter/setter de value e o evento valuechange para inputs.
3. Defina o Target no LWC: Configuração. No arquivo xml do componente, adicione o deployment target apropriado (lightning__AgentforceInput ou lightning__AgentforceOutput).
4. Monte os Arquivos do CLT: Metadados. Crie a estrutura na pasta lightningTypes contendo os arquivos schema.json, editor.json e renderer.json apontando para os seus respectivos LWCs e classes.
5. Faça o Deploy e Vincule: Ativação. Suba as alterações para a Org e mude o display type do parâmetro na configuração da ação do Agentforce para o seu novo CLT.

Dica de código: Se quiser ver um exemplo completo e funcional rodando, vale a pena clonar o repositório do Coral Cloud sample app mantido pelo time de Developer Advocacy da Salesforce.

Limitações para Ficar de Olho

Nesta primeira fase (Summer ’25), os Custom Lightning Types estão restritos ao Lightning Experience (o suporte para Experience Cloud está previsto para as próximas versões). Além disso, eles só funcionam para ações que usam classes Apex como ponte. Fluxos (Flows) e Prompt Builder seguem caminhos diferentes de customização no momento.

Conclusão

Os Custom Lightning Types mudam o patamar dos assistentes virtuais da Salesforce. Deixamos para trás a era dos chatbots focados apenas em texto e entramos na era das interfaces conversacionais inteligentes e dinâmicas.

Para os desenvolvedores, é a chance de usar a experiência acumulada em LWC em um contexto totalmente novo. Para o negócio, é o detalhe que dita se a IA vai ser uma ferramenta fantástica ou apenas mais um recurso esquecido pelos usuários.

Fontes: Salesforce Developers Blog, Release Notes Summer ’25 & Trailhead.