bugfix(shopify): set AI prompts in onboarding steps is default completed

Author: skeptrunedev

clients/trieve-shopify-extension/app/auth.ts

@@ -6,6 +6,10 @@ import { getTrieveBaseUrlEnv } from "./env.server";
 import { buildAdminApiFetcherForServer } from "./loaders/serverLoader";
 import { AdminApiCaller } from "./loaders";
 import { AppInstallData } from "./routes/app.setup";
+import {
+  DEFAULT_RAG_PROMPT,
+  DEFAULT_SYSTEM_PROMPT,
+} from "./components/onboarding/SetPromptsOnboarding";
 
 export const validateTrieveAuth = async <S extends boolean = true>(
   request: LoaderFunctionArgs["request"],
@@ -80,15 +84,18 @@ export const validateTrieveAuth = async <S extends boolean = true>(
 
   if (!key) {
     console.log("No key found for current shop, creating one");
-    const query = await admin.graphql(
-      `
+    const query = await admin
+      .graphql(
+        `
       query {
         shop {
           name
           email
         }
       }
-    `).catch((e) => {
+    `,
+      )
+      .catch((e) => {
         console.error(e);
         throw e;
       });
@@ -103,41 +110,47 @@ export const validateTrieveAuth = async <S extends boolean = true>(
 
     console.log("New User, creating credentials", { shop_name, shop_email });
 
-    const userCredentialsResponse = await fetch(`${getTrieveBaseUrlEnv()}/api/auth/create_api_only_user`, {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-Shopify-Authorization": `${process.env.SHOPIFY_SECRET_KEY}`,
+    const userCredentialsResponse = await fetch(
+      `${getTrieveBaseUrlEnv()}/api/auth/create_api_only_user`,
+      {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Shopify-Authorization": `${process.env.SHOPIFY_SECRET_KEY}`,
+        },
+        body: JSON.stringify({
+          user_name: shop_name,
+          user_email: shop_email,
+        }),
       },
-      body: JSON.stringify({
-        user_name: shop_name,
-        user_email: shop_email,
-      }),
-    }).catch((e) => {
+    ).catch((e) => {
       console.error(e);
       throw e;
     });
 
-    const userCredentials = await userCredentialsResponse.json() as CreateApiUserResponse;
+    const userCredentials =
+      (await userCredentialsResponse.json()) as CreateApiUserResponse;
 
-    key = await prisma.apiKey.upsert({
-      where: {
-        shop: session.shop as string,
-      },
-      update: {
-        key: userCredentials.api_key,
-      },
-      create: {
-        organizationId: userCredentials.organization_id,
-        shop: session.shop as string,
-        key: userCredentials.api_key,
-        createdAt: new Date(),
-      }
-    }).catch((e) => {
-      console.error(e);
-      throw e;
-    });
+    key = await prisma.apiKey
+      .upsert({
+        where: {
+          shop: session.shop as string,
+        },
+        update: {
+          key: userCredentials.api_key,
+        },
+        create: {
+          organizationId: userCredentials.organization_id,
+          shop: session.shop as string,
+          key: userCredentials.api_key,
+          createdAt: new Date(),
+        },
+      })
+      .catch((e) => {
+        console.error(e);
+        throw e;
+      });
 
     const trieve = new TrieveSDK({
       baseUrl: getTrieveBaseUrlEnv(),
@@ -166,10 +179,8 @@ export const validateTrieveAuth = async <S extends boolean = true>(
           dataset_name: session.shop,
           tracking_id: session.shop,
           server_configuration: {
-            SYSTEM_PROMPT:
-              "[[personality]]\nYou are a friendly, helpful, and knowledgeable ecommerce sales associate. Your communication style is warm, patient, and enthusiastic without being pushy. You're approachable and conversational while maintaining professionalism. You balance being personable with being efficient, understanding that customers value both connection and their time. You're solution-oriented and genuinely interested in helping customers find the right products for their needs.\n\n[[goal]]\nYour primary goal is to help customers find products that genuinely meet their needs while providing an exceptional shopping experience. You aim to:\n1. Understand customer requirements through thoughtful questions\n2. Provide relevant product recommendations based on customer preferences\n3. Offer detailed, accurate information about products\n4. Address customer concerns and objections respectfully\n5. Guide customers through the purchasing process\n6. Encourage sales without being pushy or manipulative\n7. Create a positive impression that builds long-term customer loyalty\n\n[[response structure]]\n1. Begin with a warm greeting and acknowledgment of the customer's query or concern\n2. Ask clarifying questions if needed to better understand their requirements\n3. Provide concise, relevant information that directly addresses their needs\n4. Include specific product recommendations when appropriate, with brief explanations of why they might be suitable\n5. Address any potential concerns proactively\n6. Close with a helpful next step or question that moves the conversation forward\n7. Keep responses conversational yet efficient, balancing thoroughness with respect for the customer's time.\n",
-            RAG_PROMPT:
-              "You may use the retrieved context to help you respond. When discussing products, prioritize information from the provided product data while using your general knowledge to create helpful, natural responses. If a customer asks about products or specifications not mentioned in the context, acknowledge the limitation and offer to check for more information rather than inventing details.",
+            SYSTEM_PROMPT: DEFAULT_SYSTEM_PROMPT,
+            RAG_PROMPT: DEFAULT_RAG_PROMPT,
           },
         });
 
@@ -236,15 +247,12 @@ export const validateTrieveAuthWehbook = async <S extends boolean = true>(
   }
 
   if (strict && !key.currentDatasetId) {
-    throw new Response(
-      JSON.stringify({ message: "No dataset selected" }),
-      {
-        headers: {
-          "Content-Type": "application/json; charset=utf-8",
-        },
-        status: 401,
+    throw new Response(JSON.stringify({ message: "No dataset selected" }), {
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
       },
-    );
+      status: 401,
+    });
   }
 
   return {

clients/trieve-shopify-extension/app/components/DatasetSettings.tsx

@@ -217,9 +217,7 @@ export const DatasetSettings = ({
               autoComplete="off"
               label="Checkout Selector"
               helpText="The HTML selector of the checkout button on your shopify store. This is used to track revenue when a user clicks the checkout button."
-              value={
-                unsavedRevenueTrackingOptions?.checkout_selector || ""
-              }
+              value={unsavedRevenueTrackingOptions?.checkout_selector || ""}
               onChange={(e) => {
                 setUnsavedRevenueTrackingOptions({
                   ...unsavedRevenueTrackingOptions,
@@ -275,7 +273,7 @@ export const DatasetSettings = ({
             />
             <TextField
               label="LLM Default Model"
-              helpText="The default model to use for the LLM. See https://openrouter.ai/models for all available LLMs you can use."
+              helpText="Use this prompt to set the personality, tone, and goals of the model."
               value={datasetSettings.LLM_DEFAULT_MODEL ?? ""}
               onChange={(e) =>
                 setDatasetSettings({
@@ -299,8 +297,8 @@ export const DatasetSettings = ({
               autoComplete="off"
             />
             <TextField
-              label="RAG Prompt"
-              helpText="The prompt to guide the RAG model in handling retrieved context with the user query"
+              label="Context Prompt"
+              helpText="Use this prompt to tell the model how strictly it needs to follow or how it should generally handle the context (your product descriptions, metadata, photos, etc.)."
               value={datasetSettings.RAG_PROMPT ?? ""}
               multiline={5}
               onChange={(e) =>

clients/trieve-shopify-extension/app/components/onboarding/SetPromptsOnboarding.tsx

@@ -12,6 +12,12 @@ import { DatasetConfig } from "../DatasetSettings";
 import { withSuspense } from "app/utils/suspense";
 import { trackCustomerEvent } from "app/processors/shopifyTrackers";
 
+export const DEFAULT_SYSTEM_PROMPT =
+  "[[personality]]\nYou are a friendly, helpful, and knowledgeable ecommerce sales associate. Your communication style is warm, patient, and enthusiastic without being pushy. You're approachable and conversational while maintaining professionalism. You balance being personable with being efficient, understanding that customers value both connection and their time. You're solution-oriented and genuinely interested in helping customers find the right products for their needs.\n\n[[goal]]\nYour primary goal is to help customers find products that genuinely meet their needs while providing an exceptional shopping experience. You aim to:\n1. Understand customer requirements through thoughtful questions\n2. Provide relevant product recommendations based on customer preferences\n3. Offer detailed, accurate information about products\n4. Address customer concerns and objections respectfully\n5. Guide customers through the purchasing process\n6. Encourage sales without being pushy or manipulative\n7. Create a positive impression that builds long-term customer loyalty\n\n[[response structure]]\n1. Begin with a warm greeting and acknowledgment of the customer's query or concern\n2. Ask clarifying questions if needed to better understand their requirements\n3. Provide concise, relevant information that directly addresses their needs\n4. Include specific product recommendations when appropriate, with brief explanations of why they might be suitable\n5. Address any potential concerns proactively\n6. Close with a helpful next step or question that moves the conversation forward\n7. Keep responses conversational yet efficient, balancing thoroughness with respect for the customer's time.\n";
+
+export const DEFAULT_RAG_PROMPT =
+  "You may use the retrieved context to help you respond. When discussing products, prioritize information from the provided product data while using your general knowledge to create helpful, natural responses. If a customer asks about products or specifications not mentioned in the context, acknowledge the limitation and offer to check for more information rather than inventing details.";
+
 export const SetPromptsOnboarding: OnboardingBody = withSuspense(
   ({ broadcastCompletion, goToNextStep }) => {
     const { trieve, organization, trieveKey } = useTrieve();
@@ -47,13 +53,13 @@ export const SetPromptsOnboarding: OnboardingBody = withSuspense(
     useEffect(() => {
       if (
         (shopDataset.server_configuration as DatasetConfig).SYSTEM_PROMPT !=
-        "You are a helpful assistant"
+        DEFAULT_SYSTEM_PROMPT
       ) {
         markComplete();
       }
       if (
         (shopDataset.server_configuration as DatasetConfig).RAG_PROMPT !=
-        "Use the following retrieved documents to respond briefly and accurately:"
+        DEFAULT_RAG_PROMPT
       ) {
         markComplete();
       }
@@ -105,7 +111,7 @@ export const SetPromptsOnboarding: OnboardingBody = withSuspense(
         <form onSubmit={submitForm}>
           <TextField
             label="System Prompt"
-            helpText="The system prompt to guide the RAG model"
+            helpText="Use this prompt to set the personality, tone, and goals of the model."
             value={datasetSettings.SYSTEM_PROMPT ?? ""}
             multiline={3}
             onChange={(e) =>
@@ -118,8 +124,8 @@ export const SetPromptsOnboarding: OnboardingBody = withSuspense(
           />
           <div className="h-4"></div>
           <TextField
-            label="RAG Prompt"
-            helpText="The prompt to guide the RAG model in handling retrieved context with the user query"
+            label="Context Prompt"
+            helpText="Use this prompt to tell the model how strictly it needs to follow or how it should generally handle the context (your product descriptions, photos, etc.)."
             value={datasetSettings.RAG_PROMPT ?? ""}
             multiline={3}
             onChange={(e) =>

clients/trieve-shopify-extension/app/utils/onboarding.tsx

@@ -35,10 +35,9 @@ type OnboardingStep = {
 export const onboardingSteps: OnboardingStep[] = [
   {
     id: "set-chat-messages",
-    title: "Set AI Prompts",
+    title: "Customize AI Prompts",
     defaultComplete: false,
     body: SetPromptsOnboarding,
-    nextButtonText: "Setup Component",
   },
   {
     id: "welcome-message",