Mdx Prompt

mdx-prompt


`mdx-prompt` is a lightweight library enabling React (and MDX) developers to write large language model (LLM) prompts as JSX components. By defining your prompts in JSX or MDX, you can achieve a high degree of composability, reusability, and clarity for both simple and complex prompt designs.

Many developers end up piecing together a big template string for an LLM prompt. `mdx-prompt` offers an alternative by letting React generate those strings using familiar patterns: you create React components (or MDX files) that produce the final prompt. This approach can make your AI-driven features more maintainable, more testable, and more fun to code!

Table of Contents

1. Features
2. Installation
3. Core Concepts
4. Default Components and Usage
   • \
   • \
   • \
   • \
   • \
   • \ and \
   • \
   • \
   • \
   • \
   • \
   • \
5. Rendering Prompts
   • Using `renderMDX` (Inline Usage)
   • Using `renderMDXPromptFile` (MDX File Usage)
   • Full Example in a Next.js Route
6. Creating Your Own Components
7. JSDoc Reference and Examples
   • 1. `renderMDX()`
   • 2. `renderMDXPromptFile()`
   • 3. `prettyPrompt()`
8. Example: Inline MDX Prompt in a Scorer
9. Challenges and Caveats