How to Build a
RAG Chatbot

CREATE OR REPLACE FUNCTION match_tax_documents(
  query_embedding vector(384),
  match_threshold float DEFAULT 0.3,
  match_count int DEFAULT 6,
  filter_province text DEFAULT NULL
)
RETURNS TABLE (
  id UUID,
  content TEXT,
  metadata JSONB,
  similarity float
)
LANGUAGE plpgsql
AS $$
BEGIN
  RETURN QUERY
  SELECT
    tax_documents.id,
    tax_documents.content,
    tax_documents.metadata,
    1 - (tax_documents.embedding <=> query_embedding) AS similarity
  FROM tax_documents
  WHERE 1 - (tax_documents.embedding <=> query_embedding) > match_threshold
    AND (filter_province IS NULL OR tax_documents.province = filter_province)
  ORDER BY similarity DESC
  LIMIT match_count;
END;
$$;

import { createClient } from '@supabase/supabase-js';
import { pipeline } from '@xenova/transformers';
import * as fs from 'fs';
import * as path from 'path';

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_KEY!
);

// Load embedding model
const embedder = await pipeline(
  'feature-extraction',
  'Xenova/all-MiniLM-L6-v2'
);

async function generateEmbedding(text: string) {
  const output = await embedder(text, {
    pooling: 'mean',
    normalize: true
  });
  return Array.from(output.data);
}

// Simple chunking function
function chunkText(text: string, maxChars = 1500) {
  const sections = text.split(/\n## /);
  const chunks: string[] = [];

  for (const section of sections) {
    if (section.length <= maxChars) {
      chunks.push(section);
    } else {
      // Split long sections by paragraphs
      const paragraphs = section.split('\n\n');
      let current = '';
      for (const para of paragraphs) {
        if ((current + para).length > maxChars) {
          if (current) chunks.push(current);
          current = para;
        } else {
          current += (current ? '\n\n' : '') + para;
        }
      }
      if (current) chunks.push(current);
    }
  }
  return chunks;
}

async function ingestFile(filePath: string) {
  const content = fs.readFileSync(filePath, 'utf-8');
  const fileName = path.basename(filePath, '.md');
  const chunks = chunkText(content);

  for (const chunk of chunks) {
    const embedding = await generateEmbedding(chunk);

    await supabase.from('tax_documents').insert({
      content: chunk,
      embedding,
      metadata: {
        source: fileName,
        title: fileName.replace(/-/g, ' ')
      }
    });
  }

  console.log(`Ingested ${chunks.length} chunks from ${fileName}`);
}

// Run ingestion
const dataDir = './app/taxgpt/data';
const files = fs.readdirSync(dataDir, { recursive: true })
  .filter(f => f.toString().endsWith('.md'));

for (const file of files) {
  await ingestFile(path.join(dataDir, file.toString()));
}

'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';

export default function ChatPage() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
    }),
  });
  const [input, setInput] = useState('');
  const isLoading = status === 'streaming';

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || isLoading) return;
    sendMessage({ text: input.trim() });
    setInput('');
  };

  // Extract text from message parts (AI SDK v6)
  const getContent = (msg: typeof messages[0]) => {
    return msg.parts
      .filter(p => p.type === 'text')
      .map(p => p.text)
      .join('');
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <div className="space-y-4 mb-4">
        {messages.map(m => (
          <div
            key={m.id}
            className={`p-3 rounded ${
              m.role === 'user'
                ? 'bg-blue-100 ml-auto'
                : 'bg-gray-100'
            }`}
          >
            {getContent(m)}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Ask a question..."
          className="flex-1 p-2 border rounded"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Send
        </button>
      </form>
    </div>
  );
}