DEV Community

Joseph Martin
Joseph Martin

Posted on

I made a personalized AI web app with RAG

So during my 4th Year of my college my team had decided to build a Personalized AI Assistant that can understand the user's behavior and give results accordingly.

We had implemented reinforcement learning in the backend server, so based on the feedback given by the user it gives the output.

During the later stages of the project I glimpsed on something called RAG (Retrieval Augmented Generation).

Because the problem statement and research were already done on reinforcement learning my teammates were not interested in RAG.

What is RAG?
Retrieval Augmented Generation (RAG) is basically an AI technique that enhances the LLM's result by retrieving information from a Knowledge Graph.

The Knowledge Graph can be anything:-

  • User's interests and traits
  • Your Netflix viewing genres, actors etc
  • YouTube Recommendations and so much more..

Many consumer based companies are using Knowledge Graphs to get a better understanding of the user and give recommendations based on it.

Now Knowledge Graphs are used by AI for better accuracy and more context.

And that's how I got the idea for the Project Persona

Persona constructs a highly detailed, multi-dimensional Knowledge Graph of the user. By understanding a user's psychological traits, professional domains, and specific technical skills.

First Persona makes you take a personality test that is based on MBTI (Myers–Briggs Type Indicator).

MBTI test gives you a personality type based on eight traits:-

  • Extroversion
  • Introversion
  • Sensing
  • Intuition
  • Thinking
  • Feeling
  • Judging
  • Perceiving

Persona also has a page for sending GitHub profile link and resume to get a technical background of the user.

Now lets dive into the frontend and backend of Persona.

Backend
The backend is a Node.js and Express server. It consists of three major pillars:

  1. Multi-Modal Data Ingestion To build an accurate profile of a user, we needed data. I built several ingestion pipelines:
  • Interactive Assessments: A custom MBTI quiz

  • Headless Social Scraping: Using Playwright and stealth plugins, the backend can scrape public URLs (like a GitHub profile) to understand a user's open-source contributions and coding interests.

  • Resume Parsing: Using multer and pdf-parse, users can upload their PDF resumes directly.

  1. LLM Intelligence & Vector Embeddings Once we have raw unstructured text (from a resume or GitHub profile), the data is passed it to Groq (running the llama-3.3-70b-versatile model). The LLM is prompted to act as a behavioral analyst, extracting specific Traits, Domains (e.g., Software Engineering), and Entities (e.g., React.js).

To give this data mathematical meaning, I used HuggingFace (BAAI/bge-small-en-v1.5) to generate semantic vector embeddings to build knowledge graph of traits and entities.

  1. Neo4j & Graph RAG This is where the magic happens. All of the extracted nodes are mapped into a Neo4j Graph Database. The structure looks something like this: [User] -> [Domain] -> [Entity] [User] -> [Trait]

When a user asks the AI a question, the backend converts the query into a vector, searches the Neo4j database for the most semantically relevant nodes connected to that specific user, and injects that graph data into the LLM prompt. The result? An AI assistant that doesn't just answer your question, but answers it specifically for you based on your Knowledge Graph.

Frontend

The frontend was built using Next.js, React 19, and Tailwind CSS.

  1. Visualizing the Graph
    Because a Knowledge Graph is inherently visual, we wanted users to actually see their data. We integrated react-force-graph (both 2D and 3D) alongside three.js. The central node is the User, which branches out into their active Domains, which further branch out into specific Entities (like programming languages or hobbies).

  2. Seamless Integration

    • Authentication: Firebase Auth.
  • Settings & Sync: A dedicated hub where users can seamlessly upload their resumes or drop in their GitHub URLs to trigger the backend pipelines.

  • Context-Aware Chat: The chat interface isn't just a generic text box. It acts as the direct line to the Graph RAG backend. When you ask for career advice, the UI dynamically streams back a response that factors in your uploaded resume, your scraped GitHub data, and your MBTI baseline.

Since this app is not technically personalized I will be working on a self hosted version of the app where the user can run the app completely locally without internet.

I hope that this blog helped you to get some insights about RAG and Persona. Thank you

Project Links:-
Frontend: https://github.com/J0seph-Mart1n/PersonaWebApp
Backend: https://github.com/J0seph-Mart1n/Persona_Backend

Top comments (1)

Collapse
 
itsugo profile image
Aryan Choudhary

That's so cool! I love how you're pushing the boundaries of what's possible with AI and personality-driven tech. Using Neo4j to build a Knowledge Graph is genius - I can only imagine the kind of insights that come from visualizing all that data.