Skip to the main content

Block

Generate, build, mount and handle React components at runtime with text descriptions.

<Block> Client Component

Generates and mounts a React component at runtime based on a prompt text description.

Live Example

Loading...Loading blocks...
<Block
  prompt="A navbar with a modern SVG logo, the title 'myProject' and some links. Dark bg, light text."
  fallback={<p>Creating navbar component...</p>}
/>
//... etc

useBlock hook

useBlock is a utility hook that allows for access to similar features as Block.

'use client'
 
import { useBlock } from '@trikinco/fullstack-components/client'
 
export default function Page() {
  const { id } = useBlock('A spinning button')
 
  return <div id={id}>Generating a button...</div>
}

Setup

Add block: handleBlockRequest() to the API route handler.

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

API Reference

Types

BlockOptions

Block API route handler options.
Properties

openAiApiKeystring

  • default`process.env.OPENAI_API_KEY`.

BlockRequestBodyinterface

Block request body.
Properties

promptstring

A text description of the desired component.
  • example'A footer with copyright for this year with the company name Acme'

BlockResultinterface

Block result after processing.
Properties

contentstring

Stringified React components and declarations needed for data to be implemented by `usage`.
  • example`export const Wrapper = ({children,id}) => <div id={id} className='p-5'>{children}</div> export const List = ({data}) => <ul> {data?.map(item => (<li key={item.id} className='text-sm'>{item.text}</li>))} </ul> `
  • notethat this is just a raw string containing React components. It will need to be sanitized and parsed before usage.

usagestring

Stringified React components with default props implementation of `content`.
  • example`<Wrapper id="main"> <List data={[{id:1,text:'Hello'},{id:2,text:'World'}]}/> </Wrapper> `
  • notethat this is just a raw string containing React components. It will need to be sanitized and parsed before usage.

ChatGptCompletionResponse

The response body for `getBlock`.
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.

Components

BlockPropsinterface<object>

Props to pass to the `<Block>` Client Component.
Properties

promptstring

A text description of the desired component.
  • example'A footer with copyright for this year with the company name Acme'

fallbackReactElement

A React tree to render in the error boundary if the `<Block>` build or renderer fails.

loadingReactNode

A React tree to render in the target root before rendering the `<Block>`.

errorBoundaryPropsOmit<ErrorBoundaryPropsWithFallback, string>

Props to pass to the wrapping error boundary.

Blockfunction

import { Block } from '@trikinco/fullstack-components/client'
Block is a client component that renders a generated React component based on a `prompt`.
Parameters

propsBlockPropsrequired

returnsJSX.Element

Hooks

useBlockfunction

import { useBlock } from '@trikinco/fullstack-components/client'
Generates a React component based on a `prompt`. Uses `createRoot` to mount the component to a browser DOM element assigned with the `id`.
Parameters

promptstringrequired

A text description of the desired component.
  • example'A footer with copyright for this year with the company name Acme'

onErrorfunction

Callback when errors are thrown. Used to e.g show an error boundary.
  • example`(error) => showBoundary(error)`
Parameters

errorrequired

The error object thrown by the Block.
returnsundefined
Returns

idstring

`id` used to attach to the DOM element to mount the component in.

loadBlockfunction

Loads the block content into the DOM element with the `id`.
returnsPromise<common/undefined>

Utilities

getBlockfunction

import { getBlock } from '@trikinco/fullstack-components'
Generates code for a React component based on the provided `BlockRequestBody`. 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

requestBlockRequestBodyrequired

optionsBlockOptions

returnsPromise<ChatGptCompletionResponse>

fetchBlockfunction

import { fetchBlock } from '@trikinco/fullstack-components/client'
Generates code for a React component based on the provided `BlockRequestBody`. 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

bodyBlockRequestBodyrequired

configRequestConfigOnly

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

fetchProcessedBlockfunction

import { fetchProcessedBlock } from '@trikinco/fullstack-components/client'
Generates the code for a React component based on the provided `BlockRequestBody` and processes the response then mounts the component in the DOM element with the specified `id`. Uses `fetchBlock` under the hood to generate and fetch the block, then uses `esm.sh/build` to process the response and mount the component. 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

propsrequired

configRequestConfigOnly

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