Scaffold web app

README.md

@@ -1 +1,49 @@
-hello world
+# Create Rubric App
+
+This project is bootstrapped with [`create-rubric-app`](https://github.com/RubricLab/create-rubric-app).
+
+## Getting Started
+
+### 1. Install dependencies
+
+```sh
+npm i
+```
+
+```sh
+bun i
+```
+
+### 2. Set up the DB
+
+```sh
+npm run db:push
+```
+
+```sh
+bun db:push
+```
+
+### 3. Run the development server
+
+```sh
+npm run dev
+```
+
+```sh
+bun dev
+```
+
+Open [localhost:3000](http://localhost:3000) in your browser to see the result.
+
+You can start modifying the UI by editing [src/app/page.tsx](./src/app/(app)/page.tsx). The page auto-updates as you edit the file.
+
+### Deployment
+
+To serve your app to users, simply deploy the Next.js app eg. on [Railway](https://railway.app/new) or [Vercel](https://deploy.new/).
+
+To persist data, you'll need a database. Both [Railway](https://docs.railway.app/databases/postgresql) and [Vercel](https://vercel.com/docs/storage/vercel-postgres) provide Postgres DBs.
+
+## Learn More
+
+To learn more about this project, take a look at this [blog post](https://rubriclabs.com/blog/create-rubric-app).

biome.json

@@ -0,0 +1,3 @@
+{
+	"extends": ["@rubriclab/config/biome"]
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from 'next'
+
+export default {
+	reactStrictMode: true,
+	transpilePackages: [
+		'@rubriclab/actions',
+		'@rubriclab/agents',
+		'@rubriclab/auth',
+		'@rubriclab/blocks',
+		'@rubriclab/chains',
+		'@rubriclab/events',
+		'@rubriclab/shapes',
+		'@rubriclab/webhooks'
+	]
+} satisfies NextConfig

package.json

@@ -0,0 +1,40 @@
+{
+	"dependencies": {
+		"@prisma/client": "^6.14.0",
+		"@rubriclab/agents": "^0.0.58",
+		"@rubriclab/auth": "^0.0.50",
+		"@rubriclab/events": "^0.0.37",
+		"@t3-oss/env-nextjs": "^0.13.8",
+		"dotenv": "^17.2.1",
+		"next": "^15.5.1",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1"
+	},
+	"description": "This project was bootstrapped with create-rubric-app",
+	"devDependencies": {
+		"@rubriclab/config": "^0.0.22",
+		"@types/node": "^24.3.0",
+		"@types/react": "^19.1.11",
+		"@types/react-dom": "^19.1.8",
+		"prisma": "^6.14.0",
+		"typescript": "^5.9.2",
+		"zod": "^4.1.3"
+	},
+	"license": "go nuts",
+	"name": "my-app",
+	"private": true,
+	"scripts": {
+		"bleed": "bun x npm-check-updates -u --dep prod,dev,optional,peer",
+		"build": "next build",
+		"check": "bun x biome check .",
+		"clean": "rm -rf .next && rm -rf node_modules",
+		"db:generate": "prisma generate",
+		"db:push": "bun --env-file=.env prisma generate && prisma db push",
+		"db:seed": "prisma db seed",
+		"db:studio": "prisma studio",
+		"dev": "next dev",
+		"format": "bun x biome check --write .",
+		"start": "next start"
+	},
+	"version": "0.0.0"
+}

postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@rubriclab/config/postcss'

prisma.config.ts

@@ -0,0 +1,9 @@
+import 'dotenv/config'
+import { defineConfig } from 'prisma/config'
+
+export default defineConfig({
+	migrations: {
+		seed: 'bun run prisma/seed.ts'
+	},
+	schema: 'prisma'
+})

prisma/auth.prisma

@@ -0,0 +1,72 @@
+model User {
+    id    String @id @default(nanoid(6))
+    email String @unique
+
+    oAuth2AuthenticationAccounts OAuth2AuthenticationAccount[]
+    oAuth2AuthorizationAccounts  OAuth2AuthorizationAccount[]
+    apiKeyAuthorizationAccounts  ApiKeyAuthorizationAccount[]
+
+    sessions Session[]
+
+    tasks Task[]
+}
+
+model OAuth2AuthenticationRequest {
+    token       String   @id
+    callbackUrl String
+    expiresAt   DateTime
+}
+
+model OAuth2AuthorizationRequest {
+    token       String   @id
+    userId      String
+    callbackUrl String
+    expiresAt   DateTime
+}
+
+model MagicLinkRequest {
+    token     String   @id
+    email     String
+    expiresAt DateTime
+}
+
+model OAuth2AuthenticationAccount {
+    userId       String
+    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+    provider     String
+    accountId    String
+    accessToken  String
+    refreshToken String
+    expiresAt    DateTime
+
+    @@id([userId, provider, accountId])
+}
+
+model OAuth2AuthorizationAccount {
+    userId       String
+    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+    provider     String
+    accountId    String
+    accessToken  String
+    refreshToken String
+    expiresAt    DateTime
+
+    @@id([userId, provider, accountId])
+}
+
+model ApiKeyAuthorizationAccount {
+    userId    String
+    user      User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+    provider  String
+    accountId String
+    apiKey    String
+
+    @@id([userId, provider, accountId])
+}
+
+model Session {
+    key       String   @id @default(cuid())
+    userId    String
+    user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+    expiresAt DateTime
+}

prisma/schema.prisma

@@ -0,0 +1,18 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Task {
+  id        Int      @id @default(autoincrement())
+  title     String
+  createdAt DateTime @default(now())
+  status    Boolean  @default(false)
+
+  user   User?   @relation(fields: [userId], references: [id])
+  userId String?
+}

prisma/seed.ts

@@ -0,0 +1,14 @@
+#!/usr/bin/env bun
+
+import db from '~/db'
+
+async function seed() {
+	await db.task.create({
+		data: {
+			status: false,
+			title: 'Create your first task'
+		}
+	})
+}
+
+seed()

src/app/(app)/ai.tsx

@@ -0,0 +1,34 @@
+'use server'
+
+import { executeTodoAgent } from '~/agents/todo'
+import env from '~/env'
+import { publish } from '~/events/server'
+
+export async function sendMessage({ userId, message }: { userId: string; message: string }) {
+	const { response } = await executeTodoAgent({
+		messages: [{ content: message, role: 'user' }],
+		onEvent: async events => {
+			switch (events.type) {
+				case 'assistant_message': {
+					await publish({
+						channel: userId,
+						eventType: events.type,
+						payload: events
+					})
+					break
+				}
+				case 'function_call': {
+					await publish({
+						channel: userId,
+						eventType: events.name,
+						payload: events
+					})
+					break
+				}
+			}
+		},
+		openAIKey: env.OPENAI_API_KEY
+	})
+
+	console.log(response)
+}

src/app/(app)/chat.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import type { TodoAgentResponseEvent, TodoAgentToolEvent } from '~/agents/todo'
+import { useSession } from '~/auth/client'
+import { ChatBox } from '~/components/ChatBox'
+import { AssistantMessage, ToolMessage, UserMessage } from '~/components/Message'
+
+import { useEvents } from '~/events/client'
+import { sendMessage } from './ai'
+
+type Message =
+	| TodoAgentToolEvent
+	| TodoAgentResponseEvent
+	| {
+			id: string
+			type: 'user_message'
+			message: string
+	  }
+
+function MessageSwitch({ message }: { message: Message }) {
+	switch (message.type) {
+		case 'user_message': {
+			return <UserMessage>{message.message}</UserMessage>
+		}
+
+		case 'assistant_message': {
+			return <AssistantMessage>{message.message.response}</AssistantMessage>
+		}
+		case 'function_call': {
+			return (
+				<ToolMessage
+					name={message.name}
+					args={JSON.stringify(message.arguments)}
+					result={JSON.stringify(message.result)}
+				/>
+			)
+		}
+	}
+}
+
+function ChatMessages({
+	userId,
+	messages,
+	addMessage
+}: {
+	userId: string
+	messages: Message[]
+	addMessage: (message: Message) => void
+}) {
+	useEvents({
+		id: userId,
+		on: {
+			assistant_message: addMessage
+		}
+	})
+
+	return (
+		<div className="pb-16">
+			{messages.map(message => (
+				<MessageSwitch key={message.id} message={message} />
+			))}
+		</div>
+	)
+}
+
+export default function Chat() {
+	const { userId } = useSession()
+	const [messages, setMessages] = useState<Message[]>([])
+
+	function addMessage(message: Message) {
+		setMessages(prev => [...prev, message])
+	}
+
+	function handleSubmit(message: string) {
+		addMessage({
+			id: Date.now().toString(),
+			message,
+			type: 'user_message'
+		})
+		sendMessage({ message, userId })
+	}
+
+	return (
+		<div className="w-full">
+			<ChatMessages userId={userId} messages={messages} addMessage={addMessage} />
+			<ChatBox placeholder="What is my todo list?" submit={handleSubmit} />
+		</div>
+	)
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,17 @@
+import { getSession } from '~/auth/actions'
+import { ClientAuthProvider } from '~/auth/client'
+import { Nav } from '~/components/Nav'
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+	return (
+		// @ts-expect-error: Auth Package Bug
+		<ClientAuthProvider session={await getSession({ redirectUnauthorized: '/signin' })}>
+			<div className="flex min-h-screen flex-col">
+				<Nav />
+				<div className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-center p-10">
+					<div className="flex w-full flex-col items-center">{children}</div>
+				</div>
+			</div>
+		</ClientAuthProvider>
+	)
+}

src/app/(app)/page.tsx

@@ -0,0 +1,5 @@
+import Chat from './chat'
+
+export default function Page() {
+	return <Chat />
+}

src/app/(landing)/signin/page.tsx

@@ -0,0 +1,5 @@
+import { SignInWithGithubButton } from '~/components/SignIn'
+
+export default function SignInPage() {
+	return <SignInWithGithubButton />
+}

src/app/api/auth/[...auth]/route.ts

@@ -0,0 +1,3 @@
+import { routes } from '~/auth/server'
+
+export const { GET } = routes

src/app/api/events/route.ts

@@ -0,0 +1 @@
+export { GET, maxDuration } from '~/events/server'

src/app/icon.tsx

@@ -0,0 +1,30 @@
+import { ImageResponse } from 'next/og'
+
+export const contentType = 'image/png'
+export const size = {
+	height: 32,
+	width: 32
+}
+
+export default async function Icon() {
+	return new ImageResponse(
+		<div
+			style={{
+				alignItems: 'center',
+				background: 'black',
+				color: 'white',
+				display: 'flex',
+				fontSize: 28,
+				fontWeight: 700,
+				height: '100%',
+				justifyContent: 'center',
+				width: '100%'
+			}}
+		>
+			R
+		</div>,
+		{
+			...size
+		}
+	)
+}

src/app/layout.tsx

@@ -0,0 +1,14 @@
+import './styles.css'
+
+export const metadata = {
+	description: 'Generated by Create Rubric App',
+	title: 'Create Rubric App'
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+		</html>
+	)
+}

src/app/opengraph-image.tsx

@@ -0,0 +1,41 @@
+import { readFile } from 'node:fs/promises'
+import { ImageResponse } from 'next/og'
+
+export const alt = 'Create Rubric App'
+export const size = {
+	height: 630,
+	width: 1200
+}
+
+export const contentType = 'image/png'
+
+export default async function Image() {
+	const interSemiBold = await readFile('public/fonts/PlusJakartaSans-Bold.ttf')
+
+	return new ImageResponse(
+		<div
+			style={{
+				alignItems: 'center',
+				background: 'white',
+				display: 'flex',
+				fontSize: 128,
+				height: '100%',
+				justifyContent: 'center',
+				width: '100%'
+			}}
+		>
+			R
+		</div>,
+		{
+			...size,
+			fonts: [
+				{
+					data: interSemiBold,
+					name: 'Inter',
+					style: 'normal',
+					weight: 400
+				}
+			]
+		}
+	)
+}

src/app/styles.css

@@ -0,0 +1,3 @@
+/** biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind Grammar */
+
+@import "tailwindcss";

src/app/twitter-image.tsx

@@ -0,0 +1 @@
+export { alt, contentType, default, size } from './opengraph-image'

src/lib/agents/todo.ts

@@ -0,0 +1,33 @@
+import { createAgent, createResponseFormat, noTabs } from '@rubriclab/agents'
+import { z } from 'zod/v4'
+import createTodo from '~/tools/createTodo'
+import getTodoList from '~/tools/getTodoList'
+
+const responseFormat = createResponseFormat({
+	name: 'todo_agent_response_format',
+	schema: z.object({
+		response: z.string()
+	})
+})
+
+const systemPrompt = noTabs`
+	You are a todo agent.
+	The user will ask you to do CRUD operations against a TODO database.
+	You should use tools to help them.
+`
+
+const { executeAgent, eventTypes, __ToolEvent, __ResponseEvent } = createAgent({
+	model: 'gpt-4.1-mini',
+	responseFormat,
+	systemPrompt,
+	tools: {
+		createTodo,
+		getTodoList
+	}
+})
+
+export { eventTypes as todoAgentEventTypes }
+export { executeAgent as executeTodoAgent }
+
+export type TodoAgentToolEvent = typeof __ToolEvent
+export type TodoAgentResponseEvent = typeof __ResponseEvent

src/lib/auth/actions.ts

@@ -0,0 +1,5 @@
+'use server'
+
+import { actions } from './server'
+
+export const { signIn, signOut, sendMagicLink, getAuthConstants, getSession } = actions

src/lib/auth/client.ts

@@ -0,0 +1,19 @@
+'use client'
+
+import type { Prisma } from '@prisma/client'
+import { CreateAuthContext } from '@rubriclab/auth/client'
+
+export const { ClientAuthProvider, useSession } =
+	CreateAuthContext<
+		Prisma.SessionGetPayload<{
+			include: {
+				user: {
+					include: {
+						apiKeyAuthorizationAccounts: true
+						oAuth2AuthenticationAccounts: true
+						oAuth2AuthorizationAccounts: true
+					}
+				}
+			}
+		}>
+	>()

src/lib/auth/server.ts

@@ -0,0 +1,14 @@
+import { createAuth, createGithubAuthenticationProvider, prismaAdapter } from '@rubriclab/auth'
+import db from '~/db'
+import env from '~/env'
+
+export const { routes, actions, __types } = createAuth({
+	authUrl: env.NEXT_PUBLIC_AUTH_URL,
+	databaseProvider: prismaAdapter(db),
+	oAuth2AuthenticationProviders: {
+		github: createGithubAuthenticationProvider({
+			githubClientId: env.GITHUB_CLIENT_ID,
+			githubClientSecret: env.GITHUB_CLIENT_SECRET
+		})
+	}
+})

src/lib/components/ChatBox.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { type KeyboardEvent, useState } from 'react'
+
+export function ChatBox({
+	submit,
+	placeholder = 'Type a message...'
+}: {
+	submit: (message: string) => void
+	placeholder?: string
+}) {
+	const [message, setMessage] = useState(placeholder)
+
+	return (
+		<div className="fixed right-0 bottom-0 left-0 bg-white p-4 dark:bg-black">
+			<div className="flex w-full items-center justify-center gap-2">
+				<textarea
+					value={message}
+					onChange={e => {
+						setMessage(e.target.value)
+						e.target.style.height = 'auto'
+						e.target.style.height = `${e.target.scrollHeight}px`
+					}}
+					onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {
+						if (e.key === 'Enter' && !e.shiftKey) {
+							e.preventDefault()
+							if (message.trim()) {
+								submit(message)
+								setMessage('')
+							}
+						}
+					}}
+					rows={1}
+					className="input-field max-w-[800px] flex-1 resize-none rounded-lg border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white"
+				/>
+				<button
+					type="button"
+					onClick={() => {
+						if (message.trim()) {
+							submit(message)
+							setMessage(placeholder)
+						}
+					}}
+					className="input-field self-end rounded-lg border bg-black px-4 py-2 text-white dark:bg-white dark:text-black"
+				>
+					→
+				</button>
+			</div>
+		</div>
+	)
+}

src/lib/components/Message.tsx

@@ -0,0 +1,52 @@
+export function UserMessage({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="mb-3 flex justify-end">
+			<div className="message-user max-w-3xl rounded-lg px-3 py-2">{children}</div>
+		</div>
+	)
+}
+
+export function AssistantMessage({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="mb-3 flex justify-start">
+			<div className="message-assistant max-w-3xl rounded-lg px-3 py-2">{children}</div>
+		</div>
+	)
+}
+
+export function ToolMessage({
+	name,
+	args,
+	result
+}: {
+	name: string
+	args: React.ReactNode
+	result?: React.ReactNode
+}) {
+	return (
+		<div className="mb-3 flex justify-start">
+			<div className="message-assistant max-w-3xl rounded-lg px-3 py-2">
+				<div className="mb-2 font-medium text-neutral-700 text-sm dark:text-neutral-300">
+					Tool: {name}
+				</div>
+
+				<div className="space-y-2 text-sm">
+					<div>
+						<div className="mb-1 font-medium text-neutral-500 text-xs uppercase tracking-wide dark:text-neutral-400">
+							Input
+						</div>
+						<div className="surface rounded p-2">{args}</div>
+					</div>
+					{result && (
+						<div>
+							<div className="mb-1 font-medium text-neutral-500 text-xs uppercase tracking-wide dark:text-neutral-400">
+								Output
+							</div>
+							<div className="surface rounded p-2">{result}</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}

src/lib/components/Nav.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useSession } from '~/auth/client'
+import { SignOutButton } from '~/components/SignOut'
+
+export function Nav() {
+	const { user } = useSession()
+	return (
+		<div className="flex flex-row items-center justify-between gap-4 p-4">
+			<a href="/">Home</a>
+			<div className="flex flex-row items-center gap-4">
+				<p>Signed in as {user.email}</p>
+				<SignOutButton />
+			</div>
+		</div>
+	)
+}

src/lib/components/SignIn.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { signIn } from '~/auth/actions'
+
+export function SignInWithGithubButton() {
+	return (
+		<button type="button" onClick={async () => signIn({ callbackUrl: '/', provider: 'github' })}>
+			Sign In With Github
+		</button>
+	)
+}

src/lib/components/SignOut.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { signOut } from '~/auth/actions'
+
+export function SignOutButton() {
+	return (
+		<button
+			type="button"
+			className="underline underline-offset-4"
+			onClick={async () => signOut({ redirect: '/signin' })}
+		>
+			Sign Out
+		</button>
+	)
+}

src/lib/db.ts

@@ -0,0 +1,3 @@
+import { PrismaClient } from '@prisma/client'
+
+export default new PrismaClient()

src/lib/env.ts

@@ -0,0 +1,19 @@
+import { createEnv } from '@t3-oss/env-nextjs'
+import z from 'zod'
+
+export default createEnv({
+	client: {
+		NEXT_PUBLIC_AUTH_URL: z.string().min(1)
+	},
+	experimental__runtimeEnv: {
+		NEXT_PUBLIC_AUTH_URL: process.env.NEXT_PUBLIC_AUTH_URL
+	},
+	server: {
+		DATABASE_URL: z.string().min(1),
+		GITHUB_CLIENT_ID: z.string().min(1),
+		GITHUB_CLIENT_SECRET: z.string().min(1),
+		NODE_ENV: z.string(),
+		OPENAI_API_KEY: z.string().min(1),
+		UPSTASH_REDIS_URL: z.string().min(1)
+	}
+})

src/lib/events/client.ts

@@ -0,0 +1,7 @@
+import { createEventsClient } from '@rubriclab/events/client'
+import { eventTypes } from '~/events/types'
+
+export const { useEvents } = createEventsClient({
+	eventTypes,
+	url: '/api/events'
+})

src/lib/events/server.ts

@@ -0,0 +1,8 @@
+import { createEventsServer } from '@rubriclab/events/server'
+import env from '~/env'
+import { eventTypes } from '~/events/types'
+
+export const { publish, GET, maxDuration } = createEventsServer({
+	eventTypes,
+	redisURL: env.UPSTASH_REDIS_URL
+})

src/lib/events/types.ts

@@ -0,0 +1,6 @@
+import { createEventTypes } from '@rubriclab/events'
+import { todoAgentEventTypes } from '~/agents/todo'
+
+export const eventTypes = createEventTypes({
+	...todoAgentEventTypes
+})

src/lib/tools/createTodo.ts

@@ -0,0 +1,22 @@
+import { createTool } from '@rubriclab/agents'
+import z from 'zod/v4'
+import db from '~/db'
+
+export default createTool({
+	async execute({ status, title }) {
+		await db.task.create({
+			data: {
+				status,
+				title
+			}
+		})
+		return undefined
+	},
+	schema: {
+		input: z.object({
+			status: z.boolean(),
+			title: z.string()
+		}),
+		output: z.undefined()
+	}
+})

src/lib/tools/getTodoList.ts

@@ -0,0 +1,31 @@
+import { createTool } from '@rubriclab/agents'
+import z from 'zod/v4'
+import db from '~/db'
+
+export default createTool({
+	async execute() {
+		return await db.task.findMany({
+			include: {
+				user: {
+					select: {
+						email: true
+					}
+				}
+			}
+		})
+	},
+	schema: {
+		input: z.object({}),
+		output: z.array(
+			z.object({
+				status: z.boolean(),
+				title: z.string(),
+				user: z
+					.object({
+						email: z.string()
+					})
+					.nullable()
+			})
+		)
+	}
+})

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./src/lib/*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "extends": "@rubriclab/config/tsconfig",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ]
+}