MD Grid Engine

A Component-Driven Engine for Structured Content

The MD Grid Engine is the custom static and dynamic content engine I built from the ground up to power this portfolio. It is a lightweight, file-first system built on the Next.js App Router that transforms Markdown and MDX files into a responsive, component-driven user interface. This project serves a dual purpose: it’s a robust foundation for my professional presence and the designated UI layer for my Architect AI system.
Pipeline diagram showing MDX content moving through the runtime and registry into the grid UI.
How the engine transforms authored MDX content into the structured grid UI.

The Problem: Bridging Content Authoring and System UIs

I needed a system that could meet two distinct challenges. First, a way to author and manage content that was as simple as writing Markdown, but could render complex, design-system-consistent layouts without manual, page-by-page coding. Second, I needed a flexible frontend capable of visualizing the complex, multi-step cognitive processes of an AI, such as the plans, execution traces, and decision logs from the Architect system.

How It Works: A Runtime MDX Pipeline

The engine is built around a runtime MDX pipeline that compiles content on-demand, allowing for instant feedback during development and dynamic rendering in production. It is not a simple Markdown-to-HTML converter; it’s a structured content processor.

Core Architecture

The engine’s foundation is a set of custom libraries that work with Next.js:
  • Runtime MDX Compiler: Uses @mdx-js/mdx to compile MDX files at request time, running a series of remark/rehype plugins for syntax highlighting, frontmatter sanitization, and paragraph normalization.
  • Filesystem Provider: A custom FsContentProvider resolves URL slugs to file paths (including nested directories), expands custom {{ partial:id }} tokens for reusable content, and guards against rendering errors.
  • Catch-All Routing: Leverages the Next.js App Router ([...slug]/page.tsx) to dynamically render any MDX document from the content/ directory, with static params generated recursively.

Key Features

These architectural choices enable several key features:
  • Typed Frontmatter: A validation layer ensures all page metadata (like title, description, and publishedAt) is correctly typed and processed, powering SEO and content generation.
  • Component Registry: A central registry merges standard HTML primitives with custom, reusable React components like <Grid>, <Card>, <Button> and <Figure>, providing graceful fallbacks for unknown tags.
  • Styling Presets: The system uses Tailwind CSS combined with custom utility classes (.prose-root, .preset-panel-wide) to keep layouts consistent and on-brand across all content types.
  • Testing: The engine is supported by a full suite of tests, including unit tests with Vitest and end-to-end tests with Playwright.

Impact & Status

The MD Grid Engine is 100% complete and in production—you are using it right now. It successfully powers this entire portfolio, demonstrating its stability and performance.
Its primary impact is twofold:
  1. It provides a highly efficient, developer-friendly workflow for creating and managing structured, visually consistent content.
  2. It serves as a production-ready interface, ready to be integrated with the Architect project to visualize AI plans, routes, and outcomes, bridging the gap between backend AI logic and frontend user experience.
Discuss Production AI Systems
Back to Featured Projects