v0 by Vercelが使いやすいので、自分でもコード編集&実行環境を自作。リミットを気にせず使える編集ツール。

こんにちは。自社の開発を効率化したいですね。
v0 by Vercelが使いやすかったので、フルスクリーンでNext.jsのサイトをリアルタイムに書き換えてくれるような仕組みを作ってみました。
実際にコードを書いてもらう時間が必要なのでそれなりに時間がかかりますが、使い勝手も悪くない気がします。

フロントはNext.js + Tailwind + shadcn/uiで
バックエンドの更新はPython+Flask+LLMで構築してみました。

オレンジ色の背景を、チャットで青にしてと言ってみると、

が

きちんと青に変わりました。

基本的にはpythonのflaskで指定のファイルを読み込み、それをLLMに渡しながらシステムプロンプトとユーザープロンプトでtsxファイルを生成してもらいます。そして、それを再度書き込むことで実現しました。

結構仕組みは簡単です。実際サービスだとリミットが気になりますが、ローカルのGPUで実行もできるので便利です。

これでリミットを気にせず自由に調整できますし、バックエンドのシステムも拘らずなんでも使えそうです。助かります。