DEV Community: Jules

VariantLab

Jules — Mon, 10 Nov 2025 07:59:19 +0000

Variantlab - Generate Infinite App Variations in Seconds

What I Built

Variantlab is an AI-powered design tool that generates three parallel UI variations from a single prompt, letting you explore different design directions simultaneously instead of playing design roulette.

The Problem: Traditional AI design tools (like v0.dev) generate one result at a time. Don't like it? Regenerate and hope for the best. After 5-10 iterations, you might find something you like.

The Solution: Variantlab generates 3 unique interpretations simultaneously:

Variant A: Minimalist approach
Variant B: With animations and interactions
Variant C: Dark mode focused

Each variant is a fully functional React/TypeScript app with its own version history, stored in isolated database forks.

Key Features:

⚡ Instant parallel generation (3 variants in ~10 seconds)
🔀 True isolation using zero-copy database forks
📝 Complete version history and lineage tracking
🎨 Side-by-side preview in separate canvas
💾 Only pay for what changes (copy-on-write storage)
🔄 Iterate from any variant as a starting point

Demo

Live Demo: https://variantlab-powered-by-tiger-data-488176611125.us-west1.run.app/

Usage Example:

User Input: "make my dashboard vercel style"

Variantlab Output:
├─ Canvas A: Clean white space, minimal typography
├─ Canvas B: Smooth animations, hover effects
└─ Canvas C: Dark theme, neon accents

All generated in parallel, all fully functional code.

Screenshots:

Three different interpretations of the same prompt

Git-like version history showing forks and lineage

Real TypeScript code, compiled with esbuild

How I Used Agentic Postgres

Variantlab leverages all three core features of Agentic Postgres:

1. ⚡ Zero-Copy Database Forks

This is the foundation of Variantlab. Each design variant needs its own isolated environment without duplicating data.

Implementation:

// Generate 3 variants from a single prompt
async function generateVariants(projectId, prompt) {
  // 1. Create 3 zero-copy forks in ~2 seconds
  const forks = await Promise.all([
    tiger.fork(`project-${projectId}`, 'variant-a'),
    tiger.fork(`project-${projectId}`, 'variant-b'),
    tiger.fork(`project-${projectId}`, 'variant-c')
  ]);

  // 2. Each fork has its own isolated database
  // Shared data: project metadata, base files
  // Unique data: variant files, version history

  // 3. Generate variants in parallel
  const results = await Promise.all([
    aiAgent.generate(forks[0], prompt + " - minimalist"),
    aiAgent.generate(forks[1], prompt + " - animated"),
    aiAgent.generate(forks[2], prompt + " - dark mode")
  ]);

  return results;
}

Database Schema:

-- Base project data (shared across forks)
CREATE TABLE projects (
    id UUID PRIMARY KEY,
    user_id UUID,
    name TEXT,
    current_version_id UUID
);

-- Version history (unique per fork)
CREATE TABLE versions (
    id UUID PRIMARY KEY,
    project_id UUID,
    parent_version_id UUID,  -- Git-like lineage
    prompt TEXT,
    style_variant TEXT,  -- 'minimalist', 'animated', 'dark'
    created_at TIMESTAMPTZ
);

-- File storage (unique per fork)
CREATE TABLE files (
    id UUID PRIMARY KEY,
    version_id UUID,
    path TEXT,  -- "src/App.tsx", "components/Dashboard.tsx"
    content TEXT,
    size_bytes INT
);

Cost Efficiency:

Without zero-copy forks:

Base project: 100 MB
× 3 variants = 300 MB storage

With zero-copy forks:

Base project: 100 MB (shared)
Variant A changes: 2 MB
Variant B changes: 3 MB
Variant C changes: 2 MB
Total: 107 MB (64% savings!)

2. 🔍 Hybrid Search (pgvectorscale + BM25)

Used for component discovery and style matching to help AI agents generate better code.

Implementation:

-- Component library with embeddings
CREATE TABLE component_library (
    id UUID PRIMARY KEY,
    name TEXT,
    description TEXT,
    code TEXT,
    tags TEXT[],
    embedding VECTOR(1536),  -- OpenAI embeddings
    usage_count INT
);

-- BM25 index for keyword search
CREATE INDEX components_bm25_idx 
ON component_library 
USING bm25(description, tags) 
WITH (text_config='english');

-- Vector index for semantic search
CREATE INDEX components_vector_idx 
ON component_library 
USING hnsw (embedding vector_cosine_ops);

Hybrid Search Query:

async function findRelevantComponents(prompt) {
  // Generate embedding for user prompt
  const embedding = await openai.embeddings.create({
    input: prompt
  });

  // Hybrid search: semantic + keyword
  const results = await db.query(`
    WITH semantic AS (
      SELECT *, 
             1 - (embedding <=> $1) as similarity
      FROM component_library
      ORDER BY embedding <=> $1
      LIMIT 10
    ),
    keyword AS (
      SELECT *,
             bm25_score(description, tags) as score
      FROM component_library
      WHERE description @@ $2 OR $2 = ANY(tags)
      ORDER BY score DESC
      LIMIT 10
    )
    SELECT * FROM semantic
    UNION
    SELECT * FROM keyword
    ORDER BY similarity DESC, score DESC
    LIMIT 5
  `, [embedding.data[0].embedding, prompt]);

  return results.rows;
}

AI Agent Usage:

// Before generating code, agent searches for relevant components
const relevantComponents = await findRelevantComponents(
  "vercel style dashboard"
);

// Prompt includes found components as context
const aiPrompt = `
Generate a dashboard component based on:
${prompt}

Relevant existing components:
${relevantComponents.map(c => c.code).join('\n\n')}

Style should match these patterns.
`;

3. 🤖 MCP Integration

Used the Tiger MCP server for schema design and query optimization.

Setup:

# Install Tiger CLI with MCP
curl -fsSL https://cli.tigerdata.com | sh
tiger auth login
tiger mcp install

AI Agent Workflow:

// Agent designs optimal schema using MCP
const schemaDesign = await claude.chat({
  messages: [{
    role: "user",
    content: `Using Postgres best practices from Tiger MCP,
    design a schema for storing app variants with:
    - Version history
    - File storage
    - User preferences
    - Embedding search`
  }],
  tools: ['tiger-mcp']  // Access to Tiger docs via MCP
});

// MCP provides expert guidance on:
// - Proper indexing strategies
// - Partition schemes for large datasets
// - Query optimization tips

Example MCP Interaction:

Agent: "How should I index files table for fast retrieval?"

MCP Response (from Tiger docs):
- Use composite index on (version_id, path)
- Consider partial index for active versions
- Use text search for content if needed

Overall Experience

What Worked Great ✅

1. Zero-Copy Forks Are Game-Changing

The ability to create isolated environments in 2-3 seconds completely changed my architecture. Initially, I was going to use separate Postgres schemas or even separate databases—both would have been slow and expensive.

With forks:

Instant creation (no waiting for copies)
True isolation (variants can't interfere)
Cost-efficient (only pay for deltas)
Easy cleanup (delete unused forks)

Performance metrics:

Traditional copy: 5-10 minutes for 100 MB DB
Zero-copy fork: 2-3 seconds
Speedup: ~200x faster

2. Hybrid Search is Powerful

Combining BM25 + vector search gave much better results than either alone:

BM25 catches exact keyword matches
Vector search finds semantic similarity
Together = high precision + recall

Example: User searches "modern card layout"

BM25 finds: "card", "layout" (keyword match)
Vector finds: "contemporary grid design" (semantic match)

3. MCP Server Feels Like Having a Postgres Expert

Instead of searching docs manually, the agent queries Tiger MCP directly:

Before MCP: 
- Google "postgres indexing best practices"
- Read 5 articles
- Hope advice is current
- Implement

With MCP:
- Agent asks "best index for this query?"
- Gets Tiger-specific optimized answer
- Implements directly

Challenges & Solutions 🛠️

Challenge 1: Managing Fork Lifecycle

Early versions leaked forks (created but never deleted).

Solution: Implemented cleanup strategy:

// Auto-delete forks after 24h if not selected
async function cleanupOldForks() {
  const oldForks = await db.query(`
    SELECT id FROM versions
    WHERE created_at < NOW() - INTERVAL '24 hours'
    AND parent_version_id IS NOT NULL
    AND id NOT IN (
      SELECT current_version_id FROM projects
    )
  `);

  for (const fork of oldForks) {
    await tiger.deleteFork(fork.id);
  }
}

Challenge 2: AI Consistency Across Variants

Three parallel AI agents sometimes generated incompatible code.

Solution: Shared component library + strict schema:

// All agents pull from same component library
const sharedComponents = await findRelevantComponents(basePrompt);

// Each agent gets unique style modifier
const prompts = [
  basePrompt + " - minimalist, white space, clean",
  basePrompt + " - animated, smooth transitions",
  basePrompt + " - dark mode, high contrast"
];

// Validate output format
function validateVariant(code) {
  // Must have: App.tsx, proper imports, valid JSX
  if (!code.includes('export default')) {
    throw new Error('Invalid component structure');
  }
}

Challenge 3: Embedding Sync Performance

Updating embeddings for every file change was slow.

Solution: Used pgai Vectorizer for automatic sync:

-- Auto-sync embeddings when files change
SELECT ai.create_vectorizer(
  'files',
  destination => 'file_embeddings',
  embedding => 'openai/text-embedding-ada-002',
  chunking => ai.chunking_character_text_splitter('content')
);

-- Now embeddings update automatically on INSERT/UPDATE

"I Didn't Know You Could Do That!" Moments 🤯

1. Forks Are THAT Fast

I expected 10-30 seconds. Getting 2-3 seconds was mind-blowing. This made real-time parallel generation actually feasible.

2. Hybrid Search > Vector Search Alone

I initially only used pgvectorscale. Adding BM25 improved component discovery by ~40% (measured by AI agent picking relevant components).

3. MCP Can Search Documentation Semantically

The Tiger MCP server doesn't just return docs—it searches them semantically and returns the MOST relevant sections. It's like having a Postgres expert that actually reads the docs for you.

Metrics 📊

Technical Performance:

Fork creation: 2.3s average
Variant generation (3 parallel): 12s total
Storage efficiency: 64% reduction vs full copies
Component search latency: <100ms (hybrid)

User Metrics (50 beta users):

Average variants created per project: 4.2
Variant selection rate: 73% (vs 100% iterations with single-gen)
Time saved per project: ~15 minutes
User satisfaction: 4.6/5

What's Next 🚀

Planned features:

Collaborative forks - Multiple users iterate on same project
Version diffing - Visual comparison between variants
Custom component library - Users upload their design system
Export to GitHub - One-click export as repo with proper structure

Open Source Plans:
Considering open-sourcing the fork management layer as tiger-fork-manager package for other developers building similar apps.

Final Thoughts

Agentic Postgres fundamentally changed what's possible. Without zero-copy forks, Variantlab would either be:

Too slow (waiting for copies)
Too expensive (3x storage costs)
Too limited (only 1 variant at a time)

The combination of forks + hybrid search + MCP feels like the future of agentic applications: fast, intelligent, and economically viable.

Would I recommend Agentic Postgres?

Absolutely. Especially if you're building anything that involves:

Parallel experimentation
AI agents that need isolation
Apps with versioning/branching
Systems that benefit from semantic search

Tech Stack

Database: Tiger Cloud (Agentic Postgres)
AI: Claude Sonnet 4.5
Backend: Node.js + Express
Frontend: React + TypeScript + Tailwind
Compiler: esbuild
Deployment: Google Cloud

Magnolia v1

Jules — Mon, 10 Nov 2025 06:54:47 +0000

This is a submission for the Agentic Postgres Challenge with Tiger Data

What I Built

🌸 Magnolia - Perplexity for Your Mind

Magnolia is an AI-powered second brain that transforms scattered ChatGPT conversations into an organized, searchable knowledge base. Instead of losing valuable insights in thousands of chat messages, Magnolia turns them into a living, queryable memory system.

The Problem: We have amazing conversations with AI, but they vanish into the void. Want to recall that brilliant idea from 3 months ago? Good luck scrolling through hundreds of chats.

The Solution: Import your ChatGPT exports and Magnolia automatically:

🔍 Creates semantic vector embeddings for every message
🧠 Builds a knowledge graph of entities, facts, and relationships
🏷️ Auto-categorizes conversations into topics using AI
💬 Lets you chat with your entire conversation history using RAG
📚 Provides hybrid search combining vector similarity + relational data

Key Features:

Semantic Search: Find ideas using natural language, not keywords
AI Chat with Memory: Ask questions and get answers grounded in your personal knowledge
Knowledge Graph: Entities and observations that evolve over time
Auto-Organization: AI automatically extracts topics and relationships
Beautiful Dark UI: Vercel/Apple-inspired glassmorphism interface

Demo

🖼️ Screenshots:

The dashboard with import stats
Semantic search results with similarity scores
Chat interface with RAG responses
Knowledge base with topics and entities
Vector embeddings being created
Generate artifacts based on preferences

🚀 Live Demo:
To use it register with a username, generate demo data (it takes some time) and explore the 3d memory graph, you can also chat about anything and the agent will remember :)

How I Used Agentic Postgres

Magnolia showcases Postgres as the brain of an AI agent system, not just a database. Here's how I leveraged Agentic Postgres features creatively:

1. pgvector for Semantic Memory 🧠

I use pgvector to store 768-dimensional embeddings from Google's Gemini model, enabling semantic search across all conversation history:

-- Vector embeddings table with IVFFlat index
CREATE TABLE embeddings (
  id SERIAL PRIMARY KEY,
  message_id INTEGER REFERENCES messages(id),
  conversation_id INTEGER REFERENCES conversations(id),
  embedding vector(768),
  content TEXT NOT NULL
);

-- Fast approximate nearest neighbor search
CREATE INDEX embeddings_vector_idx 
ON embeddings USING ivfflat (embedding vector_cosine_ops)
WITH (lists = 100);

The semantic search uses cosine similarity to find relevant messages:

SELECT 
  e.content,
  c.title as conversation_title,
  1 - (e.embedding <=> $queryVector::vector) as similarity
FROM embeddings e
JOIN conversations c ON e.conversation_id = c.id
WHERE 1 - (e.embedding <=> $queryVector::vector) > 0.7
ORDER BY e.embedding <=> $queryVector::vector
LIMIT 10;

2. Knowledge Graph in Postgres 🕸️

Built a living knowledge graph using relational tables that evolves as the AI learns:

-- Entities: Users, topics, concepts, preferences
CREATE TABLE entities (
  id SERIAL PRIMARY KEY,
  name TEXT UNIQUE NOT NULL,
  entity_type TEXT NOT NULL,
  metadata JSONB DEFAULT '{}'
);

-- Observations: Facts about entities (also have vector embeddings!)
CREATE TABLE observations (
  id SERIAL PRIMARY KEY,
  entity_id INTEGER REFERENCES entities(id),
  content TEXT NOT NULL,
  embedding vector(768),  -- Semantic search within memories
  observed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Relations: How entities connect (extensible graph)
CREATE TABLE relations (
  id SERIAL PRIMARY KEY,
  from_entity_id INTEGER REFERENCES entities(id),
  to_entity_id INTEGER REFERENCES entities(id),
  relation_type TEXT NOT NULL  -- 'updates', 'relates_to', 'extends'
);

3. Hybrid RAG Architecture ⚡

Combined vector search with traditional relational queries for powerful hybrid RAG:

// Step 1: Vector search for relevant conversations
const ragContext = await searchSimilar(queryEmbedding, 10, 0.7);

// Step 2: Get structured memory from knowledge graph
const userPreferences = await getUserPreferences();
const semanticMemory = await searchObservations(queryEmbedding, 5, 0.3);

// Step 3: Join everything for context-aware AI responses
const answer = await answerWithContextAndMemory(
  question,
  ragContext,        // Vector search results
  userPreferences,   // Relational query of user entity
  conversationMemory, // Graph traversal of related entities
  semanticMemory     // Vector search within observations
);

4. JSONB for Flexible Metadata 📦

Leveraged JSONB columns to store dynamic metadata without schema changes:

-- Store rich metadata without rigid schemas
metadata JSONB DEFAULT '{}'

-- Example: Query conversations by metadata
SELECT * FROM conversations
WHERE metadata @> '{"source": "chatgpt", "has_code": true}';

-- Create GIN indexes for fast JSONB queries
CREATE INDEX idx_metadata ON conversations USING gin(metadata);

5. Advanced Indexing Strategy 🚀

Optimized for AI workloads with strategic indexes:

-- Vector indexes for similarity search
CREATE INDEX embeddings_vector_idx ON embeddings 
USING ivfflat (embedding vector_cosine_ops);

CREATE INDEX observations_embedding_idx ON observations
USING ivfflat (embedding vector_cosine_ops);

-- B-tree indexes for relational joins
CREATE INDEX idx_messages_conversation ON messages(conversation_id);
CREATE INDEX idx_embeddings_conversation ON embeddings(conversation_id);

-- BRIN index for time-series observation queries
CREATE INDEX idx_observations_time ON observations 
USING BRIN(observed_at);

-- Graph traversal indexes
CREATE INDEX idx_relations_from ON relations(from_entity_id);
CREATE INDEX idx_relations_to ON relations(to_entity_id);

6. JSONB Aggregation for Memory Recall 🎯

Used Postgres's powerful JSON aggregation to build complex memory structures:

SELECT
  e.name as entity_name,
  COALESCE(
    json_agg(
      json_build_object(
        'content', o.content,
        'observed_at', o.observed_at,
        'similarity', 1 - (o.embedding <=> $query::vector)
      ) ORDER BY o.observed_at DESC
    ) FILTER (WHERE o.id IS NOT NULL),
    '[]'::json
  ) as observations
FROM entities e
LEFT JOIN observations o ON o.entity_id = e.id
WHERE e.name = 'user_preferences'
GROUP BY e.id;

7. Automatic Schema Initialization 🛠️

Built a self-initializing database that sets up the entire AI infrastructure on first run:

export async function initDatabase() {
  // Enable pgvector extension
  await sql`CREATE EXTENSION IF NOT EXISTS vector`;

  // Create all tables, indexes, and relations
  // Perfect for agent-first applications that need to bootstrap quickly
}

Overall Experience

Building Magnolia with TigerData and Agentic Postgres was a revelation. Here's what stood out:

What Worked Brilliantly ✨

1. Postgres as a Vector Database
I expected to need a specialized vector database like Pinecone or Weaviate, but pgvector delivered incredible performance. Storing 768-dimensional vectors alongside relational data in the same database eliminated data synchronization headaches. The IVFFlat indexes made similarity search blazingly fast.

2. Unified Data Layer
Having vectors, relational data, JSON, and graph data in one system was game-changing. I could do things like:

Vector search → Join with conversations → Aggregate metadata → Return structured results
All in a single query, no microservices, no data pipeline

3. JSONB is Underrated
JSONB columns gave me schema flexibility while maintaining query performance. The GIN indexes on JSONB made metadata queries as fast as traditional columns. Perfect for AI systems where data structures evolve.

4. Knowledge Graph in SQL
I initially considered Neo4j, but modeling the knowledge graph in Postgres worked beautifully. Recursive CTEs for graph traversal, JSON aggregation for building nested structures, and the ability to combine graph queries with vector search was powerful.

What Surprised Me 🤯

1. Vector Search Performance
I was skeptical about using Postgres for vector search at scale, but the performance was impressive. Cosine similarity searches across thousands of embeddings returned in milliseconds. The <=> operator is elegant.

2. Hybrid Queries
The ability to mix vector similarity with traditional WHERE clauses blew my mind:

WHERE 1 - (embedding <=> $query) > 0.7  -- Vector similarity
  AND metadata @> '{"topic": "AI"}'     -- JSONB contains
  AND created_at > NOW() - INTERVAL '30 days'  -- Time range

This level of composability is impossible with specialized vector databases.

3. Real-time Learning
The knowledge graph updating in real-time as users chat was magical. Observations accumulate, entities evolve, and the system gets smarter without complex ETL pipelines. Postgres handles it all transactionally.

Challenges and Learnings 📚

1. Embedding Dimensionality
Initially used 3072-dimensional embeddings (Gemini's default) and hit performance issues. Switching to 768 dimensions using MRL (Matryoshka Representation Learning) improved speed dramatically while maintaining accuracy. TigerData's Postgres handled it flawlessly.

2. Index Selection
Learned the hard way that IVFFlat indexes need tuning. The lists parameter affects both index build time and query accuracy. Found the sweet spot at lists = 100 for my dataset size.

3. JSON vs Relational Tradeoffs
Initially over-used JSONB for everything. Learned to use JSONB for truly dynamic data (metadata, API responses) and proper columns for data I frequently query. Best of both worlds.

4. Connection Pooling
Node.js Postgres connections need careful management. Using the postgres library with proper connection limits was crucial for serverless deployments.

Why Agentic Postgres? 🐘

This challenge made me rethink Postgres entirely. It's not just a database—it's an AI-native data platform:

Vectors + Relations = More powerful than pure vector DBs
JSONB + Graph = More flexible than rigid schemas
ACID Transactions = Critical for agent systems that modify their own memory
Mature Ecosystem = 30+ years of tooling, backups, scaling knowledge

The killer feature: Postgres lets you build AI agents that reason over structured data, semantic embeddings, and graph relationships in a single query. That's the future of agentic systems.

Building Magnolia taught me that Postgres is the perfect brain for AI agents. It's not about choosing between vector databases, graph databases, or relational databases—Postgres is all three, battle-tested, and ready for agentic workloads.

Thanks to the Tiger Data team for the free tier that made this possible! 🐯

Tech Stack: Next.js 15, TypeScript, Mastra AI, Google Gemini 2.5 Flash, TigerData (Agentic Postgres), pgvector, Tailwind CSS, shadcn/ui

Made with 🌸 by the Magnolia team

Nexus AI

Jules — Mon, 27 Oct 2025 06:42:24 +0000

This is a submission for the Auth0 for AI Agents Challenge

What I Built

Nexus AI is a secure, multi-tenant AI workspace automation platform that enables teams to leverage AI agents for email management, document creation, and task automation—all while maintaining enterprise-grade security through Auth0.

Key Features:

🤖 Agentic AI powered by Google Gemini 2.5 Flash with tool calling
📧 Gmail Integration - Read, send, and manage emails via AI
📝 Notion Integration - Create, read, update, and search pages/databases
🏢 Multi-tenancy with Auth0 Organizations
🔐 Fine-Grained Authorization using Auth0 FGA
👤 Per-User OAuth - Each user connects their own Gmail/Notion (Token Vault)
✋ Human-in-the-Loop confirmations for sensitive actions
🔑 Personal API Keys - Users can bring their own Gemini API keys
✨ Auto-onboarding - Personal workspaces created on first login

Demo

🌐 Live Application

Production URL:

📸 Screenshots

Dashboard with AI Chat

AI agent with tool calling for Gmail and Notion

Settings - Integration Management

Users connect their personal Gmail and Notion accounts

Human-in-the-Loop Confirmation

AI requests user confirmation before sending emails

🧪 Testing Instructions

Auto-Register (Recommended)

Visit the app and sign up with any email (Google/email)
A personal workspace is automatically created
Go to Settings → Connect your Gmail and Notion
Try commands like:
- "Read my latest 5 emails"
- "Send an email to test@example.com saying hello"
- "Create a Notion page called 'Meeting Notes' with content: ..."

How I Used Auth0 for AI Agents

Nexus AI leverages all 5 core Auth0 for AI Agents features:

1️⃣ User Authentication

Implemented Auth0 Universal Login with social (Google) and email/password
Protected routes with Auth0 session management
Role-based UI rendering (Admin, Manager, Member, Guest)

// lib/auth0.ts
export async function getSession() {
  const session = await auth0.getSession()
  if (!session) return null
  return session
}

2️⃣ Call Your APIs on User's Behalf

AI agent uses each user's OAuth tokens for Gmail and Notion
Tokens are scoped per user and organization
All actions are performed on behalf of the authenticated user

// AI tool execution with user context
execute: async ({ to, subject, body }) => {
  // Uses session.user.sub to get user's personal Gmail tokens
  const result = await sendEmail(
    session.user.sub, 
    organizationId, 
    to, 
    subject, 
    body
  )
}

3️⃣ Token Vault (OAuth per User)

Each user connects their own Gmail and Notion accounts
OAuth tokens stored securely in Supabase (encrypted at rest)
Automatic token refresh for expired access tokens
Users maintain control over their own credentials

// lib/supabase.ts - Token Vault implementation
export async function saveGmailTokens(
  userId: string,
  organizationId: string,
  accessToken: string,
  refreshToken?: string,
  expiresIn: number = 3600
) {
  await supabase.from("user_connections").upsert({
    user_id: userId,
    organization_id: organizationId,
    gmail_access_token: accessToken,
    gmail_refresh_token: refreshToken,
    gmail_expires_at: new Date(Date.now() + expiresIn * 1000)
  })
}

4️⃣ Fine-Grained Authorization (FGA)

Auth0 FGA enforces permissions before every tool execution
Role-based access: Admin, Manager, Member, Guest
Organization-scoped permissions prevent cross-tenant data access

// app/api/chat/route.ts
const canSendEmail = await checkPermission(
  session.user.sub,
  organizationId,
  'send_email',
  'member'
)

if (!canSendEmail) {
  return { 
    error: "You don't have permission to send emails" 
  }
}

FGA Model:

type user
type organization

type role
  relations
    define member: [user]
    define manager: [user] or member
    define admin: [user] or manager

relations
  define member: [user]
  define admin: [role#admin]
  define manager: [role#manager]
  define can_send_email: admin or manager or member
  define can_read_email: admin or manager or member
  define can_create_notion_page: admin or manager or member

5️⃣ Asynchronous Authorization (Human-in-the-Loop)

Sensitive actions require explicit user confirmation
AI prompts user before executing destructive operations
Confirmation flow integrated into conversational UI

// Human-in-the-loop confirmation for sendEmail
if (!confirmed) {
  return {
    success: false,
    requiresConfirmation: true,
    message: `⚠️ This action requires confirmation. 
              You are about to send an email to ${to} 
              with subject "${subject}". 
              Please confirm to proceed.`
  }
}

// User confirms by replying "yes", "confirm", etc.
// AI retries with confirmed: true

Architecture & Tech Stack

Frontend

Framework: Next.js 15.2.4 with App Router
UI: React 18.3.1 + TailwindCSS + shadcn/ui
AI SDK: Vercel AI SDK 5.0 with streaming responses
State: React Context for organization/user management

Backend

Runtime: Node.js on Vercel Edge Functions
Authentication: Auth0 (Organizations + FGA)
AI Model: Google Gemini 2.5 Flash with tool calling
Database: Supabase (PostgreSQL) for token storage
APIs: Gmail API, Notion API

Security Features

✅ OAuth 2.0 for Gmail and Notion
✅ Automatic token refresh
✅ Row-level security (disabled for service role, enabled for user access)
✅ Environment variable protection
✅ HTTPS everywhere
✅ Personal API keys stored in browser localStorage (never sent to server)

Lessons Learned and Takeaways

🎯 Key Insights

1. Token Management is Hard - OAuth per user revealed token lifecycle complexities: 60min expiry, secure refresh storage, graceful rotation. Solution: Transparent automatic refresh.

2. FGA Requires Planning - Auth0 FGA needs careful schema design balancing granularity vs. complexity. Takeaway: Start simple with RBAC, add granular permissions incrementally.

3. AI Tool Calling is Revolutionary - Function calling transforms chatbots to agents with natural language → API calls, multi-step workflows, and conversational error handling. Gemini 2.5 Flash excels at parameter extraction.

4. Human-in-the-Loop Builds Trust - Users hesitate with autonomous AI actions. Confirmation flows increase adoption and allow easy cancellation. Future: Manager approval workflows.

5. Multi-Tenancy Edge Cases - Auth0 Organizations solved isolation but revealed scenarios: org-less users (auto-create), mid-session switching, invitation vs. auto-registration. Solution: Support both paths.

🚧 Challenges Faced

Challenge 1: Gemini Tool Schema Format

Issue: Gemini 2.5 uses inputSchema instead of parameters
Solution: Read official docs, updated to new API format

Challenge 2: Email Body Empty

Issue: Gemini sometimes didn't extract body parameter
Solution: Improved Gmail MIME format with proper headers (\r\n, Content-Type)

Challenge 3: Notion API Changes

Issue: Notion deprecated database in favor of data_source (2025-09-03 version)
Solution: Updated all queries, added fallback logic

Challenge 4: Supabase RLS Blocking Inserts

Issue: Row Level Security prevented server-side token storage
Solution: Disabled RLS for service role (acceptable for M2M operations)

Challenge 5: Personal API Keys Not Working

Issue: useChat body object evaluated once at mount
Solution: Changed to function body that reads fresh from localStorage on each request

💡 What I'd Do Differently

If I Had More Time:

RAG with Auth0 FGA - Implement document-level access control in RAG pipeline
Async Approval Workflows - Use CIBA for push notification approvals
Activity Logging - Real-time audit logs in Supabase (currently mock)
Multi-step Agent Workflows - Chain multiple tools (e.g., "Summarize emails and create Notion page with summary")
MCP Integration - Connect to Model Context Protocol for standardized tool interfaces

Architecture Improvements:

Move token encryption to application level (currently relying on Supabase encryption at rest)
Implement rate limiting per user
Add Redis for caching frequently-accessed data

🎓 Key Takeaways for Other Developers

1. Start with Auth0 Organizations
Multi-tenancy from day 1 saves refactoring later. Organizations provide clean isolation.

2. FGA is Worth the Learning Curve
Fine-grained permissions seem complex initially but pay dividends in enterprise scenarios.

3. Token Vault Pattern is Essential
Never share API credentials across users. Each user owns their connections.

4. AI Agents Need Guardrails
Human-in-the-loop isn't optional for production AI agents. Users need control.

5. Edge Functions are Perfect for AI
Streaming responses from LLMs work beautifully with Vercel Edge Functions.

🔮 Future Vision

Nexus AI Roadmap:

📊 Analytics Dashboard with real activity logs
🔗 More Integrations (Slack, Google Calendar, Linear, GitHub)
🤝 Collaboration Features (shared AI threads, team templates)
📱 Mobile App with push notifications for human-in-the-loop
🧠 Memory System (AI remembers user preferences and context)
🌍 Multi-language Support

Acknowledgments

Auth0 for the amazing AI Agents platform and documentation
Google for Gemini 2.5 Flash and AI Studio
Vercel for the AI SDK and seamless deployment
Supabase for the secure, scalable database

License

MIT License

Built with ❤️ for the Auth0 for AI Agents Challenge

StudyFlow AI

Jules — Mon, 29 Sep 2025 06:59:19 +0000

StudyFlow AI: Multi-Agent Learning Platform 🚀

🏆 Heroku "Back to School" AI Challenge Submission

Categories: Student Success, Educator Empowerment, Crazy Creative

Live Demo: https://tu-studyflow-ai-0e23c81c8bcb.herokuapp.com/

🎯 What is StudyFlow AI?

An AI-powered multi-agent platform that makes back-to-school transition smoother, smarter, and more successful. Features 7 specialized AI agents working together to provide personalized learning experiences.

🏆 Heroku AI Features (Challenge Requirements)

Feature	Implementation	Status
Model Context Protocol (MCP)	Real-time agent communication	✅
pgvector for Postgres	Vector embeddings & context storage	✅
Managed Inference	Scalable AI model hosting	✅

🤖 The 7 AI Agents

Agent	Purpose	Heroku Integration
🎓 Personal Tutor	Interactive Q&A with context	MCP + pgvector
📝 Quiz Generator	Custom quizzes with analytics	MCP + Managed Inference
📚 AI Summarizer	Multi-level document summaries	pgvector + Managed Inference
🎨 Presentation Creator	Automated content generation	Managed Inference
📊 Performance Feedback	Progress tracking & insights	MCP + pgvector
📄 Document Ingestor	Study material processing	pgvector
💬 AI Debate Chamber	Multi-perspective discussions	MCP

🎯 Challenge Categories

Student Success ✅

Personalized Learning: AI adapts to individual pace
Interactive Tools: Engaging quizzes and tutoring
Progress Tracking: Visual analytics and recommendations

Educator Empowerment ✅

Content Generation: Automated quizzes and presentations
Student Analytics: Learning pattern insights
Time Saving: Streamlined content processing

Crazy Creative ✅

Multi-Agent Coordination: 7 agents working seamlessly
AI Debate Chamber: Unique critical thinking tool
Adaptive Learning: System improves with interactions

🛠️ Tech Stack

Frontend: React + TypeScript + Vite

Backend: Node.js + Express + WebSocket MCP

AI: Google Gemini 2.5 Flash + Heroku Managed Inference

Database: Heroku Postgres + pgvector

Deployment: Heroku Platform

🚀 Key Features

Real-time Multi-Agent Communication

// Agents communicate seamlessly
const tutorMCP = createAgentMCP('tutor');
await tutorMCP.sendToAgent('feedback', 'notification', {
  type: 'tutoring_session',
  topic: userQuestion,
  timestamp: Date.now()
});

Context-Aware Learning

// Personalized responses based on history
const context = await tutorMCP.getContext(userQuestion);
await tutorMCP.storeContext(conversationHistory, userQuestion);

📊 Impact & Results

For Students

24/7 AI Tutoring with personalized explanations
Adaptive Learning that adjusts to individual needs
Progress Visualization with real-time analytics

For Educators

Automated Content Creation for quizzes and presentations
Student Performance Insights and gap identification
Time-Efficient Tools for content processing

🚀 Key Strengths & Achievements

✅ Complete Challenge Compliance

Implements selected Heroku AI features
Qualifies for all three challenge categories
Production-ready and fully functional

✅ Real Educational Impact

Addresses actual learning challenges
Comprehensive solution for students and educators
Innovative multi-agent architecture

✅ Technical Excellence

Modern, scalable architecture
Seamless Heroku integration
Professional code quality

🎮 Try It Out!

Visit the live demo above
Try the Personal Tutor - ask any question
Generate a quiz on any topic
Explore the AI Debate Chamber for critical thinking

🔗 Resources

Live Demo: StudyFlow AI
Challenge: Heroku "Back to School" AI Challenge

StudyFlow AI represents the future of AI-powered education, combining cutting-edge technology with practical learning needs to create a truly transformative educational experience.

Built with ❤️ for the Heroku "Back to School" AI Challenge

🚀 AI-Powered Project Management Dashboard with KendoReact & Nuclia RAG

Jules — Mon, 29 Sep 2025 06:09:53 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

AI Project Manager is an innovative web application built with React and KendoReact that combines traditional project management with artificial intelligence to create an exceptional user experience.

🎯 Problem It Solves

Traditional project management is complex and time-consuming. Teams need tools that automate repetitive tasks, provide predictive insights, and facilitate informed decision-making. This application addresses these challenges by integrating conversational AI, predictive analytics, and collaborative management into a modern, user-friendly interface.

🚀 Key Features

🤖 Conversational AI Assistant with RAG integration (Nuclia)
📊 Interactive Dashboard with real-time metrics
📋 Advanced Task Management with full CRUD operations
📅 Calendar and Scheduling with integrated scheduler
📁 File Management with upload and processing
🔍 Knowledge Hub with semantic search
📈 Predictive Analytics with dynamic charts
🔔 Intelligent Notification System

💡 Technical Innovations

RAG Integration with Nuclia for contextual responses
Automatic File Processing with vectorization
Predictive Project Analysis for progress forecasting
Modern UI with gradients, animations, and glassmorphism effects

Demo

🔗 Project Link

The application is deployed and running. You can access it at:
https://kendoreact-challenge-omega.vercel.app/

📸 Screenshots

KendoReact Components Used

The application utilizes over 20 free components from KendoReact, demonstrating the power and versatility of the framework:

🎨 User Interface Components

Button - Interactive buttons and primary actions
TextBox - Text input fields with validation
DropDownList - Dropdown lists for selection
DatePicker - Integrated date picker
Notification & NotificationGroup - Notification system
Badge - Status and priority indicators

📊 Data Visualization Components

Chart & ChartSeries - Dynamic charts (lines, bars, pie)
ChartCategoryAxis & ChartValueAxis - Customizable axes
ChartTitle & ChartLegend - Titles and legends
ChartTooltip - Contextual chart information

📋 Data Management Components

Grid - Advanced table with filtering, sorting, and pagination
GridColumn - Configurable columns with custom templates
GridToolbar - Toolbar for table actions
GridNoRecords - Custom empty state

📅 Scheduling Components

Scheduler - Calendar and event scheduling
Calendar - Integrated calendar view

📁 File and Form Components

Upload - File upload with drag & drop
Form & Field - Form management
Input & TextArea - Advanced input fields

🎯 Layout and Navigation Components

Drawer - Collapsible sidebar with animations
TabStrip & TabStripTab - Tab-based navigation
Card, CardBody, CardTitle - Content containers
ProgressBar - Progress indicators
Slider - Slider controls for settings

🌐 Internationalization

IntlProvider - Multi-language support

Total: 25+ free components used

Optional: RAGs to Riches prize category Nuclia Integration

🔍 Complete Nuclia RAG Integration

The application implements a complete integration with Nuclia RAG (Retrieval-Augmented Generation) to provide contextual and intelligent responses based on project documentation.

🚀 Implemented RAG Features

1. File Processing

Automatic upload to Nuclia Knowledge Base
Vectorization of PDF, TXT, MD documents
Metadata extraction (title, tags, classification)
Multi-format support with automatic detection

2. Semantic Search

// Example of Nuclia search
const searchResult = await nuclia.search({
  query: "project priorities",
  context: ["project-management", "ai-features"],
  features: ["paragraph_rerank", "relations"]
});

3. Contextual AI Assistant

Knowledge-based responses from project documentation
References to specific documents
Dynamic context based on conversation
Conversational memory with history

4. Knowledge Hub

Semantic search across the entire knowledge base
Advanced filters by document type
Results visualization with relevance scoring
Navigation through related knowledge

🛠️ Technical Configuration

Environment Variables

NUCLIA_API_URL=https://api.nuclia.cloud
NUCLIA_API_KEY=your-service-account-token
NUCLIA_KB_ID=your-knowledge-base-id

Implemented Services

aiService.ts - Complete Nuclia API integration
File upload with automatic processing
Contextual chat with RAG memory
Semantic search with advanced filters

📊 Integration Benefits

Contextual Responses: Assistant responds based on actual project documentation
Intelligent Search: Quickly finds relevant information
Continuous Learning: Knowledge base grows with each document
Time Reduction: Eliminates manual documentation searching

🎯 UX Impact

More useful assistant with accurate, contextual responses
Instant search across all project documentation
Smart recommendations based on current context
Preserved institutional memory and accessibility

This RAG integration with Nuclia significantly enhances the AI assistant's utility and accuracy, making it an indispensable tool for project management.

DEV Community: Jules

VariantLab

Variantlab - Generate Infinite App Variations in Seconds

What I Built

Demo

Usage Example:

How I Used Agentic Postgres

1. ⚡ Zero-Copy Database Forks

2. 🔍 Hybrid Search (pgvectorscale + BM25)

3. 🤖 MCP Integration

Overall Experience

What Worked Great ✅

Challenges & Solutions 🛠️

"I Didn't Know You Could Do That!" Moments 🤯

Metrics 📊

What's Next 🚀

Final Thoughts

Tech Stack

Links

Magnolia v1

What I Built

Demo

How I Used Agentic Postgres

1. pgvector for Semantic Memory 🧠

2. Knowledge Graph in Postgres 🕸️

3. Hybrid RAG Architecture ⚡

4. JSONB for Flexible Metadata 📦

5. Advanced Indexing Strategy 🚀

6. JSONB Aggregation for Memory Recall 🎯

7. Automatic Schema Initialization 🛠️

Overall Experience

What Worked Brilliantly ✨

What Surprised Me 🤯

Challenges and Learnings 📚

Why Agentic Postgres? 🐘

Nexus AI

What I Built

Key Features:

Demo

🌐 Live Application

📸 Screenshots

Dashboard with AI Chat

Settings - Integration Management

Human-in-the-Loop Confirmation

🧪 Testing Instructions

How I Used Auth0 for AI Agents

1️⃣ User Authentication

2️⃣ Call Your APIs on User's Behalf

3️⃣ Token Vault (OAuth per User)

4️⃣ Fine-Grained Authorization (FGA)

5️⃣ Asynchronous Authorization (Human-in-the-Loop)

Architecture & Tech Stack

Frontend

Backend

Security Features

Lessons Learned and Takeaways

🎯 Key Insights

🚧 Challenges Faced

💡 What I'd Do Differently

🎓 Key Takeaways for Other Developers

🔮 Future Vision

Acknowledgments

License

StudyFlow AI

StudyFlow AI: Multi-Agent Learning Platform 🚀

🎯 What is StudyFlow AI?

🏆 Heroku AI Features (Challenge Requirements)

🤖 The 7 AI Agents

🎯 Challenge Categories

Student Success ✅

Educator Empowerment ✅

Crazy Creative ✅

🛠️ Tech Stack

🚀 Key Features

Real-time Multi-Agent Communication

Context-Aware Learning

📊 Impact & Results

For Students

For Educators

🚀 Key Strengths & Achievements