feat: triggers

Author: puang59

bun.lockb

@@ -6,7 +6,9 @@ export default defineSchema({
     owner: v.optional(v.string()),
     word: v.string(),
     meaning: v.string(),
+    trigger: v.string(),
     examples: v.array(v.string()),
+    dervation: v.optional(v.string()),
   }).index("by_word", ["word"]),
   metadata: defineTable({
     word_count: v.number(),

convex/schema.ts

@@ -6,13 +6,15 @@ export const createWord = mutation({
     owner: v.string(),
     word: v.string(),
     meaning: v.string(),
+    trigger: v.string(),
     examples: v.array(v.string()),
   },
   handler: async (ctx, args) => {
     const id = await ctx.db.insert("words", {
       owner: args.owner,
       word: args.word,
       meaning: args.meaning,
+      trigger: args.trigger,
       examples: args.examples,
     });
     return id;
@@ -44,13 +46,13 @@ export const lazyLoadWords = query({
 
     if (args.selectedLetter) {
       allWords = allWords.filter(
-        (w) => w.word.charAt(0).toUpperCase() === args.selectedLetter
+        (w) => w.word.charAt(0).toUpperCase() === args.selectedLetter,
       );
     }
 
     if (args.startsAfterId) {
       const startIndex = allWords.findIndex(
-        (w) => w._id === args.startsAfterId
+        (w) => w._id === args.startsAfterId,
       );
       if (startIndex !== -1) {
         return allWords.slice(startIndex + 1, startIndex + 1 + args.limit);
@@ -67,7 +69,7 @@ export const getWordByName = query({
   handler: async (ctx, args) => {
     const allWords = await ctx.db.query("words").collect();
     return allWords.find(
-      (w) => w.word.toLowerCase() === args.word.toLowerCase()
+      (w) => w.word.toLowerCase() === args.word.toLowerCase(),
     );
   },
 });
@@ -145,13 +147,13 @@ export const lazyLoadUserWords = query({
 
     if (args.selectedLetter) {
       allWords = allWords.filter(
-        (w) => w.word.charAt(0).toUpperCase() === args.selectedLetter
+        (w) => w.word.charAt(0).toUpperCase() === args.selectedLetter,
       );
     }
 
     if (args.startsAfterId) {
       const startIndex = allWords.findIndex(
-        (w) => w._id === args.startsAfterId
+        (w) => w._id === args.startsAfterId,
       );
       if (startIndex !== -1) {
         return allWords.slice(startIndex + 1, startIndex + 1 + args.limit);

convex/words.ts

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@ai-sdk/google": "^2.0.23",
+    "@ai-sdk/groq": "^3.0.33",
     "@clerk/nextjs": "^6.34.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@upstash/ratelimit": "^2.0.6",
     "@upstash/redis": "^1.35.6",
     "@vercel/analytics": "^1.5.0",
-    "ai": "^5.0.76",
+    "ai": "^6.0.146",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "convex": "^1.28.0",

package.json

@@ -11,6 +11,7 @@ import { useEffect, useState, useRef } from "react";
 import WordCard from "@/components/WordCard";
 import { useUser } from "@clerk/nextjs";
 import SmoothFadeLayout from "@/components/SmoothFadePageTransition";
+import { greetings } from "../consts";
 
 const notifySuccess = () => toast.success("Word added successfully!");
 const notifyError = (message: string) => toast.error(`${message}`);
@@ -27,31 +28,26 @@ export default function AddWord() {
 
   const [word, setWord] = useState("");
   const [meaning, setMeaning] = useState("");
+  const [trigger, setTrigger] = useState("");
   const [examples, setExamples] = useState<string[]>([]);
 
   const [debouncedWord, setDebouncedWord] = useState(word);
   const [AIDebouncedWord, setAIDebouncedWord] = useState(word);
 
   const [meaningExists, setMeaningExists] = useState(false);
   const [meaningLoading, setMeaningLoading] = useState(false);
+  const [triggerLoading, setTriggerLoading] = useState(false);
   const [examplesLoading, setExamplesLoading] = useState(false);
   const [greeting, setGreeting] = useState("");
 
-  const greetings = [
-    "Discovered a new word? Let's define it!",
-    "Found a word no one knows? Add it here!",
-    "Help us grow the dictionary! Submit your word.",
-    "Got a rare word? Share its meaning!",
-    "What did you come across?",
-  ];
-
   useEffect(() => {
     const random = greetings[Math.floor(Math.random() * greetings.length)];
     setGreeting(random);
   }, []);
 
   useEffect(() => {
     setMeaning("");
+    setTrigger("");
     setExamples([]);
 
     const convexSearch = setTimeout(() => {
@@ -80,7 +76,7 @@ export default function AddWord() {
 
       if (res.status === 429)
         throw new Error(
-          "Rate limit exceeded. Please wait a moment before trying again."
+          "Rate limit exceeded. Please wait a moment before trying again.",
         );
       if (!res.ok) throw new Error("Failed to generate meaning");
       const data = await res.json();
@@ -92,6 +88,31 @@ export default function AddWord() {
     }
   };
 
+  const fetchTrigger = async () => {
+    try {
+      setTriggerLoading(true);
+      const res = await fetch("/api/generate-trigger", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ word: AIDebouncedWord }),
+      });
+
+      if (res.status === 429)
+        throw new Error(
+          "Rate limit exceeded. Please wait a moment before trying again.",
+        );
+      if (!res.ok) throw new Error("Failed to generate trigger.");
+      const data = await res.json();
+      setTrigger(data.trigger);
+    } catch (error) {
+      notifyError((error as Error).message);
+    } finally {
+      setTriggerLoading(false);
+    }
+  };
+
   const fetchExamples = async () => {
     try {
       setExamplesLoading(true);
@@ -105,7 +126,7 @@ export default function AddWord() {
 
       if (res.status === 429)
         throw new Error(
-          "Rate limit exceeded. Please wait a moment before trying again."
+          "Rate limit exceeded. Please wait a moment before trying again.",
         );
       if (!res.ok) throw new Error("Failed to generate examples");
       const data = await res.json();
@@ -117,10 +138,48 @@ export default function AddWord() {
     }
   };
 
+  const fetchDerviation = async () => {
+    try {
+      const res = await fetch(
+        `https://api.datamuse.com/words?sp=${encodeURIComponent(word.slice(0, 6))}*&md=p&max=100`,
+      );
+      if (!res.ok) throw new Error("Failed to fetch derivations");
+      const data = await res.json();
+
+      const base = word.toLowerCase();
+      const baseRoot = base.slice(0, 5);
+
+      // keep only clean derivations
+      const derivations = data.filter((w) => {
+        const wLower = w.word.toLowerCase();
+
+        const valid =
+          wLower.startsWith(baseRoot) && // same root
+          !wLower.includes(" ") && // ignore phrases
+          wLower !== base && // not the same word
+          !/[^a-zA-Z]/.test(wLower) && // remove words with weird chars
+          (wLower.includes("ly") ||
+            wLower.includes("ness") ||
+            wLower.includes("est") ||
+            wLower.includes("ate") ||
+            wLower.includes("acy") ||
+            wLower.includes("ous")); // common derivational suffixes
+
+        return valid;
+      });
+
+      console.log(derivations);
+    } catch (error) {
+      notifyError((error as Error).message);
+    }
+  };
+
   useEffect(() => {
     if (!AIDebouncedWord || meaningExists) return;
 
+    fetchDerviation();
     fetchMeaning();
+    fetchTrigger();
     fetchExamples();
   }, [AIDebouncedWord]);
 
@@ -137,7 +196,7 @@ export default function AddWord() {
 
   const getWord = useQuery(
     api.words.getWordByName,
-    debouncedWord ? { word: debouncedWord } : "skip"
+    debouncedWord ? { word: debouncedWord } : "skip",
   );
 
   const isNumeric = (n: string) => {
@@ -153,14 +212,15 @@ export default function AddWord() {
     if (alreadyExists) return notifyError("Word already exists");
     if (meaning.trim().length === 0 || examples.length === 0)
       return notifyError(
-        "Sit Tight while AI generates the meaning and examples!"
+        "Sit Tight while AI generates the meaning and examples!",
       );
     const capitalizedWord = word.charAt(0).toUpperCase() + word.slice(1);
     try {
       void createWord({
         owner: user?.id || "anonymous",
         word: capitalizedWord,
         meaning: meaning,
+        trigger: trigger,
         examples: examples,
       });
       void updateCount();
@@ -218,6 +278,7 @@ export default function AddWord() {
   const handleRegenerateMeaning = async (type: string) => {
     try {
       if (type === "Meaning") await fetchMeaning();
+      else if (type === "Trigger") await fetchTrigger();
       else await fetchExamples();
     } catch (err) {
       notifyError((err as Error).message);
@@ -283,6 +344,36 @@ export default function AddWord() {
                 <p>Generating definition...</p>
               </div>
             )}
+
+            {trigger.length > 0 && (
+              <section>
+                <div className="mt-5 flex items-center justify-between">
+                  <label className="block font-medium text-sm text-gray-700 dark:text-gray-400">
+                    Trigger (generated by AI)
+                  </label>
+                  <Button
+                    type="button"
+                    className="bg-opacity-0 rounded-md cursor-pointer hover:bg-white transition duration-350 text-gray-500 hover:text-gray-700"
+                    onClick={() => handleRegenerateMeaning("Trigger")}
+                  >
+                    <RefreshCcwIcon
+                      size={18}
+                      className={meaningLoading ? "animate-spin" : ""}
+                    />
+                  </Button>
+                </div>
+                <div className="border-dashed border-2 rounded-md px-3 py-2 bg-white dark:bg-black text-sm flex-1">
+                  <span>{trigger}</span>
+                </div>
+              </section>
+            )}
+            {triggerLoading && (
+              <div className="flex items-center mt-5 text-gray-500">
+                <LoaderPinwheel className="animate-spin mr-2" color="#6a7282" />
+                <p>Generating trigger...</p>
+              </div>
+            )}
+
             {examples.length > 0 && (
               <section>
                 <div className="flex items-center justify-between mt-5">
@@ -342,6 +433,7 @@ export default function AddWord() {
             <WordCard
               word={getWord?.word || ""}
               meaning={getWord?.meaning || ""}
+              trigger={getWord?.trigger || ""}
               examples={getWord?.examples || []}
               isOwner={isOwner(getWord?.owner || "")}
             />

src/app/add-word/page.tsx

@@ -0,0 +1,27 @@
+import { rateLimit } from "@/utility/RatelimitSetup";
+
+export async function POST(request: Request) {
+  try {
+    const { word } = await request.json();
+
+    const ip =
+      request.headers.get("x-forwarded-for") ||
+      request.headers.get("cf-connecting-ip") ||
+      "unknown";
+
+    const { success, reset } = await rateLimit.limit(ip);
+
+    if (!success) {
+      return new Response(
+        JSON.stringify({
+          error: "Rate limit exceeded. Please try again later.",
+          reset,
+        }),
+        { status: 429, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+  } catch (error) {
+    return new Response('Bad Request', { status: 400 });
+  }
+}

src/app/api/generate-derivations/route.ts

@@ -1,6 +1,7 @@
-import { google } from "@ai-sdk/google";
+import { groq } from "@ai-sdk/groq";
 import { generateText } from "ai";
 import { rateLimit } from "@/utility/RatelimitSetup";
+import { MODEL } from "@/app/consts";
 
 export async function POST(request: Request) {
   try {
@@ -11,7 +12,6 @@ export async function POST(request: Request) {
       request.headers.get("cf-connecting-ip") ||
       "unknown";
 
-
     const { success, reset } = await rateLimit.limit(ip);
 
     if (!success) {
@@ -20,27 +20,40 @@ export async function POST(request: Request) {
           error: "Rate limit exceeded. Please try again later.",
           reset,
         }),
-        { status: 429, headers: { "Content-Type": "application/json" } }
+        { status: 429, headers: { "Content-Type": "application/json" } },
       );
     }
 
     const { text } = await generateText({
-      model: google("gemini-2.5-flash-lite-preview-06-17"),
-      prompt: `Use the given word to write 2 example sentences to showcase how can this word be used in real-life. Make sure you use simple and easy to understand sentences that is not too long or complex
-
-      Your response should be in JSON format with a key "examples" containing an array of 2 sentences.
-      Word:"${word}".`,
-    })
+      model: groq(MODEL),
+      prompt: `
+        Write 2 natural, real-life sentences using the word "${word}".
+
+        Sentence requirements:
+        1. First sentence → general real-life example
+        2. Second sentence → personal-style example (use "I" or "my")
+
+        Rules:
+        - keep sentences short and simple
+        - use everyday situations (friends, college, work, conversations)
+        - avoid formal or textbook tone
+        - make it feel like something someone would actually say
+
+        Return JSON only:
+        {
+          "examples": ["...", "..."]
+        }
+      `,
+    });
 
-    const cleaned = text.replace(/^```json\s*/, '').replace(/```$/, '');
+    const cleaned = text.replace(/^```json\s*/, "").replace(/```$/, "");
     const parsed = JSON.parse(cleaned);
 
     return new Response(JSON.stringify({ examples: parsed.examples }), {
       status: 200,
       headers: { "Content-Type": "application/json" },
     });
-
   } catch (err) {
-    return new Response('Bad Request', { status: 400 });
+    return new Response("Bad Request", { status: 400 });
   }
 }