---
title: "MVPの構築：フロントエンドとバックエンド"
description: "DifyとWindsurfによるノーコードの旅：Twitter MBTI分析ツールの構築"
enableComments: true
author: "Steven Lynn"
github_username: "stvlynn"
x_username: "Stv_Lynn"
---

⬇️ 読む前に、試してみてください

<iframe
 src="https://instance.hellodify.com/workflow/G6hfoYnD6CXWhcjj"
 style={{
   width: '100%',
   minHeight: '400px'
 }}
 frameBorder="0"
 allow="microphone">
</iframe>

---

最近AIプロダクトに注目していれば、WindsurfとCursorというAIを活用した次世代IDEについて聞いたことがあるでしょう。

この記事では、IT経験がなかった私がWindsurfとDifyを使って成功したプロダクトを作った経験を共有します。

ヒットプロダクトの「Twitter MBTI Receipt」は、リリースからわずか3日間でTwitterで20万ヒットを獲得しました。このアプリケーションは、Twitterスクレイパーを使用してユーザーのプロフィールを分析し、MBTI性格診断レポートを生成します。すべてDifyのワークフローで構築されています。

今すぐ[試して](https://twi.am/)みて、[GitHub](https://github.com/stvlynn/twi.am)でスターを付けてください。

![image.png](https://s2.loli.net/2025/05/12/bDNACQq2Stp4L76.png)

## プロジェクト概要
このプロジェクトは2つの主要技術を活用しています：

- バックエンド構築のためのDify

- フロントエンド開発のためのWindsurf

この2つのコンポーネントはHTTPリクエストを通じて通信し、シームレスな統合を実現しています。

![image.png](https://s2.loli.net/2025/05/12/eoBwWtTvycgm2UH.png)


## Difyでバックエンドを構築する
**DifyはLLMアプリケーションプラットフォームで、コードを書かずにAIアプリケーションを構築できます。**特にバックエンド開発に適しています。

Difyで新しいアプリケーションを作成する前に、ワークフローに必要なプロセスを確認する必要があります。マインドマップから始めましょう：

![image.png](https://s2.loli.net/2025/05/12/9ns2jVKIfqCmuU6.png)

それでは、Difyワークフローでそれを実現しましょう。

チャットフローは継続的な対話を可能にしますが、ワークフローは「スクリプト」のように機能します - 変数を入力して、ワンタイムの出力を受け取ります。

![image.png](https://s2.loli.net/2025/05/12/23hjZYABy9wreF8.png)

ワークフローが何かわからない場合：ワークフローの構築は、マインドマップを作成するのと同じです。ノードを追加してドラッグし、ノードに変数を設定できます。

### スタートノード
スタートノードでは、いくつかの変数を追加できます。user_idとlanguagesを追加しましょう。

### HTTPリクエストノード
次のノードでは、スクレイパーを呼び出すためのHTTPリクエストノードが必要です。Twitter開発者プラットフォームは公式APIを提供しています。独自のスクレイパーをデプロイしたい場合は、TwitterをサポートするオープンソースのスクレイパーであるRSS Hubを試すことができます。

### LLMノード
LLMノードでは、包括的なレポートを生成するためにプロンプトを調整する必要があります。効果的なプロンプトの書き方がわからない場合は、ワークショップを参照してください。

### パラメータ抽出ノード
パラメータ抽出ノードは、文章をJSON形式の複数のパラメータに変換し、フロントエンドのためにデータを準備します。

以下は、Twitterからデータをスクレイピングし、レポートを生成して出力する最小限のワークフローです。GitHubリポジトリで完全なバックエンドを見ることができます。

![image.png](https://s2.loli.net/2025/05/12/yIV2BqYxn8gE7KZ.png)

## MVPウェブアプリ
Difyは公開後にウェブアプリケーションを提供し、迅速な共有とテストを可能にします。

![image.png](https://s2.loli.net/2025/05/12/fa2hAWljsrSQyDE.png)

## Windsurfでフロントエンドを構築する
WindsurfのAIアシスタントCascade（Claude-3.5-sonnetを搭載）は、他のAIコーディングアシスタントとは一線を画しています。次のことができます：

- プロジェクトディレクトリへのアクセス

- 複数のファイルを同時に作成・編集

- 自律的にターミナルコマンドを実行

![image.png](https://s2.loli.net/2025/05/12/rnW1mXCTMxjGY9P.png)


## バックエンドへの接続：APIはどのように機能するか？
Difyは左サイドバーにAPIドキュメントを提供しています。cURLリクエストの例が示されています。APIキーをコピーして安全な場所に保存してください。フロントエンドにAPIキーを保持しないことを強くお勧めします。

![image.png](https://s2.loli.net/2025/05/12/j84ducal6ztR3Xv.png)

下にスクロールすると、リクエストとレスポンスの例が表示されます。

![image.png](https://s2.loli.net/2025/05/12/2FwjCalDzkxPMmI.png)

このチャートでは、DifyへのHTTPリクエストとレスポンスが示されています：

![image.png](https://s2.loli.net/2025/05/12/hvmA9RrDz3joSi7.png)

inputsの変数はスタートノードの変数で、outputの変数はエンドノードの変数です。変数はJSON形式で記述されているため、正しく解釈できることを確認してください。

また、ヘッダーにAPIトークンを入力することを忘れないでください。

フロントエンドに統合する前に、例のリクエストをコピーして[Postman](https://postman.com/)を使用してローカルでテストできます。

入力ボックスにcURLコマンドを貼り付けると、Postmanが変換します。上記で説明した変数を入力する必要があります。

![image.png](https://s2.loli.net/2025/05/12/wBpekOiDuLdcrW6.png)

## フロントエンドの構築
Cascadeの助けを借りれば、数分でフロントエンドを作成できます。次の質問から始めましょう：

- 何を構築していますか？

- どのようなフレームワークを使用しますか？

- ウェブデザインを説明してください。

- バックエンドとどのように接続しますか？

CascadeにHTTPリクエストとレスポンスを説明する方法がわからない場合は、Postmanでテストしたリクエストとレスポンスを例としてコピーできます。

このプロジェクトを設計するときのプロンプトは次のとおりです：
```
<Design>
ユーザーIDを入力として受け取り、ユーザーのMBTIレポートを出力するTwitter MBTI Receiptを作成します。入力ボックスでは、ユーザーがユーザー名ではなくIDを入力するよう促すために、最も左に@記号を配置する必要があります。これはDifyのバックエンドにリクエストを行う必要があります。リクエストでは、2つの変数を送信する必要があります：1つはユーザーのID（@なし）（変数名：user_id）、もう1つはユーザーのブラウザ言語（変数名：lang）です。
</Design>
<Backend_Request>
リクエスト例は次のとおりです：
curl --location 'http://api.dify.ai/v1/workflows/run' \
--header 'Authorization: Bearer ****' \
--header 'Content-Type: application/json' \
--data '{
"inputs": {"lang":"en-US","user_id":"stv_lynn"},
"response_mode": "streaming",
"user": "abc-123"
}'
</Backend_Request>
<Backend_Response>
レスポンス例は次のとおりです：
{
"event": "workflow_finished",
"workflow_run_id": "a2214d-9246-4bd7-976d-****",
"task_id": "715420e1-a5eb-478b-b08c-****",
"data": {
"id": "a20412fd-9436-4bd7-976d-****",
"workflow_id": "05ba4685-8768-42a5-****",
"sequence_number": 14,
"status": "succeeded",
"outputs": {
"mbti": "INTJ",
"IE_report": "Steven Lynnのツイートから、彼は一人で作業や勉強を楽しみ、思考と分析に優れていることがわかります。彼のツイートでは、AIやプログラミングを使って問題を解決するのが好きだと述べており、これは彼が考えたり問題を解決したりするのに時間をかけることを好む内向的な人物であることを示しています。",
"SN_report": "Steven Lynnのツイートでは、言語やデータ処理のためにGPTやHugging Faceなどのツールを使用していることが言及されており、彼が探索や新しいことの発見を楽しむ直感的な人物であることを示唆しています。また、彼のプロフィールでは、大学院生であることも記されており、大学院では研究を完了するために新しいことを探索し発見する必要があるのが一般的です。",
"TF_report": "Steven Lynnのツイートから、彼は論理と分析を使って問題を解決するのが好きな思慮深い人物であることがわかります。彼のツイートでは、問題に対処するために多くのプログラミングやデータ分析ツールを使用していることが言及されており、これは彼が論理と分析を問題解決に適用することを楽しんでいることを示しています。",
"JP_report": "Steven Lynnのツイートでは、計画と組織を使ってタスクを完了させるのが好きだと述べており、これは彼が目標を達成するために計画と組織を好む判断型の人物であることを示しています。また、彼のプロフィールでは、大学院生であることも述べられており、大学院では研究を完了するために計画と組織が必要とされるのが一般的です。",
"celebrity": "スティーブ・ジョブズ",
"celebrity_report": "INTJ型の人々は、革新と問題解決のエキスパートであることが多いです。スティーブ・ジョブズのような有名人もINTJ型であり、アップルでの起業家精神と革新的な仕事を通じてINTJの典型的な特性を示しています。"
},
"error": null,
"elapsed_time": 47.11438198480755,
"total_tokens": 7040,
"total_steps": 9,
"created_by": {
"id": "1e2889b0-c001-4418-badf-4e12352c5f",
"user": "abc-123"
},
"created_at": 1732352687,
"finished_at": 1732352734,
"files": []
}
}
</Backend_Response>
<Task>
出力から変数を抽出し、Receiptに表示する必要があります。レスポンスには約60秒かかるため、十分な待機時間を設定する必要があります。
</Task>
<Frame>
このプロジェクトではVue、Tailwind CSS、TypeScriptを使用する必要があります。
</Frame>
XML構造化プロンプト
プロンプトに厳格なルールはありません。ただし、XMLフォーマットでプロンプトを書くことをお勧めします。構造化されたプロンプトはLLMが理解しやすく、高品質な出力を生成します。
```
Anthropicのドキュメントを参照してください：プロンプトエンジニアリング - XMLタグを使用してプロンプトを構造化する

---

<Cards>
  <Card 
    icon={<i className="ri-flow-chart" />} 
    href="https://discord.gg/PwZDHH4mv3" 
    title="ワークフローを入手する"
  >
  <p>DSLファイルを入手するには、FirstLabに参加してください</p>
    <img src="https://s2.loli.net/2025/05/15/h2qntU94eHZyBXr.png" alt="Twitterレシート" />
  </Card>
</Cards>