PDF AI SAASアプリ
PDF AI SaaSフルスタックアプリは、next.jsフレームワーク、Shadcn UI、Openai、Langchain、Stripeなどで構築されています。このアプリを使用すると、ユーザーはサブスクリプション計画に基づいてサイズ制限でPDFドキュメントをアップロードし、このドキュメント内の特定の情報を検索できます。認証されたユーザーのみがプラットフォームを使用できます。 2つのオプションがあります。ユーザーにより多くの機能を提供するための使用が限られている無料プランとPROプランです。
デモビデオ:リンク
特徴
- ユーザーがプラットフォームにログインできるようにします
- ユーザーがPDFドキュメントをアップロードして、この内部のコンテンツを検索できるようにします
- 直感的なドラッグn 'ドロップアップロード
- アップロードされたPDFドキュメントを表示するPDFビューア
- TypeScriptで100%書かれています
- Opeanaiテキスト埋め込みモデルは、PDFファイルとGPT-4oを埋め込むためにドキュメントとチャットするために使用されています
- Langchainは、LLMをアプリに統合するために使用します
- Pinecone Vectorデータベースは、埋め込みデータをベクトル空間に保存するために使用されています
- MongoDB NOSQLデータベースは、ユーザー、ドキュメント、チャットの情報を保存するために使用されています
- ストライプ支払いは、支払いのステータスに関する情報を取得するために、支払いのためにWebhookで使用されます
- next.jsフレームワークは、フルスタックアプリを作成するために使用されます
- Tailwind CSSは、Shadcn UIコンポーネントライブラリで使用されて美しいデザインを構築します
- Prisma ormは、データベースとの通信に使用されます
ローカルリポジトリから実行する方法
- リポジトリをクローンします
- ターミナルで
npm installコマンドを実行します - 環境変数向けに.env.localファイルを自動的に作成するAuth Secretを生成します(後で使用して秘密を入力できます):
npx auth secret - Google Oauthをセットアップ:Google
- ストライプアカウントを作成し、キーリンクを取得します。
- Stripe WebHookエンドポイントリンクを追加します。
- ストライプ請求ポータルリンクをアクティブにします。
- Pineconeインデックスリンクを作成します。
- .envファイルに環境変数を追加します:
AUTH_SECRET="<YOUR-SECRET>"
AUTH_GOOGLE_ID="<YOUR-GOOGLE-ID>"
AUTH_GOOGLE_SECRET="<YOUR-GOOGLE-SECRET>"
DATABASE_URL="<YOUR-DATABASE-URL>"
UPLOADTHING_TOKEN="<YOUR-UPLOADTHING-TOKEN>"
PINECONE_API_KEY="<YOUR-PINECONE-TOKEN>"
OPENAI_API_KEY="<YOUR-OPENAI-TOKEN>"
STRIPE_SECRET_KEY="<YOUR-STRIPE-SECRET-TOKEN>"
STRIPE_WEBHOOK_SECRET="<YOUR-STRIPE-WEBHOOK-SECRET-TOKEN>"
STRIPE_PRODUCT_PRICE_ID="<YOUR-STRIPE-PRO-PLAN-PRICE-ID>"
- Stripeの機能を備えた新製品を作成:リンク
npm run prisma:generate-
npm run prisma:pushしてdbをmongodbにプッシュします - ターミナルで
npm run devコマンドを実行します http://localhost:3000/
便利なリンクと情報
- Prisma Env.Local Handling:
- PrismaとMongodb Edgeの互換性:
- auth.jsコードの例:
- Googleプロバイダー設定ページ:
- ストライプ、チェックアウトセッション、webhook:
- Github#1
- Github#2
- LinkedIn.com
- dev.to
- medium.com
- ストライプテストカード:
依存関係
- next.js
- 反応します
- domを反応させます
- タイプスクリプト
- タンスタッククエリ
- Lucideアイコン
- Tailwind CSS
- shadcn ui
- 反応ドロップゾーン
- PDFを反応します
- ソナー
- 日付fns
- シャープな画像の最適化
- auth.js
- プリスマ
- mongodb
- Openai API
- ラングチェーン
- 松ぼっくり
- アップロード
- pdf-parse
- ストライプ
レイアウト
