Atlas Forms + Claude

Create and manage forms directly from Claude Code with native MCP integration, or use Claude.ai with pasted context.

MCP ServerClaude.aiClaude Code

Method 1: MCP Server

Recommended

The best experience. Claude Code gets native tools to create forms, view submissions, and manage your account—all through natural conversation.

Get your API key

Create account Go to dashboard

Add to Claude Code config

Open your Claude Code settings and add the MCP server configuration.

~/.claude/config.json

{
  "mcpServers": {
    "atlas-forms": {
      "command": "npx",
      "args": ["@atlas-forms/mcp-server"],
      "env": {
        "ATLAS_API_KEY": "fep_your_api_key"
      }
    }
  }
}

Replace fep_your_api_key with your actual API key from the dashboard.

Restart Claude Code

Close and reopen Claude Code to load the new MCP server.

Terminal

$claude

✓ MCP server "atlas-forms" connected

Start building

Ask Claude to create forms, view submissions, or get endpoint URLs.

Claude Code

claude-sonnet-4-20250514

Create a newsletter signup form for my blog

*[atlas_create_form]

✓Created form "Newsletter Signup"

Your form endpoint is ready:

https://atlasforms.app/f/nl_abc123

Here's the HTML you can add to your blog:

html

<form action="https://atlasforms.app/f/nl_abc123" method="POST">
  <input type="email" name="email" placeholder="your@email.com" required>
  <button type="submit">Subscribe</button>
</form>

💡

Claude can also set up localhost testing for you. Ask: "Set up my form for local development"

Method 2: Paste Context

Claude.ai

For Claude.ai or the API. Paste the Atlas context at the start of your conversation so Claude understands how to use the API.

Copy the context

This gives Claude everything it needs to know about Atlas Forms.

Atlas Forms Context

# Atlas Forms

Form backend API. Submit forms to: https://atlasforms.app/f/{form_id}

## Quick Start
1. Create account at https://atlasforms.app
2. Create a project → get API key
3. Create a form → get endpoint URL
4. Point your HTML form action to the endpoint

## API Endpoints
- POST /f/{form_id} - Submit form (accepts JSON, form-data)
- GET /api/v1/submissions - List submissions
- POST /api/v1/projects/{id}/forms - Create form

## Authentication
Bearer token: Authorization: Bearer fep_your_api_key

## HTML Example
<form action="https://atlasforms.app/f/{form_id}" method="POST">
  <input name="email" type="email" required>
  <button type="submit">Submit</button>
</form>

Full documentation available at atlasforms.app/llms.txt

Start your conversation

Paste the context, then describe what you want to build.

Your message:

Here's info about Atlas Forms: [paste context]

I need a contact form for my portfolio. Can you give me the HTML and explain how to set it up?

Get your code

Claude will generate HTML and guide you through setup.

I'll help you set up a contact form. First, you'll need to:

Create an account at atlasforms.app
Create a new project and form
Copy your form endpoint URL

Here's the HTML for your form:

💡

For best results, include your API key in the context (in a private conversation) so Claude can help you test the API directly.

Method 3: CLI + Claude

Hybrid

Use the Atlas CLI to manage forms from your terminal, then ask Claude to help with integration code.

Install the CLI

Terminal

$npm install -g @atlas-forms/cli

Create a form

Terminal

$atlas login

✓ Logged in as you@example.com

$atlas forms create --name "Contact Form"

✓ Created form "Contact Form"

Endpoint: https://atlasforms.app/f/abc123

Ask Claude for integration code

Share the endpoint with Claude and ask for framework-specific code.

Claude Code

claude-sonnet-4-20250514

I have an Atlas form at https://atlasforms.app/f/abc123. Write a React component that submits to it with loading states.

I'll create a React contact form component with loading and success states:

tsx

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle')

  async function handleSubmit(e: FormEvent) {
    e.preventDefault()
    setStatus('loading')

    const form = e.target as HTMLFormElement
    const data = new FormData(form)

    await fetch('https://atlasforms.app/f/abc123', {
      method: 'POST',
      body: data
    })

    setStatus('success')
  }

  // ... rest of component
}

Available MCP Tools

When using the MCP server, Claude has access to these tools:

atlas_list_projects

List all your projects

atlas_create_project

Create a new project

atlas_list_forms

List forms in a project

atlas_create_form

Create a new form endpoint

atlas_get_submissions

View recent submissions

atlas_get_form_endpoint

Get endpoint URL and examples

atlas_sandbox_status

Check localhost testing setup

atlas_sandbox_register_ip

Example Prompts

Try these prompts with Claude Code (MCP) or Claude.ai (with context):

“Create a contact form for my website with name, email, and message”

Creates a new form and provides HTML code

“Set up a newsletter signup that redirects to /thank-you after submission”

Creates form with custom redirect URL

“Show me my last 10 contact form submissions”

Retrieves and displays recent submissions

“Create a file upload form for client documents”

Creates form configured for file uploads

“Set up my contact form for localhost testing”

Configures sandbox mode and registers your IP

Ready to start?

Create your free Atlas account, add the MCP config, and start building forms with Claude.

Create free account Or try with ChatGPT