sahra 💫

Posted on Oct 27

🤖Custom-Embeddable Secure Agentic Chatbot for SaaS Applications

#devchallenge #auth0challenge #ai #authentication

Auth0 for AI Agents Challenge Submission

This is a submission for the Auth0 for AI Agents Challenge

💡 What I Built

Euclid is a custom-embeddable, agentic chatbot that lets application owners configure their own secure AI assistant — one that can think, act, and integrate directly into existing systems without compromising identity or access control.

Want to give your users the power of AI in your application without having to build it from scratch? Euclid gives every application owner a personalized, embeddable AI agent that connects to their APIs, retrieves relevant knowledge, and performs safe, authorized actions on request — all powered by Auth0 for AI Agents.

🔗 Live Bot Config Site:

euclidbot.netlify.app

💻 Github Repository:

Sarah-okolo / euclid-BE

🎬 Bot Config Demo

🎬 Bot Embed and Customization Demo

At its core, Euclid is:

Configurable: App owners configure (Create or Edit) their chatbot via a live site— defining persona, tone, and allowed API endpoints, roles, and the application's knowledge base.
Secure: Auth0 ensures every AI action is identity-verified and role-restricted.
Context-aware: Using RAG (Retrieval-Augmented Generation), Euclid retrieves relevant app-specific knowledge before each response.
Embeddable: A lightweight JS widget that can be dropped into any SaaS or web app.
Agentic: Beyond conversation, the AI can safely act on behalf of authenticated users.

In simple terms:

Euclid learns about the application it's embedded into — it looks up and uses your data provided during configuration intelligently.

🧩 How It Works

1. Configuration Site

The dashboard lets application owners:

Upload PDFs or internal documentation (knowledge base).
Set bot personality, default prompts, and visual appearance.
Connect their Auth0 credentials (domain, audience, namespace).
Define which API endpoints are accessible to which user roles.

Each bot is stored with a unique botId and configuration metadata in MongoDB.
When an app owner uploads a PDF, Euclid automatically splits it into chunks, generates embeddings (using Gemini), and stores them in Chroma or Pinecone for contextual retrieval.

2. The Widget

Embedding a bot is as easy as adding this snippet:

<script
  src="https://euclid-widget.netlify.app/widget.js"
  data-bot-id="euclid-bot-xxxxxxxxxxxx"
  data-color="#06B6D4"
  data-default-state="info"
  data-info-message="Hi there! Need any help?"
></script>

That snippet instantly renders a chat bubble (position and color configurable) that expands into a full chat window.
The widget manages the chat lifecycle, handles message flow, and includes smooth, pulsing typing animations for natural feedback.

3. The Backend

Behind the scenes:

Express.js powers the REST API for bot creation, updates, and chat sessions.
MongoDB stores bot configurations and state.
Gemini handles embeddings and AI text generation.
Pinecone/Chroma stores and retrieves vector embeddings for RAG.
Auth0 secures the action layer — ensuring the AI acts only within authenticated and authorized scopes.

🔐 How I Used Auth0 for AI Agents

Step 1: User Authentication

A user signs into the app (which uses Auth0). Auth0 issues a signed JWT that includes user identity, roles, and permissions.

Step 2: Chat Request

When the user sends a message, their userToken (Auth0 JWT) is sent with the message to Euclid’s /api/chat endpoint:

{
  "botId": "abc123",
  "userMessage": "Show my invoices",
  "userToken": "<Auth0 JWT>"
}

Step 3: Agentic Reasoning

If the AI determines that the user’s question requires a real-world action (like fetching /invoices), it triggers a secure call to the Proxy Service.

Step 4: Secure Proxy Execution

The proxy verifies the JWT using the app owner’s Auth0 JWKS endpoint, then extracts user roles from the configured namespace.

Each bot defines its own endpoint-role mapping, for example:

[
  { "endpoint": "/orders", "roles": ["admin", "sales"] },
  { "endpoint": "/invoices", "roles": ["finance"] }
]

If the user’s role doesn’t match the requirement, the AI is blocked before the request executes — ensuring zero-trust execution.

🧠 The result: the Agent becomes a trusted digital teammate, acting securely and transparently inside the app.

🧭 Lessons Learned & Takeaways

Building Euclid reinforced a core principle of AI system design:

AI should be capable, but always accountable.

Here’s what I learned:

Integrating AI into SaaS products without proper identity control is risky.
Auth0 for AI Agents ensures every AI action is linked to a verified user.
Secure RAG pipelines let AI access private data safely, without retraining models.
Agentic doesn’t mean uncontrolled — it means autonomous within boundaries.

In short:

“Euclid lets AI work for your users — not around your security.”

🛠️ Tech Stack

Layer	Technology
Authentication	Auth0 for AI Agents (JWT + JWKS)
Server	Express.js
Database	MongoDB
Vector Store	Pinecone / Chroma
LLM + Embeddings	Gemini
Frontend Widget	Vanilla JS + CSS animations
File Uploads	Multer
PDF Parsing	`pdf-parse`

✨ Final Thoughts

AI assistants are becoming more agentic — capable of reasoning and acting.
But true progress comes when that autonomy is paired with security.

Auth0 for AI Agents bridges that gap perfectly, allowing developers to give their AI systems both intelligence and integrity.

That’s what Euclid stands for:

Smart AI, within safe boundaries.

A big thanks to the Auth0 and DEV team for putting together this challenge. I had a really fun time building out my submission. And because I am very confident in its real-world value, I definitely would be taking the solution far beyond this challenge💪. Cheers🥂

DEV Community