Add v0 prompt for frontend generation
This commit is contained in:
Donna
parent
f9b873d331
commit
ab52debf8b
1 changed files with 322 additions and 0 deletions
322
v0-prompt.md
Normal file
322
v0-prompt.md
Normal file
|
|
@ -0,0 +1,322 @@
|
||||||
|
# BloxServer Frontend — v0 Prompt
|
||||||
|
|
||||||
|
Build a Next.js 14+ frontend for BloxServer, a visual AI agent workflow builder. The UI paradigm is like **Excel meets n8n** — toolbar at top, tabs at bottom, flow canvas in the middle.
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- **Framework:** Next.js 14 (App Router)
|
||||||
|
- **Components:** shadcn/ui + Tailwind CSS
|
||||||
|
- **Flow Canvas:** React Flow (@xyflow/react)
|
||||||
|
- **Code Editor:** Monaco Editor (for YAML and WASM/AssemblyScript)
|
||||||
|
- **State:** Zustand
|
||||||
|
- **Auth:** Clerk
|
||||||
|
- **API:** REST (see types below)
|
||||||
|
|
||||||
|
## Pages
|
||||||
|
|
||||||
|
| Route | Purpose |
|
||||||
|
|-------|---------|
|
||||||
|
| `/` | Landing page (marketing) |
|
||||||
|
| `/dashboard` | Flow list, usage stats, quick actions |
|
||||||
|
| `/flow/[id]` | Main flow editor (canvas + YAML tabs) |
|
||||||
|
| `/flow/[id]/runs` | Execution history for a flow |
|
||||||
|
| `/marketplace` | Browse/install tools and flow templates |
|
||||||
|
| `/settings` | Account, billing, API keys |
|
||||||
|
|
||||||
|
## Flow Editor Layout
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────────┐
|
||||||
|
│ TOOLBAR: [Save] [Run ▶] [Stop ■] [Canvas|YAML|Split] │
|
||||||
|
├─────────────────────────────────────────────────────────────────┤
|
||||||
|
│ ┌─────────┐ │
|
||||||
|
│ │ PALETTE │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||||
|
│ │ │ │ Webhook │ ───▶ │ LLM │ ───▶ │ Output │ │
|
||||||
|
│ │[Triggers] │ Trigger │ │ Agent │ │ │ │
|
||||||
|
│ │[LLM] │ └─────────┘ └─────────┘ └─────────┘ │
|
||||||
|
│ │[HTTP] │ │
|
||||||
|
│ │[Code] │ Drag nodes from palette onto canvas. │
|
||||||
|
│ │[Branch] │ Connect outputs to inputs. │
|
||||||
|
│ │[Output] │ Canvas auto-saves. │
|
||||||
|
│ │ │ │
|
||||||
|
│ │[Market] │ YAML tab shows generated config. │
|
||||||
|
│ │ ↳ search│ Edits in YAML reflect back on canvas. │
|
||||||
|
│ └─────────┘ │
|
||||||
|
├─────────────────────────────────────────────────────────────────┤
|
||||||
|
│ STATUS BAR: Nodes: 3 │ Status: Saved │ Last run: 2m ago │
|
||||||
|
└─────────────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## Node Types
|
||||||
|
|
||||||
|
| Type | Icon | Purpose |
|
||||||
|
|------|------|---------|
|
||||||
|
| `trigger` | 🎯 | Entry point (webhook, schedule, manual) |
|
||||||
|
| `llmCall` | 🤖 | LLM agent (Claude, GPT, Grok) |
|
||||||
|
| `httpRequest` | 🌐 | External API call |
|
||||||
|
| `codeBlock` | 📝 | Custom WASM code (Pro) |
|
||||||
|
| `conditional` | 🔀 | Branch based on condition |
|
||||||
|
| `output` | 📤 | Terminal node / response |
|
||||||
|
|
||||||
|
## Dashboard Features
|
||||||
|
- List of user's flows (cards or table)
|
||||||
|
- Flow status indicator (stopped/running/error)
|
||||||
|
- Quick actions: New Flow, Import, Run
|
||||||
|
- Usage stats (executions this month, limit)
|
||||||
|
|
||||||
|
## Key UX Patterns
|
||||||
|
1. **Bidirectional sync:** Canvas changes update YAML, YAML changes update canvas
|
||||||
|
2. **Auto-save:** Changes saved automatically (debounced)
|
||||||
|
3. **Run/Stop:** Single click to deploy/undeploy a flow
|
||||||
|
4. **Execution history:** Click a run to see logs, input/output payloads
|
||||||
|
5. **Node inspector:** Click a node to edit its config in a side panel
|
||||||
|
|
||||||
|
## API Base URL
|
||||||
|
`https://api.openblox.ai/v1` (placeholder — backend on Render)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## TypeScript API Types
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Common
|
||||||
|
export type UUID = string;
|
||||||
|
export type ISODateTime = string;
|
||||||
|
|
||||||
|
// User (synced from Clerk)
|
||||||
|
export interface User {
|
||||||
|
id: UUID;
|
||||||
|
clerkId: string;
|
||||||
|
email: string;
|
||||||
|
name: string | null;
|
||||||
|
avatarUrl: string | null;
|
||||||
|
tier: 'free' | 'paid' | 'pro' | 'enterprise';
|
||||||
|
createdAt: ISODateTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flow
|
||||||
|
export type FlowStatus = 'stopped' | 'starting' | 'running' | 'stopping' | 'error';
|
||||||
|
|
||||||
|
export interface Flow {
|
||||||
|
id: UUID;
|
||||||
|
userId: UUID;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
organismYaml: string;
|
||||||
|
canvasState: CanvasState | null;
|
||||||
|
status: FlowStatus;
|
||||||
|
containerId: string | null;
|
||||||
|
errorMessage: string | null;
|
||||||
|
createdAt: ISODateTime;
|
||||||
|
updatedAt: ISODateTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FlowSummary {
|
||||||
|
id: UUID;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
status: FlowStatus;
|
||||||
|
updatedAt: ISODateTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateFlowRequest {
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
organismYaml?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateFlowRequest {
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
organismYaml?: string;
|
||||||
|
canvasState?: CanvasState;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Canvas State (React Flow)
|
||||||
|
export interface CanvasState {
|
||||||
|
nodes: CanvasNode[];
|
||||||
|
edges: CanvasEdge[];
|
||||||
|
viewport: { x: number; y: number; zoom: number };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CanvasNode {
|
||||||
|
id: string;
|
||||||
|
type: NodeType;
|
||||||
|
position: { x: number; y: number };
|
||||||
|
data: NodeData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type NodeType =
|
||||||
|
| 'trigger'
|
||||||
|
| 'llmCall'
|
||||||
|
| 'httpRequest'
|
||||||
|
| 'codeBlock'
|
||||||
|
| 'conditional'
|
||||||
|
| 'output'
|
||||||
|
| 'custom';
|
||||||
|
|
||||||
|
export interface NodeData {
|
||||||
|
name: string;
|
||||||
|
label: string;
|
||||||
|
description?: string;
|
||||||
|
handler?: string;
|
||||||
|
payloadClass?: string;
|
||||||
|
isAgent?: boolean;
|
||||||
|
config?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CanvasEdge {
|
||||||
|
id: string;
|
||||||
|
source: string;
|
||||||
|
target: string;
|
||||||
|
sourceHandle?: string;
|
||||||
|
targetHandle?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Triggers
|
||||||
|
export type TriggerType = 'webhook' | 'schedule' | 'manual';
|
||||||
|
|
||||||
|
export interface Trigger {
|
||||||
|
id: UUID;
|
||||||
|
flowId: UUID;
|
||||||
|
type: TriggerType;
|
||||||
|
name: string;
|
||||||
|
config: TriggerConfig;
|
||||||
|
webhookToken?: string;
|
||||||
|
webhookUrl?: string;
|
||||||
|
createdAt: ISODateTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TriggerConfig =
|
||||||
|
| { type: 'webhook' }
|
||||||
|
| { type: 'schedule'; cron: string; timezone?: string }
|
||||||
|
| { type: 'manual' };
|
||||||
|
|
||||||
|
export interface CreateTriggerRequest {
|
||||||
|
type: TriggerType;
|
||||||
|
name: string;
|
||||||
|
config: TriggerConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Executions (Run History)
|
||||||
|
export type ExecutionStatus = 'running' | 'success' | 'error' | 'timeout';
|
||||||
|
|
||||||
|
export interface Execution {
|
||||||
|
id: UUID;
|
||||||
|
flowId: UUID;
|
||||||
|
triggerId: UUID | null;
|
||||||
|
triggerType: TriggerType;
|
||||||
|
status: ExecutionStatus;
|
||||||
|
startedAt: ISODateTime;
|
||||||
|
completedAt: ISODateTime | null;
|
||||||
|
durationMs: number | null;
|
||||||
|
errorMessage: string | null;
|
||||||
|
inputPayload: string | null;
|
||||||
|
outputPayload: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ExecutionSummary {
|
||||||
|
id: UUID;
|
||||||
|
status: ExecutionStatus;
|
||||||
|
triggerType: TriggerType;
|
||||||
|
startedAt: ISODateTime;
|
||||||
|
durationMs: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Marketplace
|
||||||
|
export type MarketplaceListingType = 'tool' | 'flow';
|
||||||
|
|
||||||
|
export interface MarketplaceListingSummary {
|
||||||
|
id: UUID;
|
||||||
|
authorName: string;
|
||||||
|
type: MarketplaceListingType;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
category: string;
|
||||||
|
downloads: number;
|
||||||
|
rating: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API Responses
|
||||||
|
export interface PaginatedResponse<T> {
|
||||||
|
items: T[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
hasMore: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiError {
|
||||||
|
code: string;
|
||||||
|
message: string;
|
||||||
|
details?: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stats
|
||||||
|
export interface FlowStats {
|
||||||
|
flowId: UUID;
|
||||||
|
executionsTotal: number;
|
||||||
|
executionsSuccess: number;
|
||||||
|
executionsError: number;
|
||||||
|
avgDurationMs: number;
|
||||||
|
lastExecutedAt: ISODateTime | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UsageStats {
|
||||||
|
userId: UUID;
|
||||||
|
period: 'day' | 'month';
|
||||||
|
flowCount: number;
|
||||||
|
executionCount: number;
|
||||||
|
executionLimit: number;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API Endpoints
|
||||||
|
|
||||||
|
### Flows
|
||||||
|
- `GET /flows` — List user's flows (returns `FlowSummary[]`)
|
||||||
|
- `POST /flows` — Create flow
|
||||||
|
- `GET /flows/:id` — Get full flow
|
||||||
|
- `PATCH /flows/:id` — Update flow
|
||||||
|
- `DELETE /flows/:id` — Delete flow
|
||||||
|
- `POST /flows/:id/start` — Start flow (deploy container)
|
||||||
|
- `POST /flows/:id/stop` — Stop flow
|
||||||
|
|
||||||
|
### Triggers
|
||||||
|
- `GET /flows/:id/triggers` — List triggers
|
||||||
|
- `POST /flows/:id/triggers` — Create trigger
|
||||||
|
- `DELETE /triggers/:id` — Delete trigger
|
||||||
|
|
||||||
|
### Executions
|
||||||
|
- `GET /flows/:id/executions` — List runs (paginated)
|
||||||
|
- `GET /executions/:id` — Get run details
|
||||||
|
- `GET /executions/:id/logs` — Stream logs (WebSocket)
|
||||||
|
|
||||||
|
### Marketplace
|
||||||
|
- `GET /marketplace` — Browse listings
|
||||||
|
- `GET /marketplace/:id` — Get listing details
|
||||||
|
- `POST /marketplace/:id/install` — Install to user's library
|
||||||
|
|
||||||
|
### User
|
||||||
|
- `GET /me` — Current user info + usage stats
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design Notes
|
||||||
|
|
||||||
|
1. **Dark mode default** — Developer audience prefers dark
|
||||||
|
2. **Keyboard shortcuts** — Cmd+S save, Cmd+Enter run, etc.
|
||||||
|
3. **Toast notifications** — For save/run/error feedback
|
||||||
|
4. **Loading states** — Skeleton loaders, not spinners
|
||||||
|
5. **Mobile:** Dashboard is responsive, flow editor is desktop-only (show message on mobile)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Start With
|
||||||
|
1. Dashboard page with flow list
|
||||||
|
2. Flow editor with React Flow canvas
|
||||||
|
3. Basic YAML tab (Monaco, read-only first)
|
||||||
|
4. Run/Stop buttons that call API
|
||||||
|
|
||||||
|
Then iterate: node inspector panel, execution history, marketplace.
|
||||||
Loading…
Reference in a new issue