Magic UI Changelog Template

The project follows a standard Next.js App Router structure with Fumadocs for MDX content management:

• app/: Contains the Next.js App Router files (layout.tsx, page.tsx, etc.).
• changelog/content/: The directory where all MDX changelog entries are stored.
• components/: React components, including ui/ (shadcn/ui) and theme utilities.
• lib/: Utility functions.
• public/: Static assets.
• mdx-components.tsx: Custom MDX component overrides.
• source.config.ts: Configuration for Fumadocs.

To set up the development environment for the Changelog Template, install the dependencies using pnpm and start the local development server.

1. Install dependencies:

   pnpm install

2. Run the development server:

   pnpm dev

3. Access the application at http://localhost:3000.

Changelog entries are written in MDX format. To add a new entry, create a new file in the changelog/content/ directory. The filename must follow the YYYY-MM-DD.mdx format.

Each file must include a frontmatter block with the following keys:

• title: The title of the update.
• description: A brief summary of the changes.
• date: The release date in YYYY-MM-DD format.
• tags: An array of strings (e.g., ["Feature", "Bug Fix"]).
• version: The version number string.

---
title: "Your Update Title"
description: "Brief description"
date: "2025-06-15"
tags: ["Feature", "Bug Fix"]
version: "1.2"
---

Your changelog content here...

When using the updated API for version 2.1, you can initialize an AIAgent with the kimi-k2 model. This configuration allows for enhanced reasoning and multi-modal processing (text, images, and code analysis).

// Example of updated API usage
const agent = new AIAgent({
  model: "kimi-k2",
  reasoning: "enhanced",
  multiModal: true,
})

Use defineDocs to specify the directory containing changelog content and to extend the frontmatter schema. This allows you to enforce specific metadata requirements for each changelog entry.

By extending frontmatterSchema, you can require or optionally include fields like date, tags, and version in your MDX files.

export const { docs, meta } = defineDocs({
  dir: "changelog/content",
  docs: {
    schema: frontmatterSchema.extend({
      date: z.string(),
      tags: z.array(z.string()).optional(),
      version: z.string().optional(),
    }),
  },
})

The project uses a .prettierconfig.cjs file to enforce consistent code formatting. The following configuration is applied:

• endOfLine: Set to "lf" to ensure Unix-style line endings.
• semi: Set to false to omit semicolons.
• singleQuote: Set to false to use double quotes.
• tabWidth: Set to 2 spaces.
• trailingComma: Set to "es5" to include trailing commas where valid in ES5.

/** @type {import('prettier').Config} */
module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: "es5",
};

Use defineConfig to set global configuration options for the project. Currently, it supports setting the lastModifiedTime strategy and configuring mdxOptions for component resolution.

export default defineConfig({
  lastModifiedTime: "git",
  mdxOptions: {
    providerImportSource: '@/mdx-components',
  },
})

The project provides the following scripts via pnpm:

• pnpm dev: Starts the development server.
• pnpm build: Builds the project for production.
• pnpm start: Starts the production server.
• pnpm lint: Runs linting to check code quality.

When creating changelog entries in the changelog/content directory, the following frontmatter fields are supported via the extended schema:

• date: A required string representing the entry date.
• tags: An optional array of strings used for categorizing entries.
• version: An optional string representing the software version associated with the entry.

// Schema definition used for validation:
// date: z.string()
// tags: z.array(z.string()).optional()
// version: z.string().optional()