DEV Community

Cover image for Lioric Architecture Explained: How the Lightweight AI Chat Widget Really Works
vinnugollakoti
vinnugollakoti

Posted on

Lioric Architecture Explained: How the Lightweight AI Chat Widget Really Works

Hello Developers! ๐Ÿ‘‹

In this blog, let's discuss the core Lioric Architecture

All the tools that are under Lioric :

  • Frontend Component (React.js)
  • Backend Component (TypeScript)
  • Database (Supabase PostgreSQL)
  • Vector Database (ChromaDB)
  • Vercel for Frontend Deployment
  • Render for Backend Deployment

In Lioric we manage two Databases:

  • PostgreSQL Database (Supabase): We use PostgreSQL to store all the details of the user, starting from name, email, etc., and we also store their client keys by hashing them. It also contains how many projects the user created and some minor data, which is required to run the website smoothly.

  • Vector Database (ChromaDB): We use ChromaDB whenever a user uploads a PDF file in the project creation page Lioric will fetch all the text from the PDF, make chunks, and then turn that into embeddings and store it in the ChromaDB. This way, whenever the customer searches for a query in the Lioric chat, it will give related information from the vectorDB.

This is how we use databases.

Why we prefer USE YOUR OWN API KEY model

We believe in building transparent and trustworthy AI chatbot applications. One of the biggest concerns users have is how their LLM tokens are being consumed and billed. When the platform manages the LLM keys on behalf of users, it becomes difficult for them to independently verify usage.

To solve this, we introduced the โ€œUse Your Own API Keyโ€ model.

In this approach, users bring and manage their own LLM API keys (e.g., Gemini, OpenAI, Anthropic, etc.). This gives complete visibility and control: users can monitor token usage, costs, and quotas directly in the official providerโ€™s dashboard (like Googleโ€™s Gemini API dashboard). It creates a trustless system where users donโ€™t have to rely on our word โ€” they can verify everything themselves.

NOTE : WE DON'T STORE YOUR LLM API KEYS IN OUR DATABASE

We just use it from the props in the Lioric tag directly.

Soon, I'm making all the code public.

Builder info:
Vinnugollakoti
Connect with me via X : vinnugollakoti
My GitHub: vinnugollakoti

Top comments (0)