This post has been originally published on my Substack publication VSL.
Last week I started building the new project management feature in Yahini, which meant creating a table with advanced sorting capabilities. At first, everything looked perfect. The table loaded, the data showed up, and when I clicked the "Due Date" column header, it actually sorted the rows.
But something was wrong.
Tasks with due dates were mixing randomly with tasks that had no dates at all. The empty ones should've been sitting at the bottom of the list, out of the way, but instead they scattered throughout the entire table. It drove me nuts.
I tried fixing it five different ways. Asked Kilo (via Context7) to pull the TanStack Table docs. Read through the sorting guide. Tried every example they had. Nothing worked. After 45 minutes of this, I started questioning whether I'd completely misunderstood how table sorting was supposed to work.
Exa to the Rescue
On attempt six, I asked Kilo to use Exa to search for similar TanStack sorting issues. Instead of just looking over docs, Exa searches the whole web, including GitHub discussions, obscure blogs and reddit threads.
The AI came back with a GitHub discussion thread and two Stack Overflow posts. One discussion nailed it: "TanStack automatically pushes undefined values to the end when sorting, but it treats null as an actual value and tries to sort it."
That was the issue. Supabase returns null for empty date fields by default. JavaScript treats null and undefined as completely different values. TanStack's sorting knows what to do with undefined (push it to the bottom), but null gets treated like any other value and sorted randomly in the list.
The AI was smart enough to connect the dots. It read those discussions, saw that I was fetching from Supabase (thanks to the Kilo Code context), and suggested: "Your database is probably returning null. Convert it to undefined when you process the data."
The fix was one line:
due_date: task.due_date === null ? undefined : task.due_date
That's it. Simply check if the value is null and convert it to undefined. TanStack now knows to push those tasks to the bottom.
Five minutes later, sorting worked exactly how it should. Tasks with due dates sorted by date. Tasks without due dates stayed at the bottom where they belong.
Would've spent another hour manually Googling variations of "tanstack date sorting broken."
Make Your Coding Assistant Even Smarter
MCP (Model Context Protocol) is just a standard way to connect AI assistants to external tools. Think of it like giving your AI a phone and a library card. Instead of being locked in a room with only what it remembers, it can now call out for current information whenever it needs it.
This matters because every time you leave your editor to search for something, you break flow. Before I set up MCPs, I'd be coding, hit a problem, open a browser tab, read three Stack Overflow threads, maybe check the docs, then try to context-switch back to where I was in my code. That's 5-10 minutes gone, plus the mental energy to get back into the problem.
With MCPs, the AI does the searching while you stay in your editor. You're still in your code, still thinking about the problem, and the answer comes to you instead of you going to find it.
What Exa Adds to Your MCP Setup
I already use Context7 MCP for documentation. Context7 is great when you need the official answer. Think of API references and function signatures, basically the "correct" way to do something according to the docs.
Exa fills the gap that documentation doesn't cover: real-world implementations. It reads the entire web. Blog posts where developers explain edge cases. GitHub issues where someone hit your exact bug and posted their solution. Stack Overflow threads with working code. Even Substack posts where people share problems they ran into.
For the sorting bug, Context7 gave me TanStack's official sorting documentation. That told me how sorting is supposed to work in theory. Exa found the GitHub discussions about null vs undefined specifically. That told me how to fix my actual problem.
The AI reads what Exa finds, interprets it, then asks clarifying questions. When it saw those discussions about null values, it connected that to my Supabase setup and suggested the exact conversion I needed. I didn't have to piece together the solution myself, but rather used the AI to synthesize information from multiple sources and give me a working answer.
That whole debugging process took 15 minutes total. An hour saved on a problem that would've been painful to solve manually.
Exa Helped Me Migrate Yahini Too
When I moved Yahini's presentation website from Remix to Astro a few weeks back (full breakdown coming this Friday), Exa saved me from hitting every edge case the hard way.
I asked Kilo Code via Exa to find blog posts from people who'd done the same migration.
It pulled up five different posts.
One from someone who migrated a SaaS marketing site, another from a developer who documented every routing difference they found, and a third with deployment gotchas for hosting static websites on Cloudflare Workers.
Used those posts as my migration checklist. When I hit a routing issue with dynamic paths, I already knew how to fix it because someone else had documented the solution. When my build failed the first time, I recognized the error from one of those posts and knew exactly which config setting to change.
What would've been two days of trial-and-error turned into about six hours of focused work. More on this next week with the full play-by-play.
Setting Up Exa MCP
Takes about 1 minute in Kilo Code. (I wrote about it on my previous post)
Step 1: Sign up at exa.ai and grab your API key from the dashboard. Free account gives you $10 in credits. That's roughly 2k searches with 1 to 25 results.
Step 2: Open your MCP config file. In Kilo Code: Settings → MCP Server → Edit Global MCP (this applies to all projects) or Edit Project MCP (just one project). In Cursor: Settings → Features → Model Context Protocol.
Step 3: Add this configuration:
json{
"mcpServers": {
"exa": {
"command": "npx",
"args": ["-y", "exa-mcp-server"],
"env": {
"EXA_API_KEY": "your-exa-api-key-here"
}
}
}
}
Step 4: Replace your-exa-api-key-here with your actual key. Don't commit this to GitHub if you're working on a public repo—keep your API keys in environment variables or a local config file.
Step 5: Restart your editor. Exa should now show up in your AI assistant's available tools list. You can verify this by asking Kilo "What tools do you have access to?" and checking if Exa appears. Or just look at the green dot beside its name in your MCP list.
Exa Pricing
$10 free credits to start. I've used maybe 200 searches building Yahini features over the past few weeks and am still a long way from hitting my free credit limit.
After that, roughly $5 per 1,000 searches. To put that in context: if you do 10 searches per day (which is a lot), that's 300 searches per month, or about $1.50. Compare that to one hour of stuck time where you're manually debugging, and the ROI is obvious.
How I Actually Use This
I run three MCPs together when coding for Yahini: Context7, Exa, and Supabase MCP (lets the AI query my database directly for debugging). Between the three, I can build most features without leaving my editor.
Here's my actual workflow when I hit a problem:
First, I ask Context7 for the official approach. "Pull the TanStack Table sorting docs" or "Show me the Supabase date handling API." This gives me the foundation.
Then, if that doesn't solve it, I bring in Exa. "Find examples of people sorting null values in TanStack" or "Search for blog posts about Remix to Astro migration." This gives me real-world solutions from people who've hit the same problem.
The AI synthesizes both. It takes the official docs from Context7, finds the practical implementations from Exa, and gives me a solution that actually works in production.
The combined theory with actual practice is what makes this setup powerful.
I still open browser tabs for some things. Visual design inspiration, testing how a feature feels in different browsers, reading long-form technical deep-dives. But for "how do I build this" or "why isn't this working," the MCP setup handles the research while I stay focused on code.
Not to mention the Architect mode in Kilo works 10 times better when given access to the web.
This Week's Discovery: shadcn/ui
When I built Yahini's task table (the one from the sorting saga), I started with shadcn's data table component. It gave me the basic structure, sorting UI, and loading states out of the box. Then I customized it to match Yahini's design.
shadcn isn't a component library you install via npm. You get the actual code dropped into your project. So when I needed custom styling for overdue tasks (red text, bold font, urgent indicator), I opened the component file and modified it directly. No CSS overrides fighting with library defaults. No digging through prop documentation hoping there's an onOverdue callback.
And they have an MCP server, which I had to try!
Check it out here → ui.shadcn.com
Let's Connect
What makes you leave your editor most often? Looking up UI patterns? Finding code examples? Debugging weird behavior that doesn't match the docs? Reply and let me know. Curious what would actually speed up your workflow.
Want to try Exa? Grab the free credits at exa.ai, drop that config into your MCP settings, and test it for a week. You'll know pretty fast if it's worth it.
If you enjoyed this post please consider following me here and subscribing to my newsletter VSL.
Top comments (0)