Using AI Tools to Manage Your Site

A WebHaste site is comprised of HTML files on your device — which means Claude Code and other AI coding tools can read, edit, and even preview the site directly.

Every new WebHaste project is scaffolded with a CLAUDE.md file at its root. It's written specifically to brief an AI agent on this site's conventions — fragment pages, template placeholders, how nav.json/pages.json wire pages together, the block format, and so on — so a fresh agent session already understands the format before you ask it to do anything. You never have to explain WebHaste to it from scratch.

🔎Claude Code in an IDE or terminal

Open your site's project folder as the workspace root (in VS Code, a JetBrains IDE, or a plain terminal) and Claude Code will automatically discover and read the root CLAUDE.md. From there you can ask it to do the same things you'd do by hand in the extension.

Some examples:

"Add a new page called pricing.html and link it under the header nav's Documentation menu."
"Translate about.html into Spanish, save it as about-es.html, and set its language override in pages.json."
"Add a Testimonial block to index.html using this quote and name: ..."
"Mark blog/draft-post.html as a draft so it's excluded from Publish and the sitemap."

Because a page file is a body-content fragment, not a full HTML document, an agent can't just open the page in a browser to check its work — it needs the template/nav substitution applied first. Every project ships with .webhaste/compose.js to do exactly that headlessly:

node .webhaste/compose.js --out .agent-preview

That writes fully composed pages into a scratch folder inside your project, matching what "Render to Local Folder" or Publish would actually produce. Ask the agent to run this after making changes, then open the result in a browser to check it — and to delete the scratch folder when it's done, since it's not meant to be committed.

Some config files are regenerated every time you open the project in the extension, so edits an agent makes to them won't stick: .webhaste/compose.js, .webhaste/compose-core.js, and .webhaste/block-library.md. If you ask an agent to change how a block looks or add a new built-in one, point it at the extension's block system rather than a generated file.

💻AI Desktop apps

Most AI desktop apps don't have direct filesystem access — it's chat-only unless you connect a local filesystem MCP server pointed at your site's folder (Settings → Connectors). Without that, a desktop app is still useful for the parts of site work that don't need direct access: drafting page copy, brainstorming a page's structure or a new block's content, or reviewing a pasted-in nav.json/page fragment and suggesting edits you copy back by hand.

With a filesystem MCP server connected, your desktop app can read and write your project the same way Claude Code does, including running compose.js if the connector allows shell access.

Other AI coding tools

Cursor, Windsurf, GitHub Copilot Chat, and similar tools work the same way in principle — they read and write real files, and most look for a root instructions file to pick up project conventions automatically. If a particular tool doesn't recognize CLAUDE.md on its own, you can usually point it at the file directly, or copy the relevant sections into whatever instructions file it does expect.

❌What AI tools can't do

Publish. Your Cloudflare/Netlify credentials live in the browser extension's local storage, not in any project file, so only the extension's own Publish button can actually ship your site. An agent can compose and check pages locally, but the last step is still a click in WebHaste.
Reconnect folder access. Chrome requires a one-click "reconnect" after the extension's folder permission lapses — that's a browser security requirement.

💡Prompt cheat sheet

Once you're up and running with a local AI agent to directly edit your site, here are a few prompts to get started:

"Read .webhaste/block-library.md and list the blocks available on this site."
"Add a new page, link it in the footer nav, and give it a title and meta description in pages.json."
"Using the generic HTML template found at C:/mytemplate.html as a basis, create a WebHaste template and block partials for this project, using Bootstrap 5.x as the CSS framework"
"Change this site's cssFramework to Tailwind and scaffold the build tooling."
"Compose the site to a scratch folder and check the new page for broken links."
"Write a custom block for a pricing table and save it under .webhaste/blocks/ so it shows up in the Blocks dialog."

🤖Hosted AI/content tools (Sintra, Marblism, Grammarly, etc.)

Hosted AI services or writing tools are typcially not local agents that can open your project folder directly, so they can't read CLAUDE.md, site.config.json, or anything else the way Claude Code can or even make direct changes. But similar to a desktop AI app with no MCP connector, you can use these services to help create/manage/improve your site's content via copy-paste.

What helps is telling the remote tool, directly in the prompt, the handful of facts a local agent would need to look up:

Write body content only — no <!DOCTYPE>, <html>, <head>, or <body> tags. The site's template supplies all of that.
Which CSS framework to write class names for — check cssFramework in .webhaste/site.config.json (bootstrap5, tailwind, or none) and say so explicitly.
Which paragraph style to use — paragraphMode in the same file, either p or div.

Paste the content provided by your service directly into WebHaste's Code view rather than Visual view — hosted tools may add extra wrapper <div>s or inline styles, and Code view is where you can clean that up before it becomes part of the page. Since the tool never saw your real template, always check the result in Live Preview afterward rather than trusting it sight unseen.

If your service is consistently adding inline style definitions or unwanted structure, prompt it to provide content with only basic HTML tags like p, br, ul, ol, strong, and em.

If you have an existing page and want your hosted service to make changes, you can copy the entire contents of that page in code view and paste that directly into the external tool's chat, coupled with your prompt. For example:

"Rewrite the HTML content below to summarize key concepts as groups of bullet points, and check to make sure the result has a Flesch reading score of 70 or lower. Return the edited page as an HTML stub similar to what is provided: <pasted page code here>"

Copy or download the edited HTML code to paste back into WebHaste in code view.

Additionally, these services typically are able to provide SEO-optimized titles, meta descriptions and summaries that you can paste into WebHaste, as well as generate social media posts to promote your site.