Manual Integration

If you prefer more control over the integration process, you can set up Agimon manually. This guide will walk you through integrating Agimon CMS using our React-based UI library.

Install the Package

Install the Agimon CMS React package:

npm install @agimonai/cms-react

Configuration

Initialize the API client and component builders:

import { APIClientConfig, buildComponentMap, createApiClient } from '@agimonai/cms-react';
import Link from 'next/link';

const apiConfig: APIClientConfig = {
  apiKey: process.env.AGIMON_API_KEY || '',
};

export const apiClient = createApiClient(apiConfig);

export const componentMap = buildComponentMap({
  platformComponents: {
    Link: Link,
  },
  apiConfig,
});

Framework Integration

Next.js App Directory

For Next.js app directory, use our NextBuilder class:

import { NextBuilder } from '@agimonai/cms-react';

export const pageBuilder = new NextBuilder(apiClient, componentMap, { 
  staticRender: true 
});

Create a dynamic route page (e.g., 

app/blog/[blog-slug]/page.tsx
):

import type { Metadata } from 'next';
import { pageBuilder } from '../../../agimonConfig';

const pattern = '/blog/:blog-slug';

export const generateStaticParams = async () => {
  return pageBuilder.generateStaticParams(pattern);
};

type PageProps = {
  params: {
    ["blog-slug"]: string;
  };
  searchParams: Record<string, string>;
};

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  return await pageBuilder.generateMetadata(pattern, params);
}

const Page = async ({ params, searchParams }: PageProps) => {
  return await pageBuilder.buildPage(pattern, params, searchParams);
};

export default Page;

Other React Frameworks

For other React frameworks, use the PageService directly:

import { PageService } from '@agimonai/cms-core';

const pageService = PageService(apiClient);

// List pages using url-pattern configured in dashboard
const pagesData = await pageService.listPages(pattern);

// Get page using pathname that matches the url pattern
const pageData = await pageService.getPage(pathname);

Render the page content:

const { blocks, ...data } = (pageData?.data || {});

return (
  <>
    {(blocks || []).map((block: IBlock) => {
      const Component = componentMap[block.content_type];
      if (!Component) return null;
      return (
        <div key={block.id}>
          <Component staticRender={staticRender} page={data} {...(block as any)} />
        </div>
      );
    })}
  </>
);

Styling

Choose the appropriate CSS import based on your project's setup:

For sites using Tailwind CSS (minimal styling):

import '@agimonai/cms-react/defaultTheme.css';
import '@agimonai/cms-react/minimal.css';

For sites not using Tailwind CSS (complete styling):

import '@agimonai/cms-react/style.css';

For sites without dark theme enabled:

import '@agimonai/cms-react/fixedTheme.css';
// or
import '@agimonai/cms-react/fixedStyle.css';
💡

Tip

The package provides modern React components specifically designed for CMS interfaces, including integration with BlockNote for rich text editing and theme customization support.

Additional Features

Sitemap Generation

To generate a sitemap for your content:

import { SitemapService } from '@agimonai/cms-core';

const sitemapService = new SitemapService(apiClient);
const sitemapData = await sitemapService.getSitemap();

Requirements

  • Node.js 18.x or higher
  • An active Agimon CMS account
  • API keys for your environment (development/production)