How is the stream response converted to styled divs and tables?

[rauloaida]

Incredible work all around by the team @vercel!

How are the stream responses automatically converted from raw markdown into tailwind styled tables, table rows etc? is this their own package? I haven't been able to find anything close. See attached screenshot of raw markdown from response and styled table automagically created.

[muratsu]

It seems to be using the tailwind prose classes & typography plugin. You can find more info on the tailwind docs page.

[rauloaida]

Thank you!

[rauloaida]

To answer my own question from yesterday: it's the React Markdown library + react gfm plugin.

 <div>
      <ReactMarkdown components={components} remarkPlugins={[gfm]}>
           {rawTextToBeRendered}
      </ReactMarkdown>
</div>

You then style the components with either CSS or Tailwind:

 const components = {
    th: ({
      node,
      children,
      ...props
    }: {
      node: any;

      children: React.ReactNode;
    }) => (
      <th
        className={
          "px-3 py-1 text-white break-words bg-gray-500 border border-black "
        }
        {...props}
      >
        {children}
      </th>
    )
 }

[github-actions[bot]]

This discussion was automatically locked because it has not been updated in over 30 days. If you still have questions about this topic, please ask us at community.vercel.com/ai-sdk