Skip to content

feat(website): AG-UI tutorial blog post + brand-polished blog template#528

Open
blove wants to merge 4 commits into
mainfrom
claude/lucid-moore-c390f9
Open

feat(website): AG-UI tutorial blog post + brand-polished blog template#528
blove wants to merge 4 commits into
mainfrom
claude/lucid-moore-c390f9

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented May 22, 2026

Summary

Ships Build Fullstack Agentic Angular Apps Using AG-UI, a long-form tutorial targeted at Angular devs new to the agent stack, plus the brand-polished blog template the post relies on.

Two commits:

  • feat(website): polish blog template + reusable AG-UI arch diagram — infrastructure refactor (MdxRenderer made layout-agnostic, Tabs/CSS/code-block fixes, new reusable <AgUiArchDiagram />, blog header rebuilt to brand standards with right-column TOC).
  • docs(blog): "Build Fullstack Agentic Angular Apps Using AG-UI" — ~2,700-word post + hero image asset.

What changed in the blog template

  • MdxRenderer no longer ships its own outer chrome. The docs page absorbs the sidebar padding it was relying on; the blog page owns its own <article> layout. Root element switched from <article> to <div> to avoid nested-article hydration mismatches.
  • Tab body wrapper border/background removed so short code blocks no longer get a visible "extending border" below them.
  • .docs-prose ul/ol get back their disc/decimal markers and indent (Tailwind preflight had stripped them).
  • Duplicate inset box-shadow ring on code-block <pre> removed.
  • Blog post template rebuilt: proper paddingTop clearance for the fixed nav so the date stops getting clipped, brand <Eyebrow> row (category · date · reading time), large Garamond H1 matching the homepage hero, description as bodyLg subhead, <TagChips> from frontmatter, right-column <DocsTOC> at ≥xl widths. UTC-anchored date formatter so 2026-05-21 doesn't render as "May 20" west of UTC.

New component

AgUiArchDiagram — three brand-styled boxes (Backend → @ngaf/ag-ui adapter → @ngaf/chat UI) with labeled SSE / Agent-contract arrows, collapses to a single column under 720px. Reusable for future AG-UI content.

Follow-up tracked

A separate task is queued to fix the libs/render tsconfig (currently has Cannot find name 'Record' + missing @angular/core types) so the cockpit-ag-ui-streaming-angular demo can build. Once unblocked, a real streaming-mid-frame screenshot will replace the placeholder.

Test plan

  • Pull preview deploys cleanly on Vercel.
  • /blog/build-fullstack-agentic-angular-apps-using-ag-ui renders end-to-end at desktop (≥1280px shows the right-column TOC) and mobile (arch diagram collapses to single column).
  • /blog index lists the new post and surfaces it as featured.
  • Existing docs pages (e.g. /docs/chat/components/chat-debug) render unchanged — sidebar + breadcrumb + content + on-this-page TOC all intact, no regression from the MdxRenderer refactor.
  • No browser console errors (specifically: no hydration mismatch warnings on the blog page).
  • Image at public/blog/2026-05-21-build-fullstack-agentic-angular-apps-using-ag-ui/hero.png loads (placeholder asset; will be re-captured in the follow-up task once libs/render is fixed).

🤖 Generated with Claude Code

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
threadplane Ready Ready Preview, Comment May 22, 2026 5:20pm

Request Review

@blove blove force-pushed the claude/lucid-moore-c390f9 branch from fa5c70a to 9f34dfa Compare May 22, 2026 17:05
blove and others added 3 commits May 22, 2026 10:09
@blove @claude
feat(website): polish blog template + reusable AG-UI arch diagram
9d6ae42 
Reusable infrastructure changes ahead of publishing the AG-UI tutorial post.

- MdxRenderer is now layout-agnostic: docs and blog each own their outer
  chrome (sidebar padding lived in MdxRenderer and was fighting the blog
  page's article wrapper). Docs page absorbs the chrome it relied on;
  root element switched from <article> to <div> to avoid nested-article
  hydration mismatches.
- Tabs body wrapper no longer paints its own border/background — the inner
  rehype-pretty-code <figure> already owns its surface, and the wrapper
  was creating a visible "extending border" below short code blocks.
- global.css: restore disc/decimal list markers + padding on .docs-prose
  ul/ol (Tailwind preflight had stripped them), drop the duplicate inset
  box-shadow ring on code-block <pre>, and add responsive rules for the
  new arch diagram so it collapses to a single column under 720px.
- New AgUiArchDiagram component: three brand-styled boxes (Backend →
  @ngaf/ag-ui adapter → @ngaf/chat UI) with labeled SSE / Agent-contract
  arrows. Replaces hand-drawn ASCII art that drifted out of alignment
  due to rehype-pretty-code line padding + JetBrains Mono fallbacks for
  box-drawing glyphs.
- Blog post template (apps/website/src/app/blog/[slug]/page.tsx): proper
  paddingTop offset so the date no longer clips behind the fixed nav,
  brand <Eyebrow> with category/date/reading-time, large Garamond H1
  matching the homepage hero, description as bodyLg subhead, tag chips
  driven by frontmatter.tags, and a right-column DocsTOC at ≥xl widths.
  Adds a UTC-anchored formatDate to avoid "2026-05-21" rendering as
  "May 20" west of UTC.
- .claude/launch.json: add ag-ui-streaming entry pointing at the AG-UI
  cockpit demo for an upcoming follow-up that will swap in a real hero
  screenshot once libs/render tsconfig is unblocked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@blove @claude
docs(blog): "Build Fullstack Agentic Angular Apps Using AG-UI"
6c63812 
New long-form tutorial post (~2,700 words) targeted at Angular devs new
to the agent stack, covering the AG-UI protocol, the @ngaf/ag-ui adapter,
and a worked example using @ngaf/chat.

- Personal proof-of-source in the lede (Head of Ecosystem and
  Partnerships at CopilotKit; AG-UI protocol contributor) so readers
  know the recommendations come from inside the work.
- Featured-post frontmatter (featured: true) so it surfaces on /blog.
- Hero screenshot deferred — libs/render tsconfig is blocking the AG-UI
  cockpit demo build; tracked as a follow-up that will swap in a real
  streaming-mid-frame shot once unblocked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@blove @claude
fix(website): drop unnecessary escape in readingTimeMin regex
e061485 
ESLint no-useless-escape flagged \- inside a character class. Moving the
hyphen to the end of the class drops the escape without changing the
matched set.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@blove blove force-pushed the claude/lucid-moore-c390f9 branch from 9f34dfa to e061485 Compare May 22, 2026 17:10
@blove blove enabled auto-merge (squash) May 22, 2026 17:11
@blove @claude
fix(website): restore <article> wrapper on docs slug pages
8b7ece4 
The MdxRenderer refactor (root <article> → <div> to avoid nested-article
hydration mismatch on blog) inadvertently dropped the <article> tag from
docs pages too, breaking the docs e2e selectors (page.locator('article'),
page.locator('article h2')).

Restore the <article> on the docs page wrapper instead of inside
MdxRenderer. The blog page keeps its own outer <article>; both surfaces
now have exactly one <article>, satisfying semantic HTML and the existing
e2e contracts without re-introducing the hydration warning.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@blove