<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Usman Haider</title>
    <description>The latest articles on DEV Community by Usman Haider (@usmanspacehaider).</description>
    <link>https://dev.to/usmanspacehaider</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4003609%2Fde47b4eb-6f7f-45ad-921e-ea146753b5a5.jpeg</url>
      <title>DEV Community: Usman Haider</title>
      <link>https://dev.to/usmanspacehaider</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/usmanspacehaider"/>
    <language>en</language>
    <item>
      <title>Add Sitelas to Claude in One Click — Then Say This First</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Wed, 05 Aug 2026 06:46:00 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/add-sitelas-to-claude-in-one-click-then-say-this-first-4bha</link>
      <guid>https://dev.to/usmanspacehaider/add-sitelas-to-claude-in-one-click-then-say-this-first-4bha</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8m2ikvjc70dreer0hgb1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8m2ikvjc70dreer0hgb1.png" alt="sitelas claude mcp connector" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Adding a connector is the easy part. You click a button, a permission screen appears, you click again, and you land back in a chat box that looks exactly like it did thirty seconds ago.&lt;/p&gt;

&lt;p&gt;That's where most people stop. Nothing on screen says anything changed, so the natural move is to close the tab and mean to come back to it.&lt;/p&gt;

&lt;p&gt;This post is the other half. Everything below is a real screenshot of a real session — the listing, the permission prompt, the build, and the site that came out of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Add it from the directory
&lt;/h2&gt;

&lt;p&gt;Open the &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Sitelas listing in Claude's directory&lt;/a&gt; and click add.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F780z3qt11mvqdjexs6er.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F780z3qt11mvqdjexs6er.png" alt="The Sitelas listing inside Claude's connector directory, showing the Community badge, the description, and a notice explaining that community connectors have undergone automated reviews." width="799" height="549"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's the whole setup. No URL to paste, no config file to edit. Claude sends you to Sitelas to sign in — or create your account, if you don't have one — and approve the connection, then drops you back where you started.&lt;/p&gt;

&lt;p&gt;Two things worth reading on that screen. Sitelas sits in the &lt;strong&gt;Community&lt;/strong&gt; tier, and Claude tells you plainly what that means: community connectors have undergone automated reviews, and may not yet meet the quality tier of verified connectors. And the description is the honest scope of the thing — Claude picks a template, customizes it, publishes to your domain, then handles edits, contact-form messages and analytics, all from chat.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Using Claude Code or Claude Desktop instead?&lt;/strong&gt; Those read connectors from a config file and never see the directory, so they still take the raw MCP endpoint: &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Step 2: Read the screen before you click Connect
&lt;/h2&gt;

&lt;p&gt;One screen stands between the click and the connection, and it's the only place that spells out what you're handing over.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv0966d1rl9374khgb1d5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv0966d1rl9374khgb1d5.png" alt="The Sitelas connect screen — a two-column ledger headed " width="800" height="786"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The left column is what Claude can do in your account: build a site from a template or design a new one, edit pages, publish, undo the last publish, read your form messages and contacts, draft replies, point a custom domain at a site, read its analytics — and delete a site, if you ask it to.&lt;/p&gt;

&lt;p&gt;That last one is in the "can" column on purpose. Naming the uncomfortable capability is what makes the right-hand column worth believing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;It can't charge you.&lt;/strong&gt; It can hand you a checkout link; the payment happens on Polar's page, not through Claude.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;It can't change or delete your Sitelas account.&lt;/strong&gt; No such tool exists.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;It can't reach sites that aren't yours.&lt;/strong&gt; Every tool is scoped to the account that approved the connection.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;It can't see anything outside Sitelas.&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything Claude builds also shows up in your normal editor. Connecting doesn't move your sites somewhere Claude-shaped — same sites, same dashboard, second way in.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: The first thing to say
&lt;/h2&gt;

&lt;p&gt;Describe the thing you want the way you'd describe it to a person — what it's for, roughly how it should feel, what the visitor should do. Here's the exact sentence I used:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Build a one-page site for Fettle &amp;amp; Spoke, a neighbourhood bike workshop — repairs, servicing and wheel building. Warm and hand-made feeling, not corporate. Add a contact form so people can ask about a repair.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The first time Claude reaches for a Sitelas tool, it asks:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyz9k7gwi6sdx7ds8a9d5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyz9k7gwi6sdx7ds8a9d5.png" alt="Claude's permission prompt reading " width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You approve per tool, or once for all of them. Either way the first move is yours.&lt;/p&gt;

&lt;p&gt;Then it works. Not by filling in a template — it looked at the closest archetype and rejected it out loud: &lt;em&gt;"Gable is the closest archetype but it's built around a multi-page before/after project portfolio — overkill for a warm one-pager."&lt;/em&gt; So it composed the page from primitives instead, picked the type, and went looking for workshop photography.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgdxp5t286j5j6cs6ssw0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgdxp5t286j5j6cs6ssw0.png" alt="A Claude chat: Claude composes the page with a warm cream palette and a serif typeface, creates the site, screenshots its own render to check it, and returns a private preview link." width="799" height="354"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note the step in the middle — &lt;em&gt;"Created successfully. Let me take a look at how it actually renders before showing you."&lt;/em&gt; It screenshotted its own work before handing it over.&lt;/p&gt;

&lt;h2&gt;
  
  
  The bit that matters: nothing is public yet
&lt;/h2&gt;

&lt;p&gt;What came back is a &lt;strong&gt;preview&lt;/strong&gt;, not a live site. That isn't a figure of speech. At the moment Claude finished, here is what the two addresses actually returned:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;URL&lt;/th&gt;
&lt;th&gt;Status&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;preview-fettle-and-spoke-1522.sitelas.com&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;200&lt;/strong&gt; — the finished site&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;fettle-and-spoke-1522.sitelas.com&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;404&lt;/strong&gt; — doesn't exist yet&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;So you get to see the whole thing, click every link, and change your mind, with no chance of anyone stumbling onto a work in progress. Here's what was sitting at that preview address:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbczt8b74nc0jdpq9onn7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbczt8b74nc0jdpq9onn7.png" alt="The Fettle &amp;amp; Spoke site Claude built — a warm cream layout with the serif headline " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The second thing to say is whatever you want changed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;"Warmer palette, and cut the hero copy to two sentences."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Move the enquiry form above the workshop story."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Swap the photo for something with more negative space."&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each one updates the draft and hands back the same preview link, refreshed. When it's right, say &lt;strong&gt;"publish it"&lt;/strong&gt; — the only step that makes anything public, and it only ever happens because you asked.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: The prompt people forget — after it's live
&lt;/h2&gt;

&lt;p&gt;Most website tools stop caring once the site ships. This is the half that makes the connector worth keeping.&lt;/p&gt;

&lt;p&gt;Every form on your site sends submissions to your Sitelas inbox with no setup at all — the repair-enquiry form on Fettle &amp;amp; Spoke was wired the moment it was built.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgodg0tjmjjjaonixuoky.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgodg0tjmjjjaonixuoky.png" alt="The Sitelas dashboard submissions inbox showing waitlist signups, each tagged with the form it came from and marked new or read, with a monthly usage count and a CSV export button." width="800" height="494"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can read that in the dashboard whenever you like. Or you can just ask, in the same chat that built the site: &lt;em&gt;"Any new messages this week, and where did they come from?"&lt;/em&gt; Claude already has the context — it built the page, it knows which form is in the hero and which is in the footer, and it reads the results without you exporting anything. If you want submissions somewhere else too, each form takes a webhook URL in the editor, which covers Zapier, Make, n8n, or your own endpoint.&lt;/p&gt;

&lt;h2&gt;
  
  
  The three sentences, together
&lt;/h2&gt;

&lt;p&gt;If you only remember one thing from this post, make it these:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;"Build me a [what it is] — [how it should feel]."&lt;/strong&gt; → a designed draft and a private preview.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;"Change [the thing you don't like]."&lt;/strong&gt; → same preview, updated. Repeat freely.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;"Any new messages on my site this week?"&lt;/strong&gt; → your form submissions, read back to you.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Everything above happened in one sitting, in one chat, with no dashboard open. That's the whole loop.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Next:&lt;/strong&gt; &lt;a href="https://sitelas.com/blog/launch-a-waitlist-from-claude-cowork" rel="noopener noreferrer"&gt;launching a waitlist from Claude Cowork&lt;/a&gt; follows the same loop on a page that's already live and collecting signups. If you'd rather hand the work to an autonomous agent than type in a chat, &lt;a href="https://sitelas.com/blog/can-an-ai-agent-build-a-website" rel="noopener noreferrer"&gt;an AI agent can build and run a site&lt;/a&gt; with an account API key instead. And &lt;a href="https://sitelas.com/blog/run-your-website-from-a-claude-chat" rel="noopener noreferrer"&gt;running your website from the same chat that built it&lt;/a&gt; goes deeper on the operate half.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;&lt;strong&gt;Add Sitelas from Claude's directory →&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>claude</category>
      <category>mcp</category>
    </item>
    <item>
      <title>Launch a Waitlist From Claude Cowork — Then Ask It What Came In</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Mon, 27 Jul 2026 11:13:25 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/launch-a-waitlist-from-claude-cowork-then-ask-it-what-came-in-2e0e</link>
      <guid>https://dev.to/usmanspacehaider/launch-a-waitlist-from-claude-cowork-then-ask-it-what-came-in-2e0e</guid>
      <description>&lt;p&gt;Launching a waitlist is the easy half. You can get a decent page up in an afternoon.&lt;/p&gt;

&lt;p&gt;The half that dies is the running of it. Two weeks later nobody has opened the form tool, nobody knows whether Tuesday brought four signups or none, and the "we'll review them weekly" habit lasted exactly one week. The page is still live. The loop is dead.&lt;/p&gt;

&lt;p&gt;So I tried something different for my last one: I launched it from &lt;strong&gt;Claude Cowork&lt;/strong&gt; , and before I closed the workspace I asked Claude to check the signups every morning and email me what came in. That second sentence is the one that interests me — it's what turns a page you published into a loop you can actually stay on top of.&lt;/p&gt;

&lt;p&gt;The product is &lt;strong&gt;Loopin&lt;/strong&gt; , a fictional group-chat planning app I use for demos. The page is real and live at &lt;a href="https://loopin-7992.sitelas.com" rel="noopener noreferrer"&gt;loopin-7992.sitelas.com&lt;/a&gt;, and the digest email is real too — I've quoted it in full below rather than describing it. Here's the whole loop, end to end.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cowork vs. a chat (the 30-second version)
&lt;/h2&gt;

&lt;p&gt;If you've only used claude.ai as a chat, Cowork is the same Claude with a workspace around it: a task view, progress tracking, and — the part that matters here — &lt;strong&gt;scheduled tasks&lt;/strong&gt;. You can hand Claude a job and a time, and it runs on its own.&lt;/p&gt;

&lt;p&gt;That's the difference between the &lt;a href="https://sitelas.com/blog/launch-a-waitlist-from-a-claude-chat" rel="noopener noreferrer"&gt;waitlist I ran from a single chat&lt;/a&gt; and this one. In a chat, you're present for every step; the work happens because you're there. In Cowork, you set the job up once and it keeps happening while you're doing something else.&lt;/p&gt;

&lt;p&gt;Both need Claude to actually be able to &lt;em&gt;touch&lt;/em&gt; your site. That's what the connector is for.&lt;/p&gt;

&lt;h2&gt;
  
  
  Connect Sitelas once
&lt;/h2&gt;

&lt;p&gt;One-time setup: Sitelas is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, so adding it takes one click — open the listing and choose &lt;strong&gt;Add&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Using Claude Code or Claude Desktop instead? Those read a config file rather than the directory, so point them at &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sign in, approve, done. Claude can now design sites, publish them, read form submissions, and pull analytics — for any Sitelas site you own. The connector is available in Cowork the same way it's available in a chat; you'll see &lt;strong&gt;Sitelas&lt;/strong&gt; listed under the workspace's connectors.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1 — Launch the page
&lt;/h2&gt;

&lt;p&gt;I opened a Cowork task and described the product rather than the design:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Build a waitlist page for Loopin — it lives inside your existing group chat and turns "we should get dinner sometime" into an actual calendar invite. Works with iMessage, WhatsApp, Discord, Telegram, Slack. Warm and a bit funny, not enterprise SaaS. Email capture, and a short "how it works" section.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude picked an archetype, wrote the copy, and came back with a &lt;strong&gt;preview URL&lt;/strong&gt; — not a live site. This is worth understanding because it's how every Sitelas change behaves: work lands on a draft, you get a preview link, and the public URL doesn't change until you say publish. You can iterate as many times as you like; visitors keep seeing the last published version, or nothing at all if you've never published.&lt;/p&gt;

&lt;p&gt;I asked for two changes — a warmer headline, and the channel logos moved above the fold. Each came back as an updated preview. When it read right, I said make it live, and Claude published it.&lt;/p&gt;

&lt;p&gt;The headline it landed on:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Someone says "soon." Loopin makes it Thursday.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That's better than what I'd have written, and I say that as the person who would have written it.&lt;/p&gt;

&lt;p&gt;One honest note about the page: the social-proof numbers on it ("9,300+ group chats") are demo copy from the design, not real signups. The real count is one, and it's mine — which becomes relevant in a moment, and is a more useful thing to show you than a fake number.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where the signups actually go
&lt;/h2&gt;

&lt;p&gt;Every submission from that form lands in the &lt;strong&gt;Sitelas inbox&lt;/strong&gt; — your dashboard, under Messages. No setup, no third-party form tool, no spreadsheet to wire up. That's the default and it's the only destination you need.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft95b8lddefwzulh7ywhl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft95b8lddefwzulh7ywhl.png" alt="The Sitelas submissions inbox for the Loopin site, showing one submission from 26 July and the email address that was entered" width="800" height="327"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That is the real Loopin inbox, and it contains exactly one entry — mine. I submitted the form myself on launch day to check it worked. Each entry expands to show exactly the fields the form asked for; a form with more fields shows more. The fact that it is otherwise empty matters in a minute.&lt;/p&gt;

&lt;p&gt;If you &lt;em&gt;do&lt;/em&gt; want submissions somewhere else, each form has a &lt;strong&gt;"Forward to webhook"&lt;/strong&gt; setting in the editor: point it at an HTTPS endpoint — Zapier, Make, n8n, your own handler — and each submission is POSTed there as well. That's the route to a Google Sheet or a CRM, via a Zap that appends a row. There's no OAuth dance and no accounts to link; it's one URL field.&lt;/p&gt;

&lt;p&gt;The reason this matters for the automation: because submissions live in Sitelas, Claude can read them through the connector. No export, no CSV, no "log in and check."&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2 — The part that makes it run
&lt;/h2&gt;

&lt;p&gt;Here's the actual move. Still in Cowork, I created a &lt;strong&gt;scheduled task&lt;/strong&gt; :&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Every morning at 9:30, check the Loopin waitlist for submissions from the last 24 hours. Email me a short digest: how many signed up, who they are, and anything that stands out. If there were no new signups, say so in one line — don't skip the email.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Then I approved it once, and closed the tab.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz1i6akehayky8pbyu7rw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz1i6akehayky8pbyu7rw.png" alt="A Claude Cowork task named " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Three things about that prompt are deliberate, and each one is a thing I got wrong before getting it right:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"Email me."&lt;/strong&gt; Cowork scheduled tasks run on their own and show their results &lt;strong&gt;in the app&lt;/strong&gt;. If you want something in your inbox, the task has to say so. The mail then arrives from Claude's own address — mine came from &lt;code&gt;no-reply-claude@mail.anthropic.com&lt;/code&gt; — not from Sitelas, and not from your own account. Leave that sentence out and the task still runs perfectly; you just have to go and look at it, which is the exact habit that dies.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"Last 24 hours."&lt;/strong&gt; Without a window, you get a digest of the entire list every morning, which stops being information by day three.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"If there were no new signups, say so — don't skip the email."&lt;/strong&gt; This is the one I'd argue for hardest. A system that only speaks up on good news is indistinguishable from one that's quietly broken, and you find out which you have three weeks in, when you discover the form stopped submitting on day two. The empty email costs nothing and it's the only proof the loop is still alive.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the digest actually looks like
&lt;/h2&gt;

&lt;p&gt;I was impatient, so the next morning I test-fired the task by hand instead of waiting for 9:30. The email arrived a couple of minutes later, from Claude's own address:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Loopin:&lt;/strong&gt; 1 new waitlist signup in the last 24h — &lt;a href="mailto:usman.haider.pro@outlook.com"&gt;usman.haider.pro@outlook.com&lt;/a&gt;, Sun 26 Jul 9:47 PM PKT. That's the first signup ever, so all-time total is now 1 and there's no meaningful trend yet. Quota is fine: 1 of 50 used this month, resets 1 Aug. Note the form only asks for an email, so no name was captured. Submission left unread for your triage.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That one signup is me — I'd filled in my own form the previous evening to check that submissions actually landed, and it fell inside the 24-hour window. As proof that the world wants Loopin, it's worthless. As a picture of what the loop does, it's exactly right.&lt;/p&gt;

&lt;p&gt;Read what's in that paragraph. I asked for "how many signed up, who they are, and anything that stands out." What came back was the count, the address, the timestamp, the all-time total for context, the month's quota, the reason no name was captured, and a note that it had left the submission unread so I could triage it myself.&lt;/p&gt;

&lt;p&gt;None of that is a database dump. Claude opened the actual submission through the connector and wrote up what it found — which is only possible because the submissions live in Sitelas rather than in a form service Claude can't see.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F38m17lkd847qwquejicd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F38m17lkd847qwquejicd.png" alt="Claude's Scheduled tasks page listing one task, " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The task itself is one row on Claude's &lt;strong&gt;Scheduled&lt;/strong&gt; page. That is the whole of the automation — no server, no cron file, no dashboard of my own to maintain. If I want it to stop, I delete the row.&lt;/p&gt;

&lt;h2&gt;
  
  
  The loop, in one picture
&lt;/h2&gt;

&lt;p&gt;That's the entire shape of it, and it's worth stating plainly because it's the bit that's genuinely new:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;You describe the page.&lt;/strong&gt; Claude builds it and hands you a preview URL. Nothing is public until you say publish.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A visitor fills in the form.&lt;/strong&gt; The submission lands in your Sitelas inbox — no form service, no spreadsheet, no wiring.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You ask Claude what came in.&lt;/strong&gt; It reads that inbox through the connector and answers in plain English, on demand or on a schedule.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Every one of those steps happens in the same place, with the same assistant, and none of them asks you to export anything.&lt;/p&gt;

&lt;h2&gt;
  
  
  The honest caveats
&lt;/h2&gt;

&lt;p&gt;A few things Sitelas doesn't do, so you can plan around them rather than discover them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No bulk email sender.&lt;/strong&gt; When you're ready to invite the list, Claude can draft individual emails through your own Gmail connector — genuinely good for a focused early-access batch, and not a substitute for Mailchimp at 50,000 addresses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No CRM and no native scheduling.&lt;/strong&gt; The inbox is a list of submissions, not a pipeline.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Commerce is single-item.&lt;/strong&gt; A waitlist doesn't need it, but if you're thinking of a paid pre-order: Sitelas supports one Stripe payment link per item, not a cart.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And one about Cowork: a scheduled task is Claude doing the work on a timer, not a background service inside Sitelas. It's worth knowing which system owns which half — Sitelas holds the site and the submissions; Cowork holds the schedule.&lt;/p&gt;

&lt;p&gt;One note on my own demo, so you're not misreading the screenshots: the digest I've quoted is a &lt;strong&gt;manual test fire&lt;/strong&gt; , not the 9:30 run. I set the schedule up, fired it twice by hand to see the output, and then deleted the task — with one submission in the inbox, and that one mine, there was nothing for it to watch yet. The mechanism is the same either way; I just don't want you to think I've been running this for weeks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this is different from a website builder
&lt;/h2&gt;

&lt;p&gt;The page took about fifteen minutes. Any decent builder could have done that part.&lt;/p&gt;

&lt;p&gt;What no static-site builder can do is the second half: the site is an &lt;strong&gt;automation endpoint sitting next to your other connectors&lt;/strong&gt; , so the same assistant that built it can read its submissions, summarize them, and put them in your inbox on a schedule — without you exporting anything or opening a dashboard.&lt;/p&gt;

&lt;p&gt;That's the actual pitch for &lt;a href="https://sitelas.com/blog/run-your-website-from-a-claude-chat" rel="noopener noreferrer"&gt;running a site from the same place you built it&lt;/a&gt;. And it's the same capability an autonomous agent uses when it &lt;a href="https://sitelas.com/blog/can-an-ai-agent-build-a-website" rel="noopener noreferrer"&gt;builds and runs a site with an API key&lt;/a&gt; — Cowork is just the friendlier door to it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add Sitelas from &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt; — one click — then ask Claude to build the waitlist you've been putting off.&lt;/p&gt;

&lt;p&gt;Then, before you close the tab, ask it to check the signups every morning and email you what it finds. That second sentence takes ten seconds and it's the difference between a page and a loop.&lt;/p&gt;

&lt;p&gt;Sitelas — the website builder for AI agents.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>mcp</category>
    </item>
    <item>
      <title>Can an AI Agent Build and Run a Website?</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Fri, 24 Jul 2026 07:50:25 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/can-an-ai-agent-build-and-run-a-website-fol</link>
      <guid>https://dev.to/usmanspacehaider/can-an-ai-agent-build-and-run-a-website-fol</guid>
      <description>&lt;p&gt;&lt;strong&gt;Short answer: yes — and not just build. On Sitelas, an AI agent with a single API key can design a real site, publish it to a live URL, and then &lt;em&gt;run&lt;/em&gt; it: read the messages that come in, check the traffic, ship an edit. Here's exactly what an agent can do — and where a human stays in the loop.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"Can AI build a website?" stopped being an interesting question about a year ago. Every tool can generate a page from a prompt now. The interesting question is the next one: can an &lt;strong&gt;agent&lt;/strong&gt; — Claude, or an autonomous coding agent — build a &lt;em&gt;real&lt;/em&gt; website, publish it, and keep &lt;em&gt;running&lt;/em&gt; it, without a person clicking through a dashboard?&lt;/p&gt;

&lt;p&gt;On most platforms the answer is "sort of." An agent can generate code, or hit a deploy API — but what it produces is a codebase somebody still has to own, and there's no "run it" story at all. Sitelas is built for exactly this: a site isn't a code export, it's a live thing an agent can create and operate through an &lt;a href="https://sitelas.com/blog/run-your-website-from-a-claude-chat" rel="noopener noreferrer"&gt;MCP connector&lt;/a&gt;. Here's what that actually means.&lt;/p&gt;

&lt;h2&gt;
  
  
  Two ways an agent gets in
&lt;/h2&gt;

&lt;p&gt;There are two doors, and they lead to the same room.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Interactive — you, in a Claude chat.&lt;/strong&gt; You add the Sitelas connector in claude.ai — it is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, one click —, and now Claude can act on your site inside the conversation you're already having.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Headless — an agent, with an API key.&lt;/strong&gt; For an autonomous agent (say, Claude Code, or your own script), Sitelas issues a personal API key. You create it in your dashboard's Account tab; the agent sends it as &lt;code&gt;Authorization: Bearer …&lt;/code&gt; to the MCP endpoint and gets the &lt;strong&gt;exact same tools&lt;/strong&gt; the interactive connector does — no reduced set, no "read-only for robots." A headless agent is a first-class citizen.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fidp4idsd1ujfqpclo4ug.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fidp4idsd1ujfqpclo4ug.png" alt="The Account tab in the Sitelas dashboard, with the API keys section: " width="800" height="435"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Either way, the agent isn't just &lt;em&gt;talking about&lt;/em&gt; your website. It can &lt;em&gt;do&lt;/em&gt; things to it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What an agent can build
&lt;/h2&gt;

&lt;p&gt;Give an agent a description and it composes a real site — not a wireframe, not a code dump. Under the hood it picks a design that fits the brief, writes the copy, lays out the pages, and sources real photography (no "hero-image.jpg" stand-ins — actual images).&lt;/p&gt;

&lt;p&gt;What comes back is a &lt;strong&gt;private preview&lt;/strong&gt;. And this is the important part: &lt;strong&gt;nothing goes live until a human says so.&lt;/strong&gt; Even when you tell Claude "build it and publish," it builds, previews, and &lt;em&gt;asks&lt;/em&gt; — it won't push an unreviewed page to your live URL.&lt;/p&gt;

&lt;p&gt;The site loaded in the builder at the top of this post is a real one, composed by Sitelas from a brief exactly like that — the design system, the type, the layout, the photography, all real. An agent produced the whole page from a sentence; the visual editor is there for when you'd rather click than type.&lt;/p&gt;

&lt;h2&gt;
  
  
  What an agent can run (the part most tools skip)
&lt;/h2&gt;

&lt;p&gt;Building is the easy half now. The half that matters — and that almost no "AI website" tool touches — is &lt;strong&gt;day 2&lt;/strong&gt;: the leads, the replies, the edits. Because a Sitelas site lives inside Claude, the same agent that built it can operate it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpqzj7on0m10dw10y9yil.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpqzj7on0m10dw10y9yil.png" alt="In a Claude chat, the user asks about leads and traffic; Claude reads the site's analytics and its form submissions and offers to draft replies." width="800" height="440"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ask an agent "any leads this week?" and it reads your form submissions — they land in your Sitelas inbox automatically, with no setup and no Google account. Ask "how's traffic?" and it pulls your analytics. It can draft replies, publish an update, or restyle the site, all by being asked. Your website becomes an &lt;strong&gt;automation endpoint sitting next to your other connectors&lt;/strong&gt;, the way your Gmail and Calendar already are. That's the thing a Webflow or Squarespace site simply can't be.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where a human stays in the loop (on purpose)
&lt;/h2&gt;

&lt;p&gt;An agent that can do &lt;em&gt;everything&lt;/em&gt; is also a liability, so Sitelas draws the line deliberately:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Publishing is a decision, not a default.&lt;/strong&gt; The agent previews and asks; a human approves what goes live.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Money stays human.&lt;/strong&gt; An agent can't move a site onto a paid plan on its own — checkout is a link a person completes. It builds and runs on the free tier; a human decides to pay.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Your domain stays yours.&lt;/strong&gt; Connecting a custom domain needs DNS records only you can add at your registrar.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The pattern is the same each time: &lt;strong&gt;capability is the easy half; control is the design.&lt;/strong&gt; An agent does the work; a human keeps the keys to what ships and what costs money.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to point an agent at Sitelas
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;For yourself, in claude.ai:&lt;/strong&gt; add Sitelas from &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt; — one click. Now every chat can build and run your site.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;For a headless agent:&lt;/strong&gt; generate an API key in your Sitelas dashboard and hand it to the agent. Same tools, no chat required.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Either way, the site stays yours — you keep control of what publishes.&lt;/p&gt;

&lt;h2&gt;
  
  
  The honest version
&lt;/h2&gt;

&lt;p&gt;"An AI agent builds your website" sounds like a demo. The real story is smaller and better: an agent can take a site from a sentence to a live URL, and then keep it running — while you stay in control of the two things that matter, what publishes and what you pay. That's not a magic trick. It's a website that finally lives somewhere an agent can reach.&lt;/p&gt;

&lt;p&gt;New here? &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;How to Build a Website From a Claude Chat&lt;/a&gt; walks through the build end to end, and &lt;a href="https://sitelas.com/blog/run-your-website-from-a-claude-chat" rel="noopener noreferrer"&gt;Run Your Website From the Same Chat That Built It&lt;/a&gt; goes deep on the day-2 operating loop.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add the connector in claude.ai (&lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;) and tell Claude what to build — or start in your browser at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>claude</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Run Your Website From the Same Claude Chat That Built It</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Tue, 14 Jul 2026 12:39:58 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/run-your-website-from-the-same-claude-chat-that-built-it-1iln</link>
      <guid>https://dev.to/usmanspacehaider/run-your-website-from-the-same-claude-chat-that-built-it-1iln</guid>
      <description>&lt;p&gt;Everyone can generate a website now. Type a prompt, get a decent page — that part is a commodity. The question nobody's answering is what happens on &lt;strong&gt;day 2&lt;/strong&gt;: the leads start arriving, a line of copy needs a tweak, someone asks for a section you forgot. That's when a website stops being a design project and becomes a thing you have to &lt;strong&gt;run&lt;/strong&gt; — and where most tools hand you yet another dashboard to log into and dread.&lt;/p&gt;

&lt;p&gt;Sitelas makes a different bet. Because a Sitelas site lives inside Claude through an MCP connector, &lt;strong&gt;the same chat that built the site also runs it&lt;/strong&gt;. You don't open an admin panel to see who filled out your form, write back, or change the page. You just ask.&lt;/p&gt;

&lt;p&gt;Here's what "running your site from a chat" actually looks like.&lt;/p&gt;

&lt;h2&gt;
  
  
  First, the 30-second why
&lt;/h2&gt;

&lt;p&gt;Claude connects to outside tools through &lt;strong&gt;MCP connectors&lt;/strong&gt; — you already use the ones for Gmail, Calendar, and Drive. Sitelas has one too.&lt;/p&gt;

&lt;p&gt;Add it once — it is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, so it is one click — and Claude can &lt;em&gt;do things with&lt;/em&gt; your site, not just talk about it: publish it, read its submissions, restyle it, add a section.&lt;/p&gt;

&lt;p&gt;Your site becomes an &lt;strong&gt;automation endpoint sitting next to your other connectors&lt;/strong&gt; — the thing a Webflow or Squarespace site can't be.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;New here? Start with &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;How to Build a Website From a Claude Chat&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  "Did anyone fill out my form today?"
&lt;/h2&gt;

&lt;p&gt;That single question is the whole idea. You ask; Claude reads your site's submissions, surfaces the new lead — Maya, a bakery owner — and drafts a warm reply in your voice. One message, no tabs.&lt;/p&gt;

&lt;p&gt;It works because &lt;strong&gt;every form on a Sitelas site captures submissions to your inbox automatically&lt;/strong&gt; — no integration required. You can open that inbox in the dashboard any time:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F924blwksmz133nkdu9ew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F924blwksmz133nkdu9ew.png" alt="The Submissions inbox in the Sitelas dashboard, where every form entry lands." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;…but running your site from a chat means you rarely need to. Claude reads those same submissions straight from your site, so "who wrote in today, and what do they want?" is answered in the thread you're already in — not in a panel you have to remember to check.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sending leads to a spreadsheet
&lt;/h2&gt;

&lt;p&gt;Say you want every lead in a Google Sheet you can sort and share.&lt;/p&gt;

&lt;p&gt;Here's the thing: &lt;strong&gt;you don't wire anything up.&lt;/strong&gt; Claude already reads your Sitelas submissions. And if you've added Claude's own Google Sheets connector, it can already write to your Drive. So you just ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Put this week's leads in a Google Sheet."&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude pulls the submissions from your site, creates the Sheet in &lt;strong&gt;your&lt;/strong&gt; Drive, and fills in the rows. No OAuth screen on our side. No third-party automation service. Nothing to maintain. Two connectors already sitting in the same chat, doing the boring part between them.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4fzq2jjpstegrqb900bn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4fzq2jjpstegrqb900bn.png" alt="Claude explaining how to forward form submissions to a Google Sheet with a webhook and Zapier." width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Want it automatic, without asking? Drop a &lt;strong&gt;webhook URL&lt;/strong&gt; into the form's settings and every submission forwards the instant it arrives — to a Zapier "Catch Hook" that appends the row, or straight to Slack, or your CRM. Your Sitelas inbox stays the source of truth either way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Changing the site itself — still just a chat
&lt;/h2&gt;

&lt;p&gt;Running a site isn't only inbox work; it's the site too. &lt;em&gt;"Add an FAQ section." "Make the hero warmer."&lt;/em&gt; You say it, and Claude edits — but it &lt;strong&gt;previews first&lt;/strong&gt;, so your live page never changes until you approve it:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Foiz0yy1ijvsaapf5t7tj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Foiz0yy1ijvsaapf5t7tj.png" alt="Claude adding a section and restyling the site, returning a private preview URL, then publishing only after you say go." width="800" height="704"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the part worth underlining: Claude shows you a &lt;strong&gt;preview URL&lt;/strong&gt;, and the live site keeps serving the old version until you say "publish." Edits accumulate in the preview; nothing goes public by surprise. When it looks right, one word — &lt;em&gt;"publish"&lt;/em&gt; — pushes it live, and a one-step revert is always there if you change your mind.&lt;/p&gt;

&lt;h2&gt;
  
  
  The whole loop, in one window
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;You:&lt;/strong&gt; "Anyone fill out my contact form today?"
&lt;strong&gt;Claude:&lt;/strong&gt; reads your submissions, surfaces the lead.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You:&lt;/strong&gt; "Draft a warm reply, and put this week's leads in a Google Sheet."
&lt;strong&gt;Claude:&lt;/strong&gt; drafts the reply and writes the rows into your Drive.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You:&lt;/strong&gt; "Add an FAQ section and warm up the palette."
&lt;strong&gt;Claude:&lt;/strong&gt; edits, shows a preview.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You:&lt;/strong&gt; "Publish."
&lt;strong&gt;Claude:&lt;/strong&gt; it goes live.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No dashboard-hopping. No export-sort-reimport. No glue code. The context never resets — so the chat that knows who wrote in is the same one that drafts her reply, and the same one that ships the new section.&lt;/p&gt;

&lt;h2&gt;
  
  
  The honest caveat
&lt;/h2&gt;

&lt;p&gt;This is a &lt;strong&gt;conversational way to run a site, not an enterprise ops suite.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No built-in CRM.&lt;/li&gt;
&lt;li&gt;No native bulk-email sender. Claude drafts individual replies through your own Gmail — perfect for a focused early stream of leads, not a 50k blast.&lt;/li&gt;
&lt;li&gt;No native bookings.&lt;/li&gt;
&lt;li&gt;Commerce is &lt;strong&gt;single-item checkout&lt;/strong&gt; — one Buy button per product or tier, via a payment link you supply — not a full cart or inventory system.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When your funnel outgrows a chat, bring dedicated tools. For the day-to-day of a small site — reading leads, replying, keeping the page fresh — this is the loop, and it lives where you already work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this is different
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp7es0fh3zzlh4rlx1gos.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp7es0fh3zzlh4rlx1gos.png" alt="Why running a site from a chat beats a dashboard." width="799" height="762"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's the wedge: &lt;strong&gt;your site isn't a destination you visit, it's an endpoint you operate&lt;/strong&gt; — next to every other tool you already run in Claude.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prefer not to leave for claude.ai? There's an editor too
&lt;/h2&gt;

&lt;p&gt;Everything above runs from a chat — but you don't have to. Every Sitelas site also opens in a &lt;strong&gt;visual editor&lt;/strong&gt; with the same AI built in: describe an edit in plain language and it happens on the canvas, or click any element and adjust it by hand.&lt;/p&gt;

&lt;p&gt;And if you want to see the read-submissions-then-act loop pushed further — scoring signups and drafting invites — &lt;a href="https://sitelas.com/blog/launch-a-waitlist-from-a-claude-chat" rel="noopener noreferrer"&gt;I Launched a Waitlist and Ran It From One Claude Chat&lt;/a&gt; walks through it end to end.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add the Sitelas connector in Claude (&lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;), publish a site, then just start asking: &lt;em&gt;who filled out the form, draft them a reply, put the leads in a Sheet, add a section.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Set up an account at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;, connect it to Claude, and run your site from the chat you're already in.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>automation</category>
    </item>
    <item>
      <title>I Turned My Resume Into a Portfolio Site — From One Claude Chat</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Mon, 22 Jun 2026 09:12:36 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/i-turned-my-resume-into-a-portfolio-site-from-one-claude-chat-2de2</link>
      <guid>https://dev.to/usmanspacehaider/i-turned-my-resume-into-a-portfolio-site-from-one-claude-chat-2de2</guid>
      <description>&lt;p&gt;Everyone tells you to "have a portfolio site." The advice is right; the gap is the problem. You already have a résumé — a tidy PDF with your roles, projects, and skills — and turning it into a live, good-looking website is an afternoon of fighting a builder, nudging columns, and second-guessing fonts. Most people never close that gap.&lt;/p&gt;

&lt;p&gt;Sitelas closes it in one prompt. Because it plugs into Claude as a connector, the résumé you already have &lt;strong&gt;is&lt;/strong&gt; the input. You attach the PDF in the chat, ask for a portfolio, and Claude reads it, designs around it, and hands you a real Sitelas site — previewed privately, published only when you're ready. I did exactly that with my own résumé. Here's how it went.&lt;/p&gt;

&lt;h2&gt;
  
  
  All you need is the PDF
&lt;/h2&gt;

&lt;p&gt;No new content to write, no template to shop for. If you can drag a file into a chat, you can do this.&lt;/p&gt;

&lt;p&gt;One-time setup: Sitelas is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, so adding it takes one click — open the listing and choose &lt;strong&gt;Add&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Using Claude Code or Claude Desktop instead? Those read a config file rather than the directory, so point them at &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sign in to Sitelas when prompted. From then on, Claude can build sites, change themes, read form submissions, and publish — all from chat.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Attach your résumé and ask
&lt;/h2&gt;

&lt;p&gt;Drop the PDF into the composer and type one line — &lt;em&gt;"create me a portfolio website using Sitelas, résumé attached."&lt;/em&gt; That's the whole instruction.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgdxj5faqfy0tblgkq9du.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgdxj5faqfy0tblgkq9du.png" alt="A claude.ai chat: the user attaches a résumé PDF and asks Sitelas for a portfolio; Claude reads the résumé, picks a fitting template, builds the site, and returns a private preview link." width="800" height="799"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude reads the résumé straight from context — your summary, roles, projects, skills — and treats it as the brief. It weighs the portfolio templates and picks the one whose register fits — for mine, a dark single-page "engineer" layout. It doesn't dump the PDF into a page; it &lt;strong&gt;maps&lt;/strong&gt; each part of the résumé onto the matching section of a designed template, then builds the site.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Claude turns a résumé into a site
&lt;/h2&gt;

&lt;p&gt;This is the part that's easy to underestimate. A résumé has structure — a headline role, a summary, a reverse-chronological work history, a project list, a skills block, education — and a good portfolio has the same structure in a different shape. Sitelas's job is the mapping:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Your title and summary&lt;/strong&gt; become the hero and About section.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Work history&lt;/strong&gt; becomes an experience timeline.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Projects&lt;/strong&gt; become a project grid, one card each.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Skills&lt;/strong&gt; become a tech-stack strip; &lt;strong&gt;education&lt;/strong&gt; its own block.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also picks a template whose &lt;em&gt;register&lt;/em&gt; fits the résumé. Mine reads as a senior software engineer, so it chose a dark, two-column "engineer" layout — restrained, monospace accents, the kind of thing that signals "I ship." A designer's résumé would land somewhere brighter and more visual. You're not picking from a dropdown of 40 themes; Claude picks the one that fits and customizes it to you.&lt;/p&gt;

&lt;h2&gt;
  
  
  You get a private preview first — nothing is public yet
&lt;/h2&gt;

&lt;p&gt;Just like building from scratch, the portfolio lands as a &lt;strong&gt;draft&lt;/strong&gt;. Claude hands you a preview URL that's private to you, and the permanent address stays a &lt;strong&gt;404 until you publish&lt;/strong&gt;. So you can click through the whole thing, read every section, and change anything — reword the About, reorder projects, swap the palette — before a single recruiter sees it.&lt;/p&gt;

&lt;p&gt;This is also the moment to fill any gaps. If the template leans minimal and your résumé has more — a full skills grid, an education block, contact details — just say so, and Claude adds the sections. Every edit re-previews; the live site stays untouched until you publish again.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Publish when it looks right
&lt;/h2&gt;

&lt;p&gt;When the preview reads the way you want, tell Claude to make it live.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Foohllmgbhoe36j1lpdc3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Foohllmgbhoe36j1lpdc3.png" alt="A claude.ai chat: the user says " width="800" height="446"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude promotes the draft to the permanent URL and archives the previous state, so a one-step revert is always available. The site is now live at a real address you can put on LinkedIn, in an email signature, or at the top of your next application.&lt;/p&gt;

&lt;h2&gt;
  
  
  The result
&lt;/h2&gt;

&lt;p&gt;Here's what came back from my résumé — a dark, two-column portfolio with a sticky profile card, an About section, an experience timeline (xMap, Turing, Decision Labs), a projects grid, and social links, all pulled straight from the PDF.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm5s9f3bwdljwgsnb3egp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm5s9f3bwdljwgsnb3egp.png" alt="The published portfolio: a dark two-column engineer-style site with a sticky profile and nav on the left, and an About section plus experience timeline on the right, generated from the résumé." width="799" height="562"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It reads like a site someone built on purpose, not a résumé pasted into a wrapper — because the content is mapped into a real design, not poured into a box.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make it yours
&lt;/h2&gt;

&lt;p&gt;A generated portfolio is a strong starting point, not a cage. Everything is editable two ways: keep prompting Claude in the same chat ("add an education section," "make the accent green," "move Projects above Experience"), or open it in the &lt;a href="https://sitelas.com/blog/how-to-use-the-sitelas-editor" rel="noopener noreferrer"&gt;visual editor&lt;/a&gt; and adjust by hand with the same draft → preview → publish flow. You can also wire up a contact form so messages reach you — and because the site lives next to your other Claude connectors, you can read and reply to those messages from the same window.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why do this from a chat at all?
&lt;/h2&gt;

&lt;p&gt;Because the portfolio is never really "done." You change jobs, ship a project, win an award — and updating the site is one more message in a chat that already knows your history, not a login-and-relearn chore. The same window that built it keeps maintaining it. That's the difference between Sitelas and a traditional builder: it's a site that lives where you already work. For the from-scratch version of this flow, see &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;How to Build a Website From a Claude Chat&lt;/a&gt;; to start from an existing page instead of a résumé, see &lt;a href="https://sitelas.com/blog/clone-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;I Cloned a Website From a Claude Chat&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add the Sitelas connector in Claude, attach your résumé, and ask for a portfolio. Review the private preview, tweak anything, then publish. Start at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>career</category>
    </item>
    <item>
      <title>I Cloned a Website From a Claude Chat</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Sun, 21 Jun 2026 21:21:38 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/i-cloned-a-website-from-a-claude-chat-3l2n</link>
      <guid>https://dev.to/usmanspacehaider/i-cloned-a-website-from-a-claude-chat-3l2n</guid>
      <description>&lt;p&gt;There's a moment when you find a layout you wish you'd built — a landing page that just works, an old site of your own you want to move, a competitor's structure you'd like as a starting point. The usual answer is "open the dev tools and start copying." Slow, brittle, and you end up with a pile of HTML that isn't really yours to edit.&lt;/p&gt;

&lt;p&gt;Sitelas does it in one prompt. Because it plugs into Claude as a connector, you can hand Claude a URL, say &lt;strong&gt;clone this&lt;/strong&gt; , and get back a real, editable Sitelas site — previewed privately first, published only when you're ready. I did exactly that with &lt;code&gt;nextjs.org&lt;/code&gt;. Here's how it went, end to end, and the one honest caveat that matters.&lt;/p&gt;

&lt;h2&gt;
  
  
  What "clone" actually means here
&lt;/h2&gt;

&lt;p&gt;This isn't a screenshot and it isn't an &lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt; wrapper. Claude &lt;strong&gt;captures&lt;/strong&gt; the page — the full-page render, the DOM with computed styles, the design tokens (palette, type scale, spacing), and the real image URLs — and then &lt;strong&gt;rebuilds&lt;/strong&gt; it section by section as a Sitelas site. The output is a normal site made of Sitelas's own building blocks, with a proper header, footer, theme, and pages.&lt;/p&gt;

&lt;p&gt;Which means the moment it exists, it's &lt;strong&gt;yours to change&lt;/strong&gt; : reword the hero, swap the palette, drop a section, wire up a form — by prompting Claude or in the visual editor, exactly like any site you build from scratch. The clone is your starting point, not a frozen copy. (New to the build flow? Start with &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;How to Build a Website From a Claude Chat&lt;/a&gt;.)&lt;/p&gt;

&lt;h2&gt;
  
  
  First: connect Sitelas to Claude
&lt;/h2&gt;

&lt;p&gt;One-time setup: Sitelas is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, so adding it takes one click — open the listing and choose &lt;strong&gt;Add&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Using Claude Code or Claude Desktop instead? Those read a config file rather than the directory, so point them at &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sign in to Sitelas when prompted. Claude can now capture URLs, compose sites, change themes, and publish — all from chat.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Hand Claude a URL and say "clone it"
&lt;/h2&gt;

&lt;p&gt;You give it the address; Claude does the rest in one turn — capture, study, rebuild, preview.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwa63ftizydqo1mklxsll.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwa63ftizydqo1mklxsll.png" alt="Asking Claude to clone nextjs.org; it captures the page, rebuilds it as a Sitelas fixture, and returns a private preview URL." width="800" height="766"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Watch what it actually does: it &lt;strong&gt;captures&lt;/strong&gt; nextjs.org, reads the structure and design tokens straight off the page (the black-on-white palette, the Geist / Geist Mono typography), pulls the real image URLs, then &lt;strong&gt;composes a fixture&lt;/strong&gt; that mirrors the original — and saves it as a draft.&lt;/p&gt;

&lt;p&gt;What came back was a faithful, section-by-section replica: the ▲ hero with "The React Framework for the Web" and the &lt;code&gt;npx create-next-app@latest&lt;/code&gt; code pill, the "What's in Next.js?" feature grid, the "Powered By" tooling cards (React, Turbopack, SWC), the deploy-templates block, the eight-logo showcase wall ending in customer testimonials, and the full multi-column footer with an email signup form.&lt;/p&gt;

&lt;p&gt;Side by side, the original and the clone read as the same page — same structure, type, and layout — except the one on the right is a real Sitelas site I can edit, restyle, and republish from chat.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fatvmfz3blqyixpz28u6p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fatvmfz3blqyixpz28u6p.png" alt="The live nextjs.org homepage on the left and the Sitelas clone on the right, side by side: same hero, type, and layout, but the clone is a real editable Sitelas site." width="800" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  You get a private preview first — nothing is public yet
&lt;/h2&gt;

&lt;p&gt;Just like building from scratch, the clone lands as a &lt;strong&gt;draft&lt;/strong&gt;. Claude hands you a preview URL (&lt;code&gt;preview-nextjs-clone-1983.sitelas.com&lt;/code&gt;) that's private to you; the permanent address stays a &lt;strong&gt;404 until you publish&lt;/strong&gt;. So you can click through the whole thing, decide what to keep, and change anything before a single visitor sees it.&lt;/p&gt;

&lt;p&gt;This is also where you'd start making it your own — different copy, your palette, your sections. A clone you publish verbatim is rarely the goal; a clone you adapt is the fast way to a site that's genuinely yours.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Publish when you're happy
&lt;/h2&gt;

&lt;p&gt;When the preview looks right, tell Claude to make it live.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6s2m3n3g24co51xx9oel.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6s2m3n3g24co51xx9oel.png" alt="Telling Claude to publish; it promotes the draft to live and returns the permanent URL with a one-step revert noted." width="800" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude promotes the draft to the permanent URL and archives the previous (empty) state, so a one-step revert is always available. &lt;code&gt;nextjs-clone-1983.sitelas.com&lt;/code&gt; is now a real, live site.&lt;/p&gt;

&lt;h2&gt;
  
  
  The honest caveat: copied images are copied images
&lt;/h2&gt;

&lt;p&gt;This is the part to take seriously. When Claude rebuilds a page, it reuses the &lt;strong&gt;real assets&lt;/strong&gt; from the source so the clone looks right — which means the imagery, logos, and screenshots are pulled straight from the original and are very likely &lt;strong&gt;copyrighted&lt;/strong&gt;. That's fine for a personal demo or a private prototype. It is &lt;strong&gt;not&lt;/strong&gt; fine to publish someone else's photography, logos, and brand art as your own.&lt;/p&gt;

&lt;p&gt;So the responsible flow is: clone to get the &lt;strong&gt;structure and layout&lt;/strong&gt; fast, then replace the borrowed pieces with your own. Claude can swap every image for licensed stock in one pass — just ask — and the text is yours to rewrite anyway. Treat a clone as scaffolding, not a finished product, and you stay on the right side of this.&lt;/p&gt;

&lt;h2&gt;
  
  
  When cloning is the right move
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Migrating your own site.&lt;/strong&gt; You already own the content and brand — clone it into Sitelas, then edit and publish from chat going forward.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A starting layout you'll customize.&lt;/strong&gt; Admire a structure? Clone it as scaffolding, then change the copy, palette, imagery, and sections until it's your site, not theirs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A fast prototype.&lt;/strong&gt; Stand up a realistic page to test an idea, knowing the assets get swapped before anything ships.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What it's &lt;strong&gt;not&lt;/strong&gt; for: republishing someone else's brand, art, and copy verbatim. The capability is powerful; the imagery caveat above is the guardrail.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why do this from a chat at all?
&lt;/h2&gt;

&lt;p&gt;Same reason the rest of Sitelas lives in Claude: the context never resets. The chat that cloned your page can keep going — restyle it, &lt;a href="https://sitelas.com/blog/build-a-form-and-connect-google-sheets" rel="noopener noreferrer"&gt;connect a form to Google Sheets&lt;/a&gt;, read submissions, draft replies through Gmail — without you opening a dashboard. The clone isn't a dead end; it's the first step of a site you run from the same window. For a full worked example of that loop, see &lt;a href="https://sitelas.com/blog/launch-a-waitlist-from-a-claude-chat" rel="noopener noreferrer"&gt;I Launched a Waitlist and Ran It From One Claude Chat&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And if you'd rather fine-tune by hand, every cloned site opens in the &lt;a href="https://sitelas.com/blog/how-to-use-the-sitelas-editor" rel="noopener noreferrer"&gt;visual editor&lt;/a&gt; with the same draft → preview → publish flow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add the Sitelas connector in Claude, paste a URL, and say &lt;strong&gt;clone it&lt;/strong&gt;. Review the private preview, swap the borrowed imagery for your own, customize until it's yours, then publish. Start at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>showdev</category>
    </item>
    <item>
      <title>I Launched a Waitlist and Ran It From One Claude Chat</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Thu, 18 Jun 2026 19:58:30 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/i-launched-a-waitlist-and-ran-it-from-one-claude-chat-15ba</link>
      <guid>https://dev.to/usmanspacehaider/i-launched-a-waitlist-and-ran-it-from-one-claude-chat-15ba</guid>
      <description>&lt;p&gt;A waitlist is the cheapest demand test you can run before you build the thing. The problem is the plumbing: a landing-page tool, a form tool, a spreadsheet to watch the signups, and then — when you finally have a list — a mail-merge to invite the right people. Four tools and a long evening, for what should be a two-day experiment.&lt;/p&gt;

&lt;p&gt;I ran the whole thing for a fictional indie SaaS, &lt;strong&gt;Juno&lt;/strong&gt; (an analytics co-pilot), from a single Claude chat. Page to published list to drafted invites. Here's exactly how — and why it's a category no static-site builder can touch.&lt;/p&gt;

&lt;h2&gt;
  
  
  What an MCP connector actually is (30-second version)
&lt;/h2&gt;

&lt;p&gt;Claude can connect to outside tools through MCP connectors. Add one, and Claude can &lt;strong&gt;do things&lt;/strong&gt; in that tool for you, not just talk about it. You already use the Gmail, Calendar, and Google Drive connectors. Sitelas has one too — add it and Claude can design sites, publish them, and read your form submissions, all from chat. That's the difference between "Claude gives me launch advice" and "Claude runs the launch." (Want the plain step-by-step first? See &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;How to Build a Website From a Claude Chat&lt;/a&gt;.)&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Connect Sitelas to Claude
&lt;/h2&gt;

&lt;p&gt;One-time setup: Sitelas is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, so adding it takes one click — open the listing and choose &lt;strong&gt;Add&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Using Claude Code or Claude Desktop instead? Those read a config file rather than the directory, so point them at &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sign in to Sitelas when prompted, and switch on the &lt;strong&gt;Gmail&lt;/strong&gt; and &lt;strong&gt;Google Sheets&lt;/strong&gt; connectors while you're there (we'll use them for the sheet and the invites). Setup's done; everything else is just asking.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Ask Claude to build and publish the launch page
&lt;/h2&gt;

&lt;p&gt;You describe it once — Claude picks a layout, writes the form, &lt;strong&gt;previews it&lt;/strong&gt; , and publishes:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F28cgpl7a7atlgzt43fn0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F28cgpl7a7atlgzt43fn0.png" alt="Claude building, previewing, and publishing the Juno waitlist page in one message." width="800" height="683"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's the real, branded launch page at the top of this post — live on the web, with a working waitlist form. Because you told it to publish, Claude previews the page and pushes it live in one go; for any change &lt;em&gt;after&lt;/em&gt; launch it shows you a preview first, so your live page never changes until you say go. Every submission already lands in your Sitelas inbox. Want changes? "Add a launch countdown." "Make the hero darker." You say it; Claude edits, previews, and republishes. No drag-and-drop, no template wrestling.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Ask Claude to drop the signups into Google Sheets
&lt;/h2&gt;

&lt;p&gt;Every signup already lands in your Sitelas inbox — no setup, nothing to connect on Sitelas's side. Want them in a spreadsheet you can slice? Just ask Claude:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Put my Juno waitlist signups in a Google Sheet and keep it updated."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude reads the signups from your site with the Sitelas connector, then writes them to a sheet in your own Drive using &lt;strong&gt;its own Google Sheets connector&lt;/strong&gt; — the same one you'd use for any other Sheets task. Sitelas never sits in the middle, and your visitors never see a login screen. New signups? Ask Claude to refresh the sheet.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Let the signups roll in — then ask Claude to score them by fit
&lt;/h2&gt;

&lt;p&gt;Post the link on X, in your communities, on launch day. As signups arrive, Claude reads them straight from your site's submissions — no exporting, no sorting a spreadsheet by hand. You ask:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2lzfn8yqzrlt5pq813df.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2lzfn8yqzrlt5pq813df.png" alt="Claude reading the signups and scoring them by ICP fit, returning the strongest to invite first." width="800" height="812"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A 400-row spreadsheet becomes a ranked, reasoned shortlist — the people most likely to convert and give you real feedback, first. Then you push on it like a growth partner: &lt;em&gt;"Who mentioned churn?"&lt;/em&gt; &lt;em&gt;"Group the enterprise ones for a separate track."&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Ask Claude to draft the invites
&lt;/h2&gt;

&lt;p&gt;Gmail is already connected, so you close the loop in the same chat:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fntmqyullv5cggmxm7itz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fntmqyullv5cggmxm7itz.png" alt="Claude drafting personalized early-access invites and confirmation emails via Gmail." width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude drafts a personalized invite for each of your top signups — referencing what &lt;em&gt;they&lt;/em&gt; said they'd use Juno for — plus a warm "you're on the list" note for everyone else. You review, approve, send. From "waitlist is live" to "best 20 invited" without leaving the window.&lt;/p&gt;

&lt;h2&gt;
  
  
  The whole loop, in one window
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt;"Build &amp;amp; publish a waitlist page." → Claude (Sitelas) ships it. &lt;strong&gt;You:&lt;/strong&gt;"Put the signups in a Google Sheet." → Claude reads them from Sitelas and writes them to your Drive with its own Sheets connector.&lt;em&gt;…signups keep arriving in your inbox…&lt;/em&gt; &lt;strong&gt;You:&lt;/strong&gt;"Score the signups by fit, give me the top 20." → Claude (Sitelas) returns a ranked shortlist. &lt;strong&gt;You:&lt;/strong&gt;"Draft the early-access invites." → Claude (Gmail) writes them, personalized.&lt;/p&gt;

&lt;p&gt;A handful of messages and one quick click. One window. A live landing page, a self-updating list, AI segmentation, and drafted invites.&lt;/p&gt;

&lt;h2&gt;
  
  
  What makes this different
&lt;/h2&gt;

&lt;p&gt;It's not that any single piece is new — it's that there are &lt;strong&gt;no handoffs&lt;/strong&gt;. Normally the page lives in one tool, the signups in another, the segmentation in your head, the invites in a fourth tab. Every gap is glue work. Routing it through Claude's connectors collapses that into one conversation where the context never resets — Claude already knows who scored highest when it drafts their invite, because it's the same chat that ranked them.&lt;/p&gt;

&lt;p&gt;That's the part a Webflow or Squarespace site can't do: your site isn't a destination, it's an &lt;strong&gt;automation endpoint&lt;/strong&gt; sitting next to every other tool you run in Claude. Form submission → fit score → personalized invite, composed in one thread — no Zapier seat, no dashboard-hopping, no glue code.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;The usual patchwork (page + form + sheet + mail-merge)&lt;/th&gt;
&lt;th&gt;Claude + Sitelas connector&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Tools to juggle&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;1 (Claude)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Build + publish the launch page&lt;/td&gt;
&lt;td&gt;Separate tool&lt;/td&gt;
&lt;td&gt;In chat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Auto-collected signups&lt;/td&gt;
&lt;td&gt;Maybe&lt;/td&gt;
&lt;td&gt;Yes → your inbox (+ Sheets via Claude)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AI scoring / segmentation&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Personalized invites from one place&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes (Gmail)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Prefer not to leave for claude.ai? There's an editor too
&lt;/h2&gt;

&lt;p&gt;Everything above runs from claude.ai — but you don't have to. Every Sitelas site also opens in a &lt;a href="https://sitelas.com/blog/how-to-use-the-sitelas-editor" rel="noopener noreferrer"&gt;visual editor&lt;/a&gt; with the &lt;strong&gt;same AI built in&lt;/strong&gt; : describe an edit in plain language and it happens on the canvas, or click any element and tweak it by hand.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fofud61djwjyt7ctnyrlf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fofud61djwjyt7ctnyrlf.png" alt="The Sitelas visual editor with its built-in AI assistant, editing the Juno site." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The honest caveat
&lt;/h2&gt;

&lt;p&gt;This is a lightweight, conversational pipeline — not a full growth stack. There's no native bulk-email sender (Claude drafts individual messages through your own Gmail, which is perfect for a focused early-access list, not a 50k blast), and no built-in CRM. When your list is huge and your funnel is mature, bring dedicated tools. But for the launch itself — where the real work is &lt;em&gt;having a page up and inviting the right people fast&lt;/em&gt; — this is the whole loop in a chat window.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add the Sitelas connector in Claude (plus Gmail and Google Sheets). Ask it to build and publish your waitlist page, drop the signups into a Google Sheet, score the ones that land, then draft the invites. Set up an account at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;, connect it to Claude, and launch from the chat you're already in.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>startup</category>
    </item>
    <item>
      <title>How to Build a Form and Connect It to Google Sheets</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Thu, 18 Jun 2026 19:58:30 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/how-to-build-a-form-and-connect-it-to-google-sheets-1n2e</link>
      <guid>https://dev.to/usmanspacehaider/how-to-build-a-form-and-connect-it-to-google-sheets-1n2e</guid>
      <description>&lt;p&gt;A form is how your site turns visitors into leads — a contact request, a waitlist signup, a project inquiry. In Sitelas you build one in the visual editor; every submission lands in your inbox automatically, and from there you can forward it wherever you already work — a Google Sheet, Slack, your CRM — with a single webhook. Here's the whole thing, start to finish.&lt;/p&gt;

&lt;p&gt;(New to the editor? Start with &lt;a href="https://sitelas.com/blog/how-to-use-the-sitelas-editor" rel="noopener noreferrer"&gt;How to Use the Sitelas Editor&lt;/a&gt;; this guide picks up from there.)&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Add a form in the editor
&lt;/h2&gt;

&lt;p&gt;Open the page where you want the form and add a &lt;strong&gt;Form&lt;/strong&gt; block:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Click the &lt;strong&gt;+&lt;/strong&gt; (add block) where you want it, and choose &lt;strong&gt;Form&lt;/strong&gt; from the block list. A form drops onto the canvas with starter fields.&lt;/li&gt;
&lt;li&gt;Click any field to edit it in the settings panel — change its &lt;strong&gt;label&lt;/strong&gt; , switch its &lt;strong&gt;type&lt;/strong&gt; (short text, email, phone, dropdown, long text, file upload), and toggle &lt;strong&gt;required&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Use &lt;strong&gt;+ Add field&lt;/strong&gt; for anything extra (company, budget, "how did you hear about us"), and set the &lt;strong&gt;submit button&lt;/strong&gt; label.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Keep it short — name, email, and one "what do you need" field converts better than a ten-field wall. When it looks right, &lt;strong&gt;Publish&lt;/strong&gt; the site so the form is live and can start collecting.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Every submission lands in your inbox
&lt;/h2&gt;

&lt;p&gt;Before you connect anything, every form already works. Submissions are captured and show up in your site's &lt;strong&gt;Messages&lt;/strong&gt; inbox — open your dashboard, pick the site, and click &lt;strong&gt;Messages&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbmk2cw0hlratf7c9pfnf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbmk2cw0hlratf7c9pfnf.png" alt="The submissions inbox in the dashboard, where every form entry lands automatically." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can read entries, filter unread, reply, and export to CSV — no setup required. The inbox is always the destination; forwarding just sends a copy somewhere else.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Forward submissions with a webhook
&lt;/h2&gt;

&lt;p&gt;Want each submission to also drop into a spreadsheet, a Slack channel, or your CRM? Add a &lt;strong&gt;webhook&lt;/strong&gt; — one HTTPS URL that Sitelas POSTs each submission to the moment it arrives.&lt;/p&gt;

&lt;p&gt;In the editor, click your &lt;strong&gt;Form&lt;/strong&gt; block and open its settings. In the &lt;strong&gt;Forward to webhook&lt;/strong&gt; field, paste a webhook URL, then republish. That's it — every new submission is sent to that URL, with all its fields (and links to any uploaded files) as JSON.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffqby4nm80mnsa3y6waik.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffqby4nm80mnsa3y6waik.png" alt="Forwarding flow: a form webhook goes to Zapier or Make, which routes it to Google Sheets, Slack, or your CRM." width="799" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The webhook is the universal connector: point it at an automation tool and route the data anywhere you already use.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Get submissions into Google Sheets
&lt;/h2&gt;

&lt;p&gt;To land each submission as a row in a Google Sheet, put a &lt;strong&gt;Zapier&lt;/strong&gt; (or &lt;strong&gt;Make&lt;/strong&gt; ) automation between your form and the sheet:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;In Zapier, create a Zap with &lt;strong&gt;Webhooks by Zapier → Catch Hook&lt;/strong&gt; as the trigger. Copy the webhook URL it gives you.&lt;/li&gt;
&lt;li&gt;Paste that URL into your form's &lt;strong&gt;Forward to webhook&lt;/strong&gt; field (Step 3) and republish.&lt;/li&gt;
&lt;li&gt;Submit your own form once so Zapier sees a sample.&lt;/li&gt;
&lt;li&gt;Add a &lt;strong&gt;Google Sheets → Create Spreadsheet Row&lt;/strong&gt; action, map the fields, and turn the Zap on.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Now every submission appends a row to your sheet, in your own Google account — and it still lands in your Sitelas inbox as the source of truth. The same pattern works for Airtable, Notion, Slack, or an email tool: swap the second step for whatever you use.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about file uploads?
&lt;/h2&gt;

&lt;p&gt;If your form has a &lt;strong&gt;file upload&lt;/strong&gt; field (a résumé, a brief, a logo), Sitelas stores the file securely for you — no Google account or setup needed. The attachment shows up in your inbox as a download link, and the webhook payload includes that same durable link, so whatever you forward to (your sheet, your CRM) gets a working file link too.&lt;/p&gt;

&lt;h2&gt;
  
  
  Recap
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Add a Form block&lt;/strong&gt; in the editor and set your fields.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Publish&lt;/strong&gt; — the form is live and submissions land in your &lt;strong&gt;Messages inbox&lt;/strong&gt; automatically.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Forward to webhook&lt;/strong&gt; (in the Form block's settings) → point it at Zapier/Make → &lt;strong&gt;Google Sheets, Slack, or your CRM&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;File uploads are stored for you and shared as secure download links.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Open your dashboard, add a form to a page, publish, and read your first submission in the inbox. When you're ready to route it onward, drop a Zapier webhook URL into the form's settings. You can also drive the whole thing from a Claude chat — building the form, publishing, and reading submissions by just asking; here's &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;how building from a chat works&lt;/a&gt;, and &lt;a href="https://sitelas.com/blog/launch-a-waitlist-from-a-claude-chat" rel="noopener noreferrer"&gt;how a waitlist runs from one chat&lt;/a&gt;. Start at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>tutorial</category>
      <category>automation</category>
    </item>
    <item>
      <title>How to Build a Website From a Claude Chat</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Thu, 18 Jun 2026 19:58:30 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/how-to-build-a-website-from-a-claude-chat-27bh</link>
      <guid>https://dev.to/usmanspacehaider/how-to-build-a-website-from-a-claude-chat-27bh</guid>
      <description>&lt;p&gt;Most website builders make you open an app, pick a template, and start dragging things around. Sitelas has a visual editor too — but you don't have to use it. Because Sitelas plugs into Claude as a connector, you can build, restyle, and publish a real website by &lt;strong&gt;just describing it in a chat&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The part that makes this safe — and genuinely different — is the flow: &lt;strong&gt;Claude shows you a preview before anything goes public&lt;/strong&gt;. Nothing is live until you say so. Here's the whole loop, with a freelance photographer's portfolio as the example.&lt;/p&gt;

&lt;h2&gt;
  
  
  First: connect Sitelas to Claude
&lt;/h2&gt;

&lt;p&gt;One-time setup: Sitelas is in &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt;, so adding it takes one click — open the listing and choose &lt;strong&gt;Add&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Using Claude Code or Claude Desktop instead? Those read a config file rather than the directory, so point them at &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Sign in to Sitelas when prompted. That's it — Claude can now design sites, change themes, publish them, and read your form submissions, all from chat.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Describe the site — Claude builds a draft and previews it
&lt;/h2&gt;

&lt;p&gt;Tell Claude what you want in plain language: the kind of site, the vibe, the pages.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8u8r55ocjwosshsanz1c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8u8r55ocjwosshsanz1c.png" alt="Asking Claude to build a photography portfolio; it creates the site and returns a private preview URL." width="800" height="598"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude picks a fitting design, writes the copy around your brief, drops in stock imagery to start, and saves it all as a &lt;strong&gt;draft&lt;/strong&gt;. Then it hands you a &lt;strong&gt;preview URL&lt;/strong&gt; — something like &lt;code&gt;preview-linden.sitelas.com&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This is the important bit: that preview is private and the draft is &lt;strong&gt;not public&lt;/strong&gt;. Your real address (&lt;code&gt;linden.sitelas.com&lt;/code&gt;) returns a 404 until you publish. So you get to see the whole site, click through every page, and decide what to change — with zero risk of anyone stumbling onto a work-in-progress.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Review and refine — keep prompting until it's right
&lt;/h2&gt;

&lt;p&gt;Open the preview, look it over, and tell Claude what to change. Want a different look? Just describe it — Claude restyles the whole site at once.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft7bxt5042irhwxnvm4ri.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft7bxt5042irhwxnvm4ri.png" alt="Asking Claude to make the palette warmer and darker; it updates the theme and refreshes the same preview." width="799" height="460"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Change the palette, rewrite the hero, swap a photo, add a section — each request updates the &lt;strong&gt;draft&lt;/strong&gt; , and Claude gives you back the refreshed preview. Your live site still doesn't exist yet, so iterate as much as you like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;"Make the palette warmer and a touch darker."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Tighten the About copy — two sentences, not a paragraph."&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;"Swap the cover image for something with more negative space."&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Keep going until the preview is exactly what you want. There's no penalty for changing your mind ten times — it's all just the draft.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Publish when it's right
&lt;/h2&gt;

&lt;p&gt;When the preview looks the way you want it, tell Claude to make it live.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F13e63hzpiiyjwbej31sl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F13e63hzpiiyjwbej31sl.png" alt="Telling Claude to publish; it promotes the draft to live and returns the public URL." width="799" height="435"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude promotes the draft to your public address and confirms it's live. Now &lt;code&gt;linden.sitelas.com&lt;/code&gt; is a real website you can share anywhere — a link in your bio, a business card, an email signature.&lt;/p&gt;

&lt;h2&gt;
  
  
  Editing later: the same preview-then-publish loop
&lt;/h2&gt;

&lt;p&gt;Here's where the flow really pays off. Once your site is live, new changes &lt;strong&gt;don't touch it&lt;/strong&gt;. Ask Claude for an edit and it stages the change as a fresh preview — your live site keeps serving the last published version until you publish again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5on935u35fdqq9e9li1q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5on935u35fdqq9e9li1q.png" alt="Asking Claude to add a contact form later; it stages a new preview while the live site stays unchanged." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So you can add a contact form, refresh your portfolio, or change your rates without ever putting a half-done edit in front of visitors. You review the new preview, tweak it if you need to, and publish when it's ready — exactly like the first time.&lt;/p&gt;

&lt;h2&gt;
  
  
  The mental model
&lt;/h2&gt;

&lt;p&gt;It's the same model whether you work from chat or the visual editor, and it's worth holding onto:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The preview is always your latest draft.&lt;/strong&gt; Every change Claude makes shows up here first.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The live site is your last publish.&lt;/strong&gt; It only changes when you explicitly say "publish."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That gap between draft and live is the whole point. You experiment freely in the preview; visitors only ever see the version you signed off on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why do this from a chat at all?
&lt;/h2&gt;

&lt;p&gt;Because the context never resets. The same Claude that built your site can &lt;a href="https://sitelas.com/blog/build-a-form-and-connect-google-sheets" rel="noopener noreferrer"&gt;connect Google Sheets to your contact form&lt;/a&gt;, read the submissions that come in, and draft replies through your Gmail — all in the same conversation. Your site stops being a separate destination you log into and becomes one more thing Claude can do for you, next to your email and calendar. For a full worked example — launch page → signups → scored shortlist → drafted invites — see &lt;a href="https://sitelas.com/blog/launch-a-waitlist-from-a-claude-chat" rel="noopener noreferrer"&gt;I Launched a Waitlist and Ran It From One Claude Chat&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And if you'd rather point and click for a particular change, every site still opens in the &lt;a href="https://sitelas.com/blog/how-to-use-the-sitelas-editor" rel="noopener noreferrer"&gt;visual editor&lt;/a&gt; with the same draft → preview → publish flow. Chat and editor edit the same draft, so you can move between them freely.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Add the Sitelas connector in Claude, then ask it to build the site you've been meaning to make. Review the preview, prompt until it's right, and publish when you're happy. Start at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to Use the Sitelas Editor</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Thu, 18 Jun 2026 19:58:30 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/how-to-use-the-sitelas-editor-2je</link>
      <guid>https://dev.to/usmanspacehaider/how-to-use-the-sitelas-editor-2je</guid>
      <description>&lt;p&gt;Every Sitelas site opens in a visual editor in your browser. It's where you nudge things by hand — change a headline, swap a color, add a page — and where you publish when you're ready. You reach it from your dashboard: open a site and hit &lt;strong&gt;Edit&lt;/strong&gt;. By the end of this guide you'll have restyled a site, added a page, made an edit with the built-in AI, and published it — no code, no template wrestling.&lt;/p&gt;

&lt;p&gt;That's the whole editor up top. Three regions to know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Left rail&lt;/strong&gt; — Home, Pages, Theme, and the AI assistant.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Canvas&lt;/strong&gt; — your actual site, fully interactive. Click any element to select and edit it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bottom bar&lt;/strong&gt; — edit/live and device toggles on the left; Discard, Save, Preview, and &lt;strong&gt;Publish site&lt;/strong&gt; on the right.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Notice the amber strip up top: &lt;strong&gt;"Not published yet — visitors see a 404 until you publish."&lt;/strong&gt; That's the lifecycle talking — more on it at the end.&lt;/p&gt;

&lt;h2&gt;
  
  
  Edit vs. live, and previewing on mobile
&lt;/h2&gt;

&lt;p&gt;The bottom-left toggles change how you see the canvas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Edit&lt;/strong&gt; — the working mode. Click elements, edit text inline, drag focus around.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Live preview&lt;/strong&gt; — the same page without edit handles, exactly as visitors see it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Desktop / Mobile&lt;/strong&gt; — flip the canvas between a full-width view and a phone frame to check responsiveness before you ship.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F65kc6gczozfik2hfqjfa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F65kc6gczozfik2hfqjfa.png" alt="The editor in Mobile preview — the site rendered in a phone frame, edit chrome still around it." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For a shareable preview, the &lt;strong&gt;Preview&lt;/strong&gt; button in the bottom bar opens your site's preview URL in a new tab — a real, live link that always shows your latest draft (safe to send to a client; it's excluded from search engines).&lt;/p&gt;

&lt;h2&gt;
  
  
  Restyle everything from the Theme panel
&lt;/h2&gt;

&lt;p&gt;Open &lt;strong&gt;Theme&lt;/strong&gt; in the left rail to change the look of the whole site at once — no element-by-element editing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flm3kao71jun1i8pwttaw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flm3kao71jun1i8pwttaw.png" alt="The Theme panel — brand colors, text and border tokens, and typography." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You get &lt;strong&gt;brand colors&lt;/strong&gt; (primary, secondary, accent, background, surface), &lt;strong&gt;text &amp;amp; border&lt;/strong&gt; tokens, and &lt;strong&gt;typography&lt;/strong&gt; (display and body fonts). Change a token here and it cascades everywhere that token is used, so the whole site stays consistent.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pages: single pages and collections
&lt;/h2&gt;

&lt;p&gt;Open &lt;strong&gt;Pages&lt;/strong&gt; to manage your site's structure. There are two kinds.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fg4urgf6p3ak0qzt0sy3f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fg4urgf6p3ak0qzt0sy3f.png" alt="The Pages panel — single pages up top, collections below." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Single pages&lt;/strong&gt; — one page, one URL (Home, About, a landing page). Add, rename, duplicate, or delete them; &lt;strong&gt;New page&lt;/strong&gt; creates one from scratch.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Collections&lt;/strong&gt; — one design, many entries. The &lt;code&gt;project&lt;/code&gt; collection here powers every &lt;code&gt;/work/&amp;lt;project&amp;gt;&lt;/code&gt; detail page from a shared template, so adding a new project gives you a new page automatically — no rebuilding the layout. Collections are how you run a blog, a portfolio of case studies, a listing of events, and so on.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Click any page to edit it on the canvas; click a collection to manage its items.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make changes by describing them — the AI panel
&lt;/h2&gt;

&lt;p&gt;Don't want to hunt for the right control? Open the &lt;strong&gt;AI&lt;/strong&gt; panel and just say what you want.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fllq70qc6g58w1d7q702a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fllq70qc6g58w1d7q702a.png" alt="The in-editor AI assistant — describe a change and it's applied on the canvas." width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Type something like &lt;em&gt;"make the hero background darker,"&lt;/em&gt; &lt;em&gt;"rewrite the intro in a warmer tone,"&lt;/em&gt; or &lt;em&gt;"add a pricing page,"&lt;/em&gt; and the assistant makes the edit directly on the canvas. You can shift-click elements first to point it at exactly what you mean. It's the same draft you're editing by hand — so you can mix manual tweaks and AI edits freely.&lt;/p&gt;

&lt;h2&gt;
  
  
  How draft, preview, and publish fit together
&lt;/h2&gt;

&lt;p&gt;This is the part worth understanding clearly, because it's what keeps your live site safe while you experiment.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;A new site starts as a draft.&lt;/strong&gt; When you create a site — from a template or blank — it isn't public yet. Its live URL returns a 404 (that amber banner), while its &lt;strong&gt;preview URL&lt;/strong&gt; shows the draft so you can review and share it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Every change lands in the draft.&lt;/strong&gt; Edit text, swap the theme, add a page, run an AI edit — each Save updates your draft, and the preview reflects it immediately. Your live site doesn't change at all.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Publish promotes the draft to live.&lt;/strong&gt; Hit &lt;strong&gt;Publish site&lt;/strong&gt; and the current draft becomes the public site. The banner clears.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keep editing — changes pile up in the draft again.&lt;/strong&gt; After publishing, new edits go back into the draft (and the preview) and accumulate there. Visitors keep seeing the last published version until you publish again. Changed your mind? &lt;strong&gt;Discard&lt;/strong&gt; drops the unsaved edits.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So the mental model is simple: &lt;strong&gt;the preview is always your latest draft; the live site is your last publish.&lt;/strong&gt; You can iterate as much as you like without anyone seeing a half-finished change.&lt;/p&gt;

&lt;h2&gt;
  
  
  Forms and integrations
&lt;/h2&gt;

&lt;p&gt;Your site can also collect leads — a contact or signup form whose submissions land in your Sitelas inbox and can auto-route to Google Sheets or a webhook the moment someone hits submit. Building a form and wiring it to Google Sheets is its own short guide: &lt;a href="https://sitelas.com/blog/build-a-form-and-connect-google-sheets" rel="noopener noreferrer"&gt;How to Build a Form and Connect It to Google Sheets&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;Open your dashboard, create a site from a template (or start blank), and hit &lt;strong&gt;Edit&lt;/strong&gt;. Restyle it from the Theme panel, add a page, ask the AI to change something, flip to mobile to check it — then &lt;strong&gt;Publish&lt;/strong&gt; when it looks right. Prefer not to click around? You can do all of this from a Claude chat instead — see &lt;a href="https://sitelas.com/blog/build-a-website-from-a-claude-chat" rel="noopener noreferrer"&gt;How to Build a Website From a Claude Chat&lt;/a&gt;. Start at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>I Hired My First Engineer Without Leaving a Claude Chat</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Thu, 18 Jun 2026 07:51:56 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/i-hired-my-first-engineer-without-leaving-a-claude-chat-2817</link>
      <guid>https://dev.to/usmanspacehaider/i-hired-my-first-engineer-without-leaving-a-claude-chat-2817</guid>
      <description>&lt;p&gt;Hiring your first engineer usually means five tabs: a website builder, a form tool, a spreadsheet, your inbox, your calendar. Every handoff between them is a place to lose a candidate.&lt;/p&gt;

&lt;p&gt;I wanted to see how far I could get without ever leaving Claude. Turns out: the whole way. A careers page built and published, applications captured, resumes screened and ranked, interview invites drafted and scheduled — all in a single conversation. Claude drives Sitelas through its MCP connector, and reaches into your Google connectors in the same breath.&lt;/p&gt;

&lt;p&gt;Here's exactly how it works.&lt;/p&gt;

&lt;h2&gt;
  
  
  What an MCP connector actually is (30-second version)
&lt;/h2&gt;

&lt;p&gt;Claude can connect to outside tools through something called MCP connectors. Once you add one, Claude can &lt;em&gt;do&lt;/em&gt; things in that tool on your behalf — not just talk about it.&lt;/p&gt;

&lt;p&gt;You probably use a few already: the Google Drive, Gmail, and Calendar connectors let Claude read your files, draft emails, and schedule events. Sitelas has one too. Add it, and Claude can design websites, publish them, and read your form submissions — all from chat. That's what turns this from "Claude gives me hiring advice" into "Claude runs my hiring pipeline."&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Connect Sitelas to Claude
&lt;/h2&gt;

&lt;p&gt;This is the only setup, and it takes about a minute:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Sitelas in Claude's connector directory&lt;/a&gt; and choose &lt;strong&gt;Add&lt;/strong&gt; — one click.&lt;/li&gt;
&lt;li&gt;On Claude Code or Claude Desktop, which read a config file instead, use this URL: 
&lt;a href="https://sitelas.com/api/mcp" rel="noopener noreferrer"&gt;https://sitelas.com/api/mcp&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Sign in to Sitelas when prompted — that's it. Start chatting.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;While you're in there, switch on the Gmail and Google Calendar connectors too — we'll use both later. From here, everything happens by just asking.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Ask Claude to design and publish the careers page
&lt;/h2&gt;

&lt;p&gt;You describe the page in plain language:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Using Sitelas, build and publish a careers page for my startup, Northwind. We're hiring a founding backend engineer. Modern, technical, confident tone. Include an application form with name, email, resume upload, GitHub link, years of experience, and a 'project you're proud of' question."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude picks a fitting design, customizes it to the brief, builds the form with exactly those fields, and publishes it live — then hands back the URL. No drag-and-drop, no template wrestling, no separate "now go publish" step. Want changes? "Make the hero darker." "Add a second role for a designer." You say it; Claude edits and republishes.&lt;/p&gt;

&lt;p&gt;One message in, you have a real, branded careers page on the web.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Screenshot&lt;/strong&gt; The published careers page, side by side with the Claude message that returned its URL.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: The applications collect themselves
&lt;/h2&gt;

&lt;p&gt;There is nothing to wire up. Every application submitted through the form lands in your Sitelas inbox automatically — timestamp, source, every field, and the resume stored as a secure download link.&lt;/p&gt;

&lt;p&gt;Ask for it whenever you want:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Read the applications that came in for the backend engineer role."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude reads them straight from the inbox. If you also want each one as a spreadsheet row, add a webhook to the form and point it at Zapier or Make, then on to Google Sheets — the inbox stays the source of truth either way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Let the applications roll in — then ask Claude to screen them
&lt;/h2&gt;

&lt;p&gt;Post the link wherever you'd normally say "email us your resume." As applications arrive, you don't open a single PDF. You ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Read all the applications for the backend engineer role. Open each resume, then score the candidate 1–10 on: production Go/Rust experience, has shipped at scale, startup background, and the quality of their 'project you're proud of' answer. Give me a ranked table with a one-line reason per score, and flag your top 5."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude reads the submissions, opens each linked resume from the inbox, and returns a ranked shortlist with reasoning — an evening of resume-reading compressed into the time it takes to refill your coffee. Then you interrogate it like a hiring partner:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;"Compare #2 and #4 on distributed systems."&lt;/li&gt;
&lt;li&gt;"Who am I underrating because their resume is plain but their project answer is excellent?"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Screenshot&lt;/strong&gt; Claude's ranked candidate table, exactly as it came back in the chat.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Bring in your other connectors to close the loop
&lt;/h2&gt;

&lt;p&gt;This is where one connected conversation beats five tabs. Gmail and Calendar are already on, so you keep going in the same chat:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Draft warm interview-invite emails to my top 5 candidates, and suggest three interview slots next week from my calendar."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude drafts the emails through your Gmail connector and proposes slots through your Calendar connector. You review, approve, and you've gone from "job is live" to "interviews booked" without ever leaving the window.&lt;/p&gt;

&lt;p&gt;The connectors compose: Sitelas captures the candidates and stores their resumes, Gmail sends the outreach, Calendar books the time. Claude orchestrates all three.&lt;/p&gt;

&lt;h2&gt;
  
  
  The whole pipeline, in one window
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt;"Build &amp;amp; publish a careers page for a backend engineer role."&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude →&lt;/strong&gt; (Sitelas) designs + publishes it, returns the URL.&lt;/p&gt;

&lt;p&gt;…applications come in, collected in your Sitelas inbox…&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt;"Read the applications, open each resume, score and rank them."&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude →&lt;/strong&gt; (Sitelas) returns a ranked shortlist with reasons.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You:&lt;/strong&gt;"Draft invites to my top 5 and find interview slots next week."&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Claude →&lt;/strong&gt; (Gmail + Calendar) drafts emails, proposes times.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Four messages. One window. A careers page, a live applicant database, AI screening, and scheduled interviews.&lt;/p&gt;

&lt;h2&gt;
  
  
  What makes this different
&lt;/h2&gt;

&lt;p&gt;It's not that any single piece is new — it's that there are no handoffs. Normally the website lives in one tool, the applications in another, the screening in your head, the emails in a third tab, the calendar in a fourth. Every gap is friction, and a chance to drop a candidate.&lt;/p&gt;

&lt;p&gt;Routing it all through Claude's connectors collapses that into one conversation where the context never resets. Claude already knows who your top 5 are when it drafts the invites — because it's the same chat that scored them.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;The usual patchwork (form tool + sheet + inbox)&lt;/th&gt;
&lt;th&gt;Claude + Sitelas connector&lt;/th&gt;
&lt;th&gt;A full ATS&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Tabs / tools to juggle&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;4–5&lt;/td&gt;
&lt;td&gt;1 (Claude)&lt;/td&gt;
&lt;td&gt;1, after days of setup&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Build + publish careers page&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Separate tool&lt;/td&gt;
&lt;td&gt;In chat&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Auto-collected applications&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Maybe&lt;/td&gt;
&lt;td&gt;Yes → your Sitelas inbox&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;AI resume screening&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Premium tiers&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Email + schedule from one place&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes (Gmail + Calendar)&lt;/td&gt;
&lt;td&gt;Partially&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  The honest caveat
&lt;/h2&gt;

&lt;p&gt;This is a lightweight, conversational pipeline — not Workday. No formal interview-stage board, no compliance reporting, no fifty-reqs-a-year scale. If you're a large org, you'll want a dedicated ATS — and that's fine. Outgrowing this means you're winning.&lt;/p&gt;

&lt;p&gt;But for hiring your first 1–10 people — where the real pain is just having somewhere to apply, and then reading the pile — this gives you the whole loop, careers page through scheduled interviews, without leaving a chat window.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Add the Sitelas connector in Claude (plus Gmail and Calendar).&lt;/li&gt;
&lt;li&gt;Ask Claude to build and publish your careers page.&lt;/li&gt;
&lt;li&gt;When applications land, ask Claude to read the resumes and rank candidates.&lt;/li&gt;
&lt;li&gt;Ask it to draft invites and find interview times.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The job that used to span five tools and a long evening now fits in one conversation.&lt;/p&gt;

&lt;p&gt;Set up an account at &lt;a href="https://sitelas.com" rel="noopener noreferrer"&gt;sitelas.com&lt;/a&gt;, connect it to Claude, and let it run the whole pipeline for you.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>startup</category>
    </item>
    <item>
      <title>Run Your Whole Site From Inside Claude.ai</title>
      <dc:creator>Usman Haider</dc:creator>
      <pubDate>Mon, 15 Jun 2026 11:22:34 +0000</pubDate>
      <link>https://dev.to/usmanspacehaider/run-your-whole-site-from-inside-claudeai-3hah</link>
      <guid>https://dev.to/usmanspacehaider/run-your-whole-site-from-inside-claudeai-3hah</guid>
      <description>&lt;p&gt;Most website tools split into two worlds: a builder for setup, a dashboard for operations. Sitelas collapses both into a Claude.ai chat. Here's what that actually looks like.&lt;/p&gt;

&lt;h2&gt;
  
  
  What ships in the connector
&lt;/h2&gt;

&lt;p&gt;Sitelas exposes its whole feature set to Claude.ai as MCP tools, over OAuth 2.1. Once installed, every feature in the product becomes a Claude verb — site creation, content editing, brand changes, scheduled publishing, form submissions, contact records, analytics, and custom domains. Site creation and editing run on Claude's own tokens via your claude.ai subscription; Sitelas charges zero AI credits on this path.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation (one minute)
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Add Sitelas from &lt;a href="https://claude.ai/directory/connectors/sitelas" rel="noopener noreferrer"&gt;Claude's connector directory&lt;/a&gt; — one click. Sign in when prompted.&lt;/li&gt;
&lt;li&gt;On Claude Code or Claude Desktop, which read a config file instead, use &lt;code&gt;https://sitelas.com/api/mcp&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Sign in to Sitelas when prompted. PKCE-protected OAuth 2.1 — 1-hour access tokens, 30-day refresh tokens that rotate on every use.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Day 0: Site creation
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;"Build a bakery site for Midnight Oven, Brooklyn — sourdough plus coffee, warm palette, contact-only."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude calls &lt;code&gt;select_template_for_brief&lt;/code&gt; with structured arguments (audience, register, conversion goal). The tool returns the top three scored archetypes. Claude picks one, clones it via &lt;code&gt;create_site_from_template&lt;/code&gt;, then runs bulk passes — &lt;code&gt;patch_nodes&lt;/code&gt; for copy, &lt;code&gt;replace_images_from_search&lt;/code&gt; for hero shots. Live at &lt;code&gt;midnight-oven.sitelas.com&lt;/code&gt; in about a minute.&lt;/p&gt;

&lt;h2&gt;
  
  
  Day 3: Submissions and contacts
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;"Anyone reach out this week?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude calls &lt;code&gt;list_submissions&lt;/code&gt; — three messages. Sarah asks about gluten-free; Mike wants catering. &lt;em&gt;"Draft a reply to Mike about Saturday catering."&lt;/em&gt; Claude calls &lt;code&gt;draft_reply_to_submission&lt;/code&gt;; the draft lands in your dashboard inbox ready to send.&lt;/p&gt;

&lt;h2&gt;
  
  
  Day 5: Analytics
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;"How's traffic been?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude calls &lt;code&gt;get_analytics(range_days: 7)&lt;/code&gt; and &lt;code&gt;top_pages&lt;/code&gt;. You get pageviews, unique sessions, top paths, top referrers, and a daily timeseries — in chat. No dashboard tab needed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Day 7: Scheduled publishing
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;"Publish a 'Closed Thursday' banner next Wednesday at 9am."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude calls &lt;code&gt;schedule_publish&lt;/code&gt; with a banner-bar patch and a future &lt;code&gt;run_at&lt;/code&gt;. A Vercel cron flips the live page over at the scheduled time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Day 21: Cloning a layout
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;"Clone the layout of ra.co and adapt it for my warehouse-party series."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Claude calls &lt;code&gt;capture_url&lt;/code&gt; — a Fly.io Playwright service returns a full-page screenshot, simplified DOM, and detected brand tokens. Claude's vision reads the screenshot, picks the closest events-category archetype, and composes a replica in-session.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's intentionally not in the connector
&lt;/h2&gt;

&lt;p&gt;Stripe Connect (we don't touch the money), native commerce or bookings (use &lt;code&gt;stripe-payment-link&lt;/code&gt; and &lt;code&gt;calendly-embed&lt;/code&gt; instead), broadcast email sending (use Mailchimp / ConvertKit / Beehiiv directly). Anything Claude already has a native connector for — Gmail, Drive, Calendar, Microsoft 365 — Sitelas leaves alone; it shows up as a verb-rich endpoint those existing connectors can call into.&lt;/p&gt;

&lt;h2&gt;
  
  
  One subscription, two surfaces
&lt;/h2&gt;

&lt;p&gt;You can also build and edit from &lt;code&gt;yourname.sitelas.com/edit&lt;/code&gt; with the in-editor AI chat (Gemini 2.5 Pro). It calls the same MCP tools Claude does — same fixture, same authoring layer. Same site, just a different chat panel.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>webdev</category>
      <category>mcp</category>
    </item>
  </channel>
</rss>
