Create frontend

// app/page.tsx
"use client";

import { Chat, useChat } from "veryfront/chat";
import { MarkdownRendererProvider } from "veryfront/markdown";
import { MarkdownRenderer } from "./markdown-renderer.tsx";

export default function Home() {
  const chat = useChat();

  return (
    <MarkdownRendererProvider renderer={MarkdownRenderer}>
      <Chat chat={chat} placeholder="Ask me anything..." />
    </MarkdownRendererProvider>
  );
}

npm install --save-exact [email protected] [email protected]

// app/markdown-renderer.tsx
"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { MarkdownRendererProps } from "veryfront/markdown";

export function MarkdownRenderer({ source }: MarkdownRendererProps): React.JSX.Element {
  return <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>;
}