Platform / Build

Your code. Your workspace. Your way.

Build with full control over the frontend while Blutui takes care of the complexity around it

01.

Canvas

(Template)

Canvas is the template engine behind Blutui. It takes HTML and elevates it with variables, expressions and tags. You control the code, the style, the feel, all of it.

goldenhomes.co.nz
home.html default.html views/layouts

{% extends 'templates/default.html' %}

 

{% set plans = cms.collection('plans')

| sort_by('order') | slice(0, 3) %}

 

{% block body %}

{{ include('components/hero.html') }}

 

{% for plan in plans %}

<article class="plan">

<h3>{{ plan.name }}</h3>

<p>{{ plan.beds }} bed · {{ plan.baths }} bath</p>

</article>

{% endfor %}

{% endblock %}

Context & MCP

Canvas is modern, agentic and super powerful when it comes to using agents. Allowing quicker development and more accurate outcomes.

Cassettes

Canvas can be quickly switched out with Cassettes allowing rapid development of a project.

02.

Courier

(CLI Tool)

Courier is the Blutui CLI tool used to sync project code from your machine to the Blutui project. Courier includes a local development environment, ideal for building the project before pushing changes for review.

takahe — courier — 96×28

~/dev/takahe ❯ courier push

Bundling views/ and public/…

↑views/layouts/default.html2.4 KB

↑views/canopy/hero.canvas1.1 KB

↑public/styles/global.css18.7 KB

↑public/scripts/app.js9.3 KB

Uploading cassette ██████████ ██████████ 18% 76% 100%

✓ Deployed to production in 4.2s

  https://takahe.blutui.site

 

~/dev/takahe ❯

~/dev/takahe ❯ courier dev

Watching views/ and src/…

 

  https://localhost:8080

blutui — courier create — 96×28

…/Dev/blutui

→ blutui courier create

 

 ██████╗ ██████╗ ██╗   ██╗██████╗ ██╗███████╗██████╗
██╔════╝██╔═══██╗██║   ██║██╔══██╗██║██╔════╝██╔══██╗
██║     ██║   ██║██║   ██║██████╔╝██║█████╗  ██████╔╝
██║     ██║   ██║██║   ██║██╔══██╗██║██╔══╝  ██╔══██╗
╚██████╗╚██████╔╝╚██████╔╝██║  ██║██║███████╗██║  ██║
 ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚═╝  ╚═╝

 

? What is your project handle? › my-projecttakahe

03.

Cassettes

(Environment)

An isolated environment for your project’s code. Select one environment that is active and every other environment is a staging environment. Ideal for multi-developer workflows, testing code changes or updating components without affecting the active environment.

PU Pūkeko
RC
Overview Branding Cassettes Domains

Cassettes

(3)(4)

Create Cassette
christmas

christmas

new-store

newstore

halloween

halloween

default Active

default

04.

Context

(MCP & Skills)

Driving the agentic Blutui workflow, Context is our skills platform used to help you build projects and manage content using your AI model of choice.

takahe — views/layouts/team.html
team.html default.html views/layouts

{% extends 'templates/default.html' %}

 

{% set team = cms.collection('team') %}

 

{% block body %}

<section class="mx-auto max-w-5xl px-6 py-20">

<h1>The team</h1>

<div class="mt-12 grid gap-10 @3xl:grid-cols-3">

{% for person in team %}

<article>

<p>{{ person.name }}</p>

<p>{{ person.role }}</p>

</article>

{% endfor %}

</div>

</section>

{% endblock %}

Assistant blutui

Add a team page backed by a collection.

Skill blutui-project-guidelines loaded
blutui wants to run a tool Awaiting you Allowed

create_collection

handle: "team"

fields: name, role, photo, email

Deny Allow
Collection team created · 4 fields
MCP create_page("/team") 201
Write views/layouts/team.html 42 lines

The page renders the collection with a Canvas loop, the way the Blutui rules ask for it.

Ask anything…