Agent Markdown Renderer (woofed_ai/MarkdownRenderer.tsx)

woofed-crm · app/javascript/components/woofed_ai/MarkdownRenderer.tsx · typescript · MIT
ui, security, ai, fw:react, fw:tailwind, tag:markdown, tag:gfm

Renders AI agent markdown with GitHub-flavored syntax, sanitized HTML, and Tailwind prose styles. Reuse it for chat or assistant messages that need safe rich text.

// Source: https://github.com/douglara/woofed-crm | License: MIT | Copyright 2026 WOOFED DESENVOLVIMENTO DE SOFTWARES LTDA - ME - CNPJ 60.076.777/0001-61
// Provided via justclaw.it.com; keep this notice with the code.
import { type FC } from 'react'
import ReactMarkdown, { type Components } from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import remarkGfm from 'remark-gfm'

import { cn } from '@/lib/utils'

interface MarkdownRendererProps {
  children: string
  className?: string
}

// Renders agent markdown using the project's Tailwind typography (`prose`)
// tokens. Plain anchors/images replace agent-ui's next/image + next/link.
const components: Components = {
  a: ({ children, ...props }) => (
    <a
      {...props}
      target="_

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key