Build a Custom Frontend with AI

Many entrepreneurs, designers, and studios now use AI coding tools like Cursor, Claude Code, v0, or Lovable (often called Vibe Coding) to create highly customized brand websites with interactive visuals, deploying them on Vercel or Cloudflare Pages.

However, if you hardcode all your copy, project photos, and blog posts, every minor update requires a full code deployment. Plus, you lose out on features like form spam protection and a contact management dashboard.

The most efficient approach is: "Let AI build the frontend in your project, while Kanorio manages the content, blog, and contact forms." Just follow these three steps, and AI will handle the integration for you.

Step 1: Connect Your AI Assistant to Kanorio and Prepare Content

1. Follow the guide to link your Cursor or Claude Code to Kanorio.
2. Create a new website in your dashboard (no need to publish) and paste this prompt into your chat to have AI set up Headless mode and the data structure:

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.

Once done, the AI will have all the collection fields, API URLs, and form IDs for your site.

---

Step 2: Have AI Integrate Content and Form APIs into Your Frontend

Open your frontend project (e.g., Next.js or Astro) in Cursor or Claude Code and paste the prompt below. The AI will automatically read Kanorio's self-describing Schema endpoint (/api/v1/collections) and write all the integration code:

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.

If you are using an external AI tool without MCP support (like v0, Lovable, or Bolt), simply provide your System URL and Kanorio's AI spec index 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.

---

Step 3: Deploy and Configure Cross-Origin Settings and Auto-Updates

Once you have deployed your frontend to Vercel or Cloudflare Pages (assuming your production URL is https://www.yourbrand.com), return to Cursor and tell the AI to finish the setup:

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.

Once finished:

• When you or your team update tables in "Data & Collections" or publish new posts in "Content › Blog" in the Kanorio dashboard, your external site will update automatically within seconds.
• Visitor contact form submissions will go directly to "Marketing › Online Forms" and "Customers › Contacts" in your Kanorio dashboard, and you will receive notification emails.

Related Documentation