processMdxForLLMs() — ui Function Reference

Architecture documentation for the processMdxForLLMs() function in llm.ts from the ui codebase.

Function typescript DocumentationAtlas ContentSourcing calls 3

Entity Profile

DocumentationAtlas→ ContentSourcing→ processMdxForLLMs() — ui Function Reference

Dependency Diagram

graph TD
  c62ff9be_3fe2_988c_c3bb_6f0e746aace4["processMdxForLLMs()"]
  d4c19c52_649d_50ba_748b_40d85e37474b["llm.ts"]
  c62ff9be_3fe2_988c_c3bb_6f0e746aace4 -->|defined in| d4c19c52_649d_50ba_748b_40d85e37474b
  c1f6c05b_e4a4_6c20_95f0_4272f96bb3dc["getComponentsList()"]
  c62ff9be_3fe2_988c_c3bb_6f0e746aace4 -->|calls| c1f6c05b_e4a4_6c20_95f0_4272f96bb3dc
  71cc5361_9d12_7f85_828f_969e67dd74ac["getDemoFilePath()"]
  c62ff9be_3fe2_988c_c3bb_6f0e746aace4 -->|calls| 71cc5361_9d12_7f85_828f_969e67dd74ac
  fa5e6372_2e93_0c6b_294a_e4ba62d4e3f3["getIndexForStyle()"]
  c62ff9be_3fe2_988c_c3bb_6f0e746aace4 -->|calls| fa5e6372_2e93_0c6b_294a_e4ba62d4e3f3
  style c62ff9be_3fe2_988c_c3bb_6f0e746aace4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/lib/llm.ts lines 57–115

export function processMdxForLLMs(content: string, style: Style["name"]) {
  // Replace <ComponentsList /> with a markdown list of components.
  const componentsListRegex = /<ComponentsList\s*\/>/g
  content = content.replace(componentsListRegex, getComponentsList())

  const componentPreviewRegex =
    /<ComponentPreview[\s\S]*?name="([^"]+)"[\s\S]*?\/>/g

  return content.replace(componentPreviewRegex, (match, name) => {
    try {
      // Try to extract styleName from the match.
      const styleNameMatch = match.match(/styleName="([^"]+)"/)
      const effectiveStyle = styleNameMatch ? styleNameMatch[1] : style

      let src = getDemoFilePath(name, effectiveStyle)

      if (!src) {
        const { index, key } = getIndexForStyle(effectiveStyle)
        const component = index[key]?.[name]
        if (!component?.files) {
          return match
        }
        src = component.files[0]?.path
      }

      if (!src) {
        return match
      }

      let source = fs.readFileSync(src, "utf8")

      // Replace all base-specific paths.
      for (const base of BASES) {
        source = source.replaceAll(
          `@/registry/bases/${base.name}/`,
          "@/components/"
        )
        source = source.replaceAll(
          `@/examples/${base.name}/ui/`,
          "@/components/ui/"
        )
        source = source.replaceAll(`@/examples/${base.name}/lib/`, "@/lib/")
        source = source.replaceAll(`@/examples/${base.name}/hooks/`, "@/hooks/")
      }
      source = source.replaceAll(
        `@/registry/${effectiveStyle}/`,
        "@/components/"
      )
      source = source.replaceAll("export default", "export")

      return `\`\`\`tsx
${source}
\`\`\``
    } catch (error) {
      console.error(`Error processing ComponentPreview ${name}:`, error)
      return match
    }
  })
}