Loading...
Skip to main content

MDX Output

By default, models emit text. If you ask them to, they'll emit markdown, which is a robust, easy way to provide more structured output to your user.

To take it a step further, you can have the model emit MDX, which combines Markdown and your components:

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

To do this, use the MdxChatCompletion component:

<MdxChatCompletion usageExamples={usageExample}>
<UserMessage>Tell me a children's story. Summarize the key characters at the end.</UserMessage>
</MdxChatCompletion>

(See the examples project for a full working demo.)

Telling the model which components are available

The API for MdxChatCompletion is the same as ChatCompletion, except it adds a usageExamples prop. That prop is an AI.JSX component that tells the model which components are available:

const usageExample = (
<>
Use a Card to display collected information to the user. The children can be markdown. Only use the card if you have
a logically-grouped set of information to show the user, in the context of a larger response. Generally, your entire
response should not be a card. A card takes optional header and footer props.

Example 1 of how you might use this
component: Here's the best candidate I found:
<Card header="Sam Smith">
**Skills**: React, TypeScript, Node.js **Location**: Seattle, WA **Years of experience**: 5 **Availability**:
Full-time
</Card>
{/* ... you may wish to add more examples */}
</>
);

<MdxChatCompletion usageExamples={usageExample}>
<UserMessage>Tell me a children's story. Summarize the key characters at the end.</UserMessage>
</MdxChatCompletion>

In that example, Card may refer to a real component in scope, or you can just write it out as a string:

function Card({ header, footer, children }) {
return (
<div>
<div className="header">{header}</div>
<div className="content">{children}</div>
<div className="footer">{footer}</div>
</div>
);
}

const usageExample = (
<>
{/* Reference a component in scope */}
Here's how you use a Card: <Card>content</Card>

{/* Just write out a string */}
You can also use a ButtonGroup: {`<ButtonGroup labels=['Yes', 'No'] />`}
</>
);

Using the output

The output will be MDX, as a string. It will not have any import statements. If you want to render it into your UI, it's up to you to parse/compile it in some way, using the MDX APIs.