Your First AI-Generated API: A Complete Beginner Tutorial

Ever wanted to build a frontend app but got stuck because the backend API wasn't ready? Or spent hours writing fake user data like "User 1", "User 2", "User 3"?

Today, you'll learn how to create realistic, AI-generated APIs in under 10 minutes - no backend knowledge required.

What You'll Build

By the end of this tutorial, you'll have a fully functional user management API with:

• ✅ Realistic AI-generated user data (names, emails, job titles)
• ✅ Full TypeScript support
• ✅ Multiple endpoints (GET, POST, PUT, DELETE)
• ✅ Working in your actual app
• ✅ Ready to switch to production later

Time required: 10 minutes Prerequisites: Basic JavaScript/TypeScript knowledge Cost: Free (20K AI tokens + unlimited Faker mode)

Step 1: Install the SDK (2 minutes)

Create a new project or use an existing one:

# Create new project (optional)
mkdir my-api-project
cd my-api-project
npm init -y

# Install Symulate SDK
npm install @symulate/sdk

That's it for installation! No server to configure, no database to set up.

Step 2: Configure Symulate (1 minute)

Create a file called app.ts or add to your existing entry point:

// app.ts
import { configureSymulate } from '@symulate/sdk'

// Configure Symulate (run this once at app startup)
configureSymulate({
  environment: 'development', // Use mocks in development
  generateMode: 'ai', // Use AI for realistic data
  // Optional: Add your API key for higher limits
  // symulateApiKey: process.env.SYMULATE_API_KEY,
  // projectId: process.env.SYMULATE_PROJECT_ID
})

What does this do?

• environment: 'development' - Tells Symulate to generate mock data
• generateMode: 'ai' - Uses AI for realistic, contextual data
• No API key needed to start - you get free tokens to try it out!

Step 3: Define Your First Endpoint (3 minutes)

Create api/users.ts:

// api/users.ts
import { defineEndpoint, m, type Infer } from '@symulate/sdk'

// Step 1: Define the data structure
const UserSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName(),
  email: m.email(),
  jobTitle: m.person.jobTitle(),
  department: m.string(),
  avatar: m.internet.avatar(),
  createdAt: m.date()
})

// Step 2: Automatically infer TypeScript type
export type User = Infer<typeof UserSchema>

// Step 3: Define the endpoint
export const getUsers = defineEndpoint<User[]>({
  path: '/api/users',
  method: 'GET',
  schema: UserSchema,
  mock: {
    count: 10, // Generate 10 users
    instruction: 'Generate employees from a tech company with realistic names, emails, and job titles in departments like Engineering, Product, Design, and Sales'
  }
})

What just happened?

1. Schema definition - You described what a User looks like using semantic types
2. Type inference - TypeScript automatically knows the shape of User
3. Endpoint creation - One function call creates a working API endpoint

The magic: The AI reads your instruction and generates contextually realistic data!

Step 4: Use Your API (1 minute)

Now use it in your app:

// index.ts
import { getUsers, type User } from './api/users'

async function loadUsers() {
  try {
    const users = await getUsers()
    console.log('Users:', users)

    // Full TypeScript support!
    users.forEach((user: User) => {
      console.log(`${user.name} - ${user.jobTitle}`)
    })
  } catch (error) {
    console.error('Failed to load users:', error)
  }
}

loadUsers()

Run it:

npx tsx index.ts

Output:

Users: [
  {
    id: '8f7e9d2a-1c3b-4a5f-9e8d-7c6b5a4f3e2d',
    name: 'Sarah Mitchell',
    email: 'sarah.mitchell@techcorp.io',
    jobTitle: 'Senior Frontend Engineer',
    department: 'Engineering',
    avatar: 'https://avatars.githubusercontent.com/u/12345',
    createdAt: '2024-03-15T10:30:00Z'
  },
  {
    id: '1a2b3c4d-5e6f-7g8h-9i0j-1k2l3m4n5o6p',
    name: 'Marcus Johnson',
    email: 'marcus.johnson@techcorp.io',
    jobTitle: 'Product Manager',
    department: 'Product',
    avatar: 'https://avatars.githubusercontent.com/u/67890',
    createdAt: '2024-02-20T14:45:00Z'
  },
  // ... 8 more realistic users
]

Notice: These aren't random strings - they're realistic names, emails, job titles that make sense together!

Step 5: Add More Endpoints (3 minutes)

Let's add GET by ID, POST, and DELETE:

// api/users.ts (add to existing file)

// GET single user by ID
export const getUser = defineEndpoint<User>({
  path: '/api/users/:id',
  method: 'GET',
  params: [
    {
      name: 'id',
      location: 'path',
      required: true,
      schema: m.uuid(),
      description: 'User ID'
    }
  ],
  schema: UserSchema
})

// CREATE new user
export const createUser = defineEndpoint<User>({
  path: '/api/users',
  method: 'POST',
  params: [
    {
      name: 'name',
      location: 'body',
      required: true,
      schema: m.string()
    },
    {
      name: 'email',
      location: 'body',
      required: true,
      schema: m.email()
    },
    {
      name: 'jobTitle',
      location: 'body',
      required: true,
      schema: m.string()
    },
    {
      name: 'department',
      location: 'body',
      required: true,
      schema: m.string()
    }
  ],
  schema: UserSchema
})

// DELETE user
export const deleteUser = defineEndpoint<void>({
  path: '/api/users/:id',
  method: 'DELETE',
  params: [
    {
      name: 'id',
      location: 'path',
      required: true,
      schema: m.uuid()
    }
  ],
  schema: m.object({}) // No response body
})

Use them:

// Get single user
const user = await getUser({ id: '8f7e9d2a-1c3b-4a5f-9e8d-7c6b5a4f3e2d' })

// Create new user
const newUser = await createUser({
  name: 'Alice Chen',
  email: 'alice.chen@techcorp.io',
  jobTitle: 'UX Designer',
  department: 'Design'
})

// Delete user
await deleteUser({ id: user.id })

You now have a full CRUD API!

Step 6: Use in React (Example)

// UserList.tsx
import { useEffect, useState } from 'react'
import { getUsers, type User } from './api/users'

function UserList() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getUsers()
      .then(setUsers)
      .finally(() => setLoading(false))
  }, [])

  if (loading) return <div>Loading...</div>

  return (
    <div>
      <h1>Team Members</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <img src={user.avatar} alt={user.name} />
            <div>
              <strong>{user.name}</strong>
              <p>{user.jobTitle} - {user.department}</p>
              <a href={`mailto:${user.email}`}>{user.email}</a>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

It just works! No backend needed.

Understanding AI Generation

What Makes It "AI-Powered"?

Traditional Faker:

// Random, disconnected data
{
  name: "John Doe",
  email: "sarah.smith@company.com", // Email doesn't match name!
  jobTitle: "Chief Marketing Officer",
  department: "Engineering" // Title doesn't match department!
}

AI-Powered (Symulate):

// Contextually consistent data
{
  name: "Sarah Smith",
  email: "sarah.smith@company.com", // Matches name!
  jobTitle: "Senior Software Engineer",
  department: "Engineering" // Makes sense together!
}

The AI:

• Understands your instruction
• Generates contextually consistent data
• Creates realistic relationships
• Follows domain conventions

Customizing AI Generation

Example 1: Different Industries

// Tech Company
const getTechEmployees = defineEndpoint<User[]>({
  path: '/api/employees',
  method: 'GET',
  schema: UserSchema,
  mock: {
    count: 20,
    instruction: 'Generate employees from a Silicon Valley tech startup with job titles like Software Engineer, Product Manager, UX Designer'
  }
})

// Healthcare
const getHealthcareStaff = defineEndpoint<User[]>({
  path: '/api/staff',
  method: 'GET',
  schema: UserSchema,
  mock: {
    count: 15,
    instruction: 'Generate hospital staff with job titles like Doctor, Nurse, Radiologist, Surgeon'
  }
})

// Finance
const getFinanceTeam = defineEndpoint<User[]>({
  path: '/api/team',
  method: 'GET',
  schema: UserSchema,
  mock: {
    count: 10,
    instruction: 'Generate investment bank employees with titles like Financial Analyst, Portfolio Manager, Investment Banker'
  }
})

AI adapts to context!

Example 2: Geographic Regions

// German Company
const getGermanEmployees = defineEndpoint<User[]>({
  path: '/api/employees',
  method: 'GET',
  schema: UserSchema,
  mock: {
    count: 15,
    instruction: 'Generate employees from a German tech company with German names and .de email addresses'
  }
})

// Result:
// Hans Müller - hans.mueller@techgmbh.de
// Anna Schmidt - anna.schmidt@techgmbh.de

Common Patterns

Pattern 1: Nested Objects

const UserWithAddressSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName(),
  email: m.email(),
  address: m.object({
    street: m.location.street(),
    city: m.location.city(),
    state: m.location.state(),
    zipCode: m.location.zipCode(),
    country: m.location.country()
  })
})

type UserWithAddress = Infer<typeof UserWithAddressSchema>

Pattern 2: Arrays

const UserWithSkillsSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName(),
  skills: m.array(m.string(), { min: 2, max: 5 }) // 2-5 skills
})

// AI generates: ['React', 'TypeScript', 'Node.js']

Pattern 3: Enums/Choices

const UserWithRoleSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName(),
  role: m.helpers.arrayElement(['admin', 'user', 'guest'])
})

Step 7: Switch to Production (30 seconds)

When your backend is ready:

// app.ts - ONE LINE CHANGE
configureSymulate({
  environment: 'production', // Changed from 'development'
  backendBaseUrl: 'https://api.yourapp.com' // Your real API
})

That's it! All your endpoints now call the real backend. Zero code changes needed.

Troubleshooting

Issue 1: "Cannot find module '@symulate/sdk'"

Solution:

npm install @symulate/sdk

Issue 2: TypeScript errors

Solution: Make sure you have TypeScript installed:

npm install -D typescript @types/node

Issue 3: "Quota exceeded"

Solution: Switch to Faker mode (unlimited free):

configureSymulate({
  environment: 'development',
  generateMode: 'faker' // Free, unlimited
})

Next Steps

1. Learn More Schema Types

Explore all available schema types:

m.uuid()
m.string()
m.number()
m.boolean()
m.date()
m.person.fullName()
m.person.firstName()
m.person.lastName()
m.email()
m.phone.number()
m.location.city()
m.location.country()
m.commerce.productName()
m.commerce.price()
m.internet.url()
m.internet.avatar()
m.lorem.sentence()
m.lorem.paragraph()
m.array(schema, count)
m.object({ ... })
m.helpers.arrayElement([...])

Full API Reference

2. Build a Real App

Try building:

• Blog with posts and comments
• E-commerce with products and orders
• Task manager with projects and tasks
• Social network with users and posts

3. Set Up in CI/CD

Use Faker mode for unlimited free testing:

# .github/workflows/test.yml
- name: Run tests
  run: npm test
  env:
    SYMULATE_MODE: faker # Free, unlimited, deterministic

4. Export OpenAPI Spec

Share your API contract with the backend team:

npx symulate openapi -o api-spec.json

Recap: What You Learned

In 10 minutes, you:

• ✅ Installed and configured Symulate
• ✅ Defined API endpoints with semantic types
• ✅ Generated AI-powered realistic mock data
• ✅ Built a full CRUD API
• ✅ Used it in a React component
• ✅ Learned how to switch to production

No backend required. No manual mock data writing. No complex setup.

Resources

• Full Documentation
• API Reference
• More Examples
• TypeScript Guide
• Video Tutorial (coming soon)

Get More Free Tokens

Sign up at platform.symulate.dev to get:

• 20K free AI tokens (one-time)
• Unlimited Faker mode (forever free)
• Cloud caching
• Team collaboration features

Community & Support

Questions? Join our community:

• Discord
• GitHub
• Twitter

Congratulations! You've built your first AI-generated API. Now go build something amazing without waiting for the backend.

Further Reading:

• Create a Fake REST API in 5 Minutes
• Why Realistic Mock Data Matters
• Frontend Development Without Backend Dependencies