Skip to Content

ai-screenshot

npm version License: MIT

Generate React components or PNG/SVG images of SaaS app screenshots with AI-powered content generation.

Features

  • Generate React components, PNG images, or SVG images
  • Support for sidebar and stacked layouts
  • Various content types (forms, tables, grids, charts, dashboards)
  • TypeScript interfaces for configuration
  • AI-powered content generation for missing properties

Installation

npm install ai-screenshot
# or
yarn add ai-screenshot
# or
pnpm add ai-screenshot

Usage

Basic Example

import { Screenshot } from 'ai-screenshot'
 
function App() {
  return (
    <Screenshot
      layout='sidebar'
      content={{
        menus: [
          { title: 'Dashboard', icon: 'home' },
          { title: 'Analytics', icon: 'chart' },
          { title: 'Settings', icon: 'gear' },
        ],
        tables: [
          {
            title: 'Recent Orders',
            columns: ['Order ID', 'Customer', 'Status', 'Amount'],
            // Rows will be AI-generated if not provided
          },
        ],
      }}
    />
  )
}

Export as Image

import { Screenshot } from 'ai-screenshot'
 
function App() {
  return (
    <Screenshot
      layout='stacked'
      content={{
        forms: [
          {
            title: 'User Registration',
            fields: [
              { label: 'Name', type: 'text' },
              { label: 'Email', type: 'email' },
            ],
          },
        ],
      }}
      exportFormat='png'
      onExport={(dataUrl) => {
        // Handle the exported image data URL
        console.log(dataUrl)
      }}
    />
  )
}

API Reference

<Screenshot> Component

The main component for generating screenshots.

Props

PropTypeDescription
layout'sidebar' | 'stacked'Layout type for the screenshot
contentContentConfigConfiguration for the content to display
themeThemeConfigOptional theme configuration
exportFormat'react' | 'png' | 'svg'Format to export the screenshot
onExport(data: string) => voidCallback when export is complete

Types

interface ScreenshotOptions {
  layout: 'sidebar' | 'stacked'
  content: ContentConfig
  theme?: ThemeConfig
  exportFormat?: 'react' | 'png' | 'svg'
  onExport?: (data: string) => void
}
 
interface ContentConfig {
  menus?: MenuConfig[]
  forms?: FormConfig[]
  tables?: TableConfig[]
  charts?: ChartConfig[]
  dashboards?: DashboardConfig[]
}
 
interface MenuConfig {
  title: string
  icon?: string
  items?: MenuItem[]
}
 
interface FormConfig {
  title: string
  fields: FormField[]
}
 
interface TableConfig {
  title: string
  columns: string[]
  rows?: any[][]
}
 
interface ChartConfig {
  title: string
  type: 'bar' | 'line' | 'pie' | 'area'
  data?: any
}
 
interface DashboardConfig {
  title: string
  widgets: (TableConfig | ChartConfig | FormConfig)[]
}

Dependencies

  • ai-functions
  • ai-providers
  • html-to-image (for PNG/SVG export)
  • react
  • zod (for schema validation)
Business-as-Code