FormLoom + Claude Code
MCP-nativeClaude Code supports MCP servers via `claude mcp add` or `.mcp.json`. FormLoom's tools let it scaffold a working form.
1. Add the MCP server
Add this to .mcp.json:
.mcp.json
{
"mcpServers": {
"formloom": {
"command": "npx",
"args": ["-y", "@formloom/mcp"]
}
}
}2. Ask for a form
Type a prompt like:
“Use FormLoom to add a typed contact form to this Next.js app with a provisioned endpoint.”
What you get back
Claude Code calls get_snippet + provision_endpoint and writes framework-correct code with a live access key — it works on first run:
app/contact/page.tsx
// app/contact/page.tsx — Next.js 15 App Router, Server Action
export default function ContactPage() {
async function submit(formData: FormData) {
"use server";
const res = await fetch("https://formloom.vercel.app/api/submit/fl_provisioned_key", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify(Object.fromEntries(formData)),
});
// FormLoom scores spam, stores the row, and emails you — no backend to wire.
return res.json();
}
return (
<form action={submit}>
<label>
Name
<input type="text" name="name" required />
</label>
<label>
Email
<input type="email" name="email" required />
</label>
<label>
Message
<textarea name="message" required placeholder="How can we help?"></textarea>
</label>
<!-- honeypot: bots fill this, humans don't see it -->
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Send</button>
</form>
);
}Steps
- 1Run `claude mcp add formloom -- npx -y @formloom/mcp`, or add the block to `.mcp.json`.
- 2Start Claude Code in the project; the FormLoom tools become available.
- 3Ask it to add a form — it calls `provision_endpoint` and `get_snippet` and writes the file.
FAQ
Run `claude mcp add formloom -- npx -y @formloom/mcp`, or commit a `.mcp.json` with the FormLoom server so your team shares it.