React AI Drawer - AI 应用的专属渲染器

中文 | English

一个专为 AI 应用程序设计的 UI 渲染器，可以极大增强 AI 与前端的交互方式。支持流式 JSX/XML 渲染、自定义组件、生命周期钩子，让 AI 输出直接变为交互式 UI。

🚀 项目说明

本插件主要在原插件基础上添加了更自由的 markdown 自定义渲染，比如自定义代码块中的 js，其它语言同理，原插件文档可参考中文

<ReactAIRenderer
  customMdRender={(type, content) => {
    console.log(type)
    console.log(content)
    // if (type === 'javascript') {
    //   return (
    //     <SimpleCodeRender
    //       textContent="test"
    //       language="javascript"
    //     ></SimpleCodeRender>
    //   )
    // }
    return <div>init</div>
  }}
>
  {`
      测试标题
      \`\`\`javascript
function travelPlan() {
  console.log('开始旅行规划');
  return {
    destination: '北京',
    duration: '5天',
    budget: 6500
  };
}
\`\`\``}
</ReactAIRenderer>

📦 安装使用

npm install react-ai-drawer

pnpm 安装：

pnpm install react-ai-drawer

或使用 yarn：

yarn add react-ai-drawer

可选依赖

本库支持渲染 Mermaid 图表，但需要安装额外的依赖：

npm install mermaid

如果不安装 mermaid，图表将不会渲染，但不会影响其他功能。

🎯 快速开始

基础使用

import ReactAIDrawer from 'react-ai-drawer'

const content = `
# 欢迎使用 React AI Renderer

这是一个 **粗体** 文本和 *斜体* 文本。

\`\`\`javascript
console.log('Hello World');
\`\`\`
`

function App() {
  return <ReactAIDrawer>{content}</ReactAIDrawer>
}

AI 流式输出渲染

import ReactAIDrawer from 'react-ai-drawer'

// 模拟 AI 流式输出内容
const aiContent = `
正在分析用户需求...

<Table>
  <TableHeader>
    <TableCell header>产品名称</TableCell>
    <TableCell header>价格</TableCell>
    <TableCell header>库存</TableCell>
  </TableHeader>
  <TableRow>
    <TableCell>iPhone 15</TableCell>
    <TableCell>¥5999</TableCell>
    <TableCell>50</TableCell>
  </TableRow>
</Table>
`

function App() {
  return <ReactAIDrawer>{aiContent}</ReactAIDrawer>
}

自定义组件与生命周期

import ReactAIDrawer from 'react-ai-drawer'

// 自定义按钮组件
const Button = ({ onClick, children, style }) => (
  <button
    onClick={onClick}
    style={{
      backgroundColor: 'blue',
      color: 'white',
      padding: '8px 16px',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
      ...style
    }}
  >
    {children}
  </button>
)

// 组件生命周期钩子
const componentHandlers = [
  {
    name: 'Button',
    component: Button,
    selfClosing: false,
    onRender: (item, scope) => {
      console.log('Button 组件已渲染完成')
      // 可以在这里触发下一个动作
      // 例如：更新状态、发送请求等
    }
  }
]

const content = `
<Button onClick={() => alert('点击了按钮')}>点击我</Button>
`

function App() {
  return (
    <ReactAIDrawer
      components={{ Button }}
      componentHandlers={componentHandlers}
    >
      {content}
    </ReactAIDrawer>
  )
}

🛠️ API 参考

ReactAIDrawer 组件

主渲染组件，完全兼容 ReactMarkdown API。

Props:

• content: Markdown/MDX 内容字符串
• scope: 传递给 MDX 的作用域对象
• components: 自定义组件映射
• componentHandlers: 组件处理器数组（支持生命周期钩子）
• children: 作为内容的子元素（替代 content）

组件生命周期钩子

通过 componentHandlers 属性可以为组件添加生命周期钩子：

const componentHandlers = [
  {
    name: 'MyComponent',
    component: MyComponent,
    selfClosing: false,
    onRender: (item, scope) => {
      // 组件渲染完成后的回调
      console.log('组件已渲染:', item)
    }
  }
]

⚡ 性能优势

实时渲染

• 流式解析，无需等待完整内容
• 动态组件渲染，提升用户体验
• 内存优化，避免重复渲染

兼容性保障

• 完全兼容 React 18+
• 支持 TypeScript 类型安全
• 无依赖冲突，轻松集成

💡 应用场景

1. AI 助手应用

让 AI 助手直接输出交互式 UI，提升用户体验

2. 代码生成工具

AI 生成的代码可以直接渲染为可交互的组件

3. 数据分析报告

AI 分析结果可直接渲染为图表和表格

4. 教育培训系统

AI 生成的教学内容可直接渲染为交互式课件

5. 智能文档系统

AI 生成的文档可直接渲染为富交互页面

6. 低代码平台

AI 辅助生成界面，直接渲染为可用组件

7. 自动化运维

AI 分析结果可直接渲染为操作界面

📖 示例运行

运行示例：

npm run start

然后在浏览器中访问 http://localhost:3000

🚀 高级特性

流式渲染优化

React AI Renderer 采用先进的流式解析技术，能够在 AI 模型输出的同时实时渲染内容，无需等待完整输出。

组件注册机制

支持动态组件注册，可以灵活扩展自定义组件：

const customComponents = {
  MyButton: ({ onClick, children }) => (
    <button onClick={onClick} className="custom-button">
      {children}
    </button>
  )
}

;<ReactAIDrawer components={customComponents}>{content}</ReactAIDrawer>

作用域传递

支持向组件传递作用域变量，实现更复杂的数据交互：

const scope = {
  userData: { name: '张三', age: 25 },
  onAction: (data) => console.log('Action triggered:', data)
}

;<ReactAIDrawer scope={scope}>{content}</ReactAIDrawer>

📊 架构设计

系统架构图

``mermaid graph TD A[AI Model] -->|Streaming Output| B[React AI Renderer] B -->|Parse JSX/XML| C[MDX Streaming Parser] C -->|Component Data| D[Component Renderer] D -->|Render Components| E[Custom UI Components] D -->|Lifecycle Hooks| F[Event Triggers] E --> G[Interactive UI] F --> H[Next Actions]

### 工作流程

1. AI 模型流式输出 JSX/XML 格式的内容
2. React AI Renderer 实时接收并解析内容
3. MDX Streaming Parser 动态解析组件数据
4. Component Renderer 渲染自定义 UI 组件
5. 触发生命周期钩子，执行后续动作

## ❓ 常见问题

### Q: React AI Renderer 与 react-markdown 有什么区别？
A: React AI Renderer 完全兼容 react-markdown，但增加了对 JSX/XML 组件的支持、流式渲染和生命周期钩子等高级功能。

### Q: 如何处理未注册的组件？
A: 未注册的组件会自动转换为对应的文本表示形式，不会导致页面崩溃。

### Q: 是否支持不同组件库如antd,shadcn等
A: 是的，React AI Renderer 无组件依赖，你可以使用任意组件库以及自定义组件

### Q: 性能如何优化？
A: 建议合理使用组件生命周期钩子，避免在渲染过程中执行耗时操作。

## 📄 许可证

MIT