
## Introduction

Hi there! I'm moving from North America back to Japan, and as a token of appreciation for all the amazing people I've met here, I decided to host a **free garage sale**.

Rather than just using a spreadsheet, I thought it would be nice to build and share a dedicated web page for the garage sale. So, I created one using **Cursor (an LLM-powered dev environment)** and **Google Spreadsheet**, displaying the item list on my portfolio site.

The result? A fully functional, nicely styled web page—**built in just about 2 hours**. Here's how I did it.

👉 Final site: [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)

![{6C5AC696-3018-4637-AC9F-9FDC793B89DB}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/39d6481c-cc67-479f-86d8-79f7835c5bd8.png)

---

## Tech Stack

* Cursor (LLM-based coding and dev environment)
* Google Sheets API (for item data source)
* Vercel (hosting)
* Next.js (frontend framework)
* Tailwind CSS (styling)

---

## Workflow Overview

### Step 1: Building the Garage Sale Item Page

#### 1. Fetching Data via Google Sheets API

* Installed necessary packages like `googleapis`
* Wrote utility functions to fetch data server-side
* Configured the Google Cloud Console:

  * Created a new project
  * Enabled the Sheets API
  * Created a service account and downloaded its key (JSON)
  * Shared the spreadsheet with read access to the service account

#### 2. Creating the Item List Page

* Built the page using Next.js components
* Styled it using Tailwind CSS for a clean, responsive layout

#### 3. Authentication & Error Handling

* Resolved `net` module errors from client-side calls
* Created an API route to handle authentication on the server
* Switched from `@google-cloud/local-auth` to service account authentication

#### 4. Environment Variable Setup

* Configured `.env.local` with spreadsheet ID and credentials
* Verified JSON key file placement

---

### Step 2: Adding Search and Filter Features

#### 1. Search Bar Implementation

* Enabled search by item name and description
* Case-insensitive and updates results in real-time

#### 2. Status Filter (On Sale / Sold Out)

* Added dropdown to filter item status
* Works in combination with search input

#### 3. UI/UX Enhancements

* Search bar and filter aligned horizontally (stacked vertically on small screens)
* Modern input styling with hover and focus effects

---

## Results & Reflections

Thanks to Cursor and AI-assisted coding, I was able to create a polished and useful site in just two hours.

Even if you're not a seasoned web developer, tools like Cursor can help you build practical, real-world solutions quickly.

If you ever want to create something meaningful for a farewell or gratitude event, this kind of project might be a great idea to try.

---

## Live Site

👉 [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)

Feel free to grab anything you like—everything is free!


<h2 data-sourcepos="2:1-2:15">
<span id="introduction" class="fragment"></span><a href="#introduction"><i class="fa fa-link"></i></a>Introduction</h2>
<p data-sourcepos="4:1-4:169">Hi there! I'm moving from North America back to Japan, and as a token of appreciation for all the amazing people I've met here, I decided to host a <strong>free garage sale</strong>.</p>
<p data-sourcepos="6:1-6:268">Rather than just using a spreadsheet, I thought it would be nice to build and share a dedicated web page for the garage sale. So, I created one using <strong>Cursor (an LLM-powered dev environment)</strong> and <strong>Google Spreadsheet</strong>, displaying the item list on my portfolio site.</p>
<p data-sourcepos="8:1-8:110">The result? A fully functional, nicely styled web page—<strong>built in just about 2 hours</strong>. Here's how I did it.</p>
<p data-sourcepos="10:1-10:97">👉 Final site: <a href="https://www.kenimamura.com/garage-sale" rel="nofollow noopener" target="_blank">https://www.kenimamura.com/garage-sale</a></p>
<p data-sourcepos="12:1-12:155"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F39d6481c-cc67-479f-86d8-79f7835c5bd8.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8864e013019d0450cbe82a86a8ad2d55" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F39d6481c-cc67-479f-86d8-79f7835c5bd8.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8864e013019d0450cbe82a86a8ad2d55" alt="{6C5AC696-3018-4637-AC9F-9FDC793B89DB}.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F39d6481c-cc67-479f-86d8-79f7835c5bd8.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=c8114de0eb01ea66acfde3f004ceb961 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/39d6481c-cc67-479f-86d8-79f7835c5bd8.png" loading="lazy"></a></p>
<hr data-sourcepos="14:1-15:0">
<h2 data-sourcepos="16:1-16:13">
<span id="tech-stack" class="fragment"></span><a href="#tech-stack"><i class="fa fa-link"></i></a>Tech Stack</h2>
<ul data-sourcepos="18:1-23:0">
<li data-sourcepos="18:1-18:47">Cursor (LLM-based coding and dev environment)</li>
<li data-sourcepos="19:1-19:42">Google Sheets API (for item data source)</li>
<li data-sourcepos="20:1-20:18">Vercel (hosting)</li>
<li data-sourcepos="21:1-21:30">Next.js (frontend framework)</li>
<li data-sourcepos="22:1-23:0">Tailwind CSS (styling)</li>
</ul>
<hr data-sourcepos="24:1-25:0">
<h2 data-sourcepos="26:1-26:20">
<span id="workflow-overview" class="fragment"></span><a href="#workflow-overview"><i class="fa fa-link"></i></a>Workflow Overview</h2>
<h3 data-sourcepos="28:1-28:46">
<span id="step-1-building-the-garage-sale-item-page" class="fragment"></span><a href="#step-1-building-the-garage-sale-item-page"><i class="fa fa-link"></i></a>Step 1: Building the Garage Sale Item Page</h3>
<h4 data-sourcepos="30:1-30:43">
<span id="1-fetching-data-via-google-sheets-api" class="fragment"></span><a href="#1-fetching-data-via-google-sheets-api"><i class="fa fa-link"></i></a>1. Fetching Data via Google Sheets API</h4>
<ul data-sourcepos="32:1-40:0">
<li data-sourcepos="32:1-32:48">
<p data-sourcepos="32:3-32:48">Installed necessary packages like <code>googleapis</code></p>
</li>
<li data-sourcepos="33:1-33:51">
<p data-sourcepos="33:3-33:51">Wrote utility functions to fetch data server-side</p>
</li>
<li data-sourcepos="34:1-40:0">
<p data-sourcepos="34:3-34:38">Configured the Google Cloud Console:</p>
<ul data-sourcepos="36:3-40:0">
<li data-sourcepos="36:3-36:25">Created a new project</li>
<li data-sourcepos="37:3-37:26">Enabled the Sheets API</li>
<li data-sourcepos="38:3-38:59">Created a service account and downloaded its key (JSON)</li>
<li data-sourcepos="39:3-40:0">Shared the spreadsheet with read access to the service account</li>
</ul>
</li>
</ul>
<h4 data-sourcepos="41:1-41:35">
<span id="2-creating-the-item-list-page" class="fragment"></span><a href="#2-creating-the-item-list-page"><i class="fa fa-link"></i></a>2. Creating the Item List Page</h4>
<ul data-sourcepos="43:1-45:0">
<li data-sourcepos="43:1-43:41">Built the page using Next.js components</li>
<li data-sourcepos="44:1-45:0">Styled it using Tailwind CSS for a clean, responsive layout</li>
</ul>
<h4 data-sourcepos="46:1-46:39">
<span id="3-authentication--error-handling" class="fragment"></span><a href="#3-authentication--error-handling"><i class="fa fa-link"></i></a>3. Authentication &amp; Error Handling</h4>
<ul data-sourcepos="48:1-51:0">
<li data-sourcepos="48:1-48:53">Resolved <code>net</code> module errors from client-side calls</li>
<li data-sourcepos="49:1-49:61">Created an API route to handle authentication on the server</li>
<li data-sourcepos="50:1-51:0">Switched from <code>@google-cloud/local-auth</code> to service account authentication</li>
</ul>
<h4 data-sourcepos="52:1-52:34">
<span id="4-environment-variable-setup" class="fragment"></span><a href="#4-environment-variable-setup"><i class="fa fa-link"></i></a>4. Environment Variable Setup</h4>
<ul data-sourcepos="54:1-56:0">
<li data-sourcepos="54:1-54:61">Configured <code>.env.local</code> with spreadsheet ID and credentials</li>
<li data-sourcepos="55:1-56:0">Verified JSON key file placement</li>
</ul>
<hr data-sourcepos="57:1-58:0">
<h3 data-sourcepos="59:1-59:45">
<span id="step-2-adding-search-and-filter-features" class="fragment"></span><a href="#step-2-adding-search-and-filter-features"><i class="fa fa-link"></i></a>Step 2: Adding Search and Filter Features</h3>
<h4 data-sourcepos="61:1-61:33">
<span id="1-search-bar-implementation" class="fragment"></span><a href="#1-search-bar-implementation"><i class="fa fa-link"></i></a>1. Search Bar Implementation</h4>
<ul data-sourcepos="63:1-65:0">
<li data-sourcepos="63:1-63:45">Enabled search by item name and description</li>
<li data-sourcepos="64:1-65:0">Case-insensitive and updates results in real-time</li>
</ul>
<h4 data-sourcepos="66:1-66:42">
<span id="2-status-filter-on-sale--sold-out" class="fragment"></span><a href="#2-status-filter-on-sale--sold-out"><i class="fa fa-link"></i></a>2. Status Filter (On Sale / Sold Out)</h4>
<ul data-sourcepos="68:1-70:0">
<li data-sourcepos="68:1-68:38">Added dropdown to filter item status</li>
<li data-sourcepos="69:1-70:0">Works in combination with search input</li>
</ul>
<h4 data-sourcepos="71:1-71:26">
<span id="3-uiux-enhancements" class="fragment"></span><a href="#3-uiux-enhancements"><i class="fa fa-link"></i></a>3. UI/UX Enhancements</h4>
<ul data-sourcepos="73:1-75:0">
<li data-sourcepos="73:1-73:82">Search bar and filter aligned horizontally (stacked vertically on small screens)</li>
<li data-sourcepos="74:1-75:0">Modern input styling with hover and focus effects</li>
</ul>
<hr data-sourcepos="76:1-77:0">
<h2 data-sourcepos="78:1-78:24">
<span id="results--reflections" class="fragment"></span><a href="#results--reflections"><i class="fa fa-link"></i></a>Results &amp; Reflections</h2>
<p data-sourcepos="80:1-80:107">Thanks to Cursor and AI-assisted coding, I was able to create a polished and useful site in just two hours.</p>
<p data-sourcepos="82:1-82:122">Even if you're not a seasoned web developer, tools like Cursor can help you build practical, real-world solutions quickly.</p>
<p data-sourcepos="84:1-84:133">If you ever want to create something meaningful for a farewell or gratitude event, this kind of project might be a great idea to try.</p>
<hr data-sourcepos="86:1-87:0">
<h2 data-sourcepos="88:1-88:12">
<span id="live-site" class="fragment"></span><a href="#live-site"><i class="fa fa-link"></i></a>Live Site</h2>
<p data-sourcepos="90:1-90:85">👉 <a href="https://www.kenimamura.com/garage-sale" rel="nofollow noopener" target="_blank">https://www.kenimamura.com/garage-sale</a></p>
<p data-sourcepos="92:1-92:57">Feel free to grab anything you like—everything is free!</p>


Moving Back to Japan – Built a Free Garage Sale Site with Cursor + Google Spreadsheet in 2 Hours

シリコンバレーで働くシステムエンジニア兼ビジネスデベロッパーです

Ken Imamura

## はじめに

こんにちは。今回、北米から日本への引っ越しに伴い、これまでお世話になった方々への感謝の気持ちを込めて、**無料のガレージセール**を実施することにしました。

どうせなら、Garage Sale用のWebページを作って公開したい――そう思い立ち、**Cursor（LLM開発環境）**と**Google Spreadsheet**を使って、自分のポートフォリオサイト上に商品リストを表示するページを作りました。

結果として、**わずか2時間程度でしっかりとしたWebページを構築**できたので、その手順や工夫した点をQiitaで共有します！

最終的なサイトはこちら → [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)
![{2A793559-C70E-4D69-9F3F-9A6980029D84}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/72e822cb-cae7-4a66-a8d0-d854f4348104.png)

---

## 使用した技術スタック

* Cursor（開発環境 & AIとの対話でコーディング）
* Google Sheets API（商品データの取得元）
* Vercel（ホスティング）
* Next.js（Webフロントエンド）
* Tailwind CSS（スタイリング）

---

## フロー全体

### 段階①：Garage Sale 商品リストページの作成

#### 1. Google Sheets APIで商品データ取得

* 必要パッケージのインストール（`googleapis` など）
* ユーティリティ関数を作成し、サーバーサイドでデータを取得
* Google Cloud Consoleで以下の設定を実施：

  * プロジェクト作成
  * Sheets APIの有効化
  * サービスアカウント作成・鍵(JSON)取得
  * Spreadsheetの共有設定でサービスアカウントに読み取り権限を付与

#### 2. 商品リストのページを作成

* Next.jsのページコンポーネントを用意
* スタイリング（Tailwind CSS）で見やすいデザインに

#### 3. 認証まわりのエラー対応

* `net`モジュールエラーなど、クライアントサイドでのAPI呼び出し失敗対策
* APIルートを作成してサーバーサイドで認証処理を実行
* `@google-cloud/local-auth`からサービスアカウント認証へ切り替え

#### 4. 環境変数の設定

* `.env.local`にキーやスプレッドシートIDを設定
* JSONファイルの配置場所も要確認

---

### 段階②：検索・フィルター機能の追加

#### 1. 検索バーの実装

* 商品名・説明文に対応した検索機能を追加
* 大文字小文字を無視したリアルタイムフィルタリング

#### 2. ステータスフィルター（On Sale / Sold Out）

* ドロップダウンで絞り込み機能を提供
* 検索バーと組み合わせて使えるUI設計

#### 3. UI/UXの工夫

* 検索バーとフィルターを横並び（狭い画面では縦並び）
* モダンなデザイン＋ホバー・フォーカス時のアニメーション追加

---

## 結果と感想

CursorとLLM対話ベースの開発を活用したことで、**2時間で完成度の高いサイト**を構築することができました。

これまでWeb開発に自信がなかった方でも、CursorのようなAI開発支援ツールを使えばかなり実用的なものが作れる実感を得ました。

みなさんも何かのお別れや感謝のタイミングに、こんなプロジェクトに挑戦してみてはいかがでしょうか？

---

## 公開サイト

👉 [https://www.kenimamura.com/garage-sale](https://www.kenimamura.com/garage-sale)


ぜひ、何か気になるアイテムがあれば持ち帰ってください！全部無料です！


<h2 data-sourcepos="1:1-1:15">
<span id="はじめに" class="fragment"></span><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"><i class="fa fa-link"></i></a>はじめに</h2>
<p data-sourcepos="3:1-3:226">こんにちは。今回、北米から日本への引っ越しに伴い、これまでお世話になった方々への感謝の気持ちを込めて、<strong>無料のガレージセール</strong>を実施することにしました。</p>
<p data-sourcepos="5:1-5:277">どうせなら、Garage Sale用のWebページを作って公開したい――そう思い立ち、<strong>Cursor（LLM開発環境）とGoogle Spreadsheet</strong>を使って、自分のポートフォリオサイト上に商品リストを表示するページを作りました。</p>
<p data-sourcepos="7:1-7:166">結果として、<strong>わずか2時間程度でしっかりとしたWebページを構築</strong>できたので、その手順や工夫した点をQiitaで共有します！</p>
<p data-sourcepos="9:1-10:155">最終的なサイトはこちら → <a href="https://www.kenimamura.com/garage-sale" rel="nofollow noopener" target="_blank">https://www.kenimamura.com/garage-sale</a><br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F72e822cb-cae7-4a66-a8d0-d854f4348104.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e4de5cd32f7e40b63e94512637f76f84" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F72e822cb-cae7-4a66-a8d0-d854f4348104.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e4de5cd32f7e40b63e94512637f76f84" alt="{2A793559-C70E-4D69-9F3F-9A6980029D84}.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F72e822cb-cae7-4a66-a8d0-d854f4348104.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=070fbd3b086912dfe647068fa0d0c77c 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/72e822cb-cae7-4a66-a8d0-d854f4348104.png" loading="lazy"></a></p>
<hr data-sourcepos="12:1-13:0">
<h2 data-sourcepos="14:1-14:33">
<span id="使用した技術スタック" class="fragment"></span><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF"><i class="fa fa-link"></i></a>使用した技術スタック</h2>
<ul data-sourcepos="16:1-21:0">
<li data-sourcepos="16:1-16:64">Cursor（開発環境 &amp; AIとの対話でコーディング）</li>
<li data-sourcepos="17:1-17:52">Google Sheets API（商品データの取得元）</li>
<li data-sourcepos="18:1-18:32">Vercel（ホスティング）</li>
<li data-sourcepos="19:1-19:39">Next.js（Webフロントエンド）</li>
<li data-sourcepos="20:1-21:0">Tailwind CSS（スタイリング）</li>
</ul>
<hr data-sourcepos="22:1-23:0">
<h2 data-sourcepos="24:1-24:18">
<span id="フロー全体" class="fragment"></span><a href="#%E3%83%95%E3%83%AD%E3%83%BC%E5%85%A8%E4%BD%93"><i class="fa fa-link"></i></a>フロー全体</h2>
<h3 data-sourcepos="26:1-26:61">
<span id="段階garage-sale-商品リストページの作成" class="fragment"></span><a href="#%E6%AE%B5%E9%9A%8Egarage-sale-%E5%95%86%E5%93%81%E3%83%AA%E3%82%B9%E3%83%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E6%88%90"><i class="fa fa-link"></i></a>段階①：Garage Sale 商品リストページの作成</h3>
<h4 data-sourcepos="28:1-28:49">
<span id="1-google-sheets-apiで商品データ取得" class="fragment"></span><a href="#1-google-sheets-api%E3%81%A7%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%96%E5%BE%97"><i class="fa fa-link"></i></a>1. Google Sheets APIで商品データ取得</h4>
<ul data-sourcepos="30:1-38:0">
<li data-sourcepos="30:1-30:69">
<p data-sourcepos="30:3-30:69">必要パッケージのインストール（<code>googleapis</code> など）</p>
</li>
<li data-sourcepos="31:1-31:86">
<p data-sourcepos="31:3-31:86">ユーティリティ関数を作成し、サーバーサイドでデータを取得</p>
</li>
<li data-sourcepos="32:1-38:0">
<p data-sourcepos="32:3-32:52">Google Cloud Consoleで以下の設定を実施：</p>
<ul data-sourcepos="34:3-38:0">
<li data-sourcepos="34:3-34:28">プロジェクト作成</li>
<li data-sourcepos="35:3-35:26">Sheets APIの有効化</li>
<li data-sourcepos="36:3-36:55">サービスアカウント作成・鍵(JSON)取得</li>
<li data-sourcepos="37:3-38:0">Spreadsheetの共有設定でサービスアカウントに読み取り権限を付与</li>
</ul>
</li>
</ul>
<h4 data-sourcepos="39:1-39:44">
<span id="2-商品リストのページを作成" class="fragment"></span><a href="#2-%E5%95%86%E5%93%81%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90"><i class="fa fa-link"></i></a>2. 商品リストのページを作成</h4>
<ul data-sourcepos="41:1-43:0">
<li data-sourcepos="41:1-41:51">Next.jsのページコンポーネントを用意</li>
<li data-sourcepos="42:1-43:0">スタイリング（Tailwind CSS）で見やすいデザインに</li>
</ul>
<h4 data-sourcepos="44:1-44:41">
<span id="3-認証まわりのエラー対応" class="fragment"></span><a href="#3-%E8%AA%8D%E8%A8%BC%E3%81%BE%E3%82%8F%E3%82%8A%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E5%AF%BE%E5%BF%9C"><i class="fa fa-link"></i></a>3. 認証まわりのエラー対応</h4>
<ul data-sourcepos="46:1-49:0">
<li data-sourcepos="46:1-46:100">
<code>net</code>モジュールエラーなど、クライアントサイドでのAPI呼び出し失敗対策</li>
<li data-sourcepos="47:1-47:74">APIルートを作成してサーバーサイドで認証処理を実行</li>
<li data-sourcepos="48:1-49:0">
<code>@google-cloud/local-auth</code>からサービスアカウント認証へ切り替え</li>
</ul>
<h4 data-sourcepos="50:1-50:29">
<span id="4-環境変数の設定" class="fragment"></span><a href="#4-%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AE%E8%A8%AD%E5%AE%9A"><i class="fa fa-link"></i></a>4. 環境変数の設定</h4>
<ul data-sourcepos="52:1-54:0">
<li data-sourcepos="52:1-52:61">
<code>.env.local</code>にキーやスプレッドシートIDを設定</li>
<li data-sourcepos="53:1-54:0">JSONファイルの配置場所も要確認</li>
</ul>
<hr data-sourcepos="55:1-56:0">
<h3 data-sourcepos="57:1-57:55">
<span id="段階検索フィルター機能の追加" class="fragment"></span><a href="#%E6%AE%B5%E9%9A%8E%E6%A4%9C%E7%B4%A2%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E6%A9%9F%E8%83%BD%E3%81%AE%E8%BF%BD%E5%8A%A0"><i class="fa fa-link"></i></a>段階②：検索・フィルター機能の追加</h3>
<h4 data-sourcepos="59:1-59:29">
<span id="1-検索バーの実装" class="fragment"></span><a href="#1-%E6%A4%9C%E7%B4%A2%E3%83%90%E3%83%BC%E3%81%AE%E5%AE%9F%E8%A3%85"><i class="fa fa-link"></i></a>1. 検索バーの実装</h4>
<ul data-sourcepos="61:1-63:0">
<li data-sourcepos="61:1-61:59">商品名・説明文に対応した検索機能を追加</li>
<li data-sourcepos="62:1-63:0">大文字小文字を無視したリアルタイムフィルタリング</li>
</ul>
<h4 data-sourcepos="64:1-64:62">
<span id="2-ステータスフィルターon-sale--sold-out" class="fragment"></span><a href="#2-%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BCon-sale--sold-out"><i class="fa fa-link"></i></a>2. ステータスフィルター（On Sale / Sold Out）</h4>
<ul data-sourcepos="66:1-68:0">
<li data-sourcepos="66:1-66:53">ドロップダウンで絞り込み機能を提供</li>
<li data-sourcepos="67:1-68:0">検索バーと組み合わせて使えるUI設計</li>
</ul>
<h4 data-sourcepos="69:1-69:22">
<span id="3-uiuxの工夫" class="fragment"></span><a href="#3-uiux%E3%81%AE%E5%B7%A5%E5%A4%AB"><i class="fa fa-link"></i></a>3. UI/UXの工夫</h4>
<ul data-sourcepos="71:1-73:0">
<li data-sourcepos="71:1-71:77">検索バーとフィルターを横並び（狭い画面では縦並び）</li>
<li data-sourcepos="72:1-73:0">モダンなデザイン＋ホバー・フォーカス時のアニメーション追加</li>
</ul>
<hr data-sourcepos="74:1-75:0">
<h2 data-sourcepos="76:1-76:18">
<span id="結果と感想" class="fragment"></span><a href="#%E7%B5%90%E6%9E%9C%E3%81%A8%E6%84%9F%E6%83%B3"><i class="fa fa-link"></i></a>結果と感想</h2>
<p data-sourcepos="78:1-78:146">CursorとLLM対話ベースの開発を活用したことで、<strong>2時間で完成度の高いサイト</strong>を構築することができました。</p>
<p data-sourcepos="80:1-80:173">これまでWeb開発に自信がなかった方でも、CursorのようなAI開発支援ツールを使えばかなり実用的なものが作れる実感を得ました。</p>
<p data-sourcepos="82:1-82:144">みなさんも何かのお別れや感謝のタイミングに、こんなプロジェクトに挑戦してみてはいかがでしょうか？</p>
<hr data-sourcepos="84:1-85:0">
<h2 data-sourcepos="86:1-86:18">
<span id="公開サイト" class="fragment"></span><a href="#%E5%85%AC%E9%96%8B%E3%82%B5%E3%82%A4%E3%83%88"><i class="fa fa-link"></i></a>公開サイト</h2>
<p data-sourcepos="88:1-88:85">👉 <a href="https://www.kenimamura.com/garage-sale" rel="nofollow noopener" target="_blank">https://www.kenimamura.com/garage-sale</a></p>
<p data-sourcepos="91:1-91:102">ぜひ、何か気になるアイテムがあれば持ち帰ってください！全部無料です！</p>


北米→日本引っ越し記念！無料ガレージセールサイトをCursor + Google Spreadsheetで爆速構築してみた

## はじめに

近年、AI技術の進化により、テキストだけでなく音声で学習する方法も身近になりました。この記事では、Googleが提供するNotebookLMを使って、Model Context Protocol（MCP）に関する最新知識を音声チャットボット（Podcast形式）で学ぶ方法をご紹介します。

## NotebookLMとは？

NotebookLM（旧称：Project Tailwind）は、Google Labsが開発したAIベースのリサーチ・ノートツールです。Google Geminiを基盤とし、ドキュメントから要約、Q\&A生成、音声要約などを行うことができます。2024年にはAudio OverviewというPodcast形式の音声生成機能が追加され、複雑な内容を音声で手軽に学ぶことが可能になりました。

## MCP（Model Context Protocol）とは？

MCPは、大規模言語モデル（LLM）間の文脈共有を効率化し、AIエージェントが協調して動作するためのプロトコルです。Anthropic、GitHub、a16zなど主要なAIコミュニティで注目されており、分散型AIシステム構築において重要な役割を果たしています。

## NotebookLMでPodcastを生成する手順

### 1. 情報収集

Google検索やChatGPTを利用して以下のような記事を収集します。

* [What is MCP and why you should pay attention](https://waleedk.medium.com/what-is-mcp-and-why-you-should-pay-attention-31524da7733f)
* [ModelContextProtocol.io](https://modelcontextprotocol.io/introduction)
* [Anthropic's article](https://www.anthropic.com/news/model-context-protocol)
* [Descope's article](https://www.descope.com/learn/post/mcp)
* [Github blog](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/)
* [a16z's blog](https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/)
* [Wikipedia](https://en.wikipedia.org/wiki/Model_Context_Protocol?utm_source=chatgpt.com)
* [Hugging Face](https://huggingface.co/blog/Kseniase/mcp?utm_source=chatgpt.com)
* [Patrick McGuinness](https://patmcguinness.substack.com/p/building-next-gen-ai-agents-with?utm_source=chatgpt.com)
* [The Top 7 MCP-Supported AI Frameworks](https://medium.com/%40amosgyamfi/the-top-7-mcp-supported-ai-frameworks-a8e5030c87ab)

### 2. NotebookLMへのデータ取り込み

NotebookLMにログインし、新規ノートブックを作成します。収集した記事URLやドキュメントを取り込みます。NotebookLMはこれらの情報を要約・分類して、学習用のナレッジベースを作成します。

NotebookLMの最初のページ
![NotebookLM.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/c5e53760-e609-48f7-95ad-08546bab6c30.jpeg)

ノートを作るとソースの取り込みができる
![02_input.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/dfa56295-486e-4ca8-b357-fd8ddfee2c55.jpeg)

### 3. ポッドキャストの生成

NotebookLMの画面右上にある「音声概要」機能をクリックすることで、ポッドキャスト形式の音声要約が自動で作成されます。音声は会話調で構成され、理解しやすくナレーションされます。今回はカスタマイズをしました。

生成されたPodcastは10分ほどで、隙間時間に聞いて効率よく知識をインプットすることが可能です。
![03_CreatePodcast.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/8f30d36a-300d-4b80-92db-5a55238a1b27.jpeg)

## NotebookLM × RAGの活用

今回の方法はRetrieval-Augmented Generation（RAG）に似たアプローチを採用しています。外部情報（記事）を事前に収集し、NotebookLMがその情報をもとに要約とPodcast生成を行います。これにより、リアルタイムに最新の専門的知識を音声で簡単に取り入れられます。

## 活用例と今後の可能性

NotebookLMの活用はMCPに限らず様々な分野に応用可能です。

* 新規技術やトレンドのキャッチアップ
* 社内教育用コンテンツ作成
* 英語論文の日本語音声解説
* ビジネス資料の事前学習

将来的には音声データの外部エクスポートや、企業内での専用環境構築といった展開も考えられます。

## 注意点とセキュリティ

NotebookLM利用時は以下の点に注意が必要です。

* 個人利用と法人利用で規約が異なる
* 機密情報や著作権に敏感な内容は避ける
* 医療、法律、金融など専門領域での直接的判断には利用不可

GoogleはNotebookLMで収集された個人データをAIモデルの学習には利用しないことを明記しています。安全に活用するためにはこれらの規約を十分に理解しておく必要があります。

## まとめ

NotebookLMを利用すれば、最新技術を「耳で学ぶ」新しい学習スタイルが可能になります。MCPを始めとした最新の専門知識をPodcast形式で手軽に学習できるこの方法は、忙しい現代人の効率的なインプット方法として非常に有効です。これは通勤時間が長い人には嬉しい機能です。

ぜひNotebookLMを活用し、新しい学習方法を取り入れてみてください。


<h2 data-sourcepos="1:1-1:15">
<span id="はじめに" class="fragment"></span><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"><i class="fa fa-link"></i></a>はじめに</h2>
<p data-sourcepos="3:1-3:332">近年、AI技術の進化により、テキストだけでなく音声で学習する方法も身近になりました。この記事では、Googleが提供するNotebookLMを使って、Model Context Protocol（MCP）に関する最新知識を音声チャットボット（Podcast形式）で学ぶ方法をご紹介します。</p>
<h2 data-sourcepos="5:1-5:22">
<span id="notebooklmとは" class="fragment"></span><a href="#notebooklm%E3%81%A8%E3%81%AF"><i class="fa fa-link"></i></a>NotebookLMとは？</h2>
<p data-sourcepos="7:1-7:423">NotebookLM（旧称：Project Tailwind）は、Google Labsが開発したAIベースのリサーチ・ノートツールです。Google Geminiを基盤とし、ドキュメントから要約、Q&amp;A生成、音声要約などを行うことができます。2024年にはAudio OverviewというPodcast形式の音声生成機能が追加され、複雑な内容を音声で手軽に学ぶことが可能になりました。</p>
<h2 data-sourcepos="9:1-9:43">
<span id="mcpmodel-context-protocolとは" class="fragment"></span><a href="#mcpmodel-context-protocol%E3%81%A8%E3%81%AF"><i class="fa fa-link"></i></a>MCP（Model Context Protocol）とは？</h2>
<p data-sourcepos="11:1-11:328">MCPは、大規模言語モデル（LLM）間の文脈共有を効率化し、AIエージェントが協調して動作するためのプロトコルです。Anthropic、GitHub、a16zなど主要なAIコミュニティで注目されており、分散型AIシステム構築において重要な役割を果たしています。</p>
<h2 data-sourcepos="13:1-13:44">
<span id="notebooklmでpodcastを生成する手順" class="fragment"></span><a href="#notebooklm%E3%81%A7podcast%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86"><i class="fa fa-link"></i></a>NotebookLMでPodcastを生成する手順</h2>
<h3 data-sourcepos="15:1-15:19">
<span id="1-情報収集" class="fragment"></span><a href="#1-%E6%83%85%E5%A0%B1%E5%8F%8E%E9%9B%86"><i class="fa fa-link"></i></a>1. 情報収集</h3>
<p data-sourcepos="17:1-17:82">Google検索やChatGPTを利用して以下のような記事を収集します。</p>
<ul data-sourcepos="19:1-29:0">
<li data-sourcepos="19:1-19:134"><a href="https://waleedk.medium.com/what-is-mcp-and-why-you-should-pay-attention-31524da7733f" rel="nofollow noopener" target="_blank">What is MCP and why you should pay attention</a></li>
<li data-sourcepos="20:1-20:73"><a href="https://modelcontextprotocol.io/introduction" rel="nofollow noopener" target="_blank">ModelContextProtocol.io</a></li>
<li data-sourcepos="21:1-21:78"><a href="https://www.anthropic.com/news/model-context-protocol" rel="nofollow noopener" target="_blank">Anthropic's article</a></li>
<li data-sourcepos="22:1-22:61"><a href="https://www.descope.com/learn/post/mcp" rel="nofollow noopener" target="_blank">Descope's article</a></li>
<li data-sourcepos="23:1-23:110"><a href="https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/" rel="nofollow noopener" target="_blank">Github blog</a></li>
<li data-sourcepos="24:1-24:84"><a href="https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/" rel="nofollow noopener" target="_blank">a16z's blog</a></li>
<li data-sourcepos="25:1-25:90"><a href="https://en.wikipedia.org/wiki/Model_Context_Protocol?utm_source=chatgpt.com" rel="nofollow noopener" target="_blank">Wikipedia</a></li>
<li data-sourcepos="26:1-26:81"><a href="https://huggingface.co/blog/Kseniase/mcp?utm_source=chatgpt.com" rel="nofollow noopener" target="_blank">Hugging Face</a></li>
<li data-sourcepos="27:1-27:116"><a href="https://patmcguinness.substack.com/p/building-next-gen-ai-agents-with?utm_source=chatgpt.com" rel="nofollow noopener" target="_blank">Patrick McGuinness</a></li>
<li data-sourcepos="28:1-29:0"><a href="https://medium.com/%40amosgyamfi/the-top-7-mcp-supported-ai-frameworks-a8e5030c87ab" rel="nofollow noopener" target="_blank">The Top 7 MCP-Supported AI Frameworks</a></li>
</ul>
<h3 data-sourcepos="30:1-30:44">
<span id="2-notebooklmへのデータ取り込み" class="fragment"></span><a href="#2-notebooklm%E3%81%B8%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%96%E3%82%8A%E8%BE%BC%E3%81%BF"><i class="fa fa-link"></i></a>2. NotebookLMへのデータ取り込み</h3>
<p data-sourcepos="32:1-32:254">NotebookLMにログインし、新規ノートブックを作成します。収集した記事URLやドキュメントを取り込みます。NotebookLMはこれらの情報を要約・分類して、学習用のナレッジベースを作成します。</p>
<p data-sourcepos="34:1-35:128">NotebookLMの最初のページ<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fc5e53760-e609-48f7-95ad-08546bab6c30.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=48c9dbd91a5c8997e82ae58b7de6831c" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fc5e53760-e609-48f7-95ad-08546bab6c30.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=48c9dbd91a5c8997e82ae58b7de6831c" alt="NotebookLM.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fc5e53760-e609-48f7-95ad-08546bab6c30.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=cc35dd93258d885b07ac3372b6af4cb2 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/c5e53760-e609-48f7-95ad-08546bab6c30.jpeg" loading="lazy"></a></p>
<p data-sourcepos="37:1-38:126">ノートを作るとソースの取り込みができる<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fdfa56295-486e-4ca8-b357-fd8ddfee2c55.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e053fad6fc5e8bab04df1618edc936d9" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fdfa56295-486e-4ca8-b357-fd8ddfee2c55.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e053fad6fc5e8bab04df1618edc936d9" alt="02_input.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fdfa56295-486e-4ca8-b357-fd8ddfee2c55.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=c1ac8e7fc3bca9e3945c8437484a9155 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/dfa56295-486e-4ca8-b357-fd8ddfee2c55.jpeg" loading="lazy"></a></p>
<h3 data-sourcepos="40:1-40:37">
<span id="3-ポッドキャストの生成" class="fragment"></span><a href="#3-%E3%83%9D%E3%83%83%E3%83%89%E3%82%AD%E3%83%A3%E3%82%B9%E3%83%88%E3%81%AE%E7%94%9F%E6%88%90"><i class="fa fa-link"></i></a>3. ポッドキャストの生成</h3>
<p data-sourcepos="42:1-42:298">NotebookLMの画面右上にある「音声概要」機能をクリックすることで、ポッドキャスト形式の音声要約が自動で作成されます。音声は会話調で構成され、理解しやすくナレーションされます。今回はカスタマイズをしました。</p>
<p data-sourcepos="44:1-45:134">生成されたPodcastは10分ほどで、隙間時間に聞いて効率よく知識をインプットすることが可能です。<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F8f30d36a-300d-4b80-92db-5a55238a1b27.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=45a0f681ce7f069c4bc63c99b560d3a6" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F8f30d36a-300d-4b80-92db-5a55238a1b27.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=45a0f681ce7f069c4bc63c99b560d3a6" alt="03_CreatePodcast.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F8f30d36a-300d-4b80-92db-5a55238a1b27.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a5b3ed4771150342b79e28ac94e97d1a 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/8f30d36a-300d-4b80-92db-5a55238a1b27.jpeg" loading="lazy"></a></p>
<h2 data-sourcepos="47:1-47:29">
<span id="notebooklm--ragの活用" class="fragment"></span><a href="#notebooklm--rag%E3%81%AE%E6%B4%BB%E7%94%A8"><i class="fa fa-link"></i></a>NotebookLM × RAGの活用</h2>
<p data-sourcepos="49:1-49:344">今回の方法はRetrieval-Augmented Generation（RAG）に似たアプローチを採用しています。外部情報（記事）を事前に収集し、NotebookLMがその情報をもとに要約とPodcast生成を行います。これにより、リアルタイムに最新の専門的知識を音声で簡単に取り入れられます。</p>
<h2 data-sourcepos="51:1-51:33">
<span id="活用例と今後の可能性" class="fragment"></span><a href="#%E6%B4%BB%E7%94%A8%E4%BE%8B%E3%81%A8%E4%BB%8A%E5%BE%8C%E3%81%AE%E5%8F%AF%E8%83%BD%E6%80%A7"><i class="fa fa-link"></i></a>活用例と今後の可能性</h2>
<p data-sourcepos="53:1-53:76">NotebookLMの活用はMCPに限らず様々な分野に応用可能です。</p>
<ul data-sourcepos="55:1-59:0">
<li data-sourcepos="55:1-55:53">新規技術やトレンドのキャッチアップ</li>
<li data-sourcepos="56:1-56:38">社内教育用コンテンツ作成</li>
<li data-sourcepos="57:1-57:38">英語論文の日本語音声解説</li>
<li data-sourcepos="58:1-59:0">ビジネス資料の事前学習</li>
</ul>
<p data-sourcepos="60:1-60:138">将来的には音声データの外部エクスポートや、企業内での専用環境構築といった展開も考えられます。</p>
<h2 data-sourcepos="62:1-62:33">
<span id="注意点とセキュリティ" class="fragment"></span><a href="#%E6%B3%A8%E6%84%8F%E7%82%B9%E3%81%A8%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3"><i class="fa fa-link"></i></a>注意点とセキュリティ</h2>
<p data-sourcepos="64:1-64:61">NotebookLM利用時は以下の点に注意が必要です。</p>
<ul data-sourcepos="66:1-69:0">
<li data-sourcepos="66:1-66:50">個人利用と法人利用で規約が異なる</li>
<li data-sourcepos="67:1-67:56">機密情報や著作権に敏感な内容は避ける</li>
<li data-sourcepos="68:1-69:0">医療、法律、金融など専門領域での直接的判断には利用不可</li>
</ul>
<p data-sourcepos="70:1-70:234">GoogleはNotebookLMで収集された個人データをAIモデルの学習には利用しないことを明記しています。安全に活用するためにはこれらの規約を十分に理解しておく必要があります。</p>
<h2 data-sourcepos="72:1-72:12">
<span id="まとめ" class="fragment"></span><a href="#%E3%81%BE%E3%81%A8%E3%82%81"><i class="fa fa-link"></i></a>まとめ</h2>
<p data-sourcepos="74:1-74:371">NotebookLMを利用すれば、最新技術を「耳で学ぶ」新しい学習スタイルが可能になります。MCPを始めとした最新の専門知識をPodcast形式で手軽に学習できるこの方法は、忙しい現代人の効率的なインプット方法として非常に有効です。これは通勤時間が長い人には嬉しい機能です。</p>
<p data-sourcepos="76:1-76:91">ぜひNotebookLMを活用し、新しい学習方法を取り入れてみてください。</p>


NotebookLMとMCPで実現！音声チャットボットで最新技術を耳から学ぶ

## Introduction

In recent years, the evolution of AI technologies has made it easier to learn through audio, not just text. This article introduces a method to study the latest concepts such as Model Context Protocol (MCP) using Google's NotebookLM by turning technical documents into a podcast-style audio.

## What is NotebookLM?

NotebookLM is an AI-powered research and note-taking tool developed by Google Labs. Based on Google Gemini, it can summarize documents, generate Q\&A pairs, and even produce spoken summaries through its Audio Overview feature introduced in 2024. This allows users to learn complex topics effortlessly via audio.

## What is MCP (Model Context Protocol)?

MCP is a protocol designed to enhance context sharing between large language models (LLMs), enabling better cooperation among distributed AI agents. It has been gaining attention from major AI communities including Anthropic, GitHub, and a16z for its role in building next-generation AI systems.

## How to Create a Podcast with NotebookLM

### 1. Collect Information

Start by gathering high-quality articles from Google search and tools like ChatGPT. Here are some recommended resources:

* [What is MCP and why you should pay attention](https://waleedk.medium.com/what-is-mcp-and-why-you-should-pay-attention-31524da7733f)
* [ModelContextProtocol.io](https://modelcontextprotocol.io/introduction)
* [Anthropic's article](https://www.anthropic.com/news/model-context-protocol)
* [Descope's article](https://www.descope.com/learn/post/mcp)
* [Github blog](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/)
* [a16z's blog](https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/)
* [Wikipedia](https://en.wikipedia.org/wiki/Model_Context_Protocol?utm_source=chatgpt.com)
* [Hugging Face](https://huggingface.co/blog/Kseniase/mcp?utm_source=chatgpt.com)
* [Patrick McGuinness](https://patmcguinness.substack.com/p/building-next-gen-ai-agents-with?utm_source=chatgpt.com)
* [The Top 7 MCP-Supported AI Frameworks](https://medium.com/%40amosgyamfi/the-top-7-mcp-supported-ai-frameworks-a8e5030c87ab)

### 2. Import into NotebookLM

Log in to NotebookLM and create a new notebook. Paste the URLs or upload documents you've collected. NotebookLM will automatically summarize and organize the content into a knowledge base.

This is the menu of NotebookLM. This example is Japanese but you can change Web UI language and output language into your favorite language like English.
![en01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d6f300f7-89c5-4b12-be31-5ac7176ee603.jpeg)

If you create a notebook, you can input source informations like URL, documents and texts
![en02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/251e2fa6-182f-40c1-96a7-cac784452a6f.jpeg)

### 3. Generate an Audio Overview

Click on the “Audio Overview” button in the top-right corner of the NotebookLM interface to automatically generate a podcast-style audio summary. The generated audio is structured in a conversational format, making it easy to follow. I customized a request for the podcast. 

These podcasts typically run for 10–15 minutes and are perfect for efficient learning during spare moments.
![en03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/8c6f3745-bbd8-464b-a21e-9301e662c352.jpeg)


## NotebookLM × RAG Approach

This method resembles Retrieval-Augmented Generation (RAG). You collect external knowledge sources, and NotebookLM processes that content to generate summaries and podcasts. This allows you to consume the latest technical information via audio on demand.

## Use Cases and Future Potential

The approach introduced here can be applied beyond MCP:

* Catching up on tech trends
* Creating internal training content
* Audio explanation of academic papers
* Pre-reading business materials

In the future, NotebookLM may offer audio export or enterprise integration, opening new possibilities for professional use.

## Precautions and Security

Be mindful of the following when using NotebookLM:

* Terms differ for personal and enterprise accounts
* Avoid uploading confidential or copyrighted data
* Not suitable for medical, legal, or financial advice

Google explicitly states that personal data from NotebookLM is not used to train AI models. Understanding the terms and using it appropriately is crucial.

## Conclusion

NotebookLM opens up a new way of learning: through your ears. By transforming technical articles into audio summaries, even advanced topics like MCP can be studied with minimal effort.

If you're looking for an efficient way to stay current in the AI field, try using NotebookLM to generate your own personalized podcasts.



<h2 data-sourcepos="1:1-1:15">
<span id="introduction" class="fragment"></span><a href="#introduction"><i class="fa fa-link"></i></a>Introduction</h2>
<p data-sourcepos="3:1-3:291">In recent years, the evolution of AI technologies has made it easier to learn through audio, not just text. This article introduces a method to study the latest concepts such as Model Context Protocol (MCP) using Google's NotebookLM by turning technical documents into a podcast-style audio.</p>
<h2 data-sourcepos="5:1-5:22">
<span id="what-is-notebooklm" class="fragment"></span><a href="#what-is-notebooklm"><i class="fa fa-link"></i></a>What is NotebookLM?</h2>
<p data-sourcepos="7:1-7:311">NotebookLM is an AI-powered research and note-taking tool developed by Google Labs. Based on Google Gemini, it can summarize documents, generate Q&amp;A pairs, and even produce spoken summaries through its Audio Overview feature introduced in 2024. This allows users to learn complex topics effortlessly via audio.</p>
<h2 data-sourcepos="9:1-9:40">
<span id="what-is-mcp-model-context-protocol" class="fragment"></span><a href="#what-is-mcp-model-context-protocol"><i class="fa fa-link"></i></a>What is MCP (Model Context Protocol)?</h2>
<p data-sourcepos="11:1-11:295">MCP is a protocol designed to enhance context sharing between large language models (LLMs), enabling better cooperation among distributed AI agents. It has been gaining attention from major AI communities including Anthropic, GitHub, and a16z for its role in building next-generation AI systems.</p>
<h2 data-sourcepos="13:1-13:42">
<span id="how-to-create-a-podcast-with-notebooklm" class="fragment"></span><a href="#how-to-create-a-podcast-with-notebooklm"><i class="fa fa-link"></i></a>How to Create a Podcast with NotebookLM</h2>
<h3 data-sourcepos="15:1-15:26">
<span id="1-collect-information" class="fragment"></span><a href="#1-collect-information"><i class="fa fa-link"></i></a>1. Collect Information</h3>
<p data-sourcepos="17:1-17:120">Start by gathering high-quality articles from Google search and tools like ChatGPT. Here are some recommended resources:</p>
<ul data-sourcepos="19:1-29:0">
<li data-sourcepos="19:1-19:134"><a href="https://waleedk.medium.com/what-is-mcp-and-why-you-should-pay-attention-31524da7733f" rel="nofollow noopener" target="_blank">What is MCP and why you should pay attention</a></li>
<li data-sourcepos="20:1-20:73"><a href="https://modelcontextprotocol.io/introduction" rel="nofollow noopener" target="_blank">ModelContextProtocol.io</a></li>
<li data-sourcepos="21:1-21:78"><a href="https://www.anthropic.com/news/model-context-protocol" rel="nofollow noopener" target="_blank">Anthropic's article</a></li>
<li data-sourcepos="22:1-22:61"><a href="https://www.descope.com/learn/post/mcp" rel="nofollow noopener" target="_blank">Descope's article</a></li>
<li data-sourcepos="23:1-23:110"><a href="https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/" rel="nofollow noopener" target="_blank">Github blog</a></li>
<li data-sourcepos="24:1-24:84"><a href="https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/" rel="nofollow noopener" target="_blank">a16z's blog</a></li>
<li data-sourcepos="25:1-25:90"><a href="https://en.wikipedia.org/wiki/Model_Context_Protocol?utm_source=chatgpt.com" rel="nofollow noopener" target="_blank">Wikipedia</a></li>
<li data-sourcepos="26:1-26:81"><a href="https://huggingface.co/blog/Kseniase/mcp?utm_source=chatgpt.com" rel="nofollow noopener" target="_blank">Hugging Face</a></li>
<li data-sourcepos="27:1-27:116"><a href="https://patmcguinness.substack.com/p/building-next-gen-ai-agents-with?utm_source=chatgpt.com" rel="nofollow noopener" target="_blank">Patrick McGuinness</a></li>
<li data-sourcepos="28:1-29:0"><a href="https://medium.com/%40amosgyamfi/the-top-7-mcp-supported-ai-frameworks-a8e5030c87ab" rel="nofollow noopener" target="_blank">The Top 7 MCP-Supported AI Frameworks</a></li>
</ul>
<h3 data-sourcepos="30:1-30:29">
<span id="2-import-into-notebooklm" class="fragment"></span><a href="#2-import-into-notebooklm"><i class="fa fa-link"></i></a>2. Import into NotebookLM</h3>
<p data-sourcepos="32:1-32:188">Log in to NotebookLM and create a new notebook. Paste the URLs or upload documents you've collected. NotebookLM will automatically summarize and organize the content into a knowledge base.</p>
<p data-sourcepos="34:1-35:122">This is the menu of NotebookLM. This example is Japanese but you can change Web UI language and output language into your favorite language like English.<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd6f300f7-89c5-4b12-be31-5ac7176ee603.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=d4139e0649b3e585bc3dd234d9f24071" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd6f300f7-89c5-4b12-be31-5ac7176ee603.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=d4139e0649b3e585bc3dd234d9f24071" alt="en01.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd6f300f7-89c5-4b12-be31-5ac7176ee603.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=5088d388c6022644e5972d02411abaa9 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d6f300f7-89c5-4b12-be31-5ac7176ee603.jpeg" loading="lazy"></a></p>
<p data-sourcepos="37:1-38:122">If you create a notebook, you can input source informations like URL, documents and texts<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F251e2fa6-182f-40c1-96a7-cac784452a6f.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=278af537b39fa4db127f0916c2fcc18f" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F251e2fa6-182f-40c1-96a7-cac784452a6f.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=278af537b39fa4db127f0916c2fcc18f" alt="en02.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F251e2fa6-182f-40c1-96a7-cac784452a6f.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=21db8064b963aa7902e6d4ac0e590dbc 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/251e2fa6-182f-40c1-96a7-cac784452a6f.jpeg" loading="lazy"></a></p>
<h3 data-sourcepos="40:1-40:33">
<span id="3-generate-an-audio-overview" class="fragment"></span><a href="#3-generate-an-audio-overview"><i class="fa fa-link"></i></a>3. Generate an Audio Overview</h3>
<p data-sourcepos="42:1-42:278">Click on the “Audio Overview” button in the top-right corner of the NotebookLM interface to automatically generate a podcast-style audio summary. The generated audio is structured in a conversational format, making it easy to follow. I customized a request for the podcast.</p>
<p data-sourcepos="44:1-45:122">These podcasts typically run for 10–15 minutes and are perfect for efficient learning during spare moments.<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F8c6f3745-bbd8-464b-a21e-9301e662c352.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=52050a51f535379113029016cff5ea7d" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F8c6f3745-bbd8-464b-a21e-9301e662c352.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=52050a51f535379113029016cff5ea7d" alt="en03.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F8c6f3745-bbd8-464b-a21e-9301e662c352.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=4c6e62a019288d18e8adb47305e5de85 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/8c6f3745-bbd8-464b-a21e-9301e662c352.jpeg" loading="lazy"></a></p>
<h2 data-sourcepos="48:1-48:29">
<span id="notebooklm--rag-approach" class="fragment"></span><a href="#notebooklm--rag-approach"><i class="fa fa-link"></i></a>NotebookLM × RAG Approach</h2>
<p data-sourcepos="50:1-50:254">This method resembles Retrieval-Augmented Generation (RAG). You collect external knowledge sources, and NotebookLM processes that content to generate summaries and podcasts. This allows you to consume the latest technical information via audio on demand.</p>
<h2 data-sourcepos="52:1-52:33">
<span id="use-cases-and-future-potential" class="fragment"></span><a href="#use-cases-and-future-potential"><i class="fa fa-link"></i></a>Use Cases and Future Potential</h2>
<p data-sourcepos="54:1-54:55">The approach introduced here can be applied beyond MCP:</p>
<ul data-sourcepos="56:1-60:0">
<li data-sourcepos="56:1-56:28">Catching up on tech trends</li>
<li data-sourcepos="57:1-57:36">Creating internal training content</li>
<li data-sourcepos="58:1-58:38">Audio explanation of academic papers</li>
<li data-sourcepos="59:1-60:0">Pre-reading business materials</li>
</ul>
<p data-sourcepos="61:1-61:123">In the future, NotebookLM may offer audio export or enterprise integration, opening new possibilities for professional use.</p>
<h2 data-sourcepos="63:1-63:27">
<span id="precautions-and-security" class="fragment"></span><a href="#precautions-and-security"><i class="fa fa-link"></i></a>Precautions and Security</h2>
<p data-sourcepos="65:1-65:50">Be mindful of the following when using NotebookLM:</p>
<ul data-sourcepos="67:1-70:0">
<li data-sourcepos="67:1-67:51">Terms differ for personal and enterprise accounts</li>
<li data-sourcepos="68:1-68:50">Avoid uploading confidential or copyrighted data</li>
<li data-sourcepos="69:1-70:0">Not suitable for medical, legal, or financial advice</li>
</ul>
<p data-sourcepos="71:1-71:154">Google explicitly states that personal data from NotebookLM is not used to train AI models. Understanding the terms and using it appropriately is crucial.</p>
<h2 data-sourcepos="73:1-73:13">
<span id="conclusion" class="fragment"></span><a href="#conclusion"><i class="fa fa-link"></i></a>Conclusion</h2>
<p data-sourcepos="75:1-75:184">NotebookLM opens up a new way of learning: through your ears. By transforming technical articles into audio summaries, even advanced topics like MCP can be studied with minimal effort.</p>
<p data-sourcepos="77:1-77:136">If you're looking for an efficient way to stay current in the AI field, try using NotebookLM to generate your own personalized podcasts.</p>


Let's learn technical knowledge from your original AI Podcast with NotebookLM!

## Introduction

This article shares my experience creating and deploying a personal website that displays a list of my Qiita articles, using **Cursor**, a next-generation AI-powered editor, integrated with **GitHub** and **Vercel**. Even those with little or no development experience can build a product quickly and easily—this is the main point of the post.

The tools and services used in this project are:

* **Cursor**: An AI-powered editor that supports natural language programming
* **GitHub**: Source code management
* **Vercel**: Deployment and hosting
* **Qiita API**: To fetch article data from Qiita

## Development Workflow

1. Create a Next.js project using Cursor
2. Generate code that fetches articles using the Qiita API
3. Implement design, search, and pagination features
4. Push the code to GitHub
5. Auto-build and publish using Vercel

## Step 1: Creating the Project

First, create a Next.js project using the following command:

```bash
npx create-next-app@latest .
```

With Cursor, even this step can be done using natural language: just type something like "Create a new Next.js project," and Cursor will take care of the rest.

In this article, we are updating an existing project. The initial setup process will be described in another post.

Here’s a screenshot of the personal website I’m building experimentally:
![MySite.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cb8d113a-e515-430e-9729-1c59245c38b9.jpeg)

## Step 2: Connecting to the Qiita API

I used Qiita’s official API to retrieve articles from my account. I simply asked Cursor:

```
Write an API client that uses my Qiita access token to fetch my posted articles.
```

Cursor generated the code in a file like `lib/qiita.ts`.

### Getting Your Qiita Access Token

1. Log in to Qiita
2. Go to the [Access Token Creation Page](https://qiita.com/settings/applications)
3. Specify the required scopes and generate a token
4. Add the token to `.env.local`. The key name can be anything you prefer:

```
QIITA_ACCESS_TOKEN=your_token_here
```

## Step 3: Building and Styling the Article List

Create a new file `pages/articles.tsx` to display the article title, tags, and post date. Tailwind CSS was used for styling.

* Podcast-style card layout for each article
* Search feature by title and tag
* Pagination (10 articles per page)
* Responsive design for mobile devices

You can implement all of these just by telling Cursor what you want.

In this case, I asked for a layout and search feature similar to my existing podcast page. ":
"Please change the layout and embed a search function like 'Podcast page'
![prompt02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg)

After the changes, I checked the local development environment using:

```bash
npm run dev
```

Here’s the updated UI:
![After.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d0b51232-9eef-4589-8168-ad690d23f649.jpeg)

## Step 4: Publishing with GitHub and Vercel

Once development is complete, push your code to GitHub. Be sure not to include sensitive files like `.env.local`.

Instead, register the environment variable on Vercel:

1. Open your Vercel project page
2. Navigate to "Settings" → "Environment Variables"
3. Add `QIITA_ACCESS_TOKEN`

This will trigger Vercel to build and deploy your site automatically after each push to GitHub.

By the way, you can even let AI summarize your changes for Git commit messages:

![GitCommitComment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/e40f42cf-2a26-4012-929b-466d15e263bf.jpeg)

### When Errors Occur

If the articles don’t show up, it’s likely that the environment variable wasn’t set on Vercel. Check the error messages and trigger a rebuild after setting the variable.

## Step 5: Auto-Updates and Notes

* Use `getStaticProps` to update articles every hour (ISR)
* Qiita API requires an access token
* Make sure `.env.local` is included in `.gitignore`

## Conclusion

With Cursor, even beginners can build web apps through natural language conversations. Integration with the Qiita API is simple, and the CI/CD flow with GitHub and Vercel is smooth and seamless.

Thanks to generative AI, web development has become truly effortless.

## Reference Links

* [Cursor Official Website](https://www.cursor.so/)
* [Qiita API Documentation](https://qiita.com/api/v2/docs)
* [GitHub Docs](https://docs.github.com/)
* [Vercel Documentation](https://vercel.com/docs)


<h2 data-sourcepos="1:1-1:15">
<span id="introduction" class="fragment"></span><a href="#introduction"><i class="fa fa-link"></i></a>Introduction</h2>
<p data-sourcepos="3:1-3:345">This article shares my experience creating and deploying a personal website that displays a list of my Qiita articles, using <strong>Cursor</strong>, a next-generation AI-powered editor, integrated with <strong>GitHub</strong> and <strong>Vercel</strong>. Even those with little or no development experience can build a product quickly and easily—this is the main point of the post.</p>
<p data-sourcepos="5:1-5:48">The tools and services used in this project are:</p>
<ul data-sourcepos="7:1-11:0">
<li data-sourcepos="7:1-7:77">
<strong>Cursor</strong>: An AI-powered editor that supports natural language programming</li>
<li data-sourcepos="8:1-8:36">
<strong>GitHub</strong>: Source code management</li>
<li data-sourcepos="9:1-9:36">
<strong>Vercel</strong>: Deployment and hosting</li>
<li data-sourcepos="10:1-11:0">
<strong>Qiita API</strong>: To fetch article data from Qiita</li>
</ul>
<h2 data-sourcepos="12:1-12:23">
<span id="development-workflow" class="fragment"></span><a href="#development-workflow"><i class="fa fa-link"></i></a>Development Workflow</h2>
<ol data-sourcepos="14:1-19:0">
<li data-sourcepos="14:1-14:40">Create a Next.js project using Cursor</li>
<li data-sourcepos="15:1-15:58">Generate code that fetches articles using the Qiita API</li>
<li data-sourcepos="16:1-16:52">Implement design, search, and pagination features</li>
<li data-sourcepos="17:1-17:26">Push the code to GitHub</li>
<li data-sourcepos="18:1-19:0">Auto-build and publish using Vercel</li>
</ol>
<h2 data-sourcepos="20:1-20:31">
<span id="step-1-creating-the-project" class="fragment"></span><a href="#step-1-creating-the-project"><i class="fa fa-link"></i></a>Step 1: Creating the Project</h2>
<p data-sourcepos="22:1-22:60">First, create a Next.js project using the following command:</p>
<div class="code-frame" data-lang="bash" data-sourcepos="24:1-26:3"><div class="highlight"><pre><code>npx create-next-app@latest <span class="nb">.</span>
</code></pre></div></div>
<p data-sourcepos="28:1-28:159">With Cursor, even this step can be done using natural language: just type something like "Create a new Next.js project," and Cursor will take care of the rest.</p>
<p data-sourcepos="30:1-30:114">In this article, we are updating an existing project. The initial setup process will be described in another post.</p>
<p data-sourcepos="32:1-33:124">Here’s a screenshot of the personal website I’m building experimentally:<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcb8d113a-e515-430e-9729-1c59245c38b9.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=91b61730ab9c47762ad5485ba6d7d990" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcb8d113a-e515-430e-9729-1c59245c38b9.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=91b61730ab9c47762ad5485ba6d7d990" alt="MySite.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcb8d113a-e515-430e-9729-1c59245c38b9.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=0a6a91a6b0f20cb0bad1c0d2740464ed 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cb8d113a-e515-430e-9729-1c59245c38b9.jpeg" loading="lazy"></a></p>
<h2 data-sourcepos="35:1-35:38">
<span id="step-2-connecting-to-the-qiita-api" class="fragment"></span><a href="#step-2-connecting-to-the-qiita-api"><i class="fa fa-link"></i></a>Step 2: Connecting to the Qiita API</h2>
<p data-sourcepos="37:1-37:90">I used Qiita’s official API to retrieve articles from my account. I simply asked Cursor:</p>
<div class="code-frame" data-lang="text" data-sourcepos="39:1-41:3"><div class="highlight"><pre><code>Write an API client that uses my Qiita access token to fetch my posted articles.
</code></pre></div></div>
<p data-sourcepos="43:1-43:56">Cursor generated the code in a file like <code>lib/qiita.ts</code>.</p>
<h3 data-sourcepos="45:1-45:35">
<span id="getting-your-qiita-access-token" class="fragment"></span><a href="#getting-your-qiita-access-token"><i class="fa fa-link"></i></a>Getting Your Qiita Access Token</h3>
<ol data-sourcepos="47:1-51:0">
<li data-sourcepos="47:1-47:18">Log in to Qiita</li>
<li data-sourcepos="48:1-48:82">Go to the <a href="https://qiita.com/settings/applications">Access Token Creation Page</a>
</li>
<li data-sourcepos="49:1-49:51">Specify the required scopes and generate a token</li>
<li data-sourcepos="50:1-51:0">Add the token to <code>.env.local</code>. The key name can be anything you prefer:</li>
</ol>
<div class="code-frame" data-lang="text" data-sourcepos="52:1-54:3"><div class="highlight"><pre><code>QIITA_ACCESS_TOKEN=your_token_here
</code></pre></div></div>
<h2 data-sourcepos="56:1-56:48">
<span id="step-3-building-and-styling-the-article-list" class="fragment"></span><a href="#step-3-building-and-styling-the-article-list"><i class="fa fa-link"></i></a>Step 3: Building and Styling the Article List</h2>
<p data-sourcepos="58:1-58:124">Create a new file <code>pages/articles.tsx</code> to display the article title, tags, and post date. Tailwind CSS was used for styling.</p>
<ul data-sourcepos="60:1-64:0">
<li data-sourcepos="60:1-60:44">Podcast-style card layout for each article</li>
<li data-sourcepos="61:1-61:33">Search feature by title and tag</li>
<li data-sourcepos="62:1-62:35">Pagination (10 articles per page)</li>
<li data-sourcepos="63:1-64:0">Responsive design for mobile devices</li>
</ul>
<p data-sourcepos="65:1-65:68">You can implement all of these just by telling Cursor what you want.</p>
<p data-sourcepos="67:1-69:126">In this case, I asked for a layout and search feature similar to my existing podcast page. ":<br>
"Please change the layout and embed a search function like 'Podcast page'<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=a4d3718858da5e3ec12c2538fe1c9dcc" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=a4d3718858da5e3ec12c2538fe1c9dcc" alt="prompt02.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=4818960cf4401b34f5c5bff2d7add14d 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg" loading="lazy"></a></p>
<p data-sourcepos="71:1-71:69">After the changes, I checked the local development environment using:</p>
<div class="code-frame" data-lang="bash" data-sourcepos="73:1-75:3"><div class="highlight"><pre><code>npm run dev
</code></pre></div></div>
<p data-sourcepos="77:1-78:123">Here’s the updated UI:<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd0b51232-9eef-4589-8168-ad690d23f649.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=7ea7bae5ed8ce57f1cfefc4bc74ea517" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd0b51232-9eef-4589-8168-ad690d23f649.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=7ea7bae5ed8ce57f1cfefc4bc74ea517" alt="After.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd0b51232-9eef-4589-8168-ad690d23f649.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a83461dc363c4426d03075df91f5650b 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d0b51232-9eef-4589-8168-ad690d23f649.jpeg" loading="lazy"></a></p>
<h2 data-sourcepos="80:1-80:44">
<span id="step-4-publishing-with-github-and-vercel" class="fragment"></span><a href="#step-4-publishing-with-github-and-vercel"><i class="fa fa-link"></i></a>Step 4: Publishing with GitHub and Vercel</h2>
<p data-sourcepos="82:1-82:113">Once development is complete, push your code to GitHub. Be sure not to include sensitive files like <code>.env.local</code>.</p>
<p data-sourcepos="84:1-84:53">Instead, register the environment variable on Vercel:</p>
<ol data-sourcepos="86:1-89:0">
<li data-sourcepos="86:1-86:32">Open your Vercel project page</li>
<li data-sourcepos="87:1-87:53">Navigate to "Settings" → "Environment Variables"</li>
<li data-sourcepos="88:1-89:0">Add <code>QIITA_ACCESS_TOKEN</code>
</li>
</ol>
<p data-sourcepos="90:1-90:95">This will trigger Vercel to build and deploy your site automatically after each push to GitHub.</p>
<p data-sourcepos="92:1-92:79">By the way, you can even let AI summarize your changes for Git commit messages:</p>
<p data-sourcepos="94:1-94:134"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fe40f42cf-2a26-4012-929b-466d15e263bf.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=6e1593bb85c20282e7152068bb9410fd" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fe40f42cf-2a26-4012-929b-466d15e263bf.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=6e1593bb85c20282e7152068bb9410fd" alt="GitCommitComment.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fe40f42cf-2a26-4012-929b-466d15e263bf.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=7717d8861a0f465a00ecfd8ba47a37f0 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/e40f42cf-2a26-4012-929b-466d15e263bf.jpeg" loading="lazy"></a></p>
<h3 data-sourcepos="96:1-96:21">
<span id="when-errors-occur" class="fragment"></span><a href="#when-errors-occur"><i class="fa fa-link"></i></a>When Errors Occur</h3>
<p data-sourcepos="98:1-98:175">If the articles don’t show up, it’s likely that the environment variable wasn’t set on Vercel. Check the error messages and trigger a rebuild after setting the variable.</p>
<h2 data-sourcepos="100:1-100:33">
<span id="step-5-auto-updates-and-notes" class="fragment"></span><a href="#step-5-auto-updates-and-notes"><i class="fa fa-link"></i></a>Step 5: Auto-Updates and Notes</h2>
<ul data-sourcepos="102:1-105:0">
<li data-sourcepos="102:1-102:58">Use <code>getStaticProps</code> to update articles every hour (ISR)</li>
<li data-sourcepos="103:1-103:36">Qiita API requires an access token</li>
<li data-sourcepos="104:1-105:0">Make sure <code>.env.local</code> is included in <code>.gitignore</code>
</li>
</ul>
<h2 data-sourcepos="106:1-106:13">
<span id="conclusion" class="fragment"></span><a href="#conclusion"><i class="fa fa-link"></i></a>Conclusion</h2>
<p data-sourcepos="108:1-108:194">With Cursor, even beginners can build web apps through natural language conversations. Integration with the Qiita API is simple, and the CI/CD flow with GitHub and Vercel is smooth and seamless.</p>
<p data-sourcepos="110:1-110:69">Thanks to generative AI, web development has become truly effortless.</p>
<h2 data-sourcepos="112:1-112:18">
<span id="reference-links" class="fragment"></span><a href="#reference-links"><i class="fa fa-link"></i></a>Reference Links</h2>
<ul data-sourcepos="114:1-117:49">
<li data-sourcepos="114:1-114:51"><a href="https://www.cursor.so/" rel="nofollow noopener" target="_blank">Cursor Official Website</a></li>
<li data-sourcepos="115:1-115:58"><a href="https://qiita.com/api/v2/docs">Qiita API Documentation</a></li>
<li data-sourcepos="116:1-116:41"><a href="https://docs.github.com/" rel="nofollow noopener" target="_blank">GitHub Docs</a></li>
<li data-sourcepos="117:1-117:49"><a href="https://vercel.com/docs" rel="nofollow noopener" target="_blank">Vercel Documentation</a></li>
</ul>


Lightning-Fast! Building a Qiita Article Listing Site with Cursor + GitHub + Vercel

## はじめに

本記事では、Cursorという次世代型エディタを使って、Qiita記事一覧を表示する自分用Webサイトを、GitHubとVercelを連携して開発・公開した体験を紹介します。開発経験が浅い方や非エンジニアでも、驚くほど簡単かつスピーディにプロダクトを構築できるのが今回のポイントです。

今回のプロジェクトでは以下のツールとサービスを使いました：

* **Cursor**: AI搭載のエディタ。自然言語での開発指示が可能
* **GitHub**: ソースコード管理
* **Vercel**: デプロイ&ホスティング
* **Qiita API**: Qiitaから記事データを取得

## 全体の開発フロー

1. CursorでNext.jsプロジェクトを作成
2. Qiita APIを利用して記事一覧を取得するコードを生成
3. デザイン・検索機能・ページネーションを実装
4. GitHubにPush
5. Vercelで自動ビルド&公開

## Step 1: プロジェクトの作成

まずは以下のコマンドでNext.jsプロジェクトを作成。

```bash
npx create-next-app@latest .
```

Cursorを使えば、この手順すらも自然言語で「Next.jsプロジェクトを新規作成して」と打ち込めば完了。驚くほど手間が省けます。

今回はすでに構築済みのものを更新する内容になっています。最初のとっかかりについては別途記事を書きます。

こんな感じの個人サイトを実験的に作成しています。
![MySite.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cb8d113a-e515-430e-9729-1c59245c38b9.jpeg)

## Step 2: Qiita APIとの連携

Qiitaの公式APIを使って、自分のアカウントから記事を取得します。Cursorに対して：

```
Qiitaのアクセストークンを使って、自分の投稿記事を取得するAPIクライアントを書いて。
```

と指示するだけで、`lib/qiita.ts` のような形でコードを生成してくれました。

### Qiitaアクセストークンの取得

1. Qiitaにログイン
2. [アクセストークン作成ページ](https://qiita.com/settings/applications)にアクセス
3. 必要なスコープを指定してトークンを発行
4. `.env.local` に下記のように記載。キー名は任意に決めて大丈夫です。

```
QIITA_ACCESS_TOKEN=your_token_here
```

## Step 3: 記事一覧の作成とスタイリング

`pages/articles.tsx` を新規作成し、記事のタイトル・タグ・投稿日などを表示。CSSはTailwind CSSを利用。

* 記事一覧のレイアウトはPodcast風にカード形式で表示
* タイトル・タグによる検索機能付き
* ページネーション（10件ずつ表示）
* スマホでも見やすいレスポンシブデザイン

Cursorに指示するだけで、必要なスタイルや機能を簡単に実装できます。

今回はすでに実装しているPodcastページのようなレイアウトや検索機能をつけてほしいと指示しました。
![prompt02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg)

修正後は、`npm run dev`で開発環境上で確認します。
![After.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d0b51232-9eef-4589-8168-ad690d23f649.jpeg)

## Step 4: GitHubとVercelで公開

開発が一通り終わったら、GitHubにコードをPushします。ただし、`.env.local`など機密情報はGitに含めないように注意。

代わりに、Vercelの環境変数に登録します：

1. Vercelのプロジェクトページを開く
2. 「Settings」→「Environment Variables」へ
3. `QIITA_ACCESS_TOKEN` を登録

これでGitHubからPushすると、Vercelが自動でビルドを行い、公開されます。

ちなみに、コミットする際に修正内容をAIにまとめてもらいコメントとすることも簡単にできます。

![GitCommitComment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/e40f42cf-2a26-4012-929b-466d15e263bf.jpeg)

### エラーが出たとき

環境変数を登録し忘れると記事が反映されません。Vercel上でエラー内容を確認して再ビルドしましょう。

## Step 5: 自動更新と注意点

* `getStaticProps` を使って、1時間ごとに記事を更新（ISR）
* Qiita APIの使用にはアクセストークンが必要
* `.env.local` は必ず `.gitignore` に追加

## まとめ

Cursorを使えば、開発経験が浅くても、まるで会話するようにWebアプリを構築できます。QiitaのAPIとの連携も簡単で、GitHub + VercelによるCI/CDの流れもスムーズです。

生成AIの活用により本当にウェブ開発は簡単になりましたね！

## 参考サイト

* [Cursor公式サイト](https://www.cursor.so/)
* [Qiita APIドキュメント](https://qiita.com/api/v2/docs)
* [GitHub Docs](https://docs.github.com/)
* [Vercel Documentation](https://vercel.com/docs)


<h2 data-sourcepos="1:1-1:15">
<span id="はじめに" class="fragment"></span><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"><i class="fa fa-link"></i></a>はじめに</h2>
<p data-sourcepos="3:1-3:374">本記事では、Cursorという次世代型エディタを使って、Qiita記事一覧を表示する自分用Webサイトを、GitHubとVercelを連携して開発・公開した体験を紹介します。開発経験が浅い方や非エンジニアでも、驚くほど簡単かつスピーディにプロダクトを構築できるのが今回のポイントです。</p>
<p data-sourcepos="5:1-5:87">今回のプロジェクトでは以下のツールとサービスを使いました：</p>
<ul data-sourcepos="7:1-11:0">
<li data-sourcepos="7:1-7:79">
<strong>Cursor</strong>: AI搭載のエディタ。自然言語での開発指示が可能</li>
<li data-sourcepos="8:1-8:38">
<strong>GitHub</strong>: ソースコード管理</li>
<li data-sourcepos="9:1-9:45">
<strong>Vercel</strong>: デプロイ&amp;ホスティング</li>
<li data-sourcepos="10:1-11:0">
<strong>Qiita API</strong>: Qiitaから記事データを取得</li>
</ul>
<h2 data-sourcepos="12:1-12:27">
<span id="全体の開発フロー" class="fragment"></span><a href="#%E5%85%A8%E4%BD%93%E3%81%AE%E9%96%8B%E7%99%BA%E3%83%95%E3%83%AD%E3%83%BC"><i class="fa fa-link"></i></a>全体の開発フロー</h2>
<ol data-sourcepos="14:1-19:0">
<li data-sourcepos="14:1-14:46">CursorでNext.jsプロジェクトを作成</li>
<li data-sourcepos="15:1-15:72">Qiita APIを利用して記事一覧を取得するコードを生成</li>
<li data-sourcepos="16:1-16:66">デザイン・検索機能・ページネーションを実装</li>
<li data-sourcepos="17:1-17:16">GitHubにPush</li>
<li data-sourcepos="18:1-19:0">Vercelで自動ビルド&amp;公開</li>
</ol>
<h2 data-sourcepos="20:1-20:38">
<span id="step-1-プロジェクトの作成" class="fragment"></span><a href="#step-1-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90"><i class="fa fa-link"></i></a>Step 1: プロジェクトの作成</h2>
<p data-sourcepos="22:1-22:70">まずは以下のコマンドでNext.jsプロジェクトを作成。</p>
<div class="code-frame" data-lang="bash" data-sourcepos="24:1-26:3"><div class="highlight"><pre><code>npx create-next-app@latest <span class="nb">.</span>
</code></pre></div></div>
<p data-sourcepos="28:1-28:172">Cursorを使えば、この手順すらも自然言語で「Next.jsプロジェクトを新規作成して」と打ち込めば完了。驚くほど手間が省けます。</p>
<p data-sourcepos="30:1-30:153">今回はすでに構築済みのものを更新する内容になっています。最初のとっかかりについては別途記事を書きます。</p>
<p data-sourcepos="32:1-33:124">こんな感じの個人サイトを実験的に作成しています。<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcb8d113a-e515-430e-9729-1c59245c38b9.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=91b61730ab9c47762ad5485ba6d7d990" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcb8d113a-e515-430e-9729-1c59245c38b9.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=91b61730ab9c47762ad5485ba6d7d990" alt="MySite.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcb8d113a-e515-430e-9729-1c59245c38b9.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=0a6a91a6b0f20cb0bad1c0d2740464ed 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cb8d113a-e515-430e-9729-1c59245c38b9.jpeg" loading="lazy"></a></p>
<h2 data-sourcepos="35:1-35:32">
<span id="step-2-qiita-apiとの連携" class="fragment"></span><a href="#step-2-qiita-api%E3%81%A8%E3%81%AE%E9%80%A3%E6%90%BA"><i class="fa fa-link"></i></a>Step 2: Qiita APIとの連携</h2>
<p data-sourcepos="37:1-37:110">Qiitaの公式APIを使って、自分のアカウントから記事を取得します。Cursorに対して：</p>
<div class="code-frame" data-lang="text" data-sourcepos="39:1-41:3"><div class="highlight"><pre><code>Qiitaのアクセストークンを使って、自分の投稿記事を取得するAPIクライアントを書いて。
</code></pre></div></div>
<p data-sourcepos="43:1-43:102">と指示するだけで、<code>lib/qiita.ts</code> のような形でコードを生成してくれました。</p>
<h3 data-sourcepos="45:1-45:42">
<span id="qiitaアクセストークンの取得" class="fragment"></span><a href="#qiita%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E5%8F%96%E5%BE%97"><i class="fa fa-link"></i></a>Qiitaアクセストークンの取得</h3>
<ol data-sourcepos="47:1-51:0">
<li data-sourcepos="47:1-47:23">Qiitaにログイン</li>
<li data-sourcepos="48:1-48:100">
<a href="https://qiita.com/settings/applications">アクセストークン作成ページ</a>にアクセス</li>
<li data-sourcepos="49:1-49:60">必要なスコープを指定してトークンを発行</li>
<li data-sourcepos="50:1-51:0">
<code>.env.local</code> に下記のように記載。キー名は任意に決めて大丈夫です。</li>
</ol>
<div class="code-frame" data-lang="text" data-sourcepos="52:1-54:3"><div class="highlight"><pre><code>QIITA_ACCESS_TOKEN=your_token_here
</code></pre></div></div>
<h2 data-sourcepos="56:1-56:53">
<span id="step-3-記事一覧の作成とスタイリング" class="fragment"></span><a href="#step-3-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%B0"><i class="fa fa-link"></i></a>Step 3: 記事一覧の作成とスタイリング</h2>
<p data-sourcepos="58:1-58:132"><code>pages/articles.tsx</code> を新規作成し、記事のタイトル・タグ・投稿日などを表示。CSSはTailwind CSSを利用。</p>
<ul data-sourcepos="60:1-64:0">
<li data-sourcepos="60:1-60:72">記事一覧のレイアウトはPodcast風にカード形式で表示</li>
<li data-sourcepos="61:1-61:50">タイトル・タグによる検索機能付き</li>
<li data-sourcepos="62:1-62:49">ページネーション（10件ずつ表示）</li>
<li data-sourcepos="63:1-64:0">スマホでも見やすいレスポンシブデザイン</li>
</ul>
<p data-sourcepos="65:1-65:96">Cursorに指示するだけで、必要なスタイルや機能を簡単に実装できます。</p>
<p data-sourcepos="67:1-68:126">今回はすでに実装しているPodcastページのようなレイアウトや検索機能をつけてほしいと指示しました。<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=a4d3718858da5e3ec12c2538fe1c9dcc" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=a4d3718858da5e3ec12c2538fe1c9dcc" alt="prompt02.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fcd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=4818960cf4401b34f5c5bff2d7add14d 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg" loading="lazy"></a></p>
<p data-sourcepos="70:1-71:123">修正後は、<code>npm run dev</code>で開発環境上で確認します。<br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd0b51232-9eef-4589-8168-ad690d23f649.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=7ea7bae5ed8ce57f1cfefc4bc74ea517" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd0b51232-9eef-4589-8168-ad690d23f649.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=7ea7bae5ed8ce57f1cfefc4bc74ea517" alt="After.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fd0b51232-9eef-4589-8168-ad690d23f649.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a83461dc363c4426d03075df91f5650b 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d0b51232-9eef-4589-8168-ad690d23f649.jpeg" loading="lazy"></a></p>
<h2 data-sourcepos="73:1-73:35">
<span id="step-4-githubとvercelで公開" class="fragment"></span><a href="#step-4-github%E3%81%A8vercel%E3%81%A7%E5%85%AC%E9%96%8B"><i class="fa fa-link"></i></a>Step 4: GitHubとVercelで公開</h2>
<p data-sourcepos="75:1-75:154">開発が一通り終わったら、GitHubにコードをPushします。ただし、<code>.env.local</code>など機密情報はGitに含めないように注意。</p>
<p data-sourcepos="77:1-77:57">代わりに、Vercelの環境変数に登録します：</p>
<ol data-sourcepos="79:1-82:0">
<li data-sourcepos="79:1-79:48">Vercelのプロジェクトページを開く</li>
<li data-sourcepos="80:1-80:50">「Settings」→「Environment Variables」へ</li>
<li data-sourcepos="81:1-82:0">
<code>QIITA_ACCESS_TOKEN</code> を登録</li>
</ol>
<p data-sourcepos="83:1-83:97">これでGitHubからPushすると、Vercelが自動でビルドを行い、公開されます。</p>
<p data-sourcepos="85:1-85:134">ちなみに、コミットする際に修正内容をAIにまとめてもらいコメントとすることも簡単にできます。</p>
<p data-sourcepos="87:1-87:134"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fe40f42cf-2a26-4012-929b-466d15e263bf.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=6e1593bb85c20282e7152068bb9410fd" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fe40f42cf-2a26-4012-929b-466d15e263bf.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=6e1593bb85c20282e7152068bb9410fd" alt="GitCommitComment.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2Fe40f42cf-2a26-4012-929b-466d15e263bf.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=7717d8861a0f465a00ecfd8ba47a37f0 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/e40f42cf-2a26-4012-929b-466d15e263bf.jpeg" loading="lazy"></a></p>
<h3 data-sourcepos="89:1-89:28">
<span id="エラーが出たとき" class="fragment"></span><a href="#%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%81%9F%E3%81%A8%E3%81%8D"><i class="fa fa-link"></i></a>エラーが出たとき</h3>
<p data-sourcepos="91:1-91:141">環境変数を登録し忘れると記事が反映されません。Vercel上でエラー内容を確認して再ビルドしましょう。</p>
<h2 data-sourcepos="93:1-93:35">
<span id="step-5-自動更新と注意点" class="fragment"></span><a href="#step-5-%E8%87%AA%E5%8B%95%E6%9B%B4%E6%96%B0%E3%81%A8%E6%B3%A8%E6%84%8F%E7%82%B9"><i class="fa fa-link"></i></a>Step 5: 自動更新と注意点</h2>
<ul data-sourcepos="95:1-98:0">
<li data-sourcepos="95:1-95:74">
<code>getStaticProps</code> を使って、1時間ごとに記事を更新（ISR）</li>
<li data-sourcepos="96:1-96:59">Qiita APIの使用にはアクセストークンが必要</li>
<li data-sourcepos="97:1-98:0">
<code>.env.local</code> は必ず <code>.gitignore</code> に追加</li>
</ul>
<h2 data-sourcepos="99:1-99:12">
<span id="まとめ" class="fragment"></span><a href="#%E3%81%BE%E3%81%A8%E3%82%81"><i class="fa fa-link"></i></a>まとめ</h2>
<p data-sourcepos="101:1-101:217">Cursorを使えば、開発経験が浅くても、まるで会話するようにWebアプリを構築できます。QiitaのAPIとの連携も簡単で、GitHub + VercelによるCI/CDの流れもスムーズです。</p>
<p data-sourcepos="103:1-103:83">生成AIの活用により本当にウェブ開発は簡単になりましたね！</p>
<h2 data-sourcepos="105:1-105:18">
<span id="参考サイト" class="fragment"></span><a href="#%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88"><i class="fa fa-link"></i></a>参考サイト</h2>
<ul data-sourcepos="107:1-110:49">
<li data-sourcepos="107:1-107:49"><a href="https://www.cursor.so/" rel="nofollow noopener" target="_blank">Cursor公式サイト</a></li>
<li data-sourcepos="108:1-108:62"><a href="https://qiita.com/api/v2/docs">Qiita APIドキュメント</a></li>
<li data-sourcepos="109:1-109:41"><a href="https://docs.github.com/" rel="nofollow noopener" target="_blank">GitHub Docs</a></li>
<li data-sourcepos="110:1-110:49"><a href="https://vercel.com/docs" rel="nofollow noopener" target="_blank">Vercel Documentation</a></li>
</ul>


Cursor + GitHub + Vercel で爆速！Qiita記事一覧サイトを作ってみた


# Getting Stuck While Setting Up CrewAI

I recently tried out the trending agent framework **CrewAI**. Long story short — **the installation process is a huge pain**.

Despite what many blog posts or videos might suggest, **it’s not as simple as just running a few Python commands**. Here's a breakdown of where I got stuck, what went wrong, and how I eventually got through it (or gave up).

## Is uv Really Required?

The official CrewAI documentation immediately recommends using `uv`, a relatively new Python package and environment manager:

- [Official installation instructions](https://docs.crewai.com/installation)

```bash
curl -fsSL https://astral.sh/uv/install.sh | sh
uv venv
uv pip install crewai
```

If you’ve never heard of `uv`, you’re not alone. While Python developers are typically used to `venv`, `pipenv`, or `poetry`, CrewAI has taken the approach of promoting `uv` heavily.

Installing `uv` itself on Windows wasn’t that hard — **but that’s just the beginning of the trouble**.

## Installing CrewAI: The “cl Not Found” Nightmare

Once I created the virtual environment with `uv` and ran the installation command, I hit an error:

```bash
cl : The term 'cl' is not recognized as the name of a cmdlet, function, script file, or operable program.
...
fatal error C1083: Cannot open include file: 'float.h': No such file or directory
...
```

And here's what it looked like on my end:

![crewai_00_error.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg)

After some digging, I realized that **Visual C++ Build Tools** was required for building `hnswlib`, a dependency of CrewAI.

- [Download Visual C++ Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/)

Then I got told that `float.h` was missing — which means I also needed the **Windows SDK**. I had skipped installing it to save disk space and moved parts of my environment to drive D. That decision came back to haunt me — I lost several hours because of this.

The build tool and SDK installation were painfully slow, and unless you check “C++ Desktop Development” during the Visual Studio install process, `cl.exe` won’t even be usable.

**Required Visual Build Tool screen:**
![crewai_05_VisualBuildTool.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg)

> Who said this was “just a Python project”!?

## Differences Between GitHub and Official Docs

At one point I checked the [CrewAI GitHub README](https://github.com/crewAIInc/crewAI), only to realize that the steps listed there were a bit different from the [official site](https://docs.crewai.com/installation).

Also, early tutorials required signing up for a third-party service called [serper.dev](https://serper.dev/) for search capabilities. Luckily, that requirement seems to have been removed in recent versions.

If you're using the `BaseAgent` class, the `.env` file is automatically loaded — so configuration has become somewhat easier.

## How to Pass Parameters at Runtime

CrewAI is designed to be run via `crewai run`, but many users (like me) want to pass variables at runtime — such as the topic of a post or document.

This is possible by using placeholders like `{topic}` in your task definitions (`tasks.py`), and calling:

```python
crew.kickoff(inputs={"topic": "AI LLMs"})
```

This allows you to dynamically inject values from `sys.argv` or `.env` without modifying your code every time. This is super handy if you're looping over topics or running batch tasks. I haven’t fully automated this part yet, so I’ll follow up on that later.

## What About LangChain?

After all this hassle, I briefly considered switching to **LangChain**. It’s very popular, but after reviewing its structure, it seemed… **a bit too complex**.

If your use case is focused on simple but flexible agent flows, CrewAI still has an edge in readability and control. That said, LangChain is still widely supported and has more Japanese documentation and tutorials — so I may try it later.

## Final Thoughts

CrewAI has a solid architecture and flexible agent design — but **getting started is a serious barrier**. My key pain points were:

- Mandatory use of `uv`
- `cl.exe` missing (requires Build Tools)
- Windows SDK and C++ toolchain setup
- Constantly changing documentation
- Some tutorials are outdated or inconsistent

But once you get through the painful setup, defining your flows and tasks becomes relatively intuitive and clean.

Hopefully, future updates will streamline the installation process even further.

---

## Helpful Links

- [CrewAI Official Installation Guide](https://docs.crewai.com/installation)  
- [CrewAI GitHub Repository](https://github.com/crewAIInc/crewAI)  
- [Visual C++ Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/)  
- [Serper.dev (no longer needed, but part of older tutorials)](https://serper.dev/)


<h1 data-sourcepos="2:1-2:39">
<span id="getting-stuck-while-setting-up-crewai" class="fragment"></span><a href="#getting-stuck-while-setting-up-crewai"><i class="fa fa-link"></i></a>Getting Stuck While Setting Up CrewAI</h1>
<p data-sourcepos="4:1-4:127">I recently tried out the trending agent framework <strong>CrewAI</strong>. Long story short — <strong>the installation process is a huge pain</strong>.</p>
<p data-sourcepos="6:1-6:225">Despite what many blog posts or videos might suggest, <strong>it’s not as simple as just running a few Python commands</strong>. Here's a breakdown of where I got stuck, what went wrong, and how I eventually got through it (or gave up).</p>
<h2 data-sourcepos="8:1-8:25">
<span id="is-uv-really-required" class="fragment"></span><a href="#is-uv-really-required"><i class="fa fa-link"></i></a>Is uv Really Required?</h2>
<p data-sourcepos="10:1-10:125">The official CrewAI documentation immediately recommends using <code>uv</code>, a relatively new Python package and environment manager:</p>
<ul data-sourcepos="12:1-13:0">
<li data-sourcepos="12:1-13:0"><a href="https://docs.crewai.com/installation" rel="nofollow noopener" target="_blank">Official installation instructions</a></li>
</ul>
<div class="code-frame" data-lang="bash" data-sourcepos="14:1-18:3"><div class="highlight"><pre><code>curl <span class="nt">-fsSL</span> https://astral.sh/uv/install.sh | sh
uv venv
uv pip <span class="nb">install </span>crewai
</code></pre></div></div>
<p data-sourcepos="20:1-20:186">If you’ve never heard of <code>uv</code>, you’re not alone. While Python developers are typically used to <code>venv</code>, <code>pipenv</code>, or <code>poetry</code>, CrewAI has taken the approach of promoting <code>uv</code> heavily.</p>
<p data-sourcepos="22:1-22:108">Installing <code>uv</code> itself on Windows wasn’t that hard — <strong>but that’s just the beginning of the trouble</strong>.</p>
<h2 data-sourcepos="24:1-24:54">
<span id="installing-crewai-the-cl-not-found-nightmare" class="fragment"></span><a href="#installing-crewai-the-cl-not-found-nightmare"><i class="fa fa-link"></i></a>Installing CrewAI: The “cl Not Found” Nightmare</h2>
<p data-sourcepos="26:1-26:98">Once I created the virtual environment with <code>uv</code> and ran the installation command, I hit an error:</p>
<div class="code-frame" data-lang="bash" data-sourcepos="28:1-33:3"><div class="highlight"><pre><code>cl : The term <span class="s1">'cl'</span> is not recognized as the name of a cmdlet, <span class="k">function</span>, script file, or operable program.
...
fatal error C1083: Cannot open include file: <span class="s1">'float.h'</span>: No such file or directory
...
</code></pre></div></div>
<p data-sourcepos="35:1-35:41">And here's what it looked like on my end:</p>
<p data-sourcepos="37:1-37:133"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8cdc6ab5649f4def090674894f5ad8dc" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8cdc6ab5649f4def090674894f5ad8dc" alt="crewai_00_error.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=47397425acbea256ffe4ca5aae6d5fa7 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg" loading="lazy"></a></p>
<p data-sourcepos="39:1-39:123">After some digging, I realized that <strong>Visual C++ Build Tools</strong> was required for building <code>hnswlib</code>, a dependency of CrewAI.</p>
<ul data-sourcepos="41:1-42:0">
<li data-sourcepos="41:1-42:0"><a href="https://visualstudio.microsoft.com/visual-cpp-build-tools/" rel="nofollow noopener" target="_blank">Download Visual C++ Build Tools</a></li>
</ul>
<p data-sourcepos="43:1-43:264">Then I got told that <code>float.h</code> was missing — which means I also needed the <strong>Windows SDK</strong>. I had skipped installing it to save disk space and moved parts of my environment to drive D. That decision came back to haunt me — I lost several hours because of this.</p>
<p data-sourcepos="45:1-45:182">The build tool and SDK installation were painfully slow, and unless you check “C++ Desktop Development” during the Visual Studio install process, <code>cl.exe</code> won’t even be usable.</p>
<p data-sourcepos="47:1-48:143"><strong>Required Visual Build Tool screen:</strong><br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e033121fa2ca7b8059979bd8efc74c66" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e033121fa2ca7b8059979bd8efc74c66" alt="crewai_05_VisualBuildTool.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a2629e0036ec3e60613a2bbe2f9b8900 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg" loading="lazy"></a></p>
<blockquote data-sourcepos="50:1-50:49">
<p data-sourcepos="50:3-50:49">Who said this was “just a Python project”!?</p>
</blockquote>
<h2 data-sourcepos="52:1-52:47">
<span id="differences-between-github-and-official-docs" class="fragment"></span><a href="#differences-between-github-and-official-docs"><i class="fa fa-link"></i></a>Differences Between GitHub and Official Docs</h2>
<p data-sourcepos="54:1-54:216">At one point I checked the <a href="https://github.com/crewAIInc/crewAI" rel="nofollow noopener" target="_blank">CrewAI GitHub README</a>, only to realize that the steps listed there were a bit different from the <a href="https://docs.crewai.com/installation" rel="nofollow noopener" target="_blank">official site</a>.</p>
<p data-sourcepos="56:1-56:206">Also, early tutorials required signing up for a third-party service called <a href="https://serper.dev/" rel="nofollow noopener" target="_blank">serper.dev</a> for search capabilities. Luckily, that requirement seems to have been removed in recent versions.</p>
<p data-sourcepos="58:1-58:127">If you're using the <code>BaseAgent</code> class, the <code>.env</code> file is automatically loaded — so configuration has become somewhat easier.</p>
<h2 data-sourcepos="60:1-60:36">
<span id="how-to-pass-parameters-at-runtime" class="fragment"></span><a href="#how-to-pass-parameters-at-runtime"><i class="fa fa-link"></i></a>How to Pass Parameters at Runtime</h2>
<p data-sourcepos="62:1-62:150">CrewAI is designed to be run via <code>crewai run</code>, but many users (like me) want to pass variables at runtime — such as the topic of a post or document.</p>
<p data-sourcepos="64:1-64:105">This is possible by using placeholders like <code>{topic}</code> in your task definitions (<code>tasks.py</code>), and calling:</p>
<div class="code-frame" data-lang="python" data-sourcepos="66:1-68:3"><div class="highlight"><pre><code><span class="n">crew</span><span class="p">.</span><span class="nf">kickoff</span><span class="p">(</span><span class="n">inputs</span><span class="o">=</span><span class="p">{</span><span class="sh">"</span><span class="s">topic</span><span class="sh">"</span><span class="p">:</span> <span class="sh">"</span><span class="s">AI LLMs</span><span class="sh">"</span><span class="p">})</span>
</code></pre></div></div>
<p data-sourcepos="70:1-70:262">This allows you to dynamically inject values from <code>sys.argv</code> or <code>.env</code> without modifying your code every time. This is super handy if you're looping over topics or running batch tasks. I haven’t fully automated this part yet, so I’ll follow up on that later.</p>
<h2 data-sourcepos="72:1-72:24">
<span id="what-about-langchain" class="fragment"></span><a href="#what-about-langchain"><i class="fa fa-link"></i></a>What About LangChain?</h2>
<p data-sourcepos="74:1-74:163">After all this hassle, I briefly considered switching to <strong>LangChain</strong>. It’s very popular, but after reviewing its structure, it seemed… <strong>a bit too complex</strong>.</p>
<p data-sourcepos="76:1-76:240">If your use case is focused on simple but flexible agent flows, CrewAI still has an edge in readability and control. That said, LangChain is still widely supported and has more Japanese documentation and tutorials — so I may try it later.</p>
<h2 data-sourcepos="78:1-78:17">
<span id="final-thoughts" class="fragment"></span><a href="#final-thoughts"><i class="fa fa-link"></i></a>Final Thoughts</h2>
<p data-sourcepos="80:1-80:132">CrewAI has a solid architecture and flexible agent design — but <strong>getting started is a serious barrier</strong>. My key pain points were:</p>
<ul data-sourcepos="82:1-87:0">
<li data-sourcepos="82:1-82:23">Mandatory use of <code>uv</code>
</li>
<li data-sourcepos="83:1-83:41">
<code>cl.exe</code> missing (requires Build Tools)</li>
<li data-sourcepos="84:1-84:37">Windows SDK and C++ toolchain setup</li>
<li data-sourcepos="85:1-85:35">Constantly changing documentation</li>
<li data-sourcepos="86:1-87:0">Some tutorials are outdated or inconsistent</li>
</ul>
<p data-sourcepos="88:1-88:113">But once you get through the painful setup, defining your flows and tasks becomes relatively intuitive and clean.</p>
<p data-sourcepos="90:1-90:80">Hopefully, future updates will streamline the installation process even further.</p>
<hr data-sourcepos="92:1-93:0">
<h2 data-sourcepos="94:1-94:16">
<span id="helpful-links" class="fragment"></span><a href="#helpful-links"><i class="fa fa-link"></i></a>Helpful Links</h2>
<ul data-sourcepos="96:1-99:83">
<li data-sourcepos="96:1-96:78"><a href="https://docs.crewai.com/installation" rel="nofollow noopener" target="_blank">CrewAI Official Installation Guide</a></li>
<li data-sourcepos="97:1-97:67"><a href="https://github.com/crewAIInc/crewAI" rel="nofollow noopener" target="_blank">CrewAI GitHub Repository</a></li>
<li data-sourcepos="98:1-98:88"><a href="https://visualstudio.microsoft.com/visual-cpp-build-tools/" rel="nofollow noopener" target="_blank">Visual C++ Build Tools</a></li>
<li data-sourcepos="99:1-99:83"><a href="https://serper.dev/" rel="nofollow noopener" target="_blank">Serper.dev (no longer needed, but part of older tutorials)</a></li>
</ul>


Trying CrewAI for Agentic AI — What I Struggled With


# CrewAIのセットアップでハマった話
最近、話題のエージェントフレームワーク「CrewAI」を試してみました。結論から言うと、**インストールがとにかく面倒くさい。**  
ネット上では「Pythonだけでサクッと動く」と紹介されていることもありますが、実際には**Pythonだけでは完結しない**です。  
自分用の備忘も兼ねて、どこで詰まり、どうやって解決したのかを記録しておきます。

## uv必須って本当？
CrewAI公式ドキュメントを見ると、まず目に入るのが「uv」を使ったインストール手順です。
- [公式インストール手順（英語）](https://docs.crewai.com/installation)

```bash
curl -fsSL https://astral.sh/uv/install.sh | sh
uv venv
uv pip install crewai
```

最初に「uvって何？」となったのは私だけではないはず。Pythonの仮想環境ツールとしてはvenvやpoetry、pipenvが一般的ですが、CrewAIはなぜか「uv」推し。
Windows環境ではuvのインストール自体はそこまで難しくないものの、**その後が本番**です。

## crewaiのインストール → clが通らない地獄
uvで仮想環境を作り、いざ手順を進めるとエラーが発生します。

```bash
cl : The term 'cl' is not recognized as the name of a cmdlet, function, script file, or operable program.
...
fatal error C1083: Cannot open include file: 'float.h': No such file or directory
...
```

色々進めると下記のようなエラーも出てきます。

![crewai_00_error.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg)

結論としては、CrewAIの実行においては`Visual C++ Build Tools`が必要です。

 * [Visual C++ Build Tools ダウンロード](https://visualstudio.microsoft.com/visual-cpp-build-tools/)

さらに、「float.h がない」と言われ、調べてみるとWindows SDKも未インストールでした。
私の環境はディスクサイズが小さくケチった結果。SDKオプションを外していました。しかも、Cドライブが逼迫しているのでDドライブに切り替えたりもしていて、そのような要素もあり普通の手順よりもずっと時間がかかりました。

BuilderとSDKのインストールがとにかく長い。しかも、Visual Studio Installer のオプションで `C++によるデスクトップ開発` にチェックを入れなければ `cl` も使えない。開発環境が一気に重量化します。

**インストールが必要なVisual Build Tools**
![crewai_05_VisualBuildTool.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg)

> Pythonだけで済むって誰が言った！？

## GitHubと公式の差異

そんな中、[GitHubのREADME](https://github.com/crewAIInc/crewAI)を改めて見てみると、公式サイトとは微妙に手順が違うことが発覚。

さらに、初期のチュートリアルには[serper.dev](https://serper.dev/) という謎の外部サービスのAPIキー登録も必要だったようですが、最近のバージョンでは不要になったようです。

BaseAgentを使った構成では、`.env` ファイルも自動で読み込まれるようになっており、設定ファイル周りの作業は少し楽になっています。

## main.pyからパラメータを渡したい問題
CrewAIは基本的に `crewai run` コマンドで起動する設計ですが、これに変数を外から渡したいケースも多いです。
たとえば「AI LLMs」という分析トピックをコマンド実行時に変えたい。

この問題は `crew.kickoff(inputs={"topic": "AI LLMs"}`) のようにして、タスク定義ファイル（`tasks.py`）の `description` に `{topic}`プレースホルダーを使うことで解決できるようです。
コードを書き換えずに外から `sys.argv` や `.env` 経由で `topic` を変えられるため、複数の処理をループで回すような用途にも対応できるようです。ただ、ここまで手は回っていないので後日共有します

## Langchainはどうなのか？
「CrewAIがここまで大変ならLangChainにしようかな」とも考えました。
実際、LangChainも人気がありますが、こちらは**構成要素が多すぎて複雑そう**。
シンプルなエージェント構成を考えている場合は、むしろCrewAIのほうが柔軟で扱いやすい印象がありました。

とはいえ、LangChainも注目されていますし、Crew AIと同じくらい構築例も多いので試しておいたほうがよいかもしれません。

## 感想とまとめ

CrewAIは魅力的な設計思想を持ったライブラリですが、**最初のインストールの壁が高い**です。特に以下の点で苦戦しました：

* uv強制

* clが通らない

* WindowsnのVisual C++ Builder ToolsおよびCLI/SDKが必要

* インストール手順が刷新されていて外部から取得しにくい。

* 公式の手順も一部古い

ただ、一度環境が整えば、構成はシンプルで扱いやすく、エージェントフローの定義も素直です。

今後のアップデートで環境構築がもっと簡単になることを願っています。



## 補足リンクまとめ

* [CrewAI公式インストール手順](https://docs.crewai.com/installation)

* [GitHubリポジトリ（最新）](https://github.com/crewAIInc/crewAI)

* [Visual Studio Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/)

* [serper.dev（初期チュートリアルで使われた）](https://serper.dev/)


<h1 data-sourcepos="2:1-2:47">
<span id="crewaiのセットアップでハマった話" class="fragment"></span><a href="#crewai%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E3%83%8F%E3%83%9E%E3%81%A3%E3%81%9F%E8%A9%B1"><i class="fa fa-link"></i></a>CrewAIのセットアップでハマった話</h1>
<p data-sourcepos="3:1-5:117">最近、話題のエージェントフレームワーク「CrewAI」を試してみました。結論から言うと、<strong>インストールがとにかく面倒くさい。</strong><br>
ネット上では「Pythonだけでサクッと動く」と紹介されていることもありますが、実際には<strong>Pythonだけでは完結しない</strong>です。<br>
自分用の備忘も兼ねて、どこで詰まり、どうやって解決したのかを記録しておきます。</p>
<h2 data-sourcepos="7:1-7:26">
<span id="uv必須って本当" class="fragment"></span><a href="#uv%E5%BF%85%E9%A0%88%E3%81%A3%E3%81%A6%E6%9C%AC%E5%BD%93"><i class="fa fa-link"></i></a>uv必須って本当？</h2>
<p data-sourcepos="8:1-8:122">CrewAI公式ドキュメントを見ると、まず目に入るのが「uv」を使ったインストール手順です。</p>
<ul data-sourcepos="9:1-10:0">
<li data-sourcepos="9:1-10:0"><a href="https://docs.crewai.com/installation" rel="nofollow noopener" target="_blank">公式インストール手順（英語）</a></li>
</ul>
<div class="code-frame" data-lang="bash" data-sourcepos="11:1-15:3"><div class="highlight"><pre><code>curl <span class="nt">-fsSL</span> https://astral.sh/uv/install.sh | sh
uv venv
uv pip <span class="nb">install </span>crewai
</code></pre></div></div>
<p data-sourcepos="17:1-18:121">最初に「uvって何？」となったのは私だけではないはず。Pythonの仮想環境ツールとしてはvenvやpoetry、pipenvが一般的ですが、CrewAIはなぜか「uv」推し。<br>
Windows環境ではuvのインストール自体はそこまで難しくないものの、<strong>その後が本番</strong>です。</p>
<h2 data-sourcepos="20:1-20:58">
<span id="crewaiのインストール--clが通らない地獄" class="fragment"></span><a href="#crewai%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB--cl%E3%81%8C%E9%80%9A%E3%82%89%E3%81%AA%E3%81%84%E5%9C%B0%E7%8D%84"><i class="fa fa-link"></i></a>crewaiのインストール → clが通らない地獄</h2>
<p data-sourcepos="21:1-21:86">uvで仮想環境を作り、いざ手順を進めるとエラーが発生します。</p>
<div class="code-frame" data-lang="bash" data-sourcepos="23:1-28:3"><div class="highlight"><pre><code>cl : The term <span class="s1">'cl'</span> is not recognized as the name of a cmdlet, <span class="k">function</span>, script file, or operable program.
...
fatal error C1083: Cannot open include file: <span class="s1">'float.h'</span>: No such file or directory
...
</code></pre></div></div>
<p data-sourcepos="30:1-30:66">色々進めると下記のようなエラーも出てきます。</p>
<p data-sourcepos="32:1-32:133"><a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8cdc6ab5649f4def090674894f5ad8dc" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8cdc6ab5649f4def090674894f5ad8dc" alt="crewai_00_error.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=47397425acbea256ffe4ca5aae6d5fa7 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/3376ac4f-d2b8-45b6-a2c0-5d13f379dfa8.jpeg" loading="lazy"></a></p>
<p data-sourcepos="34:1-34:93">結論としては、CrewAIの実行においては<code>Visual C++ Build Tools</code>が必要です。</p>
<ul data-sourcepos="36:2-37:0">
<li data-sourcepos="36:2-37:0"><a href="https://visualstudio.microsoft.com/visual-cpp-build-tools/" rel="nofollow noopener" target="_blank">Visual C++ Build Tools ダウンロード</a></li>
</ul>
<p data-sourcepos="38:1-39:311">さらに、「float.h がない」と言われ、調べてみるとWindows SDKも未インストールでした。<br>
私の環境はディスクサイズが小さくケチった結果。SDKオプションを外していました。しかも、Cドライブが逼迫しているのでDドライブに切り替えたりもしていて、そのような要素もあり普通の手順よりもずっと時間がかかりました。</p>
<p data-sourcepos="41:1-41:260">BuilderとSDKのインストールがとにかく長い。しかも、Visual Studio Installer のオプションで <code>C++によるデスクトップ開発</code> にチェックを入れなければ <code>cl</code> も使えない。開発環境が一気に重量化します。</p>
<p data-sourcepos="43:1-44:143"><strong>インストールが必要なVisual Build Tools</strong><br>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e033121fa2ca7b8059979bd8efc74c66" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=e033121fa2ca7b8059979bd8efc74c66" alt="crewai_05_VisualBuildTool.jpg" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F3457682%2F4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a2629e0036ec3e60613a2bbe2f9b8900 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/4b334c56-3db0-452f-b243-df6bd96ed93e.jpeg" loading="lazy"></a></p>
<blockquote data-sourcepos="46:1-46:50">
<p data-sourcepos="46:3-46:50">Pythonだけで済むって誰が言った！？</p>
</blockquote>
<h2 data-sourcepos="48:1-48:27">
<span id="githubと公式の差異" class="fragment"></span><a href="#github%E3%81%A8%E5%85%AC%E5%BC%8F%E3%81%AE%E5%B7%AE%E7%95%B0"><i class="fa fa-link"></i></a>GitHubと公式の差異</h2>
<p data-sourcepos="50:1-50:162">そんな中、<a href="https://github.com/crewAIInc/crewAI" rel="nofollow noopener" target="_blank">GitHubのREADME</a>を改めて見てみると、公式サイトとは微妙に手順が違うことが発覚。</p>
<p data-sourcepos="52:1-52:232">さらに、初期のチュートリアルには<a href="https://serper.dev/" rel="nofollow noopener" target="_blank">serper.dev</a> という謎の外部サービスのAPIキー登録も必要だったようですが、最近のバージョンでは不要になったようです。</p>
<p data-sourcepos="54:1-54:181">BaseAgentを使った構成では、<code>.env</code> ファイルも自動で読み込まれるようになっており、設定ファイル周りの作業は少し楽になっています。</p>
<h2 data-sourcepos="56:1-56:52">
<span id="mainpyからパラメータを渡したい問題" class="fragment"></span><a href="#mainpy%E3%81%8B%E3%82%89%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E6%B8%A1%E3%81%97%E3%81%9F%E3%81%84%E5%95%8F%E9%A1%8C"><i class="fa fa-link"></i></a>main.pyからパラメータを渡したい問題</h2>
<p data-sourcepos="57:1-58:94">CrewAIは基本的に <code>crewai run</code> コマンドで起動する設計ですが、これに変数を外から渡したいケースも多いです。<br>
たとえば「AI LLMs」という分析トピックをコマンド実行時に変えたい。</p>
<p data-sourcepos="60:1-61:266">この問題は <code>crew.kickoff(inputs={"topic": "AI LLMs"}</code>) のようにして、タスク定義ファイル（<code>tasks.py</code>）の <code>description</code> に <code>{topic}</code>プレースホルダーを使うことで解決できるようです。<br>
コードを書き換えずに外から <code>sys.argv</code> や <code>.env</code> 経由で <code>topic</code> を変えられるため、複数の処理をループで回すような用途にも対応できるようです。ただ、ここまで手は回っていないので後日共有します</p>
<h2 data-sourcepos="63:1-63:33">
<span id="langchainはどうなのか" class="fragment"></span><a href="#langchain%E3%81%AF%E3%81%A9%E3%81%86%E3%81%AA%E3%81%AE%E3%81%8B"><i class="fa fa-link"></i></a>Langchainはどうなのか？</h2>
<p data-sourcepos="64:1-66:147">「CrewAIがここまで大変ならLangChainにしようかな」とも考えました。<br>
実際、LangChainも人気がありますが、こちらは<strong>構成要素が多すぎて複雑そう</strong>。<br>
シンプルなエージェント構成を考えている場合は、むしろCrewAIのほうが柔軟で扱いやすい印象がありました。</p>
<p data-sourcepos="68:1-68:163">とはいえ、LangChainも注目されていますし、Crew AIと同じくらい構築例も多いので試しておいたほうがよいかもしれません。</p>
<h2 data-sourcepos="70:1-70:21">
<span id="感想とまとめ" class="fragment"></span><a href="#%E6%84%9F%E6%83%B3%E3%81%A8%E3%81%BE%E3%81%A8%E3%82%81"><i class="fa fa-link"></i></a>感想とまとめ</h2>
<p data-sourcepos="72:1-72:169">CrewAIは魅力的な設計思想を持ったライブラリですが、<strong>最初のインストールの壁が高い</strong>です。特に以下の点で苦戦しました：</p>
<ul data-sourcepos="74:1-83:0">
<li data-sourcepos="74:1-75:0">
<p data-sourcepos="74:3-74:10">uv強制</p>
</li>
<li data-sourcepos="76:1-77:0">
<p data-sourcepos="76:3-76:19">clが通らない</p>
</li>
<li data-sourcepos="78:1-79:0">
<p data-sourcepos="78:3-78:62">WindowsnのVisual C++ Builder ToolsおよびCLI/SDKが必要</p>
</li>
<li data-sourcepos="80:1-81:0">
<p data-sourcepos="80:3-80:83">インストール手順が刷新されていて外部から取得しにくい。</p>
</li>
<li data-sourcepos="82:1-83:0">
<p data-sourcepos="82:3-82:32">公式の手順も一部古い</p>
</li>
</ul>
<p data-sourcepos="84:1-84:132">ただ、一度環境が整えば、構成はシンプルで扱いやすく、エージェントフローの定義も素直です。</p>
<p data-sourcepos="86:1-86:99">今後のアップデートで環境構築がもっと簡単になることを願っています。</p>
<h2 data-sourcepos="90:1-90:27">
<span id="補足リンクまとめ" class="fragment"></span><a href="#%E8%A3%9C%E8%B6%B3%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%BE%E3%81%A8%E3%82%81"><i class="fa fa-link"></i></a>補足リンクまとめ</h2>
<ul data-sourcepos="92:1-98:83">
<li data-sourcepos="92:1-93:0">
<p data-sourcepos="92:3-92:78"><a href="https://docs.crewai.com/installation" rel="nofollow noopener" target="_blank">CrewAI公式インストール手順</a></p>
</li>
<li data-sourcepos="94:1-95:0">
<p data-sourcepos="94:3-94:74"><a href="https://github.com/crewAIInc/crewAI" rel="nofollow noopener" target="_blank">GitHubリポジトリ（最新）</a></p>
</li>
<li data-sourcepos="96:1-97:0">
<p data-sourcepos="96:3-96:89"><a href="https://visualstudio.microsoft.com/visual-cpp-build-tools/" rel="nofollow noopener" target="_blank">Visual Studio Build Tools</a></p>
</li>
<li data-sourcepos="98:1-98:83">
<p data-sourcepos="98:3-98:83"><a href="https://serper.dev/" rel="nofollow noopener" target="_blank">serper.dev（初期チュートリアルで使われた）</a></p>
</li>
</ul>


ARTICLES