Building Askie, your friendly helper to explain you things in Layman terms

Askie is an AI assitant powered by Gemini to take care of your all sorts of queries specifically build for making things simple

Ajeet Patel

September 2, 2025·16 min read

Share this article

Yes, you heard it right.

We are going to build an AI assistant which will answer your all kind of queries in Layman terms.

You’ve got any text query, we’ve got you covered.

You’ve got any image to analyze, we’ve got you covered.

You’ve got any PDF to summarize, we’ve got you covered.

You’ve got any URL to extract data, we’ve got you covered. 😉

Motive behind the project

So the core reason behind this theme was our internal hackathon, where we as a team competed individually to build something unique on different themes. I picked this theme because It had a lot of new things that I could learn throughout the journey such as vector DB, text embeddings and semantic search etc.

What are we building

So we’ll be building a platform or we say an assistant which can take any kind of inputs and answer your queries on that and the most important thing, it will be having Context Memory, Yes you read it right, context awareness is the most important aspect of this assistant.

Tech Stack

Frontend:

React Typescript
Tailwind for stylings
Shadcn for UI Elements
Supabase for authentication

Backend:

Node JS runtime with ExpressJS and Typescript
Gemini Models for querying and vector embeddings
Supabase for DB
Firecrawl for scraping URLs
Tesseract JS for OCR
PDF Parse library for reading PDFs

Prerequisites

We won’t be convering the setup related things like Supabase project creation, enabling email auth or frontend/backend project setup. We’ll cover the code functionalities of the product.

User Journey

Above is the detailed workflow how an input is processed from client to backend to DB and then response going back to client.

Cool, lots of theory, lets go into the tech side of it. We’ll start with Authentication from frontend.

Since we’re already using Supabase for DB, we’ll be using the same for auth as well. It’s one of the simplest auth ever.

Create a re-usable supabase client inside lib folder, it’ll help us to avoid creating config everytime we need supabase instance.

//System Instructions: const systemInstruction = (username: string) => ` You're Askie, an AI buddy helping ${username}. Follow these principles: - Assumt the end user is always a 5 years old kid, explain things in such a manner that a kid can understand. - Greet warmly on greetings, as someone would do with a kid. - Don't use Jargons, if necessary, explain them afterwards. - Add stories and examples everywhere needed. - If it's a simple factual question, answer it directly — no fluff, no intros or outros. - Use emojis only if they help with clarity 🎨 - Be positive and encouraging 😊 - Never make things up. If unsure, just say "Sorry, I don't know." - If a code snippet is provided, explain what it does in simple terms, focusing on the main functionality. Also provide examples if needed. And make sure you wrap the code snippets in tripple backticks, start with 3 backticks, mention programming language name put a \n then code snippet and end with 3 backticks. Please don't put too much comments,very minimal as needed. instead after the code snippet, explain it in text. - Context input is provided to help you understand the conversation better, but use it only if it adds value to your response and always prioritize the main query, context should be an add-on knowledge, if they don't match, ignore context. - If something related to Law, constitution is asked, provide the references from constitution and articles/sections as required. `; //prompt creation function export function promptEngine( query: string, extractedText: string = "", context: string = "", scrapedData: string = "", username: string = "Ajeet" ): string { const userPrompt = `Help ${username} with this input. Understand what the input is — it could be a question, a code snippet, a document, a legal text, a URL summary, etc. Explain it clearly.`; const infoParts = []; if (extractedText) { infoParts.push(`Here’s some extracted text from a file:\n${extractedText}`); } if (scrapedData) { infoParts.push(`Here’s scraped data from a webpage:\n${scrapedData}`); } if (context) { infoParts.push(`Here’s additional context from earlier:\n${context}`); } const finalInfo = infoParts.length ? `\n\n${infoParts.join("\n\n")}` : ""; return `${systemInstruction( username )}\n\n${userPrompt}\n\nUser Input:\n${query}${finalInfo}`; }

interface LLMResponseRendererProps { response: string; className?: string; } const LLMResponseRenderer: React.FC<LLMResponseRendererProps> = ({ response, className = "", }) => { const parseResponse = (text: string) => { const elements: JSX.Element[] = []; let currentIndex = 0; let elementKey = 0; // Regex to match code blocks with optional language const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g; let match; while ((match = codeBlockRegex.exec(text)) !== null) { const beforeCode = text.slice(currentIndex, match.index); // Process text before code block if (beforeCode.trim()) { elements.push( <div key={elementKey++} className="prose"> {parseTextContent(beforeCode)} </div> ); } // Add code block const language = match[1] || ""; const code = match[2].trim(); elements.push( <CodeBlock key={elementKey++} code={code} language={language} /> ); currentIndex = match.index + match[0].length; } // Process remaining text after last code block const remainingText = text.slice(currentIndex); if (remainingText.trim()) { elements.push( <div key={elementKey++} className="prose"> {parseTextContent(remainingText)} </div> ); } return elements; }; const parseTextContent = (text: string) => { // Split by double newlines for paragraphs, but preserve single newlines within paragraphs const paragraphs = text.split(/\n\s*\n/); const elements: JSX.Element[] = []; let elementKey = 0; paragraphs.forEach((paragraph, paragraphIndex) => { const lines = paragraph.split("\n"); lines.forEach((line) => { const trimmedLine = line.trim(); if (trimmedLine === "") { // Skip empty lines within paragraphs return; } // Check for headings if (trimmedLine.startsWith("### ")) { elements.push( <h3 key={elementKey++} className="text-lg font-bold mt-4 mb-2 text-gray-800" > {parseTextWithInlineCode(trimmedLine.substring(4))} </h3> ); } else if (trimmedLine.startsWith("## ")) { elements.push( <h2 key={elementKey++} className="text-xl font-bold mt-6 mb-3 text-gray-800" > {parseTextWithInlineCode(trimmedLine.substring(3))} </h2> ); } else if (trimmedLine.startsWith("# ")) { elements.push( <h1 key={elementKey++} className="text-2xl font-bold mt-6 mb-4 text-gray-800" > {parseTextWithInlineCode(trimmedLine.substring(2))} </h1> ); } else if (trimmedLine.match(/^\d+\.\s/)) { // Handle numbered lists elements.push( <p key={elementKey++} className="mb-2 text-gray-700 leading-relaxed ml-4" > {parseTextWithInlineCode(trimmedLine)} </p> ); } else { // Regular text - preserve line breaks within paragraphs elements.push( <p key={elementKey++} className="mb-3 text-gray-700 leading-relaxed" > {parseTextWithInlineCode(line)} </p> ); } }); // Add spacing between paragraphs (except for the last one) if (paragraphIndex < paragraphs.length - 1) { elements.push(<div key={elementKey++} className="mb-4" />); } }); return elements; }; const parseTextWithInlineCode = (text: string) => { // Handle inline code first, then bold text const codeRegex = /(`[^`]+`)/g; const parts = text.split(codeRegex); return parts.map((part, index) => { if (part.startsWith("`") && part.endsWith("`")) { // Inline code return ( <code key={index} className="px-1.5 py-0.5 bg-gray-100 text-red-600 rounded text-sm font-mono border" > {part.slice(1, -1)} </code> ); } else { // Handle bold text in non-code parts return parseBoldText(part, index); } }); }; const parseBoldText = (text: string, baseKey: number = 0) => { const parts = text.split(/(\*\*.*?\*\*)/g); return parts.map((part, index) => { if (part.startsWith("**") && part.endsWith("**")) { return ( <strong key={`${baseKey}-${index}`} className="font-semibold"> {part.slice(2, -2)} </strong> ); } return part; }); }; return ( <div className={`max-w-none ${className}`}>{parseResponse(response)}</div> ); }; export default LLMResponseRenderer;

import React, { type JSX } from "react"; import { Copy, Check } from "lucide-react"; interface CodeBlockProps { code: string; language: string; } const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => { const [copied, setCopied] = React.useState(false); const handleCopy = async () => { await navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const highlightCode = (code: string) => { const lines = code.split("\n"); return lines.map((line, lineIndex) => { const tokens = tokenizeLine(line); return ( <div key={lineIndex} className="leading-relaxed"> {tokens.map((token, tokenIndex) => ( <span key={tokenIndex} className={getTokenClass(token.type)}> {token.value} </span> ))} </div> ); }); }; const tokenizeLine = (line: string) => { const tokens: Array<{ type: string; value: string; start: number; end: number; }> = []; // Define regex patterns in order of precedence const patterns = [ { type: "comment", regex: /\/\/.*$|\/\*[\s\S]*?\*\//g }, { type: "string", regex: /(['"`])((?:(?!\1)[^\\]|\\.)*)(\1)/g }, { type: "inlineCode", regex: /`[^`]+`/g }, { type: "keyword", regex: /\b(const|let|var|function|class|interface|type|import|export|from|if|else|for|while|return|async|await|try|catch|finally|throw|new|this|super|extends|implements|public|private|protected|static|readonly)\b/g, }, { type: "number", regex: /\b\d+\.?\d*\b/g }, { type: "operator", regex: /[+\-*/%=<>!&|^~?:;,.]/g }, { type: "bracket", regex: /[(){}[\]]/g }, ]; // Find all matches with their positions const allMatches: Array<{ type: string; value: string; start: number; end: number; }> = []; patterns.forEach((pattern) => { const regex = new RegExp(pattern.regex.source, pattern.regex.flags); let match; while ((match = regex.exec(line)) !== null) { allMatches.push({ type: pattern.type, value: match[0], start: match.index, end: match.index + match[0].length, }); } }); // Sort matches by position and remove overlaps allMatches.sort((a, b) => a.start - b.start); // Remove overlapping matches (keep the first one) const nonOverlappingMatches = []; let lastEnd = 0; for (const match of allMatches) { if (match.start >= lastEnd) { nonOverlappingMatches.push(match); lastEnd = match.end; } } // Build tokens from non-overlapping matches let currentIndex = 0; nonOverlappingMatches.forEach((match) => { // Add text before match if (match.start > currentIndex) { const textValue = line.slice(currentIndex, match.start); if (textValue) { tokens.push({ type: "text", value: textValue, start: currentIndex, end: match.start, }); } } // Add the matched token tokens.push(match); currentIndex = match.end; }); // Add remaining text if (currentIndex < line.length) { const remainingText = line.slice(currentIndex); if (remainingText) { tokens.push({ type: "text", value: remainingText, start: currentIndex, end: line.length, }); } } return tokens; }; const getTokenClass = (type: string) => { switch (type) { case "comment": return "text-green-400 italic"; case "string": return "text-blue-400"; case "inlineCode": return "text-yellow-300 bg-gray-800 px-1 rounded"; case "keyword": return "text-purple-400 font-medium"; case "number": return "text-orange-400"; case "operator": return "text-gray-400"; case "bracket": return "text-gray-300 font-medium"; default: return "text-gray-200"; } }; return ( <div className="my-4 rounded-lg border border-gray-300 bg-gray-900 overflow-hidden shadow-sm"> <div className="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"> <span className="text-sm font-medium text-gray-300 capitalize"> {language || "code"} </span> <button onClick={handleCopy} className="flex items-center gap-1 px-2 py-1 text-sm text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors" > {copied ? <Check size={14} /> : <Copy size={14} />} {copied ? "Copied!" : "Copy"} </button> </div> <pre className="p-4 overflow-x-auto bg-gray-900"> <code className="text-sm font-mono text-gray-200 whitespace-pre block"> {highlightCode(code)} </code> </pre> </div> ); };

Services

Case Studies

About CreoWis

Culture

InterMentorship

Hatch-n-Hype

Meet Our People

Careers at CreoWis

Blog

Let's Talk

Building Askie, your friendly helper to explain you things in Layman terms

Motive behind the project

What are we building

Tech Stack

Frontend:

Backend:

Prerequisites

User Journey

Frontend UI

Text Input

File Input

URL Input

Semantic Search

UI Component

Code Blocks UI Component

Future Enhancements