Prompt Saver

Prompt Saver - LLM プロンプトインテリジェンスプラットフォーム

公開中： https://promptsaver.online/

Chrome 拡張機能： Chrome に追加 — Claude、ChatGPT、または Gemini で // と入力すると、保存済みのプロンプトを挿入できます。

LLM プロンプトの保存、バージョン管理、検索を行うプロンプト管理ツールです。Next.js、Neon Postgres、温かみのあるストーン／ティールのデザインシステムを使用して構築されています。

機能（MVP - フェーズ 1）

• プロンプト作成：自動バージョン管理でプロンプトを作成、編集します
• 複数 LLM でのテスト：1 つのインターフェースから複数の LLM プロバイダーに対してプロンプトを実行します
• プロンプトライブラリ：プロンプトの全文検索とインテリジェントな分類を行います
• ワークスペースベースの整理：専用のワークスペース内でプロンプトを整理します

MCP サーバー（Claude Code 連携）

Prompt Saver は、/api/mcp でリモートの MCP サーバーを実行します。 これにより、Claude Code のセッションからターミナルを離れずに、プロンプトの検索、読み取り、保存ができます。

接続

1. https://promptsaver.online/ にサインインし、Settings をクリックしてトークンを生成します。トークンの生データが表示されるのは一度だけです。すぐにコピーしてください。保存されるのは SHA-256 ハッシュのみのため、トークンを紛失すると復元できません。同じページでトークンを取り消し、新しいトークンを作成してください。

2. トークンのページには、トークンが入力済みの登録コマンドが表示されます。次のような形式です。

   claude mcp add --transport http prompt-saver --scope user \
     https://promptsaver.online/api/mcp \
     --header "Authorization: Bearer ps_..."
   

   --scope user を指定すると、現在のプロジェクトだけでなく、すべてのプロジェクトに対してサーバーを一度だけ登録します。

ツール

接続すると、Claude Code はプロンプトライブラリに対して 5 つのツールを呼び出せます。

• search_prompts(query, limit?) — タイトル、説明、コンテンツ、タグを検索します。概要（id、title、description、tags、updated_at）のみを返し、本文全体は返しません。limit のデフォルト値は 20、上限は 50 です。
• get_prompt(id) — 1 つのプロンプトの全文を取得します。
• create_prompt(title, content, description?, tags?) — 最初のバージョンとともに新しいプロンプトを保存します。
• update_prompt(id, ...) — 新しいバージョンを作成せずに、プロンプトのドラフトをその場で更新します。
• save_version(id, content, change_summary?) — 既存のプロンプトの変更不可な新しいバージョンを保存します。

削除ツールはありません。

お気に入りのプロンプトをスラッシュコマンドとして使う

お気に入りに設定したプロンプト（ウェブアプリの星印）は、タイトルを元にした名前のスラッシュコマンドとしても登録されます。たとえば、「Daily Planning」は /mcp__prompt-saver__daily-planning になります。アーカイブ済みのお気に入りは対象外です。各コマンドは任意の context 引数を 1 つ受け取り、プロンプト本文の末尾に追加します。

/mcp__prompt-saver__daily-planning auth refactor

お気に入りは、セッション接続時に一度だけ読み込まれます。 プロンプトに星を付けても、すでに実行中のセッションにスラッシュコマンドは追加されません。新しく星を付けたプロンプトを読み込むには、新しいセッションを開くか、/mcp を実行して再接続してください。

コールドスタート

このアプリを支えるデータベース（Neon Postgres）は、アイドル状態になるとコンピューティングリソースをゼロまで縮小します。しばらく操作がなかった後の最初の MCP リクエストは、データベースの起動中、通常よりかなり時間がかかる場合があります。以降のリクエストは高速です。

Chrome 拡張機能

Chrome 拡張機能は extension/ にあります。任意のウェブページや AI チャットインターフェースからプロンプトを保存できます。

セットアップと開発

cd extension
npm install
npm run dev

開発ビルドは展開済みで、Chrome に読み込める状態です。設定するには、ウェブアプリの環境変数 NEXT_PUBLIC_EXTENSION_IDS に拡張機能の ID（展開時に chrome://extensions/ で確認できます）を含めてください。適切な形式の任意の拡張機能 ID を許可するには、* を設定します。展開時に ID が変わる間は便利ですが、その場合、どの拡張機能でもサインイン済みのユーザーに接続を要求できるようになります（接続ページに要求元の ID が表示されます）。そのため、本番環境では明示的なリストを使用してください。

API

この拡張機能は、ウェブアプリの /api/v1/prompts ルートにある以下のエンドポイントを呼び出します。

Method	Path	Purpose	Headers
GET	/api/v1/prompts	プロンプトを一覧表示します。?q=<query>&limit=<n> を指定できます（limit ≤200）。	Authorization: Bearer ps_<token>
POST	/api/v1/prompts	新しいプロンプトを作成します。	Authorization: Bearer ps_<token>
GET	/api/v1/prompts/:id	ID を指定して単一のプロンプトを取得します。	Authorization: Bearer ps_<token>
PATCH	/api/v1/prompts/:id	プロンプトを更新します。	Authorization: Bearer ps_<token>

すべてのエンドポイントで、ps_ をプレフィックスとするベアラートークンが必要です。

プライバシーの詳細については、/privacy をご覧ください。

技術スタック

• フロントエンド：Next.js 16、React 18、TypeScript（厳格モード）
• スタイリング：Tailwind CSS（WCAG 2.1 AA に準拠したアクセシビリティ）
• ストレージ：Drizzle ORM 経由の Neon Postgres（サーバーサイド、ユーザーごとに分離）
• 認証：NextAuth.js 経由の Google OAuth
• テスト：Jest + React Testing Library
• コード品質：ESLint、Prettier、TypeScript 厳格モード

前提条件

• Node.js 18.17+ または 20.x
• npm 9+（または --legacy-peer-deps を指定して npm ci を実行）

セットアップ

1. クローンしてインストール

git clone <repository-url>
cd prompt-saver
npm install --legacy-peer-deps

2. 環境変数を設定

.env.example を基に .env.local を作成します。

cp .env.example .env.local

必須の変数：

NEXTAUTH_SECRET=your-secret-key-here
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
DATABASE_URL=postgresql://...-pooler.../neondb?sslmode=require
DATABASE_URL_UNPOOLED=postgresql://.../neondb?sslmode=require
[email protected]

警告： ALLOWED_EMAILS を設定しない場合、Google アカウントを持つ誰もがサインインして、自分のワークスペースを取得できます。外部からアクセスできる場所にデプロイする前に、必ずメールアドレスをカンマ区切りで指定した許可リストを設定してください。

3. 開発サーバーを起動

npm run dev

ブラウザーで http://localhost:3000 にアクセスします。

開発

スクリプト

# Start development server
npm run dev

# Build for production
npm run build

# Run production server
npm start

# Run tests
npm run test
npm run test:watch    # Watch mode
npm run test:coverage # With coverage

# Linting
npm run lint
npm run lint:fix

# Code formatting
npm run format
npm run format:check

# Type checking
npm run type-check

プロジェクト構成

src/
├── app/              # Next.js App Router pages and layouts
├── components/       # React components
├── lib/              # Utilities, hooks, services, and business logic
│   ├── api/          # API response wrappers
│   ├── auth/         # Authentication logic
│   ├── db/           # Database repositories and schemas
│   ├── hooks/        # Custom React hooks
│   ├── services/     # Business logic services
│   └── utils/        # Helper utilities
└── types/            # TypeScript type definitions

tests/
├── unit/             # Unit tests for utilities and hooks
├── integration/      # Integration tests
└── contract/         # API contract tests

コード品質基準

TypeScript 厳格モード

• 正当な理由がない限り、any 型を使用しない
• 暗黙の戻り値はすべて型を指定する
• 厳格な null チェックを有効にする
• プロパティの厳格な初期化を必須とする

ESLint ルール

• すべてのユーティリティとフックで、テストカバレッジを 80% 以上にする
• 関数の複雑度は最大 10 サイクロマティックポイント
• 本番コードで console 文を使用しない（警告のみ）
• 未使用の変数やインポートを残さない

テスト要件

• すべてのユーティリティに単体テストを用意する
• すべてのコンポーネントに統合テストを用意する
• API ルートにコントラクトテストを用意する
• TDD アプローチ：先にテストを書き、実装前に失敗することを確認する

パフォーマンス目標

• Core Web Vitals：LCP ≤2.5s、FID ≤100ms、CLS ≤0.1
• バージョン作成：<100ms（アトミック）
• 検索応答：プロンプト 10,000 件で <200ms
• API 応答時間（p95）：<200ms
• LLM の同時実行数：100 以上の並列実行

アクセシビリティ

• WCAG 2.1 AA に準拠
• レスポンシブデザイン（320px～1920px 以上）
• キーボード操作に対応
• スクリーンリーダーで利用しやすいコンポーネント

デプロイ

ビルド

npm run build

環境変数（本番環境）

デプロイ先のプラットフォームで以下を設定します。

NEXTAUTH_SECRET=<generate-with-: openssl rand -base64 32>
NEXTAUTH_URL=https://your-production-domain.com
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
DATABASE_URL=postgresql://...-pooler.../neondb?sslmode=require
DATABASE_URL_UNPOOLED=postgresql://.../neondb?sslmode=require
[email protected]

警告： ALLOWED_EMAILS を設定しない場合、Google アカウントを持つ誰もがサインインして、自分のワークスペースを取得できます。必ず設定してください。

CI/CD

GitHub Actions は、プッシュ時とプルリクエスト時に以下を自動実行します。

• TypeScript の型チェック
• ESLint による静的解析
• Prettier によるフォーマット
• Jest テストスイート
• Next.js のビルド検証

main ブランチへのマージ前に、テストがすべて成功している必要があります。

コントリビューション

1. 001-prompt-platform から機能ブランチを作成します
2. TypeScript 厳格モードのガイドラインに従います
3. 先にテストを書きます（TDD アプローチ）
4. すべてのテストが成功することを確認します：npm test
5. リントが成功することを確認します：npm run lint
6. プルリクエストを送信します

アーキテクチャ上の決定

リポジトリパターン

データベースへのアクセスは、src/lib/db/repositories/types.ts にあるインターフェースを実装するリポジトリクラスに限定されています。呼び出し元はサーバーアクションのみであり、クライアントコンポーネントがデータベースにアクセスすることはありません。

不変のバージョン

PromptVersions は設計上、不変です。インプレース編集はできません。これにより、明確な監査証跡とバージョン履歴を保てます。

ワークスペースの分離

ユーザーごとに、初回サインイン時に作成される非公開ワークスペースが1つ割り当てられます。すべてのクエリは、クライアントから渡された値ではなく、getCurrentContext() が返すワークスペース ID にスコープされます。

ロードマップ

• フェーズ 2: 基盤となるインフラストラクチャ（データベース、認証、API パターン）
• フェーズ 3: ユーザーストーリー 1 - プロンプトの作成とバージョン管理
• フェーズ 4: ユーザーストーリー 2 - マルチ LLM の実行とテスト
• フェーズ 5: ユーザーストーリー 3 - プロンプトライブラリと検索
• フェーズ 6: ユーザーストーリー 4 - コラボレーションと共有
• フェーズ 7: ユーザーストーリー 5 - プロンプトのテストと評価

ライセンス

MIT — LICENSE を参照してください。

サポート

問題や質問がある場合は、開発チームにお問い合わせください。