Meninjau Kepuasan AI dengan Formbricks dalam CodeStash

pengenalan

Jadi, saya telah mengusahakan CodeStash, platform ini untuk berkongsi dan membincangkan coretan kod, sejenis persilangan antara Reddit dan Stack Overflow. Bahagian yang sejuk? Terdapat AI terbina dalam yang menerangkan coretan kod, dikuasakan oleh Google Gemini. Sama ada kod JavaScript atau Python, CodeStash membenarkan pengguna meminta penjelasan AI atas permintaan. Tetapi… Penjelasan AI boleh menjadi agak hit-or-miss. Sesetengah pengguna mungkin mendapati respons itu sangat membantu, manakala yang lain? Tidak begitu banyak. Di situlah Formbricks masuk.

Dalam siaran ini, saya akan menunjukkan kepada anda cara saya menambahkan Formbricks untuk meninjau pengguna selepas mereka mendapat jawapan AI, menyemak sama ada mereka mendapati ia berguna. Jika anda ingin tahu tentang maklum balas dalam apl atau hanya ingin melihat cara Formbricks boleh dimuatkan dalam projek anda, teruskan!

Mengapa Bersusah payah dengan Tinjauan?

AI memang mengagumkan, tetapi mari kita hadapi itu—kadangkala ia terlepas sasaran. Dengan bertanya kepada pengguna secara langsung sama ada penjelasan membantu, saya mendapat maklum balas yang jujur ​​dan tepat pada masa ini yang boleh saya gunakan untuk memperhalusi CodeStash. Dan Formbricks menjadikannya sangat mudah untuk menambahkan tinjauan cepat dan tanpa kerumitan ini terus ke dalam apl. Menang-menang.

Menambah Formbricks ke dalam CodeStash (w/ Next.js)

Menambah Formbricks adalah mudah, dan persediaan mengambil masa kurang daripada 10 minit. Jadi jika anda berfikir, "Saya tidak mempunyai masa untuk menambah semua bahan tinjauan ini," percayalah, ia lebih cepat daripada yang anda fikirkan. Berikut ialah pecahan:

Langkah 1: Buat Akaun Formbricks

Ikuti langkah dalam panduan mula pantas ini untuk bermula dengan Formbricks.

Langkah 2: Pasang Formbricks

Anda memerlukan pakej Formbricks terlebih dahulu. Jalankan arahan ini untuk memasangnya, kemudian ikuti langkah di :

npm install @formbricks/js zod

Sekarang, buat fail 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;
}
</user-id></api-host></environment-id>

Sekarang, kemas kini fail apl/layout.tsx anda.

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      <formbricksprovider></formbricksprovider>
      {children}
    
  );
}

Langkah 3: Benamkan Tinjauan

Selepas penjelasan AI disampaikan, tinjauan muncul yang bertanya kepada pengguna bagaimana mereka menyukainya. Begini cara untuk membenamkan komponen tinjauan terus dalam jawapan.

Dalam akaun Formbricks anda, buat tinjauan baharu dan dalam pencetus tinjauan di bawah tetapan tambah pencetus kod dengan kekunci "ai_answer".

Kini kami boleh menggunakan kaedah formbricks.track("ai_answer") di mana-mana dalam kod kami untuk mencetuskan tinjauan secara pemrograman.

Contohnya...

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

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

Langkah 4: Sesuaikan Soalan Tinjauan

Dalam papan pemuka Formbricks, ubah suai tinjauan agar sesuai dengan perkara yang anda cari. Saya pergi dengan soalan seperti:

“Adakah penjelasan ini membantu?” (Ya, Tidak)
"Bagaimanakah kami boleh meningkatkan penjelasan AI?" (Pilihan)

Saya memastikan tinjauan itu pendek dan ringkas supaya pengguna tidak terlalu terganggu dengan tinjauan itu.

Bahagian terbaik? Anda boleh menetapkan tinjauan untuk muncul setiap kali, jadi anda tidak menghantar spam kepada pengguna setiap kali mereka meminta penjelasan.

Tangkapan skrin

Melihat Maklum Balas dalam Tindakan

Sebaik sahaja respons mula masuk, Formbricks memberikan anda data yang bagus dan kemas. Sekarang saya dapat melihat perkara yang berkesan, perkara yang mengelirukan dan perkara yang memerlukan satu atau dua perubahan.

Membungkusnya

Menambahkan Formbricks pada CodeStash memudahkan untuk menangkap maklum balas yang jujur ​​tanpa mengganggu pengalaman pengguna. Jadi, jika anda membina dengan mengambil kira maklum balas pengguna, cuba Formbricks!

Terima kasih kerana membaca, dan jika anda berminat dengan alatan ini sama seperti saya, jangan lupa bintangkan repo GitHub Formbricks ⭐—dan jika anda suka CodeStash, berikan itu juga bintang!

Rujukan

1. Dokumen Formbricks
2. Dokumen.js seterusnya

Atas ialah kandungan terperinci Meninjau Kepuasan AI dengan Formbricks dalam CodeStash. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!