CodeStash の Formbricks に対する AI の満足度を調査する-jsチュートリアル-php.cn

CodeStash の Formbricks に対する AI の満足度を調査する

Barbara Streisand

リリース： 2024-10-31 06:05:30

オリジナル

645 人が閲覧しました

導入

そこで、私は CodeStash に取り組んできました。これは、コードスニペットを共有し議論するためのプラットフォームで、Reddit と Stack Overflow を組み合わせたようなものです。クールな部分は？ Google Gemini を利用して、コードスニペットを説明する AI が組み込まれています。それが厄介な JavaScript コードであっても、Python コードであっても、CodeStash を使用すると、ユーザーはオンデマンドで AI の説明をリクエストできます。しかし… AI の説明には多少の当たり外れがあるかもしれません。この回答が非常に役立つと感じるユーザーもいるでしょうが、他のユーザーもいるでしょうか?それほど多くはありません。そこで Formbricks の出番です。

この投稿では、AI の回答を受け取った後にユーザーにアンケートを実施し、それが有益であるかどうかを確認するために Formbricks を追加した方法を説明します。アプリ内のフィードバックに興味がある場合、または Formbricks がプロジェクトにどのように適合するかを知りたい場合は、しばらくお待ちください!

なぜわざわざアンケートを行う必要があるのでしょうか?

AI は優れていますが、正直に言って、的を外していることもあります。ユーザーに説明が役に立ったかどうかを直接尋ねることで、CodeStash を微調整するために使用できる正直なその場でのフィードバックを得ることができます。また、Formbricks を使用すると、これらの迅速で手間のかからないアンケートをアプリに直接追加することが非常に簡単になります。双方に利益をもたらします。

Formbricks を CodeStash に追加する (Next.js を使用)

Formbricks の追加は簡単で、セットアップには 10 分もかかりませんでした。したがって、「このアンケート内容をすべて追加する時間がない」と考えている場合は、信じてください。思っているよりも早く完了します。内訳は次のとおりです:

ステップ 1: Formbricks アカウントを作成する

このクイックスタートガイドの手順に従って、Formbricks の使用を開始してください。

ステップ 2: Formbricks をインストールする

最初に Formbricks パッケージが必要です。このコマンドを実行してインストールし、次の手順に従います:

npm install @formbricks/js zod

ログイン後にコピー

次に、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;
}

ログイン後にコピー

次に、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>
  );
}

ログイン後にコピー

ステップ 3: アンケートを埋め込む

AI による説明が提供された後、ユーザーにその説明が気に入ったかどうかを尋ねるアンケートがポップアップ表示されます。アンケートコンポーネントを回答に直接埋め込む方法は次のとおりです。

Formbricks アカウントで新しいアンケートを作成し、設定の下のアンケートトリガーにキー「ai_answer」を持つコードトリガーを追加します。

これで、コード内の任意の場所で formbricks.track("ai_answer") メソッドを使用して、プログラムによってアンケートをトリガーできるようになりました。

たとえば...

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

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

ログイン後にコピー