mdx-prompt
Version:
Use MDX to render high quality LLM prompts
284 lines • 10.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* The <Prompt> component serves as the logical "root" of your prompt.
* It does not render an additional wrapper tag; it simply returns its children as-is.
*
* @param {object} props
* @param {React.ReactNode} props.children - Child nodes containing all other sections of your prompt.
*
* @example
* ```tsx
* <Prompt>
* <Purpose>...</Purpose>
* <Instructions>...</Instructions>
* <Variables>...</Variables>
* </Prompt>
* ```
*/
export function Prompt({ children }) {
return children;
}
/**
* The <Purpose> component renders a <purpose> XML-like tag.
* Typically used to indicate the overall goal or intention of the prompt.
*
* @param {object} props
* @param {React.ReactNode} props.children - The text or elements describing the prompt's purpose.
*
* @example
* ```tsx
* <Purpose>
* You are a top-tier editorial assistant. Improve the user's text for clarity and style.
* </Purpose>
* ```
*/
export function Purpose({ children }) {
return _jsx("purpose", { children: children });
}
/**
* The <Background> component renders a <background> tag,
* usually containing contextual info or a summary of the scenario
* the LLM should consider when responding.
*
* @param {object} props
* @param {React.ReactNode} props.children - The textual or element-based context describing the background scenario.
*
* @example
* ```tsx
* <Background>
* User wants to automate daily updates about project X. They have used Slack messages previously.
* </Background>
* ```
*/
export function Background({ children }) {
return _jsx("background", { children: children });
}
/**
* The <Variables> component renders a <variables> tag.
* Commonly used to include dynamic or structured data that the LLM should consider.
*
* @param {object} props
* @param {React.ReactNode} props.children - The data or subcomponents that represent your prompt's variables.
*
* @example
* ```tsx
* <Variables>
* <UserInput>{userMessage}</UserInput>
* <Company company={selectedCompany} />
* </Variables>
* ```
*/
export function Variables({ children }) {
return _jsx("variables", { children: children });
}
/**
* The <Data> component renders a <data> tag.
* Commonly used to include dynamic or structured data that the LLM should consider.
*
* @param {object} props
* @param {React.ReactNode} props.children - The data or subcomponents that represent your prompt's variables.
* @param {string} [props.title] - Optional title attribute for the <data> tag.
*
* @example
* ```tsx
* <Data title="User Input">
* <UserInput>{userMessage}</UserInput>
* <Company company={selectedCompany} />
* </Data>
* ```
*/
export function Data({ children, title = 'You are provided with the following data:', }) {
return _jsx("data", { title: title, children: children });
}
/**
* The <Tools> component renders a <tools> tag.
* Commonly used to include dynamic or structured data that the LLM should consider.
*
* If you are sending tools to an LLM using something like the Vercel AI SDK,
* and especially if you are using structured responses in your LLM calls, the
* LLM will already be receiving the signatures of all of the tools at separately
* so you probably don't need to go into that detail here.
*
* @param {object} props
* @param {React.ReactNode} props.children - The data or subcomponents that represent your prompt's tools.
* @param {string} [props.title] - Optional title attribute for the <tools> tag.
*
* @example
* ```tsx
* <Tools title="User Input">
* <Tool>createDocument: choose this if the user wants to generate a report.</Tool>
* <Tool>extractAchievements: choose this if the user wants to log their achievements.</Tool>
* </Data>
* ```
*/
export function Tools({ children, title = 'You are provided with the following tools:', }) {
return _jsx("tools", { title: title, children: children });
}
/**
* The <Tool> component renders an <tool> tag.
* Often used inside <Tools>, but can be used standalone as well.
*
* @param {object} props
* @param {React.ReactNode} [props.children] - The text or content of the tool.
* @param {object} [props.dangerouslySetInnerHTML] - Optionally set HTML content directly.
*
* @example
* ```tsx
* <Tool>createDocument: choose this if the user wants to generate a report.</Tool>
* ```
*/
export function Tool({ children, dangerouslySetInnerHTML, }) {
return _jsx("tool", { dangerouslySetInnerHTML: dangerouslySetInnerHTML, children: children });
}
/**
* The <Instructions> component renders a <instructions> tag
* and can map an array of instruction strings to multiple <Instruction> tags.
* You may also nest <Instruction> elements as children.
*
* @param {object} props
* @param {string[]} [props.instructions] - An array of instruction strings automatically wrapped in <Instruction>.
* @param {React.ReactNode} [props.children] - Additional children, which can include <Instruction> elements or other markup.
*
* @example
* ```tsx
* <Instructions instructions={[
* 'Use bullet points when listing features',
* 'Do not include personal opinions'
* ]}>
* <Instruction>Write the response in Spanish</Instruction>
* </Instructions>
* ```
*/
export function Instructions({ instructions = [], children }) {
return (_jsxs("instructions", { children: [instructions.map(instruction => (_jsx(Instruction, { dangerouslySetInnerHTML: { __html: instruction } }, instruction.replace(/\s/g, '')))), children] }));
}
/**
* The <Instruction> component renders an <instruction> tag.
* Often used inside <Instructions>, but can be used standalone as well.
*
* @param {object} props
* @param {React.ReactNode} [props.children] - The text or content of the instruction.
* @param {object} [props.dangerouslySetInnerHTML] - Optionally set HTML content directly.
*
* @example
* ```tsx
* <Instruction>Always output valid JSON</Instruction>
* ```
*/
export function Instruction({ children, dangerouslySetInnerHTML, }) {
return _jsx("instruction", { dangerouslySetInnerHTML: dangerouslySetInnerHTML, children: children });
}
/**
* The <UserInput> component renders a <user-input> tag,
* typically containing the raw user message or query to be processed by the LLM.
*
* @param {object} props
* @param {React.ReactNode} props.children - The user's raw input or an equivalent data representation.
*
* @example
* ```tsx
* <UserInput>{userMessage}</UserInput>
* ```
*/
export function UserInput({ children }) {
return _jsx("user-input", { children: children });
}
/**
* The <Example> component renders an <example> tag,
* typically used to show a single example input or output in your prompt.
*
* @param {object} props
* @param {React.ReactNode} props.children - The example text or structured snippet.
*
* @example
* ```tsx
* <Example>
* Implemented a caching layer to reduce load times by 40%.
* </Example>
* ```
*/
export function Example({ children }) {
return _jsx("example", { children: children });
}
/**
* The <Examples> component renders an <examples> tag.
* It can accept an array of example strings via the `examples` prop,
* and/or nested <Example> components as children.
*
* @param {object} props
* @param {string[]} [props.examples] - An array of string examples; each is automatically wrapped in <example> tags.
* @param {React.ReactNode} [props.children] - Additional child nodes (often more <Example> elements).
*
* @example
* ```tsx
* <Examples examples={[
* 'Deployed feature A, reducing error rate by 20%',
* 'Refactored the user login system for better maintainability'
* ]}>
* <Example>
* Improved database indexing, cutting query times in half.
* </Example>
* </Examples>
* ```
*/
export function Examples({ examples = [], children }) {
return (_jsxs("examples", { children: [examples.map((example, i) => (_jsx("example", { dangerouslySetInnerHTML: { __html: example } }, i))), children] }));
}
/**
* The <InputFormat> component renders an <input-format> tag,
* usually describing how the LLM input data is structured or what the user is providing.
*
* @param {object} props
* @param {React.ReactNode} props.children - The textual explanation or sub-tags describing input structure.
* @param {string} [props.title='You are provided with the following inputs:'] - Optional title attribute for <input-format>.
*
* @example
* ```tsx
* <InputFormat>
* The user has shared a summary of their recent work tasks:
* </InputFormat>
* ```
*/
export function InputFormat({ children, title = 'You are provided with the following inputs:', }) {
return _jsx("input-format", { title: title, children: children });
}
/**
* The <OutputFormat> component renders an <output-format> tag,
* typically describing how the LLM should shape its response.
*
* @param {object} props
* @param {React.ReactNode} [props.children] - Any text or further specification describing the format.
* @param {string} [props.title='Your response should be formatted as:'] - Title attribute for <output-format>.
* @param {string} [props.format=''] - An optional string to show a short reference format or instructions.
*
* @example
* ```tsx
* <OutputFormat format="Respond in JSON with a 'summary' field and an optional 'details' field.">
* Please keep the overall tone professional and concise.
* </OutputFormat>
* ```
*/
export function OutputFormat({ children, title = 'Your response should be formatted as:', format = '', }) {
return (_jsxs("output-format", { title: title, children: [children, " ", format] }));
}
/**
* The <ChatHistory> component renders a <chat-history> tag,
* listing messages as <message> sub-elements with "role: content".
*
* @param {object} props
* @param {{ role: string; content: string }[]} props.messages - An array of message objects with "role" and "content".
*
* @example
* ```tsx
* const messages = [
* { role: 'system', content: 'You are a helpful AI assistant.' },
* { role: 'user', content: 'Hello!' }
* ];
*
* <ChatHistory messages={messages} />
* ```
*/
export function ChatHistory({ messages }) {
return (_jsx("chat-history", { children: messages?.map(({ role, content }) => (_jsxs("message", { children: [role, ": ", JSON.stringify(content, null, 4)] }, JSON.stringify(content).replace(/\s/g, '')))) }));
}
//# sourceMappingURL=prompt.js.map