Add basic chat bot

Add basic chat bot implementation including MOS lookup tool and required user auth

Author: jonulak

.gitignore

@@ -55,3 +55,4 @@ public/workbox-*.js
 
 
 /src/generated/prisma
+.neon

package-lock.json

@@ -20,6 +20,8 @@
   },
   "dependencies": {
     "@ai-sdk/azure": "^1.0.7",
+    "@ai-sdk/google": "^1.2.19",
+    "@ai-sdk/react": "^1.2.12",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@googlemaps/typescript-guards": "^2.0.1",
     "@neondatabase/serverless": "^1.0.1",
@@ -33,7 +35,7 @@
     "@types/express": "^4.17.17",
     "@vercel/analytics": "^1.4.1",
     "ace-builds": "^1.33.1",
-    "ai": "^2.2.37",
+    "ai": "^4.3.16",
     "axios": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
@@ -64,7 +66,8 @@
     "swiper": "^8.3.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "ws": "^8.18.2"
+    "ws": "^8.18.2",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^4.1.3",

package.json

@@ -0,0 +1,16 @@
+import { CoreMessage } from "ai";
+import { gemini } from "@/lib/ai/gemini";
+import { getServerSession } from "next-auth/next";
+import { NextRequest, NextResponse } from "next/server";
+import { options } from "@/pages/api/auth/options";
+
+export async function POST(req: NextRequest) {
+    const session = await getServerSession(options);
+    if (!session) {
+        return NextResponse.json({ error: "You must be logged in to access this API route." });
+    }
+    console.log(session);
+    const { messages }: { messages: CoreMessage[] } = await req.json();
+    const response = gemini.chat(messages);
+    return response.toDataStreamResponse();
+}

public/fallback-Nzvr5ryCQtcQecaFx-g4T.js renamed to public/fallback-JG6ypUmbo2oIpnb-OA2eD.js

@@ -0,0 +1,84 @@
+import { type LanguageModel, streamText, type CoreMessage, generateObject } from "ai";
+import { type ZodType, type ZodTypeDef } from "zod";
+import { mosLookup } from "./tools/mos-lookup";
+
+const baseContext = `
+                    You are a specialized AI assistant for Vets Who Code members, designed to provide clear, practical technical guidance to veterans transitioning into software development careers.\n\n
+                    CORE TECH STACK:\n
+                    - Frontend: JavaScript, TypeScript, React, Next.js\n
+                    - Styling: CSS, Tailwind CSS\n
+                    - Backend: Python, FastAPI\n
+                    - Data & Visualization: Streamlit\n
+                    - Advanced: AI/ML fundamentals\n
+                    - Development Tools: Git, GitHub, VS Code\n
+                    - Testing: Jest, Pytest\n\n
+
+                    CAREER TRANSITION GUIDANCE:\n
+                    1. Resume Development:\n
+                       - Technical Skills: Programming Languages, Frameworks, Tools, Cloud, Testing\n
+                       - Military Experience Translation: Leadership, Problem-solving, Team Collaboration\n\n
+
+                    2. Portfolio Development:\n
+                       - Clean code and documentation\n
+                       - Version control and API integration\n
+                       - Responsive design and performance\n
+                       - Testing and TypeScript implementation\n
+                       - Security and accessibility standards\n\n
+
+                    LEARNING PATHS:\n
+                    1. Fundamentals: HTML, CSS, JavaScript, Git\n
+                    2. Intermediate: TypeScript, React, Python\n
+                    3. Advanced: Next.js, FastAPI, Streamlit, AI/ML\n\n
+
+                    PROJECT FOCUS:\n
+                    1. Portfolio Projects: Personal website, APIs, Data visualization\n
+                    2. Technical Skills: Code quality, Testing, Security, Performance\n
+                    3. Career Materials: GitHub profile, Technical blog, Documentation\n\n
+
+                    Remember: Provide practical guidance for building technical skills and transitioning to software development careers. 
+                    Focus on concrete examples and best practices.
+`;
+
+export class ChatBot {
+    model: LanguageModel;
+
+    constructor(model: LanguageModel) {
+        this.model = model;
+    }
+
+    chat(messages: CoreMessage[], systemContext: string | null = baseContext) {
+        const includedMessages: CoreMessage[] = [];
+        if (systemContext) {
+            includedMessages.push({
+                role: "system",
+                content: systemContext,
+            });
+        }
+        includedMessages.push(...messages);
+
+        console.log("Sending messages to AI model:", includedMessages);
+        const response = streamText({
+            model: this.model,
+            messages: includedMessages,
+            tools: { mosLookup },
+            onFinish: (message) => {
+                // TODO - store response in database
+                if (message.text) {
+                    console.error("Response received:", message.text);
+                }
+
+                if (message.toolCalls && message.toolCalls.length > 0) {
+                    console.log("Tool calls received:", JSON.stringify(message.toolCalls));
+                    console.log("Tool call results:", JSON.stringify(message.toolResults));
+                }
+            },
+            onError: (error) => {
+                console.error("Error during chat response stream:", error);
+            },
+            maxSteps: 5,
+        });
+        console.log("Chat response stream initialized");
+
+        return response;
+    }
+}

src/app/api/chat/route.ts

@@ -0,0 +1,22 @@
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { ChatBot } from "./chat-bot";
+// import { google } from "@ai-sdk/google";
+
+const API_KEY = process.env.GOOGLE_GENERATIVE_AI_API_KEY;
+if (!API_KEY) {
+    throw new Error("GOOGLE_GENERATIVE_AI_API_KEY is not set in the environment variables.");
+}
+
+const modelName = "gemini-2.5-flash-preview-04-17";
+
+const google = createGoogleGenerativeAI({
+    apiKey: API_KEY,
+});
+const model = google(modelName);
+
+// const globalForGemini = global as unknown as { gemini: ChatBot };
+
+export const gemini = new ChatBot(model);
+// if (process.env.NODE_ENV === "development") globalForGemini.gemini = gemini;
+
+export default gemini;

src/lib/ai/chat-bot.ts

@@ -0,0 +1,134 @@
+import { tool } from "ai";
+import { z } from "zod";
+import axios from "axios";
+import { chromium } from "@playwright/test";
+import { gemini } from "../gemini";
+
+const { ONET_USER } = process.env;
+const { ONET_PASSWORD } = process.env;
+
+export interface ONETResponse {
+    keyword: string;
+    branch: string;
+    start: number;
+    end: number;
+    total: number;
+    military_matches: MilitaryMatches;
+    career: Career[];
+}
+
+export interface MilitaryMatches {
+    match: Match[];
+}
+
+export interface Match {
+    branch?: string;
+    active: boolean;
+    code: string;
+    title: string;
+    external_info?: ExternalInfo[];
+}
+
+export interface ExternalInfo {
+    href: string;
+    title: string;
+}
+
+export interface Career {
+    href: string;
+    match_type: string;
+    code: string;
+    title: string;
+    tags: Tags;
+    military_jobs: MilitaryJobs;
+}
+
+export interface Tags {
+    bright_outlook: boolean;
+    green: boolean;
+    apprenticeship: boolean;
+}
+
+export interface MilitaryJobs {
+    air_force: boolean;
+    army: boolean;
+    coast_guard: boolean;
+    marine_corps: boolean;
+    navy: boolean;
+}
+
+const onetAPI = axios.create({
+    baseURL: "https://services.onetcenter.org/v1.9/ws",
+    headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${Buffer.from(`${ONET_USER}:${ONET_PASSWORD}`).toString("base64")}`,
+    },
+});
+
+const fetchExternalData = async (urls: string[]) => {
+    const browser = await chromium.launch({
+        headless: true,
+    });
+    const context = await browser.newContext({
+        userAgent:
+            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36",
+    });
+
+    const responses = await Promise.all(
+        urls.map(async (url) => {
+            const page = await context.newPage();
+            await page.goto(url);
+            return page.innerHTML("body");
+        })
+    );
+
+    await browser.close();
+
+    return responses;
+};
+
+export const mosLookup = tool({
+    description:
+        "Lookup a Military Occupational Specialty (MOS) or Air Force Specialty (AFSC) code to get its description and related information. This tools should be used if the user enters the /mos or /afsc command which will be followed by the MOS or AFSC code. The tool will return information about the MOS of AFSC code. The data should be transformed into a user friendly format which includes skills that are transferrable to a career in tech. If the tool returns an error, the AI should respond with a relevant message to the user.",
+    parameters: z.object({
+        code: z.string().describe("The MOS or AFSC code to look up, e.g., '11B' for Infantryman."),
+    }),
+    execute: async ({ code }) => {
+        const response = await onetAPI.get(`/veterans/military?keyword=${code}`);
+        if (response.status !== 200) {
+            return { error: `Failed to fetch MOS data for code: ${code}` };
+        }
+        try {
+            const data = response.data as ONETResponse;
+            if (
+                !data ||
+                !data.military_matches ||
+                !data.military_matches.match ||
+                data.military_matches.match.length === 0
+            ) {
+                return { error: `No matches found for MOS code: ${code}` };
+            }
+
+            if (data.military_matches.match.length > 1) {
+                return { error: `Multiple matches found for MOS code: ${code}` };
+            }
+
+            const match = data.military_matches.match[0];
+
+            // Fetch additional external data if available
+            const externalURLs = match.external_info?.map((info) => info.href) || [];
+            const externalData = await fetchExternalData(externalURLs);
+            console.log("External data fetched:", externalData);
+
+            return {
+                mos: match,
+                similar_careers: data.career,
+                mos_descriptions: externalData,
+            };
+        } catch (error) {
+            return { error: `Failed to parse MOS data for code: ${code}` };
+        }
+    },
+});
+
+export default mosLookup;

src/lib/ai/gemini.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { NextPage } from "next";
+import Layout from "@layout/layout-01";
+import { useSession, getSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+type PageWithLayoutType = NextPage & {
+    Layout: typeof Layout;
+};
+
+const Chat: PageWithLayoutType = () => {
+    const { messages, input, handleInputChange, handleSubmit } = useChat();
+    const { status } = useSession();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (status === "unauthenticated") {
+            router.push("/login");
+        }
+    }, [router, status]);
+
+    return (
+        <div className="tw-stretch tw-mx-auto tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-py-24">
+            {messages.map((message) => (
+                <div key={message.id} className="tw-w-full tw-whitespace-pre-wrap tw-px-10">
+                    {message.role === "user" ? "User: " : "AI: "}
+                    {message.parts.map((part, i) => {
+                        switch (part.type) {
+                            case "text":
+                                // eslint-disable-next-line react/no-array-index-key
+                                return <div key={`${message.id}-${i}`}>{part.text}</div>;
+                            default:
+                                return null;
+                        }
+                    })}
+                </div>
+            ))}
+
+            <form onSubmit={handleSubmit}>
+                <input
+                    className="tw-fixed tw-inset-x-0 tw-bottom-0 tw-z-50 tw-mx-auto tw-mb-8 tw-w-full tw-max-w-lg tw-rounded tw-border tw-border-zinc-300 tw-p-2 tw-shadow-xl dark:tw-border-zinc-800 dark:tw-bg-zinc-900"
+                    value={input}
+                    placeholder="Say something..."
+                    onChange={handleInputChange}
+                />
+            </form>
+        </div>
+    );
+};
+
+Chat.Layout = Layout;
+export default Chat;