JL

Web app · Internal tools

Trending Society AI Console

I put together the Trending Society Admin Kit so any team building internal tools can start from either side. Take a backend and build a frontend, or take the frontend and build the backend behind it.

The AI console answering a question by searching the Trending Society content library twice, then citing an Instagram post in a table
Models
12 from 9 labs
Library
2,381 posts
Areas
7
Screens
214

The AI console

Composer 1 · real model

Composer 1 is the screen I wired to real systems. Ask it what is trending and it searches the Trending Society content library, then answers with links to the posts it used.

  • Models12 from 9 labs. Anthropic, OpenAI, Google, xAI, DeepSeek, Qwen, Moonshot, Mistral and Z.ai, all through AI Gateway. Each one answered a library question with a linked post before it went in the picker.
  • SearchMCP, read-only. The console calls search_sources on our MCP server with a token that can read the library and has no write scope.
  • LimitsGuarded for public traffic. A model allowlist, capped output and history, text-only input and a rate limit, covered by 16 route tests.
  • ContentTreated as data. Search results are posts written by other people, so the model is told to treat them as data, and replies render no images.
  • FailuresEvery one has a state. A failed search gets its own label, the last step always answers in text, and an empty reply offers Retry.

Scope

What I built, and what the kit gave me

What I built

  • 01The live AI console: model routing, MCP search, the read-only token and the public-traffic limits.
  • 02The token path on our MCP server, deployed without touching its Google sign-in.
  • 03Tests for the chat route and the server token: 16 on the console, 30 on the server.
  • 04The Trending Society brand pass and the move to a private repo with preview deploys.

What the kit gave me

  • 01214 screens across seven product areas, plus auth and error pages.
  • 02Mock data behind typed models and Zod schemas.
  • 03The design system, data tables, charts and command palette.

Overview

What's in it

01Seven product areas

AI, payments, commerce, projects, admin, tasks and developer tools share one shell.

02Typed data layer

Each area reads a typed model with Zod schemas, so a real API replaces the mock data without new screens.

03Data tables

Faceted filters, sorting, column visibility, bulk actions and pagination on every major list.

04Charts and KPIs

Revenue, MRR, conversion and workload widgets read the same data as the tables.

05Live AI console

A chat that answers through 12 models and cites posts from our own library.

06Command palette

Any record or action is a keystroke away.

07Light and dark themes

Design tokens drive every screen, so one switch restyles the whole console.

08Preview deploys

Every branch builds its own preview, and production deploys only from main.

Walkthrough

Seven areas, one console

Area 01 · 80 screens

AI console

Ten sections, from 7 composers and 23 conversation layouts to an API platform with a model catalog, usage and evaluations, and an agent studio. Composer 1 runs on a live model.

Sections · Composers · Conversations · API Platform · Workflows · Automations · Documents · Research · Applications · Skills · Agents

AgentsEvalsModels

Area 02 · 36 screens

Payments

MRR dashboards, subscriptions, an invoice composer and a webhook log with retry.

Sections · Dashboard · Transactions · Customers · Subscriptions · Invoices · Developers

BillingInvoicesWebhooks

Area 03 · 36 screens

Commerce

Nine sales dashboards, a product catalog with variants, orders, customers and shipping labels.

Sections · Dashboard · Products · Orders · Customers · Shipments

CatalogOrdersFulfillment

Area 04 · 32 screens

Project management

One issue model shown as list, kanban, Gantt, calendar and spreadsheet.

Sections · Dashboard · Projects · Teams · Members · Issues · Inbox

IssuesKanbanGantt

Area 05 · 13 screens

Workspace and admin

Users, roles, billing, plans, connected apps and notifications.

Sections · Dashboard · Users · Tasks · Settings

UsersSettings

Area 06 · 5 screens

Developer tools

API keys, webhooks, and event and request logs.

Sections · Overview · API keys · Webhooks · Events and logs

API keysLogs

Area 07 · 12 screens

Tasks

Nested tasks with lists, due dates and keyboard capture.

Sections · Tasks · Projects · Manage

Tasks

All seven areas share sign-in, registration and password reset screens, plus 401, 403, 404, 500 and 503 error states.

Stack

What it runs on

  • FrontendNext.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, shadcn/ui on Radix.
  • DataTanStack Table, Recharts, Zustand, Zod.
  • AIAI SDK 7, AI Gateway, an MCP client.
  • ServerA Cloudflare Workers MCP server with OAuth 2.1 and Google sign-in.
  • QualityVitest, ESLint, Prettier, preview deploys on Vercel.

Ship log

How it shipped

Added

Opened the picker to 12 models

I added twelve models from nine labs, and each one searched the library and linked a post before it shipped.

12 of 12 models passed
Fixed

Hardened the console for public traffic

A security review flagged two paths. Input is now text-only, library posts are treated as data, and replies render no images.

Added

Gave the console library search over MCP

I added a read-only service token to our MCP server and offered the model one tool, search_sources.

2,381 posts searchable
Shipped

Connected Composer 1 to a real model

Composer 1 replied from a script. It now streams from AI Gateway behind a model allowlist, output caps and a rate limit.

Improved

Moved the kit into a private repo

The kit deployed from a laptop folder with no history. It now lives in a private repo, and every branch gets a preview deploy.

Get in touch

Email me

Working end to end across design, creative, and engineering, where creativity, collaboration, and ownership build toward the company's goals.

jeffkliu@gmail.com