【satto × Vercel v0】作りたいアプリのアイデアを入力するだけでアプリを自動生成する方法

sattoは、ユーザーがテキスト入力した内容をもとに外部サービスやAIと連携する「スキル」をノーコードで作成できる便利なツールです。
一方、Vercel v0は、ユーザーの指示（プロンプト）に基づいてWebアプリやUIデザインを自動生成してくれる画期的なAIサービス。

本記事では、sattoからv0へ“作りたいアプリのプロンプト”をURLを介して送り、そのままアプリ生成に繋げる仕組みを構築する手順を解説します。

1. 全体像

sattoのスキルで「ユーザー入力 → URL生成（v0へのプロンプト込み）」をノーコードで実装
生成されたURLをクリックすると、そのままv0が自動生成モード（ユーザーの指示が含まれたプロンプト付き）で開く
アプリの雛形がリアルタイムに生成され、以降の修正もv0上でAIと対話しながら行える

これにより、ユーザーが「こんなアプリを作りたい」と入力するだけで、v0のプロンプトを作成→実行→アプリ雛形を瞬時に生成できます。

2. satto側の設定手順

2-1. 新規スキルを作成

sattoの管理画面にログインし、「スキル一覧」から新規スキルを追加
スキル名はわかりやすく「v0でアプリ自動生成URL」などにしておきます

2-2. インプット（パラメータ）を用意

パラメータ名: param0 （例）
フィールドタイプ: テキスト
ラベル: 「作りたいアプリのアイデア」

ここでユーザーが「SNSアプリを作成して」「タスク管理ツールを作って」などの指示を入力するイメージです。

2-3. AIノードにプロンプトを設定

次に「AIノード」（例:「AI (M3VJY9)」など）を追加し、以下のようなプロンプトを記述します。

# プロンプト
User:
{{YOUR_PARAM_ID.param0}}

{{YOUR_PARAM_ID.param0}}
{{CONTEXT.TEXT}}

ユーザーが入力した日本語テキストをURLエンコードし、  
以下の固定URLに差し込んで、URLのみ出力してください。

---
固定URL（ベース）:  
https://v0.dev/chat?q=  

この後ろに、エンコード済みのテキストを続けてください。

Output Format:  
必ずURLのみを出力する

注意:
{{YOUR_PARAM_ID.param0}} は、実際には該当のパラメータIDに書き換えてください。

2-4. 出力設定

最後に「チャット画面」などで上記AIノードの結果（URL）をそのまま表示します。
ユーザーはそのURLをクリックまたはコピーしてブラウザで開くだけで、Vercel v0が起動し、先ほどの指示がプロンプトに入力された状態になります。

3. 動作確認

3-1. スキルを実行

インプット欄に「作りたいアプリのアイデア」を入力します。
例: 「いけてるSNSアプリを作成してください」
AIノードの出力を確認
スキルの実行結果として、以下のようなURLが出力されます。

出力例:
```
https://v0.dev/chat?q=shadcn%2F%E3%81%84%E3%81%91%E3%81%A6%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA
```

3-3. 生成されたURLをブラウザで開く

出力されたURLをクリックまたはコピーしてブラウザで開きます。
すると、Vercel v0が起動し、以下のような動作が進みます。

プロンプトがセットされた状態でAIとのチャットが開始
- ユーザーが入力した内容（例:「いけてるSNSアプリを作成してください」）がプロンプトとして自動的にセットされています。
アプリの雛形がリアルタイムに生成される
- ReactやNext.jsのコンポーネントが自動的に生成され、UI設計が進みます。

4. 実際にv0でアプリを生成

4-1. 確認

画面右側やチャット欄に、ユーザーが入力した内容がプロンプトとして表示されます。
すでにSNS風のページデザインやUIコンポーネントが生成されているはずです。

4-2. 追加指示を出す

生成されたアプリに対して、自然言語で追加のリクエストを出すことができます。
例:

「このUIをシンプルでモダンなデザインに変更してください」
「ロゴのサイズを大きくして」
「プロフィール欄を追加してください」

これらの指示に応じて、リアルタイムでUIやコードが更新されます。

4-3. 完成物のエクスポート

生成が完了したアプリをReact/Next.jsプロジェクトとしてエクスポートできます。

コードビューを開く:
- 完成したコードをダウンロードしてローカル環境で編集可能です。
Vercelにデプロイ:
- Vercelアカウントを使用して、生成されたアプリをそのままデプロイできます。

5. 応用テクニック

5-1. 画像を使ったプロンプト

sattoのv0アプリ生成スキルに、画像を付加すれば、画像を元にした詳細なデザイン指示を実現できます。

5-2. 外部API連携

sattoの設定に外部APIとの連携を追加することで、以下のような応用が可能です。

ユーザー情報やデータベース情報をプロンプトに含める
アプリ開発の初期設定やテンプレートの準備をさらに自動化

これにより、ユーザーがURL生成時に特定のテーマや言語設定をあらかじめ指定しておくことが可能になります。
Vercel v0における生成結果が、より具体的かつ正確にユーザーの意図に沿った形でカスタマイズされます。

6. まとめ

sattoでURL生成スキルを作成
- ユーザーが入力した内容をURLエンコードしてVercel v0に渡します。
ユーザーはアプリの概要を入力するだけ
- 出力されたURLをクリックすることで、Vercel v0が起動し、プロンプトがセットされた状態で自動生成が開始されます。
アプリの雛形が生成され、簡単に調整可能
- 自然言語での追加指示を通じて、リアルタイムでUIやコードを修正・拡張できます。

この流れを実装することで、「アプリの概要を日本語で書くだけ」で、Vercel v0がUIやコードを自動生成してくれます。
従来のようにコードを書く負担が大幅に減り、誰でも簡単にプロトタイプを作成できるようになるのが最大の魅力です。