@amirshawn/page-builder

AI-powered visual page builder for Vue 3 applications. Works with cms-core backend.

Installation

npm install github:amirshawn/page-builder

Quick Start

Option 1: Full Page Builder App

import { PageBuilderApp } from '@amirshawn/page-builder/app';
import '@amirshawn/page-builder/styles';

<template>
  <PageBuilderApp
    :config="config"
    :entry-id="entryId"
    :space-id="1"
    :csrf-token="csrfToken"
    @navigate="handleNavigate"
  />
</template>

<script setup lang="ts">
import { PageBuilderApp, type PageBuilderConfig } from '@amirshawn/page-builder/app';

const config: PageBuilderConfig = {
  apiBaseUrl: '/api/cms/v1/admin/page-builder',
  agentServiceUrl: 'http://localhost:3100',
  dashboardUrl: '/dashboard',
  editPageUrl: '/page-builder/:id',
};

function handleNavigate(url: string) {
  window.location.href = url;
}
</script>

Option 2: Mount Function (Standalone)

import { mountPageBuilder } from '@amirshawn/page-builder/app';
import '@amirshawn/page-builder/styles';

mountPageBuilder('#app', {
  config: {
    apiBaseUrl: '/api/cms/v1/admin/page-builder',
    agentServiceUrl: 'http://localhost:3100',
  },
  entryId: 1,
  spaceId: 1,
  csrfToken: document.querySelector('meta[name="csrf-token"]')?.content ?? '',
});

Available Exports

// Full app
import { PageBuilderApp, mountPageBuilder } from '@amirshawn/page-builder/app';

// Page selector only
import { PageSelector } from '@amirshawn/page-builder/page-selector';

// Individual components
import { ChatPanel, StructurePanel, PreviewContainer } from '@amirshawn/page-builder';

// Stores and composables
import { useSession, useAgent, usePageStore, useUIStore } from '@amirshawn/page-builder';

// Frontend rendering (public pages)
import { PageRenderer, BlockRenderer } from '@amirshawn/page-builder/frontend-kit';

// Styles
import '@amirshawn/page-builder/styles';

Configuration

PageBuilderConfig

| Property | Type | Description | |----------|------|-------------| | apiBaseUrl | string | Base URL for page builder API | | agentServiceUrl | string | URL for AI agent service | | dashboardUrl | string? | URL to navigate on exit | | editPageUrl | string? | URL pattern for editing (use :id placeholder) | | contentType | string? | Content type for new pages (default: 'page') |

Requirements

• Vue 3.4+
• Pinia 2.1+
• cms-core backend with AI agent service running

Development

npm install
npm run dev      # Development server
npm run build    # Build for production
npm test         # Run tests