Agenten stärken
Der eigene Befehl des Herausgebers. Kein PlugMCP-Endpunkt.
Host a copy with our keys and logs.
npx -y @formhaus/[email protected]Claude Code hat keinen Installationslink für einen lokalen Befehl. Kopieren Sie den Befehl unten und führen Sie ihn in einem Terminal aus.
claude mcp add formhaus-mcp -- npx -y @formhaus/mcp@0.15.3In einem Terminal ausführen.
{ "mcpServers": { "formhaus-mcp": { "command": "npx", "args": [ "-y", "@formhaus/[email protected]" ] } }}claude_desktop_config.json
Remote-URL oder ein Befehl auf Ihrem Rechner? Worin sich die beiden Installationen unterscheiden
Auf PlugMCP ausführen
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
StartenVom Herausgeber
Add Formhaus to your coding agent
npx formhaus
Adds the Formhaus MCP server to Claude Code, Codex, Cursor and Claude Desktop. Writes, checks and repairs definitions locally, with no account · Setup for each client
Two independent ways to use it:
Use the library. MIT, no account, no key. The core is framework-agnostic and runs the form in any app; React and Vue renderers are ready to use. Your submit handler sends the data wherever you want. CI tests React 18 and 19, and Vue 3.3 and 3.5.
MCP server for authoring and checking Formhaus form definitions: validation, path simulation and capabilities.
npm install @formhaus/core # plus @formhaus/react or @formhaus/vue
Use Formhaus Cloud. A hosted form backend: a submission endpoint with server validation, a dashboard and webhooks, plus hosted links, embeds and a visual builder. The first form needs no account.
Build in the browser at app.formhaus.dev, or add the remote MCP server and ask your agent: "Make me a waitlist form and give me the link."
claude mcp add --transport http formhaus https://api.formhaus.dev/mcp
claude plugin marketplace add formhaus-dev/formhaus && claude plugin install formhaus@formhaus), the JSON Schema and the format specification.Business accounts get a company step; everyone converges on review.
{
"$schema": "https://formhaus.dev/schema/form-definition.json",
"id": "signup",
"title": "Sign up",
"submit": { "label": "Create account" },
"steps": [
{
"id": "account",
"title": "Account",
"fields": [
{ "key": "email", "type": "email", "label": "Email", "validation": { "required": true } },
{ "key": "kind", "type": "radio", "label": "Account type", "autoAdvance": true,
"options": [{ "value": "personal", "label": "Personal" }, { "value": "business", "label": "Business" }] }
],
"routes": [
{ "to": "company", "show": [{ "field": "kind", "eq": "business" }] },
{ "to": "review" }
]
},
{ "id": "company", "title": "Company", "routes": [{ "to": "review" }],
"fields": [{ "key": "company", "type": "text", "label": "Company name", "validation": { "required": true } }] },
{ "id": "review", "title": "Review",
"fields": [{ "key": "terms", "type": "checkbox", "label": "I accept the terms", "validation": { "required": true } }] }
]
}
import { FormRenderer } from '@formhaus/react';
import definition from './signup.json';
<FormRenderer definition={definition} onSubmit={save} />;
@formhaus/figma generates form mockups on the Figma canvas. It is not on Figma Community yet; build it locally, then import packages/figma/manifest.json.
Svelte, Solid, or anything else: use @formhaus/core directly. See the Svelte recipe.
npm install @formhaus/core
If you need a framework adapter:
npm install @formhaus/core @formhaus/react # React
npm install @formhaus/core @formhaus/vue # Vue
Or use @formhaus/core directly with any framework. See the Svelte recipe.
Write the JSON by hand, or use the /formhaus:formhaus-create-form Claude Code skill to generate it from a text description, a CSV table, or a screenshot of an existing form.
{
"$schema": "https://formhaus.dev/schema/form-definition.json",
"id": "contact",
"title": "Contact Us",
"submit": { "label": "Send" },
"fields": [
{
"key": "name",
"type": "text",
"label": "Name",
"placeholder": "Your name",
"validation": { "required": true, "minLength": 2 }
},
{
"key": "email",
"type": "email",
"label": "Email",
"placeholder": "[email protected]",
"validation": {
"required": true,
"pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
"patternMessage": "Please enter a valid email address"
}
},
{
"key": "message",
"type": "textarea",
"label": "Message",
"placeholder": "How can we help?",
"rows": 4,
"validation": { "required": true }
}
]
}
npm install @formhaus/core @formhaus/react
import { FormRenderer } from '@formhaus/react';
import definition from './contact-form.json';
function ContactPage() {
async function handleSubmit(values: Record<string, unknown>) {
await fetch('/api/contact', {
method: 'POST',
body: JSON.stringify(values),
});
}
return <FormRenderer definition={definition} onSubmit={handleSubmit} />;
}
npm install @formhaus/core @formhaus/vue
<script setup lang="ts">
import { FormRenderer } from '@formhaus/vue';
import definition from './contact-form.json';
async function handleSubmit(values: Record<string, unknown>) {
await fetch('/api/contact', {
method: 'POST',
body: JSON.stringify(values),
});
}
</script>
<template>
<FormRenderer :definition="definition" @submit="handleSubmit" />
</template>
By default, both adapters render native HTML inputs. A step can hide Next with next: false, and cancellable async hooks run before and after navigation and submission. See lifecycle hooks.
Both adapters accept a components prop (a FieldComponentMap) that lets you swap native HTML inputs for your own UI kit.
import type { FieldComponentMap, FieldComponentProps } from '@formhaus/react';
function MyTextInput({ field, value, error, onChange, onBlur }: FieldComponentProps) {
return (
<div>
<label>{field.label}</label>
<input
type={field.type}
value={(value as string) ?? ''}
placeholder={field.placeholder}
onChange={(e) => onChange(e.target.value)}
onBlur={onBlur}
/>
{error && <span className="error">{error}</span>}
</div>
);
}
const components: FieldComponentMap = {
text: MyTextInput,
email: MyTextInput,
};
<FormRenderer definition={definition} onSubmit={handleSubmit} components={components} />;
<script setup lang="ts">
import type { FieldComponentProps } from '@formhaus/vue';
const props = defineProps<FieldComponentProps>();
const emit = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>();
</script>
<template>
<label>{{ props.field.label }}</label>
<input
:value="(props.modelValue as string) ?? ''"
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
/>
</template>
<script setup>
import { FormRenderer } from '@formhaus/vue';
import MyTextInput from './MyTextInput.vue';
</script>
<template>
<FormRenderer
:definition="definition"
:components="{ text: MyTextInput, email: MyTextInput }"
@submit="handleSubmit"
/>
</template>
Each field component receives the full FormField descriptor, the current value, and any validation error. Implement as many or as few field types as you need. Unmapped types fall back to native HTML.
@formhaus/figma renders form definitions in Figma with built-in Material 3 and iOS-like kits or with your own components. Branching forms get a flow map, multi-step forms a clickable prototype, and a generated form can be selected, edited and updated in place.
The /formhaus:formhaus-figma-connect Claude Code skill binds your library's components to the plugin. See the plugin guide for local installation.
See CONTRIBUTING.md.
MCP server for authoring and checking Formhaus form definitions: validation, path simulation and capabilities.
{ "mcpServers": { "formhaus-mcp": { "command": "npx", "args": [ "-y", "@formhaus/[email protected]" ] } }}Tools
Noch keine Tool-Liste. Remote-Server erhalten eine nach dem ersten Health-Check.
FAQ
Kopieren Sie auf dieser Seite die stdio-Konfiguration für Cursor, Claude Desktop, Claude Code oder VS Code. Sie nutzt die Installation des Herausgebers, keinen PlugMCP-Proxy.
In diesem Eintrag ist keine erforderliche Umgebungsvariable aufgeführt.
@formhaus/mcp läuft lokal über stdio.
Zuletzt geprüft: 2026-11-14. MCP server for authoring and checking Formhaus form definitions: validation, path simulation and capabilities.