Skip to the main content

@trikinco/fullstack-components is no longer maintained.

HTML Page Generator

AI-Powered HTML page generator utilities to help you create your own generative UI experiences.

Live Example

This HTML page generator and preview is just a basic example of the kinds of interfaces and interactions you can build with useHtmlPage.

useHtmlPage hook

Generates full HTML documents, returning a raw HTML string.

Iterate on existing pages or previous generation results by passing data to the html parameter.

Client Component
'use client'
 
import { useHtmlPage } from '@trikinco/fullstack-components/client'
 
export default function Page() {
  const { isLoading, data } = useHtmlPage({
    /**
     * Description of what you want to create
     */
    prompt: 'An about page for a cat named Bubbles',
    /**
     * Full URL to a reference image
     */
    src: 'https://awesome-cat-ui/aboutcat.png',
    /**
     * Comma separated list of unprefixed
     * Tailwind colors
     */
    colors: 'blue-800,purple-300',
    /**
     * HTML string of a full HTML document
     * used to iterate on an existing document
     * or previous generation result
     */
    html: `<!DOCTYPE html>
    <html lang="en">
      <body>
        <h1>The Home of Bubbles</h1>
        ...
      </body>
    </html>
    `,
  })
 
  if (isLoading) {
    return 'Generating UI...'
  }
 
  // Beware of the possible security implications of this, consider XSS, sandboxing, etc.
  return <iframe title="About Bubbles" srcDoc={data} />
}

Custom Server Component with getHtmlPage

Server Component
import { getHtmlPage } from '@trikinco/fullstack-components'
 
export default async function Page() {
  const { responseText } = await getHtmlPage({
    prompt: 'A modern marketing site for a speed boat company',
    src: 'https://speed-boat-designs.dev/inspiration.png',
    colors: 'blue-400,teal-200',
    theme: 'light',
    // `html` is only used if iterating on a previously generated page
    html: '<!DOCTYPE html><html>...</html>',
  })
 
  return responseText
}

Setup

Add htmlPage: handleHtmlPageRequest() to the API route handler.

app/api/fsutils/[...fscomponents]/route.ts
import {
  handleFSComponents,
  handleHtmlPageRequest,
  type FSCOptions,
} from '@trikinco/fullstack-components'
 
const fscOptions: FSCOptions = {
  htmlPage: handleHtmlPageRequest({
    openAiApiKey: process.env.OPENAI_API_KEY || '',
  }),
  // Additional options and handlers...
}
 
const fscHandler = handleFSComponents(fscOptions)
 
export { fscHandler as GET, fscHandler as POST }

API Reference

Types

HtmlPageOptions

HTML page generator API route handler options.
Properties

openAiApiKeystring

  • default`process.env.OPENAI_API_KEY`.

HtmlPageRequestBodyinterface

HTML page generator request body.
Properties

promptstring

A text description of the HTML page you want to build or modify.
  • example'A colorful about page for a cat named "Fluffy". Rounded corners, a gradient background, and a centered image of a cat.'

srcstring

An absolute URL to a reference image to base the design of the entire HTML page on.
  • example'https://absolute-cat-inspiration/tabbycat-ui.jpg'

colorsstring

A comma-separated list of unprefixed TailwindCSS colors to use in the generated HTML page.
  • example'blue-400,red-600'

themelight | dark

The theme to make the UI for, equivalent to media `prefers-color-scheme`.
  • example'dark'

htmlstring

A stringified HTML page to modify or iterate on. Useful when allowing for follow-up calls to modify a previously generated HTML page.
  • example'<html><body><h1>Henlo, world!</h1></body></html>'

ChatGptCompletionResponse

The response body for `getHtmlPage`.
Properties

responseTextstring

The response text extracted from the completion message content.

tokensUsednumber

Total number of tokens used in the request (prompt + completion).

finishReasonstring

The reason the chat stopped. This will be `stop` if the model hit a natural stop point or a provided stop sequence, `length` if the maximum number of tokens specified in the request was reached, `content_filter` if content was omitted due to a flag from our content filters, `tool_calls` if the model called a tool, or `function_call` (deprecated) if the model called a function.

errorMessagestring

The error message if there was an error.

Hooks

useHtmlPagefunction

import { useHtmlPage } from '@trikinco/fullstack-components/client'
A client-side fetch handler hook for creating a HTML page based on a provided `prompt`, and other optional parameters.
Parameters

bodyHtmlPageRequestBodyrequired

  • linkHtmlPageRequestBody
  • default`theme` is set to the current `prefers-color-scheme` value using `window.matchMedia`

configUseRequestConsumerConfig<HtmlPageRequestBody>

Fetch utility hook request options without the `fetcher`. Allows for overriding the default `request` config.
Returns

isLoadingboolean

Fetch loading state. `true` if the fetch is in progress.

isErrorboolean

Fetch error state. `true` if an error occurred.

errorunknown

Fetch error object if `isError` is `true`

datastring | undefined

Fetch response data if the fetch was successful.

refetchfunction

Refetches the data.
returnsundefined

Utilities

getHtmlPagefunction

import { getHtmlPage } from '@trikinco/fullstack-components'
Generates a website based on the provided `HtmlPageRequestBody`. Server Action that calls the third-party API directly on the server. This avoids calling the Next.js API route handler allowing for performant Server Components.
Parameters

requestHtmlPageRequestBodyrequired

optionsHtmlPageOptions

returnsPromise<ChatGptCompletionResponse>

fetchHtmlPagefunction

import { fetchHtmlPage } from '@trikinco/fullstack-components/client'
Generates a website based on the provided `HtmlPageRequestBody`. Client-side fetch handler that calls the internal Next.js API route handler, then the third-party API. Best used for Client Components and functionality.
Parameters

bodyHtmlPageRequestBodyrequired

configRequestConfigOnly

Fetch utility request options without the `body`
returnsPromise<string>