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
<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.
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'
Parameters
propsBlockPropsrequired
- linkBlockProps
Hooks
useBlockfunction
import { useBlock } from '@trikinco/fullstack-components/client'
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.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`.Utilities
getBlockfunction
import { getBlock } from '@trikinco/fullstack-components'
Parameters
requestBlockRequestBodyrequired
- linkBlockRequestBody
optionsBlockOptions
- linkBlockOptions
fetchBlockfunction
import { fetchBlock } from '@trikinco/fullstack-components/client'
Parameters
bodyBlockRequestBodyrequired
- linkBlockRequestBody
configRequestConfigOnly
Fetch utility request options without the `body`fetchProcessedBlockfunction
import { fetchProcessedBlock } from '@trikinco/fullstack-components/client'
Parameters
propsrequired
- linkBlockRequestBody
configRequestConfigOnly
Fetch utility request options without the `body`