Introdução

Então, tenho trabalhado no CodeStash, essa plataforma para compartilhar e discutir trechos de código, uma espécie de cruzamento entre Reddit e Stack Overflow. A parte legal? Há uma IA integrada que explica trechos de código, desenvolvida pelo Google Gemini. Quer se trate de algum código JavaScript ou Python complicado, o CodeStash permite que os usuários solicitem uma explicação de IA sob demanda. Mas… as explicações sobre IA podem ser um pouco imprevisíveis. Alguns usuários podem achar a resposta muito útil, enquanto outros? Nem tanto. É aí que entra o Formbricks.

Nesta postagem, vou mostrar como adicionei o Formbricks para pesquisar os usuários depois que eles obtiveram uma resposta de IA, verificando se eles acharam isso útil. Se você está curioso sobre o feedback do aplicativo ou apenas quer ver como o Formbricks pode se encaixar em seus projetos, fique por aqui!

Por que se preocupar com pesquisas?

A IA é impressionante, mas vamos encarar os fatos: às vezes ela erra o alvo. Ao perguntar diretamente aos usuários se uma explicação ajudou, recebo feedback honesto e imediato que posso usar para ajustar o CodeStash. E o Formbricks torna muito simples adicionar essas pesquisas rápidas e descomplicadas diretamente no aplicativo. Ganha-ganha.

Adicionando Formbricks ao CodeStash (com Next.js)

Adicionar Formbricks foi simples e a configuração levou menos de 10 minutos. Então, se você está pensando: “Não tenho tempo para adicionar todo esse material de pesquisa”, acredite, é mais rápido do que você pensa. Aqui está um detalhamento:

Etapa 1: criar uma conta Formbricks

Siga as etapas deste guia de início rápido para começar a usar o Formbricks.

Etapa 2: instalar Formbricks

Primeiro você precisará do pacote Formbricks. Execute este comando para instalá-lo e siga as etapas em:

npm install @formbricks/js zod

Agora, crie um arquivo app/formbricks.tsx

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    formbricks.init({
      environmentId: "",
      apiHost: "",
      userId: "", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}

Agora, atualize seu arquivo app/layout.tsx.

// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
      {children}
    
  );
}

Etapa 3: incorporar a pesquisa

Depois que uma explicação sobre IA é fornecida, uma pesquisa aparece perguntando aos usuários se eles gostaram. Veja como incorporar o componente de pesquisa diretamente na resposta.

Na sua conta Formbricks, crie uma nova pesquisa e no gatilho da pesquisa em configurações adicione um gatilho de código com a chave "ai_answer".

Agora podemos usar o método formbricks.track("ai_answer") em qualquer lugar do nosso código para acionar programaticamente uma pesquisa.

Por exemplo...

import formbricks from "@formbricks/js";
import axios from "axios";

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});

Etapa 4: personalize as perguntas da pesquisa

No painel do Formbricks, ajuste a pesquisa para se adequar ao que você está procurando. Eu fiz perguntas como:

“Esta explicação foi útil?” (Sim, Não)
“Como podemos melhorar as explicações sobre IA?” (Opcional)

Mantive a pesquisa curta e simples para que os usuários não se distraíssem muito com ela.

A melhor parte? Você pode configurar a pesquisa para aparecer de vez em quando, para não enviar spam aos usuários sempre que eles pedirem uma explicação.

Capturas de tela

Vendo o feedback em ação

Assim que as respostas começam a chegar, o Formbricks fornece os dados de maneira organizada e organizada. Agora posso ver o que está funcionando, o que está confuso e o que precisa de alguns ajustes.

Resumindo

A adição de Formbricks ao CodeStash facilitou a captura de feedback honesto sem interromper a experiência do usuário. Então, se você está construindo com o feedback do usuário em mente, experimente o Formbricks!

Obrigado pela leitura, e se você gosta dessas ferramentas tanto quanto eu, não se esqueça de marcar com estrela o repositório GitHub do Formbricks ⭐ - e se você gosta do CodeStash, dê uma estrela também!

Referências

1. Documentos do Formbricks
2. Documentos Next.js