formedible-ai-builder

AI Form Builder

Generate production-ready Formedible forms through natural conversation. Hybrid architecture supports local-first privacy or secure server processing. Works with OpenAI, Anthropic, Google, local models, and custom endpoints.

Installation

npx shadcn@latest add https://formedible.dev/r/ai-builder.json

Key Features

Hybrid Architecture

Local-first with direct API access or secure backend mode

Conversational Interface

Chat naturally to describe your forms and iterate on designs

Live Preview & Testing

Real-time form preview with working submission handling

Multiple AI Providers

OpenAI, Anthropic, Google, Mistral, OpenRouter, and custom endpoints

Ready-to-Use Code

Generated forms export as complete React components with Formedible

Persistent Conversations

Save, load, and export conversation history with generated forms

Getting Started

Direct Mode (Local-First)

API keys stored in browser for maximum privacy and control

import { AIBuilder } from '@/components/ai-builder';

export default function App() {
  return (
    <div className="container mx-auto p-4">
      <AIBuilder 
        mode="direct"
        onFormGenerated={(formCode) => {
          console.log('Generated form code:', formCode);
        }}
        onFormSubmit={(formData) => {
          console.log('Form submitted:', formData);
        }}
      />
    </div>
  );
}

Backend Mode (Server-Side)

Secure server processing with no API keys in the frontend

import { AIBuilder } from '@/components/ai-builder';

// Backend mode - no API keys in frontend
export default function ServerAIBuilder() {
  return (
    <AIBuilder 
      mode="backend"
      backendConfig={{
        endpoint: "/api/ai/generate-form",
        headers: {
          "Authorization": "Bearer your-server-token"
        }
      }}
      onFormGenerated={(formCode) => {
        // Handle generated form
        console.log('Form generated:', formCode);
      }}
    />
  );
}

Custom & Local Models

Support for Ollama, LM Studio, and OpenAI-compatible endpoints

import { AIBuilder } from '@/components/ai-builder';

// Using OpenAI-compatible endpoint (like Ollama, LM Studio, etc.)
export default function LocalAIBuilder() {
  return (
    <AIBuilder 
      mode="direct"
      // Provider will be configured in the UI
      // Supports: OpenAI, Anthropic, Google, Mistral, OpenRouter, OpenAI-Compatible
      onFormGenerated={(formCode) => {
        // Extract and use the generated form
        console.log('Generated Formedible form:', formCode);
      }}
    />
  );
}

Hybrid Architecture

Direct Mode

Local-first with API keys stored in browser for privacy

Backend Mode

Server-side AI processing with secure API endpoint

Advanced Usage

Handle form generation events and integrate with your application

import { AIBuilder } from '@/components/ai-builder';

export default function AdvancedAIBuilder() {
  return (
    <AIBuilder 
      className="h-screen"
      mode="direct"
      onFormGenerated={(formCode) => {
        // Save or use the generated form
        localStorage.setItem('lastGeneratedForm', formCode);
      }}
      onFormSubmit={(formData) => {
        // Handle form submissions from preview
        submitToAPI(formData);
      }}
    />
  );
  
  async function submitToAPI(data: Record<string, unknown>) {
    await fetch('/api/forms/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });
  }
}

Supported AI Providers

Choose from multiple AI providers for form generation

OpenAI

GPT-5GPT-5 MiniGPT-4oGPT-4o Mini

Anthropic

Claude Sonnet 4Claude 3.5 SonnetClaude 3 Haiku

Google

Gemini 2.5 ProGemini 1.5 ProGemini 1.5 Flash

Mistral

Mistral Large 2407Mistral MediumMistral Small

OpenRouter

200+ Models AvailableDynamic Model Loading

OpenAI-Compatible

OllamaLM StudioCustom Endpoints

What Makes It Special

Built for production use with privacy and flexibility in mind

Privacy-First

API keys stored locally, never sent to Formedible servers

Persistent Conversations

Save, load, and export your chat history with generated forms

Live Form Testing

Test generated forms with real data and validation

Production Ready

Generated forms use Formedible components with proper validation

Local Model Support

Works with Ollama, LM Studio, and custom OpenAI-compatible endpoints

Intelligent Parsing

Advanced parsing with error recovery and form optimization

Ready to Build Forms with AI?

The AI Builder makes form creation as simple as having a conversation. Describe what you need and watch as intelligent forms are generated in real-time.