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

導入

そこで、私は 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;
}
</user-id></api-host></environment-id>

次に、app/layout.tsx ファイルを更新します。

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

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

ステップ 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");
});

ステップ 4: アンケートの質問をカスタマイズする

Formbricks ダッシュボードで、探している内容に合わせてアンケートを調整します。私は次のような質問をしました:

「この説明は役に立ちましたか?」 (はい、いいえ)
「AI の説明を改善するにはどうすればよいでしょうか?」 (オプション)

ユーザーがアンケートに集中しすぎないように、アンケートは短くシンプルにしました。

一番良かった点は?アンケートが頻繁に表示されるように設定できるため、ユーザーが説明を求めるたびにスパムを送信する必要がなくなります。

スクリーンショット

フィードバックの実際の動作を確認する

応答が受信され始めると、Formbricks はすべて適切で整ったデータを提供します。これで、何が機能し、何が混乱し、何が微調整が必​​要かを確認できるようになりました。

まとめ

Formbricks を CodeStash に追加すると、ユーザー エクスペリエンスを中断することなく、正直なフィードバックを簡単に取得できるようになりました。ユーザーのフィードバックを念頭に置いて構築している場合は、Formbricks を試してみてください!

読んでいただきありがとうございます。私と同じようにこれらのツールに興味がある方は、Formbricks の GitHub リポジトリにスターを付けることを忘れないでください ⭐—CodeStash が気に入ったら、それにもスターを付けてください!

参考文献

1. Formbricks ドキュメント
2. Next.js ドキュメント

以上がCodeStash の Formbricks に対する AI の満足度を調査するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。