セットアップガイド
BuildKitの実際のセットアップ方法をご紹介します。購入後は、このガイドに従って10分で起動できます。
必要環境
開発環境
- • Node.js 18 以上
- • npm または pnpm/yarn
外部サービス
- • Stripe アカウント
- • Resend アカウント
クイックスタート
# 1. 依存関係をインストール npm install # 2. 環境変数ファイルをコピー cp .env.example .env.local # 3. 環境変数を編集（下記参照） # .env.local を編集 # 4. 開発サーバーを起動 npm run dev
http://localhost:3000 にアクセスすると LP を確認できます。
環境変数設定
.env.example を参考に .env.local を準備します。
| 変数名 | 用途 |
|---|---|
| NEXT_PUBLIC_SITE_URL | Stripe リダイレクト用の URL |
| STRIPE_SECRET_KEY | Stripe サーバーサイド API キー |
| STRIPE_PRICE_ID | Stripe で発行した買い切り商品の Price ID |
| RESEND_API_KEY | お問い合わせフォーム送信用設定 |
| NEXT_PUBLIC_CONTACT_EMAIL | お問い合わせ先メールアドレス |
Stripe 連携（買い切り）
1
Stripe ダッシュボードで「プロダクト」→「価格」を作成し、price_xxx を取得します（例: 5,980 円の買い切り）。
2
.env.local の STRIPE_PRICE_ID に貼り付け（例: STRIPE_PRICE_ID=price_5980）。
📬Resend 連携
1
Resend コンソールで API キーを発行し、RESEND_API_KEY と RESEND_FROM_EMAIL を設定。
2
登録する送信アドレス（カスタムドメイン）を認証しておくと本番運用がスムーズです。
AI 連携
BuildKitでは、主要なAIサービスとの連携が簡単に設定できます。
OpenAI
GPT-3.5/GPT-4との連携。チャットボットやテキスト生成に最適。
OPENAI_API_KEY=sk-...Anthropic Claude
Claude-3との連携。長文処理や分析タスクに優れています。
ANTHROPIC_API_KEY=sk-ant-...Google Gemini
Gemini Proとの連携。マルチモーダル対応で画像解析も可能。
GOOGLE_AI_API_KEY=...使用例（OpenAI）
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
const completion = await openai.chat.completions.create({
messages: [{ role: "user", content: "Hello!" }],
model: "gpt-3.5-turbo",
});同梱機能
Next.js App Router（TypeScript/Tailwind 構成）
Stripe 買い切り決済 Checkout
Resend 経由の購入完了メール送信
販売 LP 下地（ヒーロー/機能/価格セクション）
お問い合わせフォーム
日本語 EULA・セットアップドキュメント