無料・登録不要・ビルド不要
React（JSX）ビューアー：AI が作った React コードをそのまま動かす
Claude・ChatGPT・Gemini が書いたコードを貼ると、この場で動きます。
使い方
- 1
コードをコピーする
Claude ならアーティファクトを開いてコードの表示に切り替え、コピーします。ChatGPT や Gemini Canvas なら、コードのブロックかキャンバスをコピーします。保存した .jsx・.tsx ファイルでもかまいません。
- 2
貼り付けて動かす
ブラウザが TypeScript の型を外して JSX を変換し、React 18 とコードが読み込むライブラリを読み込む 1 つの HTML ファイルをつくります。アプリはこのページの安全に切り離された枠の中で動きます。
- 3
リンクかファイルにする
アップロードすれば、スマホで開いたり人に送ったりできる非公開のリンクになります。.html で保存すれば、手元に残したり、どこにでも置いたりできます。
React のアーティファクトがファイルのままでは開けない理由
React のコンポーネントは、まだページではありません。JSX と TypeScript は変換が必要で、import は npm のパッケージを指していて、画面のどこに描くかも書かれていません。.html で保存しても、コードがそのまま見えるか、真っ白になります。ふつうは Vite のプロジェクトをつくり、npm install して、Netlify や Vercel でビルドします。このビューアーは、1 つのコンポーネントについてその手順をブラウザの中で済ませ、開くことも送ることも置くこともできる 1 つの HTML ファイルにします。
動くもの・動かないもの
動くもの
- export default したコンポーネント、または一番外側の App
- useState・useEffect・useMemo・useReducer などのフック
- TypeScript の型・interface・ジェネリクス（外すだけで、型のチェックはしません）
- Tailwind のクラス。bg-primary のような shadcn/ui の色も使えます
- lucide-react のアイコンと recharts のグラフ
- shadcn/ui の @/components/ui（Card・Button・Input・Tabs・Select・Slider・Switch・Dialog など）。動く簡易版に置き換えます
- そのほかの npm パッケージ（framer-motion・d3・lodash など）。esm.sh から読み込みます
動かないもの
- いくつものファイルに分かれたアプリ（./Chart のような import）。1 つのファイルにまとめてください
- Next.js や Vite のプロジェクトのほかの @/ のパス、fs のような Node のモジュール
- サーバーで動くコード、API キー、データベース。アプリはブラウザの中だけで動きます
React ビューアーについての質問
Claude の React アーティファクトを Claude の外で動かすには？
Claude でアーティファクトを開き、コードの表示に切り替えてコピーします。ここに貼り付けて「コードを動かす」を押すと、ブラウザの中で変換し、React 18・Tailwind・lucide-react・recharts と shadcn/ui の簡易版で動かします。どれも Claude の React アーティファクトが使うライブラリです。動いたら、リンクにするか、1 つの .html ファイルで保存できます。
どのライブラリが使えますか？
React 18 とフック、Tailwind のクラス、lucide-react、recharts、shadcn/ui の @/components/ui です。shadcn/ui は、shadcn と同じクラスで見た目をそろえた簡易版に置き換えます。コードが名前で読み込むほかの npm パッケージは、esm.sh から読み込みます。いくつものファイルに分かれたコードと、@/components/ui・@/lib/utils 以外のプロジェクトのパスは動きません。AI に「1 つのファイルにまとめて」と頼んでください。
コードはアップロードされますか？
動かすだけなら、アップロードされません。コードの変換もページづくりも手元のブラウザの中で行い、Convika のサーバーには届きません。できたページは、ほかの React のページと同じく、React とライブラリを esm.sh から、Tailwind をその CDN から読み込みます。Convika がアプリを受け取るのは、「アップロードしてリンクをつくる」を押したときだけです。
スマホでも使えますか？
使えます。Claude・ChatGPT・Gemini のアプリでコードをコピーし、Safari か Chrome でこのページを開いて貼り付けます。アプリはスマホのブラウザの中で動きます。あとでスマホで開いたり、人のスマホで開いてもらったりするなら、リンクにしてください。
アプリを人に送るには？
アプリの上の「アップロードしてリンクをつくる」を押すと、登録なしで 3分間有効な非公開のリンクができます。このリンクでは、スクリプトを止めて、つくったときの見た目のまま表示します。Free プランでページを受け取って公開すれば、公開をやめるまで同じリンクのまま、アプリが動きます。.html で保存して、好きな場所に置くこともできます。
エラーが出たら？
ビューアーが、エラーと、それが出たコードの行を表示します。エラーをチャットに貼り付けて、AI に直してもらってください。別のファイルを読み込んでいるなら、1 つのファイルにまとめてもらいます。それでも動かないときは、AI に「1 つの HTML ファイルにして」と頼み、HTML ビューアーで開いてください。
保存したファイルは Convika がなくても動きますか？
動きます。.html ファイルには変換したコンポーネントが入っていて、React とライブラリを esm.sh から、Tailwind をその CDN から読み込みます。ネットにつながったブラウザならどこでも開け、Convika にも Netlify にも GitHub Pages にも置けます。