Beyond boring 🙄 markdown rendering with LLMs ✨ and React ⚛️

function LLMOutput({ children }) {
   return <p>{children}</p>
}

World War I was ignited by a complex mix of political, economic, and social factors that had been building for years. Key reasons include:

1. **Alliances**: European nations had formed tangled alliances for protection. Germany allied with Austria-Hungary and Italy (Triple Alliance), while France, Russia, and Britain formed the Triple Entente. These alliances created a precarious balance where conflict between two countries could draw in many others.

2. **Nationalism**: Intense pride and competition among European nations fueled tensions. Nationalistic fervor often led to a desire for dominance, particularly in regions like the Balkans, where Slavic nationalism threatened Austria-Hungary's stability.

[...]

npm i markdown-to-jsx
# pnpm add markdown-to-jsx
# yarn add markdown-to-jsx

import Markdown from 'markdown-to-jsx';

function LLMOutout({ text }) {
  return <Markdown>{text}</Markdown>
}

Explain the reasons that brought us WW1.
Instead of rendering the reasons as a list, use the Slideshow component like in this example:

'''
# My slides

Below this text, a slideshow will appear 🪄

<Slideshow slides={[{ "id": 1, text: "first slide" },{ "id": 2, text: "second slide" }]}
'''

# Causes of World War I

Below this text, a slideshow will appear :magic:

<Slideshow slides={[
  { "id": 1, "text": "The Rise of Nationalism: National pride and competitive fervor among nations fueled tension. Countries like Germany, France, and Britain were proud of their military power and colonial empires, creating a rivalry that would later ignite conflict." },
  { "id": 2, "text": "The Alliance System: European powers formed alliances for mutual protection. Two major blocs emerged—the Triple Entente (France, Russia, Britain) and the Triple Alliance (Germany, Austria-Hungary, Italy). This network of alliances meant that a conflict between two countries could easily escalate." },
  { "id": 3, "text": "Militarization and Arms Race: With militarization on the rise, nations were investing heavily in their armies and navies. Germany and Britain especially competed in a naval arms race, creating massive fleets, which fostered distrust and prepared them for war." },
  { "id": 4, "text": "Imperialism: European powers were vying for colonial dominance, leading to conflicts in Africa, Asia, and the Balkans. This imperial competition heightened tensions and fueled a sense of entitlement and rivalry among nations." },
  { "id": 5, "text": "The Assassination of Archduke Franz Ferdinand: On June 28, 1914, the assassination of Austria-Hungary’s heir in Sarajevo by a Bosnian Serb nationalist triggered a chain reaction. Austria-Hungary’s ultimatum to Serbia led to a series of declarations of war, dragging the allied powers into conflict." }
]} />

import Markdown from "markdown-to-jsx";

const options = {
  overrides: {
    Slideshow: {
      component: Slideshow,
    },
  },
};

function LLMOutput({ children }) {
  return <Markdown options={options}>{children}</Markdown>;
}

function Slideshow({ slides }) {
  return (
    <div>
      <p>This is not a slideshow but you get the point</p>
      <pre style={{ whiteSpace: "pre-wrap" }}>
        {JSON.stringify(slides, null, 2)}
      </pre>
    </div>
  );
}