Skip to content
Foundry Manual

Integration Guide

Add Foundry to any JavaScript project in under 5 minutes. This guide covers analytics, feedback, and automatic SDK updates.

Install the SDK

Section titled “Install the SDK”
Terminal window
pnpm add @saas-maker/sdk
# or: npm install @saas-maker/sdk

Create your API key

Section titled “Create your API key”
  1. Go to app.sassmaker.com and create a project
  2. Copy the project API key (pk_...)
  3. Add it to your environment

Next.js (App Router)

Section titled “Next.js (App Router)”

1. Environment variable

Section titled “1. Environment variable”
.env.local
NEXT_PUBLIC_SAASMAKER_API_KEY=pk_your_key_here

2. SDK client

Section titled “2. SDK client”
src/lib/saasmaker.ts
import { SaaSMakerClient } from '@saas-maker/sdk';


export const saasmaker = new SaaSMakerClient({
  apiKey: process.env.NEXT_PUBLIC_SAASMAKER_API_KEY!,
  baseUrl: 'https://api.sassmaker.com',
});

3. Analytics (page view tracking)

Section titled “3. Analytics (page view tracking)”
src/components/SaasMakerAnalytics.tsx
'use client';


import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
import { saasmaker } from '@/lib/saasmaker';


export function SaasMakerAnalytics() {
  const pathname = usePathname();


  useEffect(() => {
    saasmaker.analytics.track({ name: 'page_view', url: pathname });
  }, [pathname]);


  return null;
}

Add to your root layout:

src/app/layout.tsx
import { SaasMakerAnalytics } from '@/components/SaasMakerAnalytics';


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SaasMakerAnalytics />
        {children}
      </body>
    </html>
  );
}

Vite + React

Section titled “Vite + React”

1. Environment variable

Section titled “1. Environment variable”
.env.local
VITE_SAASMAKER_API_KEY=pk_your_key_here

2. SDK client

Section titled “2. SDK client”
src/lib/saasmaker.ts
import { SaaSMakerClient } from '@saas-maker/sdk';


export const saasmaker = new SaaSMakerClient({
  apiKey: import.meta.env.VITE_SAASMAKER_API_KEY,
  baseUrl: 'https://api.sassmaker.com',
});

3. Analytics (page view tracking)

Section titled “3. Analytics (page view tracking)”

If you use React Router:

src/components/PageViewTracker.tsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { saasmaker } from '../lib/saasmaker';


export function PageViewTracker() {
  const location = useLocation();


  useEffect(() => {
    saasmaker.analytics.track({ name: 'page_view', url: location.pathname });
  }, [location.pathname]);


  return null;
}

Add inside your <BrowserRouter>:

<BrowserRouter>
  <PageViewTracker />
  <Routes>
    {/* your routes */}
  </Routes>
</BrowserRouter>

If you don’t use a router, track on mount:

useEffect(() => {
  saasmaker.analytics.track({ name: 'page_view', url: window.location.pathname });
}, []);

Automatic SDK Updates

Section titled “Automatic SDK Updates”

Add this Dependabot config to automatically receive PRs when new SDK versions are released. Dependabot runs for free — it doesn’t count against your GitHub Actions minutes.

.github/dependabot.yml
version: 2
updates:
  - package-ecosystem: npm
    directory: "/"
    schedule:
      interval: weekly
      day: monday
    allow:
      - dependency-name: "@saas-maker/sdk"
    commit-message:
      prefix: "deps"
    open-pull-requests-limit: 1

This checks for SDK updates every Monday and opens a PR if a new version is available.

Using the CLI

Section titled “Using the CLI”

You can also initialize a project via the CLI:

Terminal window
npx @saas-maker/cli login
npx @saas-maker/cli init

This creates a foundry.json file linking your directory to a project. See the CLI docs for more.

What’s next?

Section titled “What’s next?”