Getting Started

Get up and running with Foir in just a few minutes.

Prerequisites

• A Foir account with access to a project
• Node.js 18+ installed
• A React-based frontend (Next.js, Remix, etc.)

Step 1: Create an API Key

1. Log in to the Foir admin
2. Go to Project Settings > API Keys
3. Click Create API Key
4. Configure:
   • Name: “Frontend” (or similar)
   • Type: PUBLIC
   • Environment: DEVELOPMENT
5. Click Create
6. Copy the key - it’s only shown once!

Add it to your environment:

# .env.local
FOIR_API_KEY=pk_test_abc123...
FOIR_API_URL=https://api.foir.io

Step 2: Install Packages

npm install -D @eide/uniformgen

Step 3: Generate Types

# Login to Foir
npx uniformgen login
 
# Select your project
npx uniformgen setup
 
# Generate types
npx uniformgen pull

This creates TypeScript types and hooks in src/generated/.

Step 4: Fetch and Render Content

Next.js

// app/[...slug]/page.tsx
async function getPage(path: string) {
  const res = await fetch(`${process.env.FOIR_API_URL}/graphql`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.FOIR_API_KEY!,
    },
    body: JSON.stringify({
      query: `
        query ResolveRoute($path: String!) {
          resolveRoute(path: $path) {
            record { id modelKey naturalKey }
            content { fields { key type value } }
          }
        }
      `,
      variables: { path },
    }),
  });
 
  const { data } = await res.json();
  return data.resolveRoute;
}
 
export default async function Page({ params }: { params: { slug?: string[] } }) {
  const path = '/' + (params.slug?.join('/') || '');
  const route = await getPage(path);
 
  if (!route) return <div>Page not found</div>;
 
  const title = route.content.fields.find((f: any) => f.key === 'title');
 
  return (
    <article>
      {title && <h1>{String(title.value)}</h1>}
      {/* Render your fields */}
    </article>
  );
}

Step 5: Create Content

1. Go to Content > Pages in the admin
2. Click Create Page
3. Fill in the title and content
4. Click Publish
5. Visit your frontend to see it!

Next Steps

Learn the Concepts

• Entities - How content is structured
• Field Types - Available field types
• Variants - Serve different content to different audiences

Expand Your Setup

• Using UniformGen - Deep dive into code generation
• Creating API Keys - Production key management

Build Features

• Add more entity types (blogs, products, etc.)
• Create inline schemas for reusable components
• Set up variants for A/B testing
• Configure market/locale routing

Common Issues

”API key required”

Make sure you’re passing the x-api-key header in fetch requests.

”Page not found”

1. Check the page is published in the admin
2. Verify the URL path matches the page slug

Types out of date

Regenerate with npx uniformgen pull.