DEV Community

Cover image for We Built a Typesense Dashboard with an AI Brain and It's Lowkey Insane 🧠⚡
Mothilal M for 10XScale

Posted on

We Built a Typesense Dashboard with an AI Brain and It's Lowkey Insane 🧠⚡

TLDR for the scroll-addicted 📱

We built Typesense UI — an open-source, fully interactive dashboard for Typesense with a built-in AI assistant powered by Gemini 2.0 Flash. You can literally talk to your search data in plain English.

It's free. It's open source. It slaps.

👉 GitHub: github.com/Mothilal-hire10x/typesense-ui
👉 Run it instantly: npx typesense-ui


The Origin Story (a.k.a. why we rage-built this) 😤

If you've ever used Typesense, you know it's an absolute beast of a search engine — blazingly fast, typo-tolerant, and open source. But let's be real... managing collections and documents through cURL commands and JSON payloads?

That's giving 2015 energy.

We wanted something that looks like it belongs in 2026. Something with dark mode (obviously), smooth animations, and — here's the plot twist — an AI that actually understands our data and can query it for us.

So we built it. And honestly? It ate and left no crumbs. 🍽️


What Makes This Different? (It's Not Just Another CRUD App)

🤖 AI Assistant That Actually Understands Your Data

This is the main character energy of the whole project.

The built-in AI chat (powered by Gemini 2.0 Flash) doesn't just answer generic questions — it has full Typesense tool-calling capabilities. It can:

  • List and inspect your collections
  • Search documents with complex filters
  • Create, update, and delete documents
  • Show results in beautifully formatted tables
  • Ask for confirmation before destructive operations (it's responsible bestie fr fr)

Just type something like:

"Show me all users who signed up last month sorted by name"

And it literally queries your Typesense instance and returns the results. In a table. With pagination. WHAT.

⚡ The Landing Page Goes STUPID Hard

Not gonna lie, we may have gone a little overboard with the landing page. It features:

  • 3D scene built with React Three Fiber & Three.js
  • GSAP animations with scroll-triggered reveals
  • Lenis smooth scrolling (that butter-smooth feel)
  • Magnetic hover effects on CTAs
  • Fully responsive, dark-themed, cinematic vibes

It's giving Apple product page energy and we're not apologizing for it.

🎨 The Dashboard Itself (Where the Real Work Happens)

Once you connect to your Typesense server, you get:

Feature What It Does
Collections Sidebar Browse all collections with doc counts, search/filter
Advanced Table View Paginated, sortable, with column picker
Live Search Instant full-text search across all fields
Dynamic Filters Auto-generated from schema — text, range, boolean
Document Editor Create, edit, delete docs with JSON editor
Dark/Light Mode Because we respect the vibe check
Schema Inspector View full collection schemas at a glance

Everything is real-time. Type a search query, toggle a filter, click a column header — instant response. No loading spinners holding your life hostage.


How to Get Started (It's Embarrassingly Easy)

Option 1: The One-Liner 🏎️

npx typesense-ui
Enter fullscreen mode Exit fullscreen mode

That's it. That's the tweet. It spins up a local server and opens the dashboard. Done.

Option 2: Clone & Vibe

git clone https://github.com/Mothilal-hire10x/typesense-ui.git
cd typesense-ui
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000, enter your Typesense server details, and you're locked in. 🔐

Option 3: Install Globally

npm install -g typesense-ui
typesense-ui
Enter fullscreen mode Exit fullscreen mode

Setting Up the AI Assistant

  1. Click the ✨ sparkle button in the bottom-right
  2. Enter your Gemini API key (get one free here)
  3. Start chatting with your data like it owes you money

The AI in Action — Some Wild Prompts That Just Work

Here are some things you can literally just say to the AI:

🗣️ "What collections do I have?"
→ Lists all collections with doc counts and schemas

🗣️ "Find products cheaper than $50 sorted by price"
→ Searches with filter_by and sort_by, returns a formatted table

🗣️ "Delete the document with ID abc123 from the users collection"
→ Shows a confirmation dialog first (safety first bestie)

🗣️ "What fields does the orders collection have?"
→ Returns the full schema breakdown

🗣️ "Create a new document in products with name 'Widget' and price 29.99"
→ Creates the doc after your confirmation

The AI has function calling — it doesn't just hallucinate answers, it actually executes real Typesense operations. It's like having a senior dev who never sleeps and never complains. We love to see it.


Why Typesense Deserves Better Tooling

Typesense is genuinely one of the best open-source search engines out there. It's:

  • Blazingly fast (sub-millisecond searches)
  • 🔤 Typo-tolerant out of the box
  • 🧠 Easy to setup compared to Elasticsearch
  • 💰 Free & open source

But the ecosystem around it — especially for visual management — has been lacking. The official dashboard is decent, but we wanted something that feels modern, powerful, and has AI baked in.

Typesense UI is our attempt to give Typesense the visual experience it deserves.


What's Next? 🔮

Some things on the roadmap:

  • [ ] Multi-server support — switch between Typesense instances
  • [ ] Collection creation wizard — visual schema builder
  • [ ] Export/Import — bulk operations with CSV/JSON
  • [ ] Query playground — test search queries with syntax highlighting
  • [ ] Analytics dashboard — search metrics and insights
  • [ ] More AI models — OpenAI, Claude, local LLMs

If any of these get you hyped, drop a ⭐ on the repo and open an issue with your ideas!


Show Some Love ❤️

If this project saved you time, made you smile, or just impressed you a little bit:

Star the repo: github.com/Mothilal-hire10x/typesense-ui
🐛 Report bugs: Issues
🤝 Contribute: PRs are always welcome!
📢 Share this post: Help other devs discover it


Wrapping Up

Building this was genuinely one of the most fun projects we've worked on. The intersection of search technology, modern frontend, and AI is such a vibe right now, and we think we're only scratching the surface.

If you're using Typesense (or thinking about it), give Typesense UI a spin. It's free, it's open source, and it might just change how you interact with your search data.

Now go touch some grass. Or don't. We're not your mom. 🌱


Built with React, TypeScript, and an unhealthy amount of caffeine ☕

Follow us for more open-source drops and dev content that doesn't put you to sleep.

Top comments (0)