DEV Community: Raja Abbas Affandi

How I Built a Multi-Tenant RAG Knowledge Base with Source-Cited Answers — Pipeline, Multi-Tenancy, and Lessons

Raja Abbas Affandi — Sat, 15 Aug 2026 08:41:03 +0000

Every "build a RAG chatbot" tutorial ends the same way: embed a few paragraphs, call similaritySearch, print the answer. That gets you a demo, not a product. The gap between a RAG demo and a RAG product you'd trust with a company's documents is where all the real engineering lives.

I built KnowBase AI, a multi-tenant SaaS knowledge base where businesses upload documents and an AI assistant answers questions grounded in their own content — with source citations you can click. This post covers the RAG pipeline, how multi-tenancy changes the design, and the decisions I'd repeat.

Live demo: knowbase-ai.netlify.app — no login needed, fully functional (it runs in demo mode with mock responses).

What RAG actually requires

RAG sounds simple: retrieve relevant context, feed it to the LLM, get a grounded answer. In production it means:

Ingestion: upload documents, chunk them intelligently, store them
Retrieval: find the chunks that actually answer the question
Grounding: build a prompt from the retrieved context, no hallucinated answers
Trust: show the user why the model said that — source citations

Each step is a small product on its own. Here's the pipeline.

The ingestion pipeline

Documents arrive as files, URLs, or manual entries. The key decision is chunking — too big and retrieval is fuzzy, too small and you lose context. The pipeline chunks text with overlap so no meaning falls through the gaps:

export function chunkText(text: string, size = 800, overlap = 200): string[] {
  const chunks: string[] = [];
  let i = 0;
  while (i < text.length) {
    chunks.push(text.slice(i, i + size));
    i += size - overlap;
  }
  return chunks;
}

Each chunk becomes a DocumentChunk tied to its source document, so retrieval can always trace back to where the information came from.

Multi-tenancy changes everything

A single-user RAG app and a multi-tenant SaaS share almost no code after the demo stage. Every query, chunk, and conversation must be scoped to a workspace:

// Every AI retrieval is scoped by workspaceId — a tenant can never
// retrieve another tenant's chunks, even if the embedding matches.
export async function retrieve(workspaceId: string, query: string) {
  return prisma.documentChunk.findMany({
    where: {
      document: { source: { workspaceId } },
      text: { contains: query },
    },
    take: 5,
  });
}

The data model enforces isolation at the schema level:

Workspace — tenant container
WorkspaceMember — roles: Owner / Admin / Member (RBAC via NextAuth.js v5)
KnowledgeSource + Document + DocumentChunk — the RAG layer, always under a workspace
Conversation + Message — chat sessions, scoped per workspace
ApiUsage — token tracking per workspace

The provider abstraction (OpenAI / Gemini / Claude)

One of the best decisions: never hard-code a model. A thin provider interface means the product runs on OpenAI, Google Gemini, or Anthropic Claude by configuration, and it made the demo mode trivial:

export interface AIProvider {
  chat(messages: Message[]): AsyncIterable<string>;
}

export const providers = {
  openai: OpenAIProvider,
  gemini: GeminiProvider,
  claude: ClaudeProvider,
};

// No API keys configured? Run a fully functional mock.
export function getProvider(): AIProvider {
  const configured = Object.entries(providers)
    .find(([, P]) => new P().isConfigured());
  return configured ? new configured[1]() : new MockProvider();
}

Demo mode was the reason I could publish a real demo without leaking keys or asking visitors to sign up.

Source citations — the feature that makes it trustworthy

An AI answer with no receipts is just a guess. KnowBase streams responses over SSE and attaches the chunks that informed each answer, so users can click through to the source document:

// Simplified — stream tokens, then emit the citations that grounded them
export async function chat(conversationId: string, content: string) {
  const chunks = await retrieve(workspaceId, content);
  const stream = await provider.chat([
    { role: "system", content: buildRagPrompt(chunks) },
    ...history,
    { role: "user", content },
  ]);

  return new Response(sse(stream, chunks), {
    headers: { "Content-Type": "text/event-stream" },
  });
}

This single feature separates a gimmick from a support tool. Customer-support teams don't trust "trust me" — they trust a cited answer they can verify in two clicks.

The stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
Language	TypeScript (strict)
Database	SQLite + Prisma 7 (`@prisma/adapter-libsql`)
Auth	NextAuth.js v5 (Auth.js) + JWT
AI	OpenAI / Gemini / Claude (provider abstraction)
Styling	Tailwind CSS v4 + shadcn/ui
Charts / Markdown	Recharts + React Markdown (remark-gfm)
Forms	React Hook Form + Zod
Deployment	Netlify

I'm a full-stack developer at RA Technologies, where we build SaaS and AI products with exactly this architecture — one codebase, strict types, a database that needs no server, and a demo anyone can click.

Lessons learned

SQLite-first was the right call. @prisma/adapter-libsql gives you a real production-ish setup with zero config. Swap to PostgreSQL later only if you actually need it — most knowledge-base products don't.
Scoping is security. Multi-tenant bugs are data-leak bugs. Enforce workspaceId at the query layer, never rely on the UI to filter.
A working demo beats a password gate. Removing auth for the MVP made the demo clickable for everyone — and it still demonstrates the full RAG experience.

Try it

Live demo: knowbase-ai.netlify.app
Source: github.com/Raja-Abbas/Knowbase-AI (MIT)
Built at RA Technologies — we build SaaS and AI products like this for startups and businesses worldwide.
Part of my Building AI Products series — previous post: building a visual AI agent builder with tool calling.

If you've built RAG in production, what did I get wrong? I'd love to hear it in the comments.

How I Built a Visual AI Agent Builder with Tool Calling — Architecture, Tools, and Lessons

Raja Abbas Affandi — Fri, 14 Aug 2026 22:01:20 +0000

AI agents are the most exciting thing happening in software right now — but most agent tutorials stop at "call the LLM in a loop." The part that's actually hard is giving the agent real tools, watching what it does with them, and trusting it enough to let it run.

I hit all three walls while building AgentForge, a visual AI agent builder with tool calling, real-time execution visualization, and run analytics. This post covers the architecture, the tool-calling design that makes it work, and what I'd do differently next time.

What I built

AgentForge is a full SaaS-style product where you:

Create agents with custom system prompts, model, and temperature
Attach tools from a library of 8 built-in tools across 6 categories
Chat with agents and watch every tool call execute in real time — inputs, outputs, and durations
Track every run with token usage, duration, and tool-call details
Compare agent performance on a dashboard with charts

It's live here: agentforge-next.netlify.app

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript (strict)
Database	SQLite + Prisma 7
Styling	Tailwind CSS v4
Components	shadcn/ui
Charts	Recharts
Icons	Lucide React
Deployment	Netlify

I'm a full-stack developer at RA Technologies, and this stack is exactly what we use for client SaaS and AI products — one codebase, strict types, and a database that doesn't fight you at the start.

The tool-calling design (the heart of the product)

The core problem: an LLM gives you a structured request to call a function, and you have to execute it safely and return something the model can understand. Everything else is engineering around that contract.

The tool interface

Every tool implements the same contract:

export interface Tool {
  name: string;
  category: ToolCategory;
  description: string;
  parameters: JSONSchema;
  execute(input: Record<string, unknown>): Promise<ToolResult>;
}

export interface ToolResult {
  ok: boolean;
  data?: unknown;
  error?: string;
  durationMs: number;
}

The registry

Tools are registered once and reused everywhere — the agent config screen, the chat executor, and the library page:

export const tools: Tool[] = [
  webSearch,      // category: "search"
  calculator,     // category: "utility"
  codeExecutor,   // category: "code"
  weather,        // category: "data"
  urlFetch,       // category: "network"
  dbQuery,        // category: "data"
  emailSender,    // category: "communication"
  fileReader,     // category: "utility"
];

export function getToolsByCategory(): Record<ToolCategory, Tool[]> {
  return tools.reduce((acc, tool) => {
    (acc[tool.category] ??= []).push(tool);
    return acc;
  }, {} as Record<ToolCategory, Tool[]>);
}

The execution loop

The agent loop is deliberately simple: send the conversation with the tool schema, read the tool calls from the response, execute, append results, repeat:

while (true) {
  const response = await model.chat.completions.create({
    model,
    messages,
    tools: tools.map(openAISchema),
    tool_choice: "auto",
  });

  const toolCalls = response.choices[0].message.tool_calls;
  if (!toolCalls?.length) {
    messages.push(response.choices[0].message);
    break;
  }

  messages.push(response.choices[0].message);
  for (const call of toolCalls) {
    const tool = registry[call.function.name];
    const started = performance.now();
    const result = await tool.execute(JSON.parse(call.function.arguments));
    messages.push({
      role: "tool",
      tool_call_id: call.id,
      content: JSON.stringify(result.data ?? { error: result.error }),
    });
  }
}

The 8 tools

Tool	Category	What it does
`web_search`	Search	Real-time web information
`calculator`	Utility	Math operations
`code_executor`	Code	Runs JavaScript safely
`weather`	Data	Weather forecasts
`url_fetch`	Network	Fetches URL content
`db_query`	Data	Queries databases
`email_sender`	Communication	Sends emails
`file_reader`	Utility	Reads file contents

The lesson here: tools with side effects (email, DB, code) need confirmation UX, while read-only tools (search, weather, fetch) can run automatically. AgentForge separates them by category so the UI can treat them differently.

Real-time tool-call visualization

The most requested feature by far. When an agent runs, the chat stream shows each tool call as a card with input → output → duration, updating live over SSE.

// Simplified SSE emission
export async function POST(req: NextRequest) {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (const step of runAgent(agent, message)) {
        controller.enqueue(encoder.encode(`data: ${JSON.stringify(step)}\n\n`));
      }
      controller.close();
    },
  });
  return new Response(stream, {
    headers: { "Content-Type": "text/event-stream" },
  });
}

This single feature is why people trust the product: an agent you can watch is an agent you can debug.

Run history and analytics

Every run is persisted — tokens, duration, and every tool call with its inputs and outputs. The dashboard then answers real questions:

Which tools get used the most?
Which agents burn tokens fastest?
Which runs fail and where?

What I'd do differently

Schema-first from day one. I hand-wrote the tool parameter schemas. If I rebuilt this, I'd generate them from Zod types so the TypeScript type and the LLM schema can never drift.
Sandbox the code executor harder. It's isolated, but real deployments need per-user sandboxes (or WASM) — not just per-process isolation.
Add multi-agent orchestration earlier. Single agents are easy; the interesting problems start when agents delegate to each other.

Try it

Live demo: agentforge-next.netlify.app
Source: github.com/Raja-Abbas/AgentForge (MIT)
Built at RA Technologies — we build SaaS and AI products like this for startups and businesses worldwide.

If you're building agents, I'd love to hear how you handle tool execution and side effects in the comments.

I Built 10 JavaScript Developer Tools in One Place — Here's How

Raja Abbas Affandi — Thu, 16 Jul 2026 10:14:49 +0000

I was tired of switching between linters, formatters, analyzers, and visualizers just to review my JavaScript code. So I built JSCodeCraft — a collection of 10 developer tools in one place.

What It Does

Code Analysis — Scores your code quality across 10 dimensions
Structure Mapping — Visualizes your code as an interactive tree
Refactoring Engine — Suggests improvements with before/after previews
Pattern Detection — Catches anti-patterns and common mistakes
Event Loop Visualizer — Shows async execution step by step
And 5 more tools

Tech Stack

Next.js 16 with App Router
TypeScript strict mode
Tailwind CSS v4
Recharts for visualizations

Why I Built It

Every code review I did had the same issues:

Nested callbacks that could be flattened
Unused variables scattered across files
Functions that were too long
Missing error handling

I wanted a tool that catches all of this before anyone else sees my code.

The Event Loop Visualizer

This was the hardest part to build. I wanted it to show the call stack, task queue, and microtask queue moving in real time.

Most people learn async by reading articles. Actually seeing the execution order click by click makes it stick.

// What the visualizer shows:
console.log("1");           // Call stack
setTimeout(() => {          // Task queue
  console.log("2");
}, 0);
Promise.resolve().then(() => { // Microtask queue
  console.log("3");
});
console.log("4");

// Output: 1, 4, 3, 2
// The visualizer shows WHY

Open Source

The whole thing is free and open source. No signup required.

Try it: https://jscodecraft-next.netlify.app
Source: https://github.com/Raja-Abbas/JSCodeCraft
Product Hunt: https://www.producthunt.com/products/jscodecraft?utm_source=other&utm_medium=social

What's Next

I'm building more tools:

AI chatbot builder
Knowledge base with RAG
SaaS analytics dashboard
Freelance finance tracker

Each one solves a real problem. Each one built with the same stack.

Lessons Learned

Start with your own pain. I built this because I needed it.
Make it visual. Code is abstract. Visualizations make it concrete.
Ship fast, iterate. MVP 1 is enough to get feedback.
Open source builds trust. People try tools they can inspect.

If you try it, let me know what you think. Feedback welcome.

This is project 1 of 8. More coming soon.

I Built a Full-Stack E-Commerce App with Admin Dashboard Using Next.js

Raja Abbas Affandi — Mon, 02 Feb 2026 10:05:05 +0000

Recently, I built a full-stack e-commerce application from scratch with a powerful admin dashboard — and I documented the entire project in this video: https://www.youtube.com/watch?v=235k7QA-Jjs.

This project was an opportunity to combine modern web technologies and build something real-world developers can learn from.

Key Features

User authentication & authorization for secure login/signup
Product listing & management for both users and admin
Secure checkout flow integrated with Paystack
Admin dashboard to manage products, orders, and users
Scalable full-stack architecture using Next.js & Supabase
Clean, modern UI for a smooth user experience

Tech Stack

Next.js – frontend & backend
Supabase – database & authentication
Kinde – authentication
Paystack – payment gateway
Uploadthing – image uploads
Optimized APIs – for performance and scalability

Why This Project Matters

This project is a hands-on example for developers who want to understand:

How to build a secure e-commerce flow
How to manage products and orders efficiently
How to integrate modern tools like Supabase and Paystack

Get the Code

The full source code is available here: https://github.com/WebDev-Insider/dustin-tech-hub-youtube
For direct questions or support, you can reach me on Telegram: https://t.me/webdev_insider