ホームページ > 記事 > ウェブフロントエンド > CodeStash の Formbricks に対する AI の満足度を調査する
CodeStash の Formbricks に対する AI の満足度を調査する
- Barbara Streisandオリジナル
- 2024-10-31 06:05:30708ブラウズ
導入
そこで、私は 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");
});
ステップ 4: アンケートの質問をカスタマイズする
Formbricks ダッシュボードで、探している内容に合わせてアンケートを調整します。私は次のような質問をしました:
「この説明は役に立ちましたか?」 (はい、いいえ)
「AI の説明を改善するにはどうすればよいでしょうか?」 (オプション)
ユーザーがアンケートに集中しすぎないように、アンケートは短くシンプルにしました。
一番良かった点は?アンケートが頻繁に表示されるように設定できるため、ユーザーが説明を求めるたびにスパムを送信する必要がなくなります。
スクリーンショット
フィードバックの実際の動作を確認する
応答が受信され始めると、Formbricks はすべて適切で整ったデータを提供します。これで、何が機能し、何が混乱し、何が微調整が必要かを確認できるようになりました。
まとめ
Formbricks を CodeStash に追加すると、ユーザー エクスペリエンスを中断することなく、正直なフィードバックを簡単に取得できるようになりました。ユーザーのフィードバックを念頭に置いて構築している場合は、Formbricks を試してみてください!
読んでいただきありがとうございます。私と同じようにこれらのツールに興味がある方は、Formbricks の GitHub リポジトリにスターを付けることを忘れないでください ⭐—CodeStash が気に入ったら、それにもスターを付けてください!
参考文献
- Formbricks ドキュメント
- Next.js ドキュメント
以上がCodeStash の Formbricks に対する AI の満足度を調査するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。