https://github.com/rubriclab/blocks
https://github.com/rubriclab/blocks
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rubriclab/blocks
- Owner: RubricLab
- Created: 2024-03-26T17:07:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-18T00:52:54.000Z (7 months ago)
- Last Synced: 2025-07-18T05:29:49.456Z (7 months ago)
- Language: TypeScript
- Size: 69.3 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @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](https://github.com/rubriclab/actions)
- [@rubriclab/blocks](https://github.com/rubriclab/blocks)
- [@rubriclab/chains](https://github.com/rubriclab/chains)
- [@rubriclab/agents](https://github.com/rubriclab/agents)
- [@rubriclab/events](https://github.com/rubriclab/events)
[Demo](https://chat.rubric.sh)
## 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.
```ts
// 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.
```tsx
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 }) =>
{text}
})
export const blocks = { heading }
```
### Create a Renderer
Pass all your blocks into an render to get a function to render it.
```ts
'use client'
import { createBlockRenderer } from '@rubriclab/blocks'
import { blocks } from './blocks'
export const { render } = createBlockRenderer({ blocks })
```
### Render a Block
```ts
const block = await render({
block: 'heading',
props: {
text: 'Hello World'
}
})
```