Connect Claude Code¶

Overview¶

Connect Claude Code (an AI assistant) to your store so you can build and edit your website pages just by chatting: "update my How It Works page", "build a landing page for the fall promo", "change the hero headline on my home page." Claude Code makes the changes in your Page Builder and you go back and forth with it until the page is right.

This connection only ever touches page content: your pages, their blocks, your brand colors and fonts, and your navigation menus. It cannot see or change your customers, orders, payments, or email, and nothing it does is permanent. Removing a page or a block just hides it from the live site (it is kept, and you can bring it back), and new pages are created as unpublished drafts, so nothing goes live until you say so.

You reach this setup at Settings → Page Builder → Connect Claude Code.

Primary Features¶

Your own private keys. Each page-builder key belongs to the admin who generated it, so everything Claude Code does with it is logged as your change. Treat it like a password.
Nothing to install. The connection runs over the web: your AI client talks to your store's own page-builder endpoint, so there is no program to install or run on your computer. Copy the ready-made claude mcp add --transport http ... command (or an .mcp.json block) and paste it into Claude Code to connect.
Works with other AI clients. Any client that can connect to a remote MCP server works the same way (Claude Code, opencode, Cursor, an OpenAI agent), using the same endpoint and the same key.
Test connection. Confirm your key can reach this store's page builder before you start; the test runs in your browser, from this page.
Guided setup right after you generate a key. Instead of a wall of information, the page switches to a short wizard: connect, test, done. Normal visits get the full page.
Three tabs, so the page stays short. Your keys (generate, set up, revoke), Connect a client (the command and config block for any AI client), and Using it (what it can do, plus the sample prompts).
Sample prompts to start from. The Using it tab gives you ready-made first messages to copy into Claude Code: one for getting introduced and shown around, one for editing a page you already have, and one for creating a new page. Each one tells the assistant to do the work with the page-builder tools rather than making a mockup.
Name your keys, set up again, and revoke them. Give each key a name (a laptop, a project) so you know what it is for. The key list shows when each was created and last used. Setup reopens the setup instructions for that key at any time (the full key itself is never shown again, see below), and you can revoke any key you no longer want; a revoked key stops working immediately.
Menus and existing pages too. Alongside pages, it can edit your Page Builder navigation menus, and read a page that already exists on your site so it can rebuild that page as a Page Builder page.
Images are filled in for you. If a newly built page leaves an image field empty, a tasteful stock photo (produce, farm, food) is filled in so nothing renders as a blank grey slot. An image you or Claude Code supply is never replaced, and you can swap any auto-filled photo for your own from the Page Builder.
Follows your layout rules. It is told the house layout rules (never stack two background-photo blocks back to back, and keep heroes at their natural height rather than full screen on every page) and each change it makes is checked against them, so a layout that breaks a rule is reported back and fixed before you publish.
Can tell Kiva Logic when something is missing. If Claude Code hits a limit (a block or field you needed does not exist) or you want to report a bug or request a feature, it can send that note to the Kiva Logic team, with your own words. Your key identifies you, so the team already knows who sent it and replies come back to your admin email. It is the one channel back to the team from this connection.

Common Use Cases¶

Connect Claude Code (one time):

Open Settings → Page Builder → Connect Claude Code.
Click Generate a new key, give it a name (the box is pre-filled with today's date, so click it and type over it if you like), then click Generate key.
Copy the command now. The full key is shown only this once; if you leave the page without copying it, generate another key.
Click Copy command and paste it into your terminal where Claude Code runs. (Using a config file instead, or reconnecting? Open Other clients, reconnecting, or local dev and copy the .mcp.json block.)
Click Test connection to confirm it works, then click the Done button to go to your keys.
Open the Using it tab, copy one of the Sample prompts (start with New here? Start with this), and paste it in as your first message to Claude Code.

Build or edit a page: Once connected, just ask, for example:

"List my pages, then show me what's on my How It Works page."
"Build a new landing page for a fall produce promo. Leave it as a draft so I can review it."
"On my home page, change the hero headline to 'Local produce, delivered weekly.'"
"Rebuild my old How It Works page as a Page Builder page. Leave it as a draft."
"Add a Recipes link to my main navigation menu."

Claude Code will create or update the page and give you a link. New pages start as drafts. Review the draft, then tell Claude Code to publish it (or publish it yourself from the Page Builder).

Troubleshooting¶

"You have no keys yet." Generate one first; the connection command appears once a key exists.
The full key is gone. The key is only shown once, when you generate it. Generate a new key and revoke the old one.
Connection test fails. Double-check you pasted the whole command, including the key. If you revoked that key, generate a new one and reconnect Claude Code with the new command.
Claude Code says kiva-pagebuilder already exists. You are connecting a store you connected before. Remove the old connection first (claude mcp remove kiva-pagebuilder), then run the new command. The same block is shown on the page for copy-paste.
You want to stop using it entirely. Revoking the key stops it working immediately, but your AI client still has the connection configured. Do both: revoke the key on the Your keys tab, and run claude mcp remove kiva-pagebuilder (or delete the kiva-pagebuilder block from your client's .mcp.json and restart it). Both halves are spelled out at the bottom of the Your keys tab.
Where do I find the setup instructions again? Click Setup next to a key. It shows the command and config block for that key with a PASTE-YOUR-KEY-HERE placeholder, because the full key is only ever shown once, when you create it. The same command and config block, for the key you already saved, are on the Connect a client tab.
A page isn't live. New pages are drafts. Publish it from the Page Builder, or ask Claude Code to publish it.
Want to undo a change? Just ask Claude Code to change it back. If a page was removed, nothing was destroyed: it is only hidden, and asking Claude Code to bring the page back restores it with its blocks intact.

Recent Updates¶

2026-09-29¶

No software to install. The connection is now a web endpoint on your own store, so Claude Code reaches your page builder over the network with no Node or helper program on your computer. The setup command is now claude mcp add --transport http ... with your key in a header, and the config-file block uses "type": "http". The same endpoint and key work for any AI client that supports a remote MCP server.
Install instructions per key. Each key in the list has an Install button that reopens its setup command and config block, with a PASTE-YOUR-KEY-HERE placeholder in place of the secret (the full key is still shown only once, when you create it).
Disconnect steps are on the page. A new Disconnect section spells out both halves of turning it off: revoke the key here, and remove the server from your AI client (claude mcp remove kiva-pagebuilder, or delete the block from your .mcp.json).
Three sample prompts at the top of the page. Instead of one starter message, the page now offers a copy-paste prompt for each common goal: New here? Start with this (introduces the assistant, lists your live and draft pages, suggests what to ask next), Edit an existing page, and Create a new page. Each tells the assistant to make the change with the page-builder tools and hand back the real page URL, and not to build a mockup or preview file. The Try it step now points to these prompts.
Clearer generate flow. Generating a key now opens a small window with the name box pre-filled with today's date, and the page no longer re-submits if you refresh it.
New pages never have blank image slots. A newly built page automatically fills any empty image field with a tasteful stock produce/farm photo. An image you supply is left alone, and any auto-filled photo can be swapped from the Page Builder.
Removed blocks are now hidden rather than destroyed, like removed pages: a block the AI takes off a page is kept and can be restored (ask Claude Code to bring it back, or switch it back on in the Page Builder).
The page is now three tabs. Instead of one long scroll, Your keys comes first (generate, set up, or revoke a key), then Connect a client (the command and the .mcp.json block for any AI client, using the key you already saved), then Using it (what the connection can do, and the sample prompts). The alpha notice moved onto this tabbed view, and the old standalone Disconnect section is folded into the tabs.
A short setup wizard right after you generate a key. At the one moment the full key is on screen, the page now shows only what you need: paste the connect command (other clients, reconnecting, and local-dev notes sit under Other clients, reconnecting, or local dev), test the connection, then click Done to go to your keys. Normal visits get the full tabbed page.
The per-key Install button is now Setup, and its window is titled Setup. It still shows the command and config block for that key with a PASTE-YOUR-KEY-HERE placeholder.
Sample prompts moved. They now live in the Using it tab rather than at the top of the page.

2026-09-28¶

Claude Code is now given the house layout rules up front (no two background-photo blocks back to back, heroes default to their natural height rather than full screen), and every page, block, and reorder change it makes is checked against them. When a change leaves two background-image blocks adjacent, the write comes back with a layout warning naming the two blocks, so it can break them up before you publish.
Claude Code is now told it can report back to the Kiva Logic team: it sends a note when it hits a limitation that blocks what you asked for, and when you ask it to report a bug or request a feature. It can include your own words and an email for a reply.
Keys are now per admin, not per store. Each key belongs to the admin who generated it, so every change Claude Code makes with it is logged as that admin's. The page lists your keys with their name, created date, and last-used date, and you can revoke any of them. The full key is shown only once, right after you generate it.
Feedback sent to the Kiva Logic team no longer asks for a name or email: your key identifies you, and replies go to your admin email by default.

Initial release¶

Connect Claude Code to build and edit Page Builder pages, scoped to page content only, with per-store keys and draft-first publishing.