🚀Next.js＋SandpackでClaudeArtifactは実現できる！✨

はじめに

皆さん、LlamaCoderをご存知ですか？これは、Llama 3.1を使って、Claudeのartifact機能のようなことを無料で実現できるサービスなんです。

https://llamacoder.together.ai/

すごいと思いませんか？ただ、Claudeと同様に、自分の使いたいライブラリが使えないのが少々つらいところです。
でも、LlamaCoderの素晴らしいところは、OSSとしてコードが公開されていること。

https://github.com/Nutlope/llamacoder

実装を見てみると、かなりシンプルで以下の流れだけなんです。

コード生成　→ Sandpackでコード実行

Sandpackさえ使えれば、実は自分でも作れちゃうことに気づいちゃいました。
Sandpackはブラウザ上でライブコードエディターとプレビューを提供するツールです。

https://sandpack.codesandbox.io/docs/getting-started

じゃあ一回自分で実装してみるしかないですよね！

成果物

まずは具体的なイメージをつかんでいただくために、最終成果物をお見せします
これはデータを与えてグラフをつくって！と頼んでみた例です。

こんなのがSandpack使ったら割と簡単に作れちゃいます。(UI適当ですいません。)
では実装がどんなものか見ていきましょう。

実装

今回の実装はこちら

https://github.com/Kota-Yamaguchi/nextjs-sandpack-app

プロジェクト立ち上げ

以下で適当にプロジェクトの立ち上げてください。

bunx create-next-app@latest nextjs-sandpack-app

必要なライブラリ

そしたら以下で必要なライブラリをインストールしてください。
まずはSandpackが必要です。
LLM系のツールにはVercel AI SDKを使用します。Stream処理する時めちゃくちゃに便利ですのでおすすめです。

bun add @ai-sdk/openai ai @codesandbox/sandpack-react

コード生成

ではコード生成です。これだけです。
プロンプトは長くなっちゃったので別に書いておきます。

import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const runtime = "edge";
export const maxDuration = 30;
const systemPrompt = `
プロンプトは別枠で書いています。
`;
export const POST = async (req: Request) => {
	const { messages, ...data } = await req.json();
	console.log(data);
	const result = await streamText({
		model: openai("gpt-4o"),
		system: systemPrompt,
		temperature: data.temperature,
		abortSignal: req.signal, /
		messages,
	});

	return result.toAIStreamResponse();
};

プロンプト

日本語で書きたかったのでLlamaCoderのプロンプトを参考にしながらClaudeさんにプロンプトをかいてもらいました。
https://github.com/Nutlope/llamacoder/blob/main/app/api/generateCode/route.ts

あなたは、最先端のUI/UXデザイン能力を持つ卓越したフロントエンドReactエンジニアです。以下の指示に厳密に従い、究極のReactコンポーネントを作成してください。完璧な仕事には100万ドルの報酬が用意されています：
0. importから始まる完全なReactコードのみを返してください。それ以外は絶対に何も返さないでください。絶対にです。私の仕事にとって、インポートを含むReactコードのみを返すことが非常に重要です。\`\`\`typescriptや\`\`\`javascriptや\`\`\`tsxで絶対に始めないでください。
1. コンポーネントの設計:
   - ユーザーの要求に基づいて、単独で動作する堅牢なReactコンポーネントを作成してください。
   - コンポーネントは必ずデフォルトエクスポートを使用し、必須のpropsを持たないようにしてください。
   - 適切にカスタマイズ可能で再利用性の高いコンポーネントを目指してください。

2. 技術仕様:
   - TypeScriptを使用し、厳格な型チェックを適用してください。
   - 最新のReact機能（Hooks、Suspense、Server Componentsなど）を適切に活用してください。
   - パフォーマンスを最適化するため、メモ化（useMemo、useCallback）を適切に使用してください。

3. スタイリング:
   - Tailwind CSSを使用し、任意の値は避けてください（例：h-[600px]）。
   - アプリケーション全体で一貫性のあるカラーパレットとデザインシステムを使用してください。
   - レスポンシブデザインを実装し、様々な画面サイズに対応してください。

4. 機能性とインタラクティビティ:
   - 必要に応じてReact Hooksを使用して、効果的な状態管理を実装してください。
   - ユーザー操作に対する適切なフィードバックを提供し、スムーズなUXを実現してください。

5. データの可視化（要求された場合のみ）:
   - rechartsライブラリを使用してダッシュボード、グラフ、またはチャートを実装してください。
   - データの視覚化は直感的で情報量が豊富であることを確認してください。

6. アクセシビリティとユーザビリティ:
   - WAI-ARIAガイドラインに従い、完全にアクセシブルなコンポーネントを作成してください。
   - キーボードナビゲーションとスクリーンリーダーの互換性を確保してください。

7. パフォーマンスとエラー処理:
   - コンポーネントのレンダリングパフォーマンスを最適化してください。
   - 適切なエラーバウンダリとフォールバックUIを実装してください。
   - 非同期操作のローディング状態を適切に処理してください。

8. 国際化とローカライゼーション:
   - テキストを外部化し、多言語サポートの準備をしてください。
   - 日付、数値、通貨のフォーマットに配慮してください。

9. セキュリティ:
   - XSS攻撃を防ぐため、ユーザー入力を適切にサニタイズしてください。
   - 機密データの処理に注意を払ってください。

10. コードの品質:
    - 一貫性のある命名規則と適切なコメントを使用してください。
    - コードの重複を避け、DRY（Don't Repeat Yourself）原則に従ってください。
11. import 'tailwindcss/tailwind.css';は必要ありません。

コードを提供する際は、インポート文から始まる完全なTypeScript Reactコードのみを返してください。コードブロックの記号や追加の説明は不要です。このガイドラインに厳密に従うことで、高品質で保守性の高い、最先端のReactコンポーネントが作成されることを期待しています。

コード実行

では生成されたコードを実行します。
試したいのはSandpackなので、画面はほとんどClaudeさんに作ってもらいました。

"use client";
import { Sandpack } from "@codesandbox/sandpack-react";
import { useChat } from "ai/react";
import { useState } from "react";

export default function Home() {
	const { messages, input, isLoading, stop, handleInputChange, handleSubmit } =
		useChat({
			body: {
				temperature: 0.9,
			},
		});
	const [error, setError] = useState<string>("");

	const handleFormSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		if (!input.trim()) {
			setError("メッセージを入力してください");
			return;
		}
		setError("");
		handleSubmit(e);
	};

	return (
		<main className="flex w-full min-h-screen flex-col items-center justify-center p-8 bg-gray-100">
			<div className="w-full max-w-6xl bg-white shadow-lg rounded-lg p-8">
				{messages.map((m) => (
					<div key={m.id} className="mb-4 p-4 border-b border-gray-300">
						<span className="font-semibold text-gray-800">
							{m.role === "user" ? "Human: " : "AI: "}
						</span>
						<span className="text-gray-600">{m.content}</span>
					</div>
				))}

				{!isLoading && messages.length !== 0 && (
					<div className="w-full max-w-6xl mt-8">
						<Sandpack
							options={{
								showNavigator: true,
								externalResources: [
									"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
								],
								editorHeight: "80vh",
								showTabs: false,
							}}
							files={{
								
								"App.tsx":
									messages[messages.length - 1] &&
									messages[messages.length - 1].role !== "user"
										? messages[messages.length - 1].content
										: "",
							
								"/public/index.html": `<!DOCTYPE html>
                    <html lang="en">
                      <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                        <script src="https://cdn.tailwindcss.com"></script>
                      </head>
                      <body>
                        <div id="root"></div>
                      </body>
                    </html>`,
							}}
							template="react-ts"
							customSetup={{
								dependencies: {
									"lucide-react": "latest",
									recharts: "2.9.0",
								},
							}}
						/>
					</div>
				)}
				<form onSubmit={handleFormSubmit} className="flex flex-col space-y-4">
					<textarea
						name="box"
						className="w-full rounded border border-gray-300 text-gray-700 p-3"
						value={input}
						onChange={handleInputChange}
						rows={4} 
					/>
					{error && <p className="text-red-500">{error}</p>}
					<button
						type="submit"
						className={`w-full flex items-center justify-center rounded bg-blue-600 text-white p-3 ${
							isLoading ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-800"
						}`}
						disabled={isLoading}
					>
						{isLoading ? <span className="loader" /> : <>Send message</>}
					</button>
				</form>
			</div>
		</main>
	);
}

Sandpackコンポーネントの以下の部分に使用したいライブラリなどを書くことでSandpack内で使えるライブラリが増えます。

                customSetup={{
								dependencies: {
									"lucide-react": "latest",
									recharts: "2.9.0",
								},
							}}

これだけの実装でめっちゃくちゃいい感じにグラフ表示ができたりします。可能性を感じますね。

最後に

グラフ表示系だとデータまで入力しないといけなかったりするので、データ量が増えれば増えるほどプロンプトも増えますので工夫が必要になってきそうです。
実際の実務に落とし込むにはもう一段階工夫が必要そうですね。

Xやってるのでぜひフォローお願いします。

https://x.com/hudebakonosoto