Start here · Mail

Set up your first list and welcome sequence — entirely through your AI agent.

You just made a Loopi account. By the end of this page you'll have a signup form embedded on your website, a 2-email welcome sequence drafted and previewed (welcome instantly, follow-up tomorrow), and the form wired to the sequence so every new subscriber gets welcomed automatically. Three prompts. About an afternoon.

In this tutorial. A live signup loop — someone hits Subscribe on your site, lands in your Loopi list, and a welcome email shows up in their inbox seconds later. Below is exactly what that loop looks like once it's wired up.

The play

Connect Loopi to your AI agent once, then run three prompts. By the third one your site is live-capturing emails and every new signup gets a welcome email instantly and a follow-up the next morning.

Connect Loopi to Claude

Loopi is an MCP server, so it works with any AI agent that speaks MCP — Claude, ChatGPT with MCP support, Cursor, anything else. We'll use Claude as the example here. Once connected, every Loopi action — creating lists, drafting emails, sending previews, scheduling sequences — becomes something you can ask for in plain English.

New here? Create your Loopi account first →

Claude Desktop

Open Claude → Settings → Connectors → Add custom connector. Name it loopi and paste the URL https://api.loopi.social/mcp. Save. Claude will prompt you to authorize in a browser — log in with your Loopi account and grant access. After that, ask Claude "connect to loopi mcp" and you're done.

Claude Code

One command in your terminal:

claude mcp add --transport http loopi https://api.loopi.social/mcp

Then in any Claude Code session, ask "connect to loopi mcp". It opens a browser tab, you authorize once, and from then on every session inherits the connection. Same MCP, same actions — just driven from the terminal instead of the desktop app.

Either way, the rest of this page is platform-agnostic — the three prompts below work in Desktop or Code.

What Loopi handles for you

You'll never touch any of this. It happens because the agent calls Loopi MCP under the hood.

• Hosted form rendering. Your snippet is one line. The form HTML, validation, theme switching, and successful-submit screen are served from Loopi.
• Email delivery, done. By default your subscribers receive mail from noreply@mail.loopi.social — an address Loopi has already set up to land in inboxes, not spam folders. You don't manage any of the behind-the-scenes plumbing. Own a domain like yoursite.com? You can send as mail@yoursite.com instead — Loopi walks you through the few DNS records to add. See pricing for which plans include custom sending domains.
• Unsubscribe compliance. List-Unsubscribe headers and the inline unsubscribe link are injected on every send. You write the body; Loopi adds the legal plumbing.
• Click tracking and analytics. Every link in every email is wrapped for attribution, and per-step analytics roll up on the sequence detail page automatically.

Step 1 — Create your list and signup form

The list is the bucket. The form is the door. You'll set both up in one prompt.

Create my first Loopi mail list and a signup form pointing at it.

The list is called "Newsletter" — that's where people who give me their
email on my homepage end up. The form goes on a dark website, so use a
dark theme with a cyan accent. Headline: "Get the free Solo Builder
Toolkit". Subheadline: "Templates and the exact workflow I use to ship
apps solo — sent to your inbox." CTA button label: "Send it to me".
After submit, show: "Check your inbox — it's on the way."

Once you've created the form, paste me the embed snippet I should drop
into my site.

The agent creates the list, builds the form for it, then hands you back the embed snippet. It looks like this:

<script src="https://embed.loopi.social/v1.js" async></script>
<loopi-form form-id="mfrm_REPLACE_WITH_YOUR_FORM_ID"></loopi-form>

Don't copy this one. The placeholder above (mfrm_REPLACE_WITH_YOUR_FORM_ID) doesn't exist — use the snippet the agent returns in your chat. The real one carries your form id and the form's config (labels, fields, success message) baked into a data-config attribute, so it renders instantly without an extra fetch.

Drop the snippet into your site

Wherever you want the form to appear, paste both lines — the <script> loader and the <loopi-form> tag — into your page. The loader registers the custom element; the tag renders the form. A few common spots:

• Hand-written HTML / static site: paste both lines inside the <body> wherever you want the form to render.
• Webflow / Framer / Squarespace: add an "Embed" or "Custom HTML" block and paste both lines in. Save, publish, refresh — the form is live.
• WordPress: use a "Custom HTML" block (block editor) or paste into a text widget (classic editor).
• Next.js / React / Vite / Vue / Svelte / Astro: paste both lines directly into your component. <loopi-form> is a Web Component, so every modern framework supports it natively — no wrapper or library needed.

Reload your site. The form should render where you pasted it. Submit your own email as a test — you should land in your Loopi list within a few seconds.

Style it to match your site

The form renders in your page's own DOM — no iframe, no shadow DOM — so your site's stylesheet styles it directly. The embed ships intentionally minimal; you target the .loopi-* classes and your fonts, spacing, and colors win. Here it is themed for a dark site with an indigo button:

/* The Loopi form renders in your page's own DOM — no iframe,
   no shadow DOM — so your site's CSS styles it directly. The embed
   ships minimal; you target the .loopi-* classes and your styles win. */
.loopi-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.loopi-form .loopi-email {
  flex: 1 1 240px;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #2a3140;
  border-radius: 8px;
  background: #0d0f14;
  color: #e7ebf2;
}
.loopi-form .loopi-email:focus { border-color: #6e8bff; outline: none; }
.loopi-form .loopi-submit {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #4f46e5;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.loopi-form .loopi-submit:hover { background: #4338ca; }
.loopi-form .loopi-msg[data-ok]  { color: #34d399; }
.loopi-form .loopi-msg[data-err] { color: #f87171; }

The classes are stable: .loopi-form wraps the form, .loopi-email is the input, .loopi-submit is the button, and .loopi-msg is the confirmation line (it carries [data-ok] on success and [data-err] on error). Drop these into the same stylesheet that styles the rest of your page and the form blends right in.

Or skip the CSS entirely. Hand the snippet to your AI coding assistant — "add this Loopi form to my page and style it to match my site" — and because it's a plain Web Component living in your own DOM, the agent can place it and theme it with your existing styles for you.

Don't have Loopi connected yet? Set it up here →

Step 2 — Draft and preview the welcome sequence

Two emails. The first is the welcome — categorized that way on the sequence, fires the instant someone subscribes, ignores send-hour and timezone rules. The second is a regular drip step — one day later, in the list's morning slot. Together they introduce you, give one piece of value, and route the reader to whatever you most want them to do next.

Write a 2-email welcome sequence for my Newsletter list.

I run a one-person studio building tools for solo developers.
Voice: direct, first-person, no marketing fluff. The product I'd
like new subscribers to try is https://your-product.com.

1. Welcome — fires immediately on signup. Warm and short. Say hi,
   name one thing I'm working on, point to the product as "if
   you're curious."

2. Follow-up — fires the next morning. Open with the #1 mistake I
   see solo devs make, close with a tip they can use today. CTA
   back to the landing page.

Draft each one, send me a preview, then activate the sequence
once both look good.

Behind the scenes the agent drafts both emails, sends a test of each one to your inbox so you can read it before any real subscriber does, then creates the sequence with the welcome email set as the instant welcome and the follow-up as a one-day-later drip step. Once activated, it's live. Open your inbox, read both previews, ask the agent to revise either one if it doesn't sound like you.

The welcome email is the transactional confirmation a new subscriber expects to see seconds after they hit Subscribe — Loopi treats it as the sequence's instant welcome and ignores the usual send-hour and timezone rules for that one message. The follow-up arrives the next morning in the list's default morning slot (6 AM in the list's timezone, unless you tell the agent to pick a different time).

Step 3 — Wire the form to the sequence

Right now your form drops new emails into the list, but nothing triggers the sequence. One more prompt attaches the sequence to the form so every signup is auto-enrolled.

Attach the welcome sequence we just built to the signup form
we created earlier, so every new subscriber gets enrolled in the
sequence automatically. Confirm back to me which form is now wired
to which sequence.

The agent links the form to the sequence. Done. Every new submission from this point forward auto-enrolls the subscriber, who gets the welcome email within seconds and the follow-up the next morning.

Test the whole loop end-to-end

Open your site, submit a real email you control that isn't your Loopi account email (a personal Gmail, an alias, anything else). You'll see the success message and the welcome email should land within seconds. Tomorrow morning, the follow-up arrives.

While you wait, the Loopi app shows the live state — the Subscribers tab logs the new signup, the Sequences tab shows the enrollment, and the Schedule tab lists the queued send.

Next play — make sure your welcome lands in Gmail Primary →