Inspiration
We noticed how often we struggle with finding answers across a lot of scattered product documentation, support portals, and internal tools. This leads to confusion, frustration, and unnecessary support tickets. Persona was created to help companies turn disorganized product knowledge into one unified, intelligent platform that gives users instant clarity.
What it does
Persona contextualizes product data like docs, product guides, and help content into a smart, AI-powered assistant. It cleans, structures, and connects the data using force graphs and visual workflows. The result? Your users get context-aware answers and guided interactions, reducing confusion and increasing engagement.
How we built it
- Frontend: Next.js 14 and TypeScript, styled using Tailwind CSS and ShadCN
- Interactive UX: Workflows with XYFlow and 3D data visualizations using Three.js.
- Backend: Express.js to serve APIs and handle AI queries and user inputs.
- Data Storage: MongoDB Atlas for primary database including chat history and user context, Supabase Object Storage for media and documents.
- AI Integration: Google Gemini API for natural language understanding and content generation.
- Deployment: Hosted on Vercel (Frontend) and Azure Container Apps using Docker (Backend)
Challenges we ran into
- Workflow complexity: We found that building smooth interactions using React Flow with deeply nested data flows really challenging, especially integrating that with backend APIs.
- 3D visualizations: Since we used Three.js with large datasets, it was hard to optimize our backend data fetching context for performance in React, and making it work correctly with the frontend UI.
- Data pipeline: Cleaning and transforming scattered product content into structured, csv formats was for us the most technically demanding part, as it required a lot of regex checking and enforced prompt templates to our AI model.
Accomplishments that we're proud of
- Built a user-facing AI assistant that gives fast, accurate, and context-aware answers.
- Turned chaotic, unstructured product content into one interactive knowledge base.
- Delivered a polished, scalable experience deployed end-to-end through containerization.
- Since Gemini doesn’t retain context by default, we maintained continuity by caching user interactions and chat history in our database through custom state objects.
What we learned
- AI is only as good as the data provided, therefore making structured data and cleaning/preprocessing datasets crucial.
- Real-time interactive interfaces requires deep coordination between backend logic and frontend visuals for syncing, which was more challenging that we had initially thought.
- Azure is not fun: We tried using normal gh actions for CI/CD pipelines, but kept getting weird errors on Azure due to cors and http headers. Ended up having to go through the whole containerization process to deploy the backend.
What's next for Persona
- Adding analytics and feedback loops to make it possible for product agent creators to track user prompts and identify gaps in AI contexts.
- Voice support for conversational AI agents and richer personalization for our context editor.
Built With
- azure
- docker
- express.js
- google-gemini-api
- mongodb-atlas
- next.js-14
- react
- react-flow
- react-qr-code
- supabase-object-storage
- tailwind-css
- three.js
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.