Architecture

Under the hood of Loom's headless roadmap engine.

Loom is built on a modern stack designed for performance, scalability, and ease of modification. At its core, it separates the presentation layer (your roadmap UI) from the data layer (threads and discussions).

Tech Stack

We use industry-standard tools to ensure Loom is easy to deploy and maintain.

Framework

Next.js 16 (App Router) for server-side rendering and routing.

Styling

Tailwind CSS v4 + Shadcn UI for a beautiful, customizable design system.

Backend

Foru.ms API for managing threads, users, and permissions.

AI Engine

Vercel AI SDK + OpenAI for intelligent triage and auto-tagging.

Data Flow

How a user interaction becomes a roadmap item:

1. Interaction

User posts a feature request or feedback via the widget or the main portal.

2. Thread Creation

Loom creates a Thread in the backend. This thread holds the title, description, and initial metadata (status: Open).

3. AI Triage

An background agent analyzes the thread using the configured OpenAI model. It assigns tags (Bug, Enhancement, feature) and estimates impact.

4. Roadmap Sync

The thread is visualized on the Roadmap board based on its status. As you drag-and-drop items, Loom updates the thread's metadata in real-time.

Directory Structure

Key directories you should know about:

app/(dashboard)

The main application UI requiring authentication. Contains the sidebar, header, and protected pages.

app/api

Server-side API routes. Handles data mutations and securely proxies requests to the Foru.ms API.

components/ui

Reusable UI primitives (buttons, inputs, cards) built with Shadcn UI and radix-ui.

lib/forums.ts

The core SDK wrapper. Contains typed functions for interacting with the backend data layer.

Previous QuickstartNextConfiguration