Skip to main content

Build Web UI

Generate frontend code and complete pages. Code functions return the source as a string, ready to save to a file.

generate_component​

const code = await Gen.generate_component(description, apiKey, provider, options);

Options: framework (react default, vue, svelte, angular, html), language (javascript default, typescript), styling (css default, tailwind, css-modules, styled-components).

const code = await Gen.generate_component('a pricing card with a plan name, price and a CTA button', openaiKey, 'openai',
  { framework: 'react', language: 'typescript', styling: 'tailwind' });

generate_form​

const form = await Gen.generate_form(description, apiKey, provider, options);

A form with client-side validation. Options: framework (html default, react, vue, svelte), action (URL that receives the values as JSON).

generate_page_section​

const hero = await Gen.generate_page_section(description, apiKey, provider, { sectionType: 'hero', styling: 'tailwind' });

One section of a page: hero, pricing, features, testimonials, footer, and so on.

generate_css​

const css = await Gen.generate_css(description, apiKey, provider, options);

A stylesheet from a description. Options: format (css default, scss, tailwind), html (markup to style).

improve_accessibility​

const { html, issues } = await Gen.improve_accessibility(html, apiKey, provider);
// issues: [{ issue, fix, wcag }]

Fixes accessibility problems in markup and lists what changed with the WCAG reference.

generate_email_template​

const email = await Gen.generate_email_template('a welcome email with a "Get started" button', apiKey);

A responsive HTML email that works in email clients.

generate_svg_icon​

const icon = await Gen.generate_svg_icon('a shopping cart', apiKey, provider, { size: 24, style: 'outline' });

SVG markup only.

generate_color_palette​

const palette = await Gen.generate_color_palette('a calm fintech dashboard', apiKey, provider, { count: 6 });
// { name, colors: [{ name, hex, usage }], css }

generate_design_tokens​

const tokens = await Gen.generate_design_tokens('a calm fintech dashboard', apiKey, provider, { brandColor: '#4F46E5' });
// tokens.palette, tokens.semantic, tokens.typography, tokens.radius, tokens.spacing
// tokens.css      -> ':root { --color-primary-500: #4f46e5; ... }'
// tokens.tailwind -> theme.extend object
// tokens.contrast, tokens.warnings

11-step color scales, light and dark semantic roles, typography, radius and spacing. The CSS custom properties, the Tailwind theme and the WCAG contrast checks are computed by the library, not by the model. Options: brandColor (used exactly as primary 500), modes (['light', 'dark']), includeTypography, includeSpacing, cssPrefix (color).

Full pages​

// a page as { html, message }
const page = await Gen.generate_html_page('a registration page with a flat modern theme', openaiKey);

// generate and save the page to a file
await Gen.save_html_page('a registration page with a flat modern theme', './out', 'register.html', openaiKey);

// an HTML dashboard from CSV data
const dashboard = await Gen.generate_dashboard(csvString, 'website growth', openaiKey, undefined, 2);

generate_html_page(text, apiKey, modelName, provider), save_html_page(text, folder, fileName, apiKey, modelName, provider) and generate_dashboard(csv, topic, apiKey, modelName, numGraphs, provider) keep their original argument order.