Maison > interface Web > js tutoriel > Enquête sur la satisfaction de l'IA avec Formbricks dans CodeStash

Enquête sur la satisfaction de l'IA avec Formbricks dans CodeStash

Barbara Streisand
Libérer: 2024-10-31 06:05:30
original
747 Les gens l'ont consulté

Introduction

J'ai donc travaillé sur CodeStash, cette plateforme de partage et de discussion d'extraits de code, sorte de croisement entre Reddit et Stack Overflow. La partie cool ? Il existe une IA intégrée qui explique les extraits de code, optimisée par Google Gemini. Qu'il s'agisse d'un code JavaScript ou Python épouvantable, CodeStash permet aux utilisateurs de demander une explication de l'IA à la demande. Mais… les explications de l’IA peuvent être un peu aléatoires. Certains utilisateurs pourraient trouver la réponse très utile, tandis que d'autres ? Pas tellement. C'est là qu'intervient Formbricks.

Dans cet article, je vais vous montrer comment j'ai ajouté Formbricks pour interroger les utilisateurs après qu'ils ont obtenu une réponse de l'IA, en vérifiant s'ils l'ont trouvé utile. Si vous êtes curieux de connaître les commentaires dans l'application ou si vous souhaitez simplement voir comment Formbricks peut s'intégrer dans vos projets, restez dans les parages !

Pourquoi s'embêter avec des enquêtes ?

L’IA est impressionnante, mais avouons-le : parfois elle rate la cible. En demandant directement aux utilisateurs si une explication m'a aidé, j'obtiens des commentaires honnêtes et instantanés que je peux utiliser pour affiner CodeStash. Et Formbricks simplifie grandement l'ajout de ces enquêtes rapides et simples directement dans l'application. Gagnant-gagnant.

Ajout de Formbricks dans CodeStash (avec Next.js)

L'ajout de Formbricks a été simple et la configuration a pris moins de 10 minutes. Donc, si vous pensez : « Je n'ai pas le temps d'ajouter toutes ces informations sur l'enquête », croyez-moi, c'est plus rapide que vous ne le pensez. Voici une répartition :

Étape 1 : Créer un compte Formricks

Suivez les étapes de ce guide de démarrage rapide pour démarrer avec Formbricks.

Étape 2 : Installer Formricks

Vous aurez d’abord besoin du package Formbricks. Exécutez cette commande pour l'installer, puis suivez les étapes sur :

npm install @formbricks/js zod
Copier après la connexion

Maintenant, créez un fichier 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: "<environment-id>",
      apiHost: "<api-host>",
      userId: "<user-id>", //optional
    });
  }, []);

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

  return null;
}
Copier après la connexion

Maintenant, mettez à jour votre fichier app/layout.tsx.

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <FormbricksProvider />
      <body>{children}</body>
    </html>
  );
}
Copier après la connexion

Étape 3 : Intégrer l'enquête

Une fois l'explication de l'IA fournie, une enquête apparaît demandant aux utilisateurs comment ils l'ont aimé. Voici comment intégrer le composant d’enquête directement dans la réponse.

Dans votre compte Formbricks, créez une nouvelle enquête et dans le déclencheur d'enquête sous paramètres, ajoutez un déclencheur de code avec la clé "ai_answer".

Nous pouvons désormais utiliser la méthode formbricks.track("ai_answer") n'importe où dans notre code pour déclencher une enquête par programmation.

Par exemple...

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

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});
Copier après la connexion

Étape 4 : Personnalisez les questions de l'enquête

Dans le tableau de bord Formbricks, modifiez l'enquête en fonction de ce que vous recherchez. J'y suis allé avec des questions comme :

« Cette explication a-t-elle été utile ? » (Oui, Non)
« Comment pouvons-nous améliorer les explications de l'IA ? » (Facultatif)

J'ai gardé l'enquête courte et simple afin que les utilisateurs ne soient pas trop distraits par l'enquête.

La meilleure partie ? Vous pouvez configurer l'enquête pour qu'elle apparaisse de temps en temps, afin de ne pas envoyer de spam aux utilisateurs à chaque fois qu'ils demandent une explication.

Captures d'écran

Surveying AI Satisfaction with Formbricks in CodeStash

Surveying AI Satisfaction with Formbricks in CodeStash

Surveying AI Satisfaction with Formbricks in CodeStash

Voir les commentaires en action

Une fois que les réponses commencent à arriver, Formbricks vous fournit les données toutes belles et soignées. Maintenant, je peux voir ce qui fonctionne, ce qui est déroutant et ce qui nécessite une ou deux modifications.

Surveying AI Satisfaction with Formbricks in CodeStash

Envelopper le tout

L'ajout de Formbricks à CodeStash a facilité la capture de commentaires honnêtes sans interrompre l'expérience utilisateur. Donc, si vous construisez en tenant compte des commentaires des utilisateurs, essayez Formbricks !

Merci d'avoir lu, et si vous aimez ces outils autant que moi, n'oubliez pas de mettre en vedette le dépôt GitHub de Formbricks ⭐ — et si vous aimez CodeStash, donnez-lui aussi une étoile !

Références

  1. Documents Formbricks
  2. Documents Next.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal