首页 >web前端 >js教程 >在 CodeStash 中调查 AI 对 Formbricks 的满意度

在 CodeStash 中调查 AI 对 Formbricks 的满意度

Barbara Streisand原创: 2024-10-31 06:05:30744浏览

介绍

所以，我一直在开发 CodeStash，这是一个用于共享和讨论代码片段的平台，有点像 Reddit 和 Stack Overflow 的结合体。最酷的部分？有一个内置的人工智能可以解释代码片段，由 Google Gemini 提供支持。无论是一些粗糙的 JavaScript 还是 Python 代码，CodeStash 都可以让用户按需请求 AI 解释。但是……人工智能的解释可能有点随意。有些用户可能会发现这个回复非常有帮助，而其他用户呢？没那么多。这就是 Formbricks 发挥作用的地方。

在这篇文章中，我将向您展示如何添加 Formbricks 在用户获得 AI 答案后对他们进行调查，检查他们是否认为它有用。如果您对应用内反馈感到好奇，或者只是想了解 Formbricks 如何融入您的项目，请留下来！

为什么要费心进行调查？

人工智能令人印象深刻，但让我们面对现实吧——有时它没有达到目标。通过直接询问用户解释是否有帮助，我得到了诚实的、即时的反馈，我可以用它来微调 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 步：嵌入调查

人工智能解释完成后，会弹出一项调查，询问用户是否喜欢它。以下是如何将调查组件嵌入到响应中。

在您的 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");
});