RAGgle – DEV Community

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built a conversational search engine powered by Nuclia’s Agentic RAG, for e‑commerce product research so users get clear, relevant insights tailored to your interests.

The app solves a common problem: extracting and making sense of scattered product information across multiple websites. With this tool, users can: index product data from any website automatically, and chat with an AI assistant to explore insights from the indexed results.

On the frontend, the interface is built with KendoReact and React components. On the backend, a Flask API handles integration with Nuclia’s endpoints, managing indexing, search, and conversational retrieval.

Demo

🎥 The demo showcases:

• KendoReact component interactions
• Image upload and AI-powered analysis
• Conversational search with book-related queries
• Complete user workflow from indexing to insights

Performance Metrics

Sample Query: Why is the book 107 days by Kamala harris so popular?
Rephrased Query: “What makes Kamala Harris’s book ‘107 Days’ so popular?”

Performance Insights

• Token Efficiency: High input-to-output token ratio (19.6:0.2) indicates efficient query processing
• Response Speed: Sub-4-second total response time for complex conversational queries

These metrics show RAGgle’s ability performance for real-time conversational search.

📌

🧩 KendoReact Components Used

1. TabStrip (from @progress/kendo-react-layout)
2. TabStripTab (from @progress/kendo-react-layout)
3. Popup (from @progress/kendo-react-popup)
4. Icon (from @progress/kendo-react-common)
5. Button (from @progress/kendo-react-buttons)
6. Switch (from @progress/kendo-react-inputs)
7. DatePicker (from @progress/kendo-react-dateinputs)
8. ProgressBar (from @progress/kendo-react-progressbars)
9. Tooltip (from @progress/kendo-react-tooltip)
10. Notification (from @progress/kendo-react-notification)
11. NotificationGroup (from @progress/kendo-react-notification)

[Optional: RAGs to Riches Prize Category] Nuclia Integration

Overview

RAGgle is a custom search engine that leverages Nuclia’s Agentic RAG capabilities to automatically crawl and index URLs.

• Users can enter a URL, and Nuclia proceeds to index the entire site automatically within minutes.
• An AI chat widget (built and imported from Nuclia) provides natural language interaction.

Model used: chatgpt-azure-4o for standard answer generation and image processing.

⚡ Active Endpoints

Purpose: Receives a URL from the frontend, instructs Nuclia to ingest the content from that URL, retrieves extracted metadata from Nuclia, and then stores relevant product information in a Supabase products table.

Purpose: Provides the Nuclia API keys and Knowledge Box ID to the frontend, allowing the nuclia-chat widget to connect to the correct Nuclia instance.

⚙️ How It Works

Here’s what the frontend enables:

The Nuclia chat widget is imported with custom features through its attributes such as (answers, queryImage, rephrase, citations).

A label set is created in the Nuclia dashboard and applied to all indexed resources. The chatbot then uses these labels through configured attributes:

rag_strategies="neighbouring_paragraphs|2|2,metadata_extension|classification_labels"
generativemodel="chatgpt-azure-4o"
metadata="title, author, price"

1. Index Wholesale Sites

   Paste a product page URL (e.g., Alibaba, Amazon) and the system automatically scrapes and indexes the content into your Nuclia KB (Knowledge Base).

2. Quick Search

   • Queries are automatically rephrased with AI for better semantic matching using the /predict/rephrase endpoint.
   • Relationship-based search finds focused product-related information from image references or questions.

3. Converse with AI

   A built-in Nuclia-powered chat assistant helps explore indexed results conversationally and provides context-aware insights for persistent chats.

🕷️ Database Integration in URL Indexing

To search products and make meaningful comparisons, you need a structured data layer.

Let Nuclia do the heavy lifting:

Why? Because its internal scraping mechanism is more effective than any direct requests.get approach. Nuclia successfully indexes content from protected sites including major e-commerce platforms like Amazon and Alibaba.

Data Flow:
URL → Nuclia (automatic scraping & indexing) → Extract structured data from Nuclia → Supabase (optional)

Initially attempted to use BeautifulSoup for direct scraping, but leveraged Nuclia’s internal scraping capabilities instead.

Nuclia’s RAG capabilities automatically process the content of the URL, extract entities, and generate usermetadata based on the content it finds. This usermetadata often includes details like product names, prices, descriptions, and images if they are present and structured on the webpage.

After Nuclia has processed the URL, the backend then takes these extracted details (like name, price_text, image_url, description, supplier, availability) and stores them in a Supabase products table for monitoring trends over time.

Here’s how the backend system works:

1. Upload URL to Nuclia
2. Retrieve extracted metadata from Nuclia
3. Store flattened data in Supabase
4. Return success to frontend

🎯 Result: Your chatbot can answer both qualitative questions (product features, reviews) and quantitative questions (pricing trends, comparisons).

No hallucinations here: if the data isn’t in the KB, the AI won’t produce an answer. That’s the beauty of RAG, it’s grounded, reliable responses are from real sources.