多くの起業家、デザイナー、スタジオは現在、Cursor、Claude Code、v0、Lovable（いわゆる「Vibe Coding」）といったAIコーディングツールを活用し、インタラクティブなビジュアルを備えた高度にカスタマイズされたブランドサイトを作成し、VercelやCloudflare Pagesで公開しています。
しかし、コピーライティング、プロジェクト写真、ブログ記事をすべてハードコーディングしてしまうと、わずかな更新のたびにコードの全デプロイが必要になります。さらに、フォームのスパム対策や問い合わせ管理ダッシュボードといった機能も利用できなくなります。
最も効率的なアプローチは、「AIにプロジェクトのフロントエンドを構築させ、コンテンツ、ブログ、問い合わせフォームの管理はKanorioに任せる」ことです。以下の3つのステップに従うだけで、AIが統合を自動的に処理します。
I am building a brand website + blog using an external frontend and want to use this Kanorio site as my CMS backend. Please help me: 1. Call site.update_developer_settings to enable headlessEnabled: true, and tell me the permanent systemHost URL for this site. 2. Create the necessary data collections (e.g., projects, faqs) and populate them with a few sample entries. 3. Check if the site already has a "Contact Us" form (forms.list) and list the formId and field structure for me.
完了すると、AIはサイトのすべてのコレクションフィールド、API URL、フォームIDを把握した状態になります。
CursorまたはClaude Codeでフロントエンドプロジェクト（Next.jsやAstroなど）を開き、以下のプロンプトを貼り付けます。AIはKanorioの自己記述型スキーマエンドポイント（/api/v1/collections）を自動的に読み取り、すべての統合コードを記述します。
Help me connect this frontend project to the Content Delivery API of the Kanorio site (base URL: https://s-xxx.kanorio.com): 1. All public content fetching should be keyless (never put knr_pat_ into frontend environment variables). 2. First, fetch GET /api/v1/collections to understand the fields for each collection and the blog system collection, then generate TypeScript types for me. 3. For images and files, retrieve the public CDN URL and dimensions from assets[assetId].url at the top level of the response. 4. For blog post lists and detail pages, fetch /api/v1/collections/blog/items (include expand=authors,categories,tags and formats=markdown,html). Use filter[categories][has_slug]=category-slug for filtering. 5. For the contact form, fetch GET /api/v1/forms/{formId}/challenge to get the challenge, then POST to /api/v1/forms/{formId}/submit.
MCP非対応の外部AIツール（v0、Lovable、Boltなど）を使用している場合は、システムURLとKanorioのAI仕様インデックスURL https://kanorio.com/llms.txt を提供してください。
My backend is a Kanorio Headless CMS with the API base URL: https://s-xxxxxxxxxxxx.kanorio.com Please read https://kanorio.com/llms.txt to understand the Kanorio Content Delivery API format, then read https://s-xxxxxxxxxxxx.kanorio.com/api/v1/collections to see my data structure. Help me integrate my homepage projects, blog, and contact form with real data.
フロントエンドをVercelまたはCloudflare Pagesにデプロイしたら（本番環境URLが https://www.yourbrand.com であると仮定）、Cursorに戻り、AIに設定の完了を依頼します。
My frontend is now deployed to https://www.yourbrand.com. Please help me: 1. Add https://www.yourbrand.com to the allowedOrigins (CORS whitelist) for this Kanorio site and set externalStorefrontUrl to https://www.yourbrand.com. 2. Add a /api/revalidate route to my frontend project to receive Kanorio Webhooks (verify X-Kanorio-Signature and execute revalidateTag for payload.data.cacheTags), then use webhooks.create to register https://www.yourbrand.com/api/revalidate with Kanorio.
完了後：
いいえ。Content Delivery APIは、デフォルトで http://localhost:<任意のポート> および http://127.0.0.1:<任意のポート> からのすべてのクロスオリジンリクエストを自動的に許可します。ローカルテスト中は直接呼び出すことができます。本番環境やプレビューURL（例：*.vercel.app）にデプロイした後は、そのURLを"サイト設定 › 開発者"の「許可されたオリジン」セクションに追加してください。
絶対に避けてください。 公開コンテンツの取得やフォーム送信には、キー不要のContent Delivery API（/api/v1/*）を使用します。knr_pat_ キーはサイトコンテンツの変更や削除権限を付与するものです。フロントエンドコードや NEXT_PUBLIC_* 環境変数には決して含めないでください。