AI 生成的 React 组件怎么在线运行？

现在的 AI（尤其是 Claude）动不动就输出一个 .tsx 单文件 React 组件——想跑起来，传统做法要装 Node、create vite、npm install 一长串依赖，对非程序员基本劝退。Artifacts 独家支持把 .tsx 组件代码直接粘贴进来，浏览器里当场编译渲染：不用 Node、不用 npm、不用任何本地环境。

确认代码是单文件 React 组件

看代码里有没有 export default function App()（或类似的默认导出）。有，就能直接用；没有，让 AI 在文件末尾补一句 export default App。

新建作品，类型选「Code」

在 artifacts.orienthong.cn 登录后点「新建作品」，类型选 Code——这是专门跑 React 组件的模式。

粘贴，自动编译渲染

把 .tsx 代码整段粘贴进编辑框，平台在浏览器里用 Babel 实时转译 TypeScript + JSX，右侧秒级出预览。代码有问题会用中文提示具体错误，把报错发回给 AI 让它改就行。

依赖不用装，白名单已内置

组件里 import 的常用库开箱即用：recharts 图表、lucide-react 图标、framer-motion 动画、shadcn/ui 组件（@/components/ui/button 这类导入）、d3、lodash、date-fns、zod 等都在内置白名单里，Tailwind 类名也直接生效——正是 Claude Artifacts 默认的技术栈。

发布并分享

和 HTML 作品一样：点「发布」得到固定链接，分享面板里复制链接、保存微信二维码、或生成限时临时链接。

常见问题

支持哪些第三方库？

白名单包括：react 全家桶、recharts、lucide-react、framer-motion、d3、lodash、date-fns、papaparse、xlsx、mathjs、zod、clsx、tailwind-merge、class-variance-authority，以及 shadcn/ui 全套常用组件（button、card、dialog、tabs、table 等 26 个）。用到白名单以外的库会明确报错，并列出支持清单。

提示「未检测到 default export」怎么办？

组件必须有默认导出才能渲染。把报错发给 AI，或自己在代码末尾加一行 export default 组件名，重新粘贴即可。

在线跑别人给的代码，安全吗？

代码只在独立沙箱子域的 iframe 里运行，拿不到你在主站的登录信息；平台服务端也完全不执行你的代码。反过来你发布的作品对访客同样是沙箱隔离的。