-
-
- We're an applied AI Lab helping companies get intelligence to production.
-
-
+
+
+
Rubric Agency
+
+ We build{' '}
+
+ powerful
+ {' '}
+ AI systems.
+
+
+
+ {/*
*/}
-
+
)
}
@@ -50,10 +55,16 @@ export default function Page() {
diff --git a/src/lib/actions/posthog/index.ts b/src/lib/actions/posthog/index.ts
new file mode 100644
index 0000000..f8905f1
--- /dev/null
+++ b/src/lib/actions/posthog/index.ts
@@ -0,0 +1,5 @@
+import { webAnalyticsOverviewRetrieve } from '@rubric-warehouse/posthog-api'
+
+export const posthogActions = {
+ webAnalyticsOverviewRetrieve
+}
diff --git a/src/lib/agents/ai.ts b/src/lib/agents/ai.ts
new file mode 100644
index 0000000..7b95dd7
--- /dev/null
+++ b/src/lib/agents/ai.ts
@@ -0,0 +1,22 @@
+'use server'
+
+import { env } from '../env'
+import { publish } from '../events/server'
+import { executeDemoAgent } from './demo'
+
+export async function sendMessage({ userId, message }: { userId: string; message: string }) {
+ await executeDemoAgent({
+ messages: [{ content: message, role: 'user' }],
+ onEvent: async events => {
+ switch (events.type) {
+ case 'assistant_message':
+ await publish({
+ channel: userId,
+ eventType: events.type,
+ payload: events
+ })
+ }
+ },
+ openAIKey: env.OPENAI_API_KEY
+ })
+}
diff --git a/src/lib/agents/demo.ts b/src/lib/agents/demo.ts
new file mode 100644
index 0000000..9a0d630
--- /dev/null
+++ b/src/lib/agents/demo.ts
@@ -0,0 +1,12 @@
+import { createAgent } from '@rubriclab/agents'
+
+const { executeAgent, eventTypes, __ToolEvent, __ResponseEvent } = createAgent({
+ model: 'gpt-5-mini',
+ systemPrompt: 'You are a demo agent',
+ tools: {}
+})
+
+export { executeAgent as executeDemoAgent, eventTypes as demoAgentEventTypes }
+
+export type DemoAgentToolEvent = typeof __ToolEvent
+export type DemoAgentResponseEvent = typeof __ResponseEvent
diff --git a/src/lib/blocks/button.tsx b/src/lib/blocks/button.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/blocks/chart.tsx b/src/lib/blocks/chart.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/blocks/form.tsx b/src/lib/blocks/form.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/blocks/image.tsx b/src/lib/blocks/image.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/blocks/stats.tsx b/src/lib/blocks/stats.tsx
new file mode 100644
index 0000000..999b148
--- /dev/null
+++ b/src/lib/blocks/stats.tsx
@@ -0,0 +1,17 @@
+import { createBlock } from '@rubriclab/blocks'
+import { z } from 'zod/v4'
+import { Stats } from '~/ui/demo/blocks/stats'
+
+export const stats = createBlock({
+ description: 'Stats block',
+ render: ({ statistic, subtitle, title }) => {
+ return
+ },
+ schema: {
+ input: z.object({
+ statistic: z.number(),
+ subtitle: z.string(),
+ title: z.string()
+ })
+ }
+})
diff --git a/src/lib/blocks/table.tsx b/src/lib/blocks/table.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/blocks/video.tsx b/src/lib/blocks/video.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/env.ts b/src/lib/env.ts
index 397c9b5..b185052 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -10,14 +10,18 @@ export const env = createEnv({
NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
NODE_ENV: process.env.NODE_ENV,
+ OPENAI_API_KEY: process.env.OPENAI_API_KEY,
ROS_API_URL: process.env.ROS_API_URL,
ROS_SECRET: process.env.ROS_SECRET,
+ UPSTASH_REDIS_URL: process.env.UPSTASH_REDIS_URL,
VERCEL_URL: process.env.VERCEL_URL
},
server: {
NODE_ENV: z.string().min(1),
+ OPENAI_API_KEY: z.string().min(1),
ROS_API_URL: z.string().min(1),
ROS_SECRET: z.string().min(1),
+ UPSTASH_REDIS_URL: z.string().min(1),
VERCEL_URL: z.string().min(1)
}
})
diff --git a/src/lib/events/client.ts b/src/lib/events/client.ts
new file mode 100644
index 0000000..7575eff
--- /dev/null
+++ b/src/lib/events/client.ts
@@ -0,0 +1,7 @@
+import { createEventsClient } from '@rubriclab/events/client'
+import { eventTypes } from './types'
+
+export const { useEvents } = createEventsClient({
+ eventTypes,
+ url: '/api/events'
+})
diff --git a/src/lib/events/server.ts b/src/lib/events/server.ts
new file mode 100644
index 0000000..88a8dd0
--- /dev/null
+++ b/src/lib/events/server.ts
@@ -0,0 +1,8 @@
+import { createEventsServer } from '@rubriclab/events/server'
+import { env } from '~/lib/env'
+import { eventTypes } from './types'
+
+export const { publish, GET, maxDuration } = createEventsServer({
+ eventTypes,
+ redisURL: env.UPSTASH_REDIS_URL
+})
diff --git a/src/lib/events/types.ts b/src/lib/events/types.ts
new file mode 100644
index 0000000..0b81056
--- /dev/null
+++ b/src/lib/events/types.ts
@@ -0,0 +1,6 @@
+import { createEventTypes } from '@rubriclab/events'
+import { demoAgentEventTypes } from '~/lib/agents/demo'
+
+export const eventTypes = createEventTypes({
+ ...demoAgentEventTypes
+})
diff --git a/src/ui/button.tsx b/src/ui/button.tsx
index 0b64b72..7a71a13 100644
--- a/src/ui/button.tsx
+++ b/src/ui/button.tsx
@@ -1,6 +1,7 @@
import { cn } from '~/lib/utils/cn'
const variants = {
+ brand: 'bg-black dark:bg-white text-white dark:text-black rounded-full hover:',
default: 'bg-subtle dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20 rounded-full',
ghost: 'dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20 rounded-full',
icon:
diff --git a/src/ui/cta.tsx b/src/ui/cta.tsx
index 9714888..902f14d 100644
--- a/src/ui/cta.tsx
+++ b/src/ui/cta.tsx
@@ -6,7 +6,7 @@ import { Button } from './button'
import { Arrow } from './icons/arrow'
export const CTA = () => {
- const hook = "We don't have a sales team. Let's talk."
+ const hook = 'Production AI builds in 90 days.'
const posthog = usePostHog()
return (
@@ -24,7 +24,9 @@ export const CTA = () => {
})
}
>
-
Get in touch
+
+ Get in touch
+
{
+ if (!data || data.length === 0) return -1
+ let idx = 0
+ let max = data[0]?.value ?? 0
+ for (let i = 1; i < data.length; i++) {
+ const v = data[i]?.value ?? 0
+ if (v > max) {
+ max = v
+ idx = i
+ }
+ }
+ return idx
+ }, [data])
+ const peak = maxIndex >= 0 ? data[maxIndex] : undefined
+
+ return (
+
+
+
Visitors
+ {peak ? (
+
+ Peak {nf.format(peak.value)} at {peak.name}
+
+ ) : null}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/ui/demo/blocks/stats.tsx b/src/ui/demo/blocks/stats.tsx
new file mode 100644
index 0000000..7d480f5
--- /dev/null
+++ b/src/ui/demo/blocks/stats.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+
+export type StatsData = { active: number; total: number }
+
+export function Stats({ data }: { data: StatsData }) {
+ const nf = useMemo(() => new Intl.NumberFormat(), [])
+
+ // delta % vs a naive baseline (total - active), clamp to [-100, 100]
+ const baseline = Math.max(1, data.total - data.active)
+ const deltaPct = Math.max(
+ -100,
+ Math.min(100, Math.round(((data.total - baseline) / baseline) * 100))
+ )
+ const deltaSign = deltaPct >= 0 ? '+' : ''
+
+ // Live counter simulation based on provided active (gentle jitter)
+ const [live, setLive] = useState
(() => Math.max(0, Math.round(data.active)))
+ useEffect(() => {
+ setLive(Math.max(0, Math.round(data.active)))
+ }, [data.active])
+ useEffect(() => {
+ const id = window.setInterval(() => {
+ setLive(prev => {
+ const jitter = Math.floor(Math.random() * 3) - 1 // -1..+1
+ const next = Math.max(0, prev + jitter)
+ return next
+ })
+ }, 2400)
+ return () => window.clearInterval(id)
+ }, [])
+
+ return (
+
+ {/* 24h total */}
+
+
+
Page views
+
+
+ {deltaSign}
+ {deltaPct}%
+
+
+
+
+
+ {nf.format(data.total)}
+
+
today
+
+
+
+ {/* Live now */}
+
+
+
Live page views
+
+
+
+
+
{nf.format(live)}
+
right now
+
+
+
+
+ )
+}
diff --git a/src/ui/demo/message.tsx b/src/ui/demo/message.tsx
new file mode 100644
index 0000000..af19c66
--- /dev/null
+++ b/src/ui/demo/message.tsx
@@ -0,0 +1,191 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Chart, type ChartData } from './blocks/chart'
+import { Stats, type StatsData } from './blocks/stats'
+
+const CHAR_DELAY = 0.02
+const TAG_POP_DURATION = 0.25
+
+function Text({ content, delayStart = 0 }: { content: string; delayStart?: number }) {
+ let globalCharIndex = 0
+ return (
+
+ {content.split(/(\s+)/).map((token, tokenIndex) => {
+ const isWhitespace = token.trim() === ''
+ if (isWhitespace) {
+ // Preserve whitespace and allow wrapping at spaces
+ globalCharIndex += token.length
+ return (
+
+ {token}
+
+ )
+ }
+
+ const word = token
+ const wordStartIndex = globalCharIndex
+ globalCharIndex += word.length
+ return (
+
+ {word.split('').map((character, index) => (
+
+ {character}
+
+ ))}
+
+ )
+ })}
+
+ )
+}
+
+function Tag({ content, delayStart = 0 }: { content: string; delayStart?: number }) {
+ return (
+
+ @{content}
+
+ )
+}
+
+type MessagePart = { type: 'text'; content: string } | { type: 'tag'; content: string }
+
+type Message =
+ | { type: 'user'; parts: MessagePart[] }
+ | { type: 'assistant'; parts: MessagePart[] }
+ | { type: 'reasoning'; text: string }
+ | { type: 'chart'; data: ChartData }
+ | { type: 'stats'; data: StatsData }
+
+function MessagePart({ part, delayStart = 0 }: { part: MessagePart; delayStart?: number }) {
+ switch (part.type) {
+ case 'text':
+ return
+ {parts.map((part, index) => {
+ const startDelayForPart = accumulatedDelay
+ if (animated) {
+ if (part.type === 'text') accumulatedDelay += part.content.length * CHAR_DELAY
+ else accumulatedDelay += TAG_POP_DURATION / 2
+ }
+ return
+ )
+}
+
+function UserMessage({ parts }: { parts: MessagePart[] }) {
+ return (
+
+ )
+}
+
+function AssistantMessage({ parts }: { parts: MessagePart[] }) {
+ return (
+
+ )
+}
+
+function ReasoningMessage({ text }: { text: string }) {
+ return (
+
+ )
+}
+
+function Block({
+ block: { type, data }
+}: {
+ block: { type: 'chart'; data: ChartData } | { type: 'stats'; data: StatsData }
+}) {
+ switch (type) {
+ case 'chart':
+ return
+
+ )
+}
+
+export function Message(message: Message) {
+ switch (message.type) {
+ case 'user':
+ return (() => Array(SCRIPT.length).fill(false))
+
+ useEffect(() => {
+ const timeouts: number[] = []
+ setVisible(Array(SCRIPT.length).fill(false))
+ for (let index = 0; index < SCRIPT.length; index++) {
+ const entry = SCRIPT[index]
+ if (!entry) continue
+ const { at, hideAfter } = entry
+ const showId = window.setTimeout(() => {
+ setVisible(prev => {
+ const next = [...prev]
+ next[index] = true
+ return next
+ })
+ }, at)
+ timeouts.push(showId)
+ if (typeof hideAfter === 'number') {
+ const hideId = window.setTimeout(() => {
+ setVisible(prev => {
+ const next = [...prev]
+ next[index] = false
+ return next
+ })
+ }, at + hideAfter)
+ timeouts.push(hideId)
+ }
+ }
+ return () => {
+ for (const id of timeouts) window.clearTimeout(id)
+ }
+ }, [])
+
+ return (
+
+ {SCRIPT.map((item, index) =>
+ visible[index] ? (
+
+ {item.node}
+
+ ) : null
+ )}
+
0 ? 'bg-background' : ''
)}
@@ -39,6 +42,17 @@ export function Nav() {
>
Rubric Labs
+
+ {links.map(link => (
+
- {links.map(link => (
-
+
router.push('/contact')}
+ onClick={() =>
+ posthog.capture('contact_us.clicked', {
+ body: 'Get in touch',
+ hook: 'Book a Meeting',
+ href: '/contact'
+ })
+ }
+ variant="brand"
+ className="w-full sm:w-fit"
>
- {link.label}
-
- ))}
+ Book a Meeting
+
)
diff --git a/src/ui/testimonials.tsx b/src/ui/testimonials.tsx
index a23aa4a..4d21fbe 100644
--- a/src/ui/testimonials.tsx
+++ b/src/ui/testimonials.tsx
@@ -2,57 +2,59 @@ import Link from 'next/link'
export const Testimonials = () => {
return (
-
-
-
-
- "Rubric was an absolute pleasure to work with. They were available to meet on short notice and
- displayed an immense desire to meet our near-impossible deadlines. Their knowledge of
- {' '}
- complex AI solutions
-
- {' '}
- is impressive. I will definitely be working with the Rubric team again soon."
-
+
+
+
+ Rubric was an absolute pleasure to work with. They were available to meet on short notice and
+ displayed an immense desire to meet our near-impossible deadlines. Their knowledge of{' '}
+ complex AI solutions is
+ impressive. I will definitely be working with the Rubric team again soon.
-
Daniel Bevan
-
- CTO of
-
-
-
-
- "In just a few weeks, Rubric went from initial concepts to delivering an engaging AI video
- experience that reached{' '}
+
+ Daniel Bevan
+
+ CTO of{' '}
+
- thousands of users
-
- . They're fluent in novel technologies, creative, highly responsive, and went the extra
- mile to follow through and iterate with us even after initial handoff."
-
-
- Merrill Lutsky
-
- Co-Founder of
+
-
-
-
- "Working with Rubric has been like having a CTO in our back pocket. They pair the best in
- strategy with a killer product team to consistently deliver{' '}
-
- on time, every time
-
- . From our first conversation when they took time to understand our business needs, I knew
- trusting them with our MVP build and every iteration since was the right choice."
+
+
+ In just a few weeks, Rubric went from initial concepts to delivering an engaging AI video
+ experience that reached{' '}
+ thousands of users .
+ They're fluent in novel technologies, creative, highly responsive, and went the extra mile
+ to follow through and iterate with us even after initial handoff.
+
+
+ Merrill Lutsky
+
+ Co-Founder of{' '}
+
+
+
+
+ Working with Rubric has been like having a CTO in our back pocket. They pair the best in
+ strategy with a killer product team to consistently deliver{' '}
+ on time, every time . From
+ our first conversation when they took time to understand our business needs, I knew trusting
+ them with our MVP build and every iteration since was the right choice.
-
Mitchell White
-
- Founder of
+
+ Mitchell White
+
+ Founder of{' '}
+
+
)
diff --git a/src/ui/trusted-by.tsx b/src/ui/trusted-by.tsx
index 1694493..8d7253e 100644
--- a/src/ui/trusted-by.tsx
+++ b/src/ui/trusted-by.tsx
@@ -1,40 +1,57 @@
'use client'
import Link from 'next/link'
-import { usePostHog } from 'posthog-js/react'
import { Albertsons } from './logos/albertsons'
+import { Cal } from './logos/cal'
import { Graphite } from './logos/graphite'
import { Gumloop } from './logos/gumloop'
export const TrustedBy = () => {
- const posthog = usePostHog()
+ const items = [
+ { href: '/work#Gumloop', Logo: Gumloop, widthClass: 'w-36' },
+ { href: '/work#Graphite', Logo: Graphite, widthClass: 'w-40' },
+ { href: '/work#Albertsons', Logo: Albertsons, widthClass: 'w-48' },
+ { href: '/work#Cal', Logo: Cal, widthClass: 'w-32' }
+ ]
+
return (
-
-
Trusted by
-
-
-
-
-
-
+
+
Trusted by world-class companies
+
+ {items.map(({ href, Logo, widthClass }, idx) => (
+
-
-
-
+ ))}
+ {items.map(({ href, Logo, widthClass }, idx) => (
+
+
-
+ ))}
-
posthog.capture('projects.clicked', { body: 'View all', href: '/work' })}
- >
- View all
-
+
)
}
diff --git a/src/ui/video/video.tsx b/src/ui/video/video.tsx
index 2ef34a0..c9695ca 100644
--- a/src/ui/video/video.tsx
+++ b/src/ui/video/video.tsx
@@ -2,6 +2,7 @@
import Hls from 'hls.js'
import Image from 'next/image'
+import { usePostHog } from 'posthog-js/react'
import type React from 'react'
import { useEffect, useRef } from 'react'
import { useInView } from 'react-intersection-observer'
@@ -48,6 +49,7 @@ export function Video({ hlsUrl, mp4Url, className = '', posterUrl, transcription
setIsFloating
} = useVideoPlayer(videoRef as React.RefObject
)
+ const posthog = usePostHog()
// Setup video player
useEffect(() => {
const video = videoRef.current
@@ -222,7 +224,10 @@ export function Video({ hlsUrl, mp4Url, className = '', posterUrl, transcription
{showPlayButton && (
{
+ playWithSound()
+ posthog.capture('play_video.clicked')
+ }}
onKeyDown={e => e.key === 'Enter' && playWithSound()}
tabIndex={0}
role="button"
@@ -232,11 +237,11 @@ export function Video({ hlsUrl, mp4Url, className = '', posterUrl, transcription
{/* Play with sound button */}
{showPlayButton && (
-