@agimonai/cms-react

A React-based UI library for content management systems, providing reusable components and utilities for building CMS interfaces within the Agimon ecosystem.

Features

• Modern React components specifically designed for CMS interfaces
• Integration with BlockNote for rich text editing
• Theme customization and styling support
• TypeScript support with full type definitions
• NextJS and other React framework compatibility

Documentation

• Overview Documentation
• Getting Started with CLI
• NextJS Setup Guide
• Other React Framework Setup

Installation

# Using npm
npm install @agimonai/cms-react

# Using yarn
yarn add @agimonai/cms-react

# Using pnpm
pnpm add @agimonai/cms-react

Usage

1. Configuration

The package provides off-the-shelf API client and component builders to simplify blog creation. Initialize the apiClient with your Agimon API key:

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,
});

2. Render blog

Next.js

For Next.js app directory, we provide a simplified approach using our NextBuilder class:

import { NextBuilder } from '@agimonai/cms-react';
export const pageBuilder = new NextBuilder(apiClient, componentMap, { staticRender: true });

Then in your route, create a page.tsx like this:

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;

Note: The pattern should match the UrlPattern configured in your dashboard to retrieve the correct page payload.

Vanilla React and other frameworks

For React with other frameworks, use the following approach:

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 using your componentMap:

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>
      );
    })}
  </>
);

To get a sitemap:

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

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

Importing CSS

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';

License

MIT

Author

Vuong Ngo