MDX Component Integration Test Article

This article exercises all 6 MDX custom components registered in app/components/mdx/index.ts, plus standard Markdown elements and link components.

Use this content as CMS markdown field with isLegacy=true to test the mdxToAST pipeline (server/utils/mdxToAST.ts).

---

1. BigCard - Featured Article Card

Tests: cover, title, description, url, createdAt, tags, userName, avatar

Getting Started with AI 3D Generation in 2026

A comprehensive guide covering text-to-3D, image-to-3D, auto-rigging, and texture stylization. Learn how to create production-ready 3D assets in minutes.

Alice Chen

· 2026/03/20

View now

Getting Started with AI 3D Generation in 2026

A comprehensive guide covering text-to-3D, image-to-3D, auto-rigging, and texture stylization. Learn how to create production-ready 3D assets in minutes.

Alice Chen

· 2026/03/20

View now

BigCard with external link and multiple tags

Tripo x Unity: Seamless 3D Asset Pipeline

Import AI-generated 3D models directly into Unity with our new plugin. Supports FBX, GLB, and OBJ formats.

Bob Smith

· 2026/03/15

View now

Tripo x Unity: Seamless 3D Asset Pipeline

Import AI-generated 3D models directly into Unity with our new plugin. Supports FBX, GLB, and OBJ formats.

Bob Smith

· 2026/03/15

View now

---

2. BlogUser - Author Attribution

Single user via BlogNewsItem (resolves through resolveBlogUsers)

Single user via BlogUserInfo

Multiple users via BlogUserInfo[]

BlogUser with noMargin

---

3. BlogVideo - Embedded Video

Default dimensions (width=100%, height=auto)

Custom dimensions

With JSX style object

---

4. Chart - Bar Chart

12-month data with custom color (Tripo yellow)

Short data with default color (#38bdf8)

Extreme values (tests height scaling: value * 20px)

---

5. SliderList - News Card Carousel

Tests: pagination (3 items per slide), internal/external links, user info resolution

---

6. TabList - Tabbed Article List

Tests: tab switching, tag colors (Announcement/#2FA99F, Feature/#00C94E, Partner/#C68317, Research/#4A79D8, User Guide/#1084FE, Game Hub/#6953C9), cover image optimization

---

7. Link Components

Standard Markdown links (mapped to CustomLink via a key)

Internal link: Visit our blog homepage

External link: Tripo API Documentation

MdxLink component (mapped via link key)

Read the Getting Started Guide View SDK on GitHub

---

8. Standard Markdown Elements

These test that regular Markdown renders correctly alongside custom components.

Inline formatting

This paragraph has bold text, italic text, inline code, strikethrough, and a hyperlink.

Code block

import tripo

model = tripo.generate(
    prompt="A medieval castle on a hilltop",
    style="realistic",
    format="glb"
)

print(f"Model URL: {model.download_url}")
print(f"Vertices: {model.mesh_stats.vertices}")

GFM Table

Feature	Free	Pro	Enterprise
Text to 3D	5/day	Unlimited	Unlimited
Image to 3D	3/day	Unlimited	Unlimited
Auto-Rigging	-	Yes	Yes
API Access	-	-	Yes
Priority Queue	-	Yes	Dedicated

Blockquote

Tripo's AI 3D generation has transformed our game development pipeline. What used to take days now takes minutes.

-- Lead Artist, Indie Game Studio

Ordered and unordered lists

1. Upload your reference image
2. Select generation parameters
3. Click "Generate"
4. Download in your preferred format

• FBX format for animation workflows
• GLB for web and real-time applications
• OBJ for traditional 3D pipelines
• STL for 3D printing

Embedded HTML

Image

Self-closing iframe (tests fixSelfClosingIframes)