Overview

Built the entire frontend for Subfeed Cloud — a platform where users create AI agents with custom personalities, knowledge bases, and connected tools. Each agent can be configured with specific LLM models, generation parameters, and system prompts through a visual editor. Agents leverage RAG (Retrieval-Augmented Generation) via Pinecone vector search for grounded responses, and can invoke external tools through MCP (Model Context Protocol) connections to Slack, GitHub, and custom servers. The platform includes tier-based subscription billing, a developer API for embedding agents, and a launchpad with 6 ready-to-deploy starter templates.

My Role

Frontend Developer & Maintainer — Designed and built the entire Next.js 15 frontend from scratch: 22+ route segments, 56+ component directories, 23 Zustand stores, and 36+ custom hooks.

Key Features

• AI Entity Builder: Visual editor for configuring agents — model selection, system prompts, generation parameters (temperature, top-p, max tokens), personality presets, and live preview.
• Streaming Chat Interface: SSE-based real-time chat with token-by-token streaming, infinite scroll with virtualization, offline message queue with auto-retry, guest sessions, and Time-to-First-Token performance monitoring.
• RAG Knowledge Management: Upload documents as knowledge bases that agents reference during conversations, with chunk visualization and Pinecone hybrid search (semantic + keyword) with cross-encoder reranking.
• MCP Tool Connections: Connect external tools via Model Context Protocol — agents dynamically invoke Slack, GitHub, or custom server tools mid-conversation, with connection management and execution monitoring.
• Tier-based Billing: 5 subscription tiers with progressive feature unlocks, weighted token usage tracking across different models, and Lemon Squeezy payment integration.
• Developer API & Launchpad: AES-256-GCM encrypted API keys for serverless access, plus 6 one-click deploy starter templates (chat, research assistant, social post generator, URL summarizer).

Tech Stack

Next.js 15, React 19, TypeScript, TailwindCSS, Zustand, TanStack Query/Table/Virtual, Tiptap, dnd-kit, Framer Motion, Supabase Auth, Sentry, PostHog

Challenge & Solution

Implementing token-by-token SSE streaming while handling network interruptions, rate limits, and AI capacity errors without degrading UX was the core challenge. I built a layered streaming architecture with custom FatalError classification to distinguish retryable vs. terminal errors, an offline message queue persisted in Zustand that auto-retries on reconnection, and specific error code handling (RATE_LIMIT, AI_LIMIT, AI_CAPACITY) with user-friendly feedback — achieving reliable real-time chat across unstable network conditions.

Screenshots