@rubriclab/actions

The Blocks package aims to provide a powerful and simple way to define blocks (which are essentially UI primitives) and execute them safely with JSON serializable payloads.

It is part of Rubric's architecture for Generative UI when used with:

• @rubriclab/actions
• @rubriclab/blocks
• @rubriclab/chains
• @rubriclab/agents
• @rubriclab/events

Demo

Get Started

Installation

bun add @rubriclab/blocks

@rubriclab scope packages are not built, they are all raw typescript. If using in a next.js app, make sure to transpile.

// next.config.ts
import type { NextConfig } from  'next' 
export default {
	transpilePackages: ['@rubriclab/blocks'],
	reactStrictMode: true
} satisfies  NextConfig

If using inside the monorepo (@rubric), simply add {"@rubriclab/blocks": "*"} to dependencies and then run bun i

Define Blocks

To get started, define a few blocks.

import { createBlock } from '@rubriclab/blocks'
import { Heading } from '~/ui/heading'
import { z } from 'zod'

const heading = createBlock({
	schema: {
		input: {
			text: z.string()
		},
		output: z.undefined
	},
	render: ({ text }) => <h1>{text}</h1>
})

export const blocks = { heading }

Create a Renderer

Pass all your blocks into an render to get a function to render it.

'use client'

import { createBlockRenderer } from '@rubriclab/blocks'
import { blocks } from './blocks'

export const { render } = createBlockRenderer({ blocks })

Render a Block

const block = await render({
    block: 'heading',
    props: {
        text: 'Hello World'
    }
})