Demo working

Author: D-K-P

cursor-cli-demo/.gitignore

@@ -0,0 +1,53 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Build
+.next/
+out/
+build/
+dist/
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+.DS_Store
+
+# Testing
+coverage/
+
+# Supabase
+supabase/.branches
+supabase/.temp
+
+# Trigger.dev
+.trigger/
+
+# Project specific
+ship/
+.claude
+progress.txt
+prd.json
+SPEC.md

cursor-cli-demo/README.md

@@ -0,0 +1,98 @@
+# Cursor Agent Runner
+
+Run Cursor's CLI agent on [Trigger.dev](https://trigger.dev), streamed live to a terminal UI.
+
+Type a prompt, pick a model, and watch the agent create files and write code from scratch in real time.
+
+## How it works
+
+1. User types a prompt in the browser (e.g. "Create a TypeScript CLI that converts CSV to JSON")
+2. Next.js API route triggers a Trigger.dev task
+3. The task spawns `cursor-agent` in an empty workspace
+4. NDJSON output from stdout is parsed and piped to a Realtime Stream
+5. `useRealtimeRunWithStreams` renders each event live in a terminal panel
+
+```
+[Browser] <-- Realtime Streams v2 --> [Trigger.dev Cloud]
+    |                                        |
+    | POST /api/trigger                      | task.trigger()
+    |                                        |
+    +--- Next.js API route ------------------+
+                                             |
+                                    cursor-agent child process
+                                    stdout -> NDJSON -> stream
+```
+
+## Key concepts demonstrated
+
+- **Build extensions** — install any system binary (cursor-agent) into the task container via `addLayer`
+- **Realtime Streams v2** — pipe NDJSON from a child process directly to the browser
+- **Long-running tasks** — cursor-agent runs for minutes; Trigger.dev handles lifecycle, timeouts, retries
+- **Machine selection** — `medium-2x` for resource-intensive CLI tools
+
+## Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Copy env template and fill in values
+cp env.local.example .env.local
+```
+
+Required environment variables:
+
+| Variable | Description |
+|----------|-------------|
+| `TRIGGER_SECRET_KEY` | Your Trigger.dev secret key (starts with `tr_dev_` or `tr_`) |
+| `TRIGGER_PROJECT_REF` | Your Trigger.dev project ref (starts with `proj_`) |
+| `CURSOR_API_KEY` | Your Cursor API key for headless CLI access |
+
+## Run locally
+
+```bash
+# Start Next.js dev server
+pnpm dev
+
+# In another terminal, start Trigger.dev dev
+npx trigger.dev dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+## Deploy to Trigger.dev Cloud
+
+```bash
+npx trigger.dev deploy
+```
+
+The build extension in `trigger.config.ts` installs `cursor-agent` into the container image automatically.
+
+## Project structure
+
+```
+├── app/
+│   ├── layout.tsx              # Root layout with Geist fonts
+│   ├── page.tsx                # Main UI: control bar + terminal
+│   └── api/trigger/route.ts    # Trigger task, return run ID
+├── components/
+│   ├── terminal.tsx            # Realtime terminal with auto-scroll
+│   ├── cursor-event.tsx        # Render each NDJSON event type
+│   └── control-bar.tsx         # Prompt input, model select, run button
+├── trigger/
+│   └── cursor-agent.ts         # The task: spawn CLI, stream NDJSON
+├── lib/
+│   └── cursor-events.ts        # TypeScript types for cursor events
+├── trigger.config.ts           # Build extension for cursor CLI binary
+└── env.local.example           # Env var template
+```
+
+## Links
+
+- [Trigger.dev Build Extensions docs](https://trigger.dev/docs/config/extensions/custom)
+- [Trigger.dev Realtime Streams docs](https://trigger.dev/docs/realtime)
+- [Cursor CLI Output Format](https://cursor.com/docs/cli/reference/output-format)
+
+## Stack
+
+Next.js 16 · Trigger.dev v4 · Tailwind CSS · Geist Mono

cursor-cli-demo/app/api/trigger/route.ts

@@ -0,0 +1,19 @@
+import { tasks } from "@trigger.dev/sdk";
+import type { cursorAgentTask } from "@/trigger/cursor-agent";
+
+export async function POST(req: Request) {
+  const body = await req.json();
+  const prompt = typeof body.prompt === "string" ? body.prompt.trim() : "";
+  const model = typeof body.model === "string" ? body.model : undefined;
+
+  if (!prompt) {
+    return Response.json({ error: "prompt is required" }, { status: 400 });
+  }
+
+  const handle = await tasks.trigger<typeof cursorAgentTask>("cursor-agent", { prompt, model });
+
+  return Response.json({
+    runId: handle.id,
+    publicAccessToken: handle.publicAccessToken,
+  });
+}

cursor-cli-demo/app/globals.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --terminal-bg: #1a1a1a;
+  --terminal-border: #2a2a2a;
+  --muted: #666;
+  --green: #4ade80;
+  --red: #f87171;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), system-ui, sans-serif;
+}

cursor-cli-demo/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Cursor Agent Runner",
+  description: "Run Cursor's CLI agent on Trigger.dev, streamed live",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        {children}
+      </body>
+    </html>
+  );
+}

cursor-cli-demo/app/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ControlBar, useRunState } from "@/components/control-bar";
+import { Terminal } from "@/components/terminal";
+
+export default function Home() {
+  const { runState, startRun, reset, markComplete } = useRunState();
+
+  const showTerminal = runState.status === "running" || runState.status === "complete";
+
+  return (
+    <main className="min-h-screen p-6 md:p-10 max-w-4xl mx-auto flex flex-col gap-6">
+      <div>
+        <h1 className="text-xl font-bold font-[family-name:var(--font-geist-mono)]">
+          Cursor Agent Runner
+        </h1>
+        <p className="text-xs text-white/30 mt-1">
+          Powered by Trigger.dev — watch an AI agent generate code in real time
+        </p>
+      </div>
+
+      <ControlBar runState={runState} onRun={startRun} onReset={reset} />
+
+      {showTerminal && (
+        <Terminal
+          runId={runState.runId}
+          publicAccessToken={runState.publicAccessToken}
+          onComplete={markComplete}
+        />
+      )}
+
+      {runState.status === "failed" && (
+        <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-sm text-red-400 font-mono">
+          {runState.error}
+        </div>
+      )}
+    </main>
+  );
+}