@brixon-group/presentation-sdk

SDK for building B2B presentations that deploy to the Brixon platform.

Prerequisites

• Node.js 20+
• GitHub account with access to Brixon-Group organization
• Personal Access Token (classic) with read:packages scope

Authentication Setup (One-Time)

This package is hosted on GitHub Packages. You need to authenticate once:

1. Create a Personal Access Token

1. Go to https://github.com/settings/tokens
2. Click "Generate new token (classic)"
3. Select scope: read:packages
4. Set expiration (recommended: 90 days)
5. Copy the token (ghp_...)

2. Configure npm

Add to your ~/.npmrc (create if it doesn't exist):

echo "@brixon-group:registry=https://npm.pkg.github.com" >> ~/.npmrc
echo "//npm.pkg.github.com/:_authToken=YOUR_TOKEN_HERE" >> ~/.npmrc

Replace YOUR_TOKEN_HERE with your PAT.

Installation

npm install @brixon-group/presentation-sdk

Peer dependencies: React 18+ and React DOM 18+

Quick Start

# Create a new presentation
npx @brixon-group/presentation-sdk init my-presentation
cd my-presentation
npm install
npm run dev

CLI Commands

brixon init [name]

Scaffolds a new presentation project.

brixon init acme-pitch           # Create project
brixon init acme-pitch --force   # Overwrite existing

Creates:

• src/presentation.tsx - Main presentation component
• brixon.config.ts - Configuration file
• package.json - Dependencies
• tsconfig.json - TypeScript config
• CLAUDE.md - AI assistant context

brixon build

Builds the presentation for deployment.

brixon build                    # Build to dist/
brixon build -o output          # Custom output directory

brixon dev

Shows local development workflow guidance.

brixon dev                      # Default port 3000
brixon dev -p 4000              # Custom port

brixon deploy

Deploys the presentation to the Brixon Hosting Platform.

brixon deploy                   # Use BRIXON_API_KEY env
brixon deploy -k <api-key>      # Explicit API key
brixon deploy --dry-run         # Preview without uploading

Note: For manual deployment, copy to the hosting platform:

# Copy presentation to hosting platform
mkdir -p ~/brixon-presentation-hosting/src/presentations/my-slug
cp src/presentation.tsx ~/brixon-presentation-hosting/src/presentations/my-slug/page.tsx

# Deploy hosting platform
cd ~/brixon-presentation-hosting
npm run cf:build && wrangler deploy

Presentations are accessible at https://present.brixongroup.com/p/[slug]

Components

PresentationWrapper

Root layout component that provides structure and navigation.

import { PresentationWrapper } from '@brixon-group/presentation-sdk'

<PresentationWrapper
  title="ACME Proposal"
  sections={sections}
>
  {/* Sections go here */}
</PresentationWrapper>

Hero

Full-screen title section for presentation headers.

import { Hero } from '@brixon-group/presentation-sdk'

<Hero
  title="Digital Transformation"
  subtitle="A Strategic Proposal"
  clientName="ACME Corporation"
  year="2026"
/>

Content

General content section with headline and description.

import { Content } from '@brixon-group/presentation-sdk'

<Content
  id="challenge"
  label="The Challenge"
  headline="Current Situation"
  description="Description text..."
/>

CTA

Call-to-action section with button.

import { CTA } from '@brixon-group/presentation-sdk'

<CTA
  headline="Ready to get started?"
  subline="Let's discuss next steps"
  buttonText="Get in Touch"
  buttonHref="mailto:[email protected]"
/>

Section

Generic trackable section wrapper.

import { Section } from '@brixon-group/presentation-sdk'

<Section id="custom" label="Custom Section">
  {/* Custom content */}
</Section>

Hooks

useTracking

Manual event tracking hook.

import { useTracking } from '@brixon-group/presentation-sdk'

const { trackEngagement } = useTracking({
  presentationId: 'my-presentation',
  sections: [
    { id: 'hero', label: 'Intro', order: 1, type: 'hero' },
  ],
})

// Track custom event
trackEngagement('button_click', { target: 'cta' })

Configuration

Create brixon.config.ts in your project root:

import { defineConfig } from '@brixon-group/presentation-sdk'

export default defineConfig({
  presentation: {
    slug: 'acme-pitch',
    title: 'ACME Digital Transformation',
    subtitle: 'A Strategic Proposal',
    clientName: 'ACME Corporation',
  },
  build: {
    outDir: 'dist',
  },
  dev: {
    port: 3000,
  },
})

Example Presentation

'use client'

import {
  PresentationWrapper,
  Hero,
  Content,
  CTA,
  useTracking,
} from '@brixon-group/presentation-sdk'

const sections = [
  { id: 'hero', label: 'Introduction', order: 1, type: 'hero' as const },
  { id: 'challenge', label: 'The Challenge', order: 2, type: 'content' as const },
  { id: 'solution', label: 'Our Solution', order: 3, type: 'content' as const },
  { id: 'cta', label: 'Next Steps', order: 4, type: 'cta' as const },
]

export default function Presentation() {
  useTracking({ presentationId: 'acme-pitch', sections })

  return (
    <PresentationWrapper title="ACME Proposal" sections={sections}>
      <Hero
        title="Digital Transformation"
        subtitle="A Strategic Proposal"
        clientName="ACME Corporation"
        year="2026"
      />

      <Content
        id="challenge"
        label="The Challenge"
        headline="Current Situation"
        description="Your client faces..."
      />

      <Content
        id="solution"
        label="Our Solution"
        headline="How We Help"
        description="We propose..."
      />

      <CTA
        headline="Ready to start?"
        subline="Schedule a call"
        buttonText="Contact Us"
        buttonHref="mailto:[email protected]"
      />
    </PresentationWrapper>
  )
}

CI/CD Setup

For GitHub Actions in the same organization:

- uses: actions/setup-node@v4
  with:
    node-version: '20'
    registry-url: 'https://npm.pkg.github.com'
    scope: '@brixon-group'

- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

For projects outside the org, use a PAT secret instead of GITHUB_TOKEN.

License

UNLICENSED - Private package for Brixon Group use only.