Host Event Creation Wizard
Relevant source files
The following files were used as context for generating this wiki page:
- src/components/host/host-event-shell.tsx
- src/components/host/host-event-form.tsx
- src/components/host/host-event-copilot-bridge.tsx
- src/lib/types/event-draft.ts
- src/mastra/agents/host-event-prompt.ts
- src/components/host/host-event-workflow-strip.tsx
- supabase/functions/approval-commit/build-event-insert.ts
- src/components/host/event-publish-approval-panel.tsx
The Host Event Creation Wizard is an "AI-first, chat-first" interface designed for event organizers (referred to as "Roberto" in system prompts) to create and publish ticketed events in Medellín. It combines a natural language chat interface, powered by CopilotKit and Mastra agents, with a traditional form-based UI to facilitate seamless event drafting and publishing.
The wizard utilizes a Human-In-The-Loop (HITL) workflow where an AI agent extracts event details from a conversation, populates a draft state, and presents a final preview for approval before committing the data to Supabase.
Sources: README.md:3-5, src/components/host/host-event-shell.tsx:18-21, src/mastra/agents/host-event-prompt.ts:1-5
System Architecture
The wizard architecture is built on a bridge between the AI agent runtime and the React frontend. It uses CopilotKit to manage the chat interface and Mastra for agent logic.
Component Hierarchy
- HostEventShell: The top-level container that orchestrates the layout, including the navigation, workflow progress strip, and the chat region.
- HostEventCopilotBridge: A provider that synchronizes state between the React application and the
hostEventAgent. It defines the "tools" the AI can call to manipulate the draft. - HostEventForm: A manual input interface that remains in sync with the AI-driven draft state.
- HostEventWorkflowStrip: A visual indicator showing the current progress through the creation steps.
Sources: src/components/host/host-event-shell.tsx:23-74, src/components/host/host-event-copilot-bridge.tsx:24-43
Data Flow Diagram
The following diagram illustrates how user input through chat triggers tool calls that update the shared draft state.
The shared state allows for bi-directional updates: the AI can fill the form, and the user can manually override values.
Sources: src/components/host/host-event-copilot-bridge.tsx:32-44, src/components/host/host-event-form.tsx:14-20
Event Draft Lifecycle
The creation process is governed by the EventDraftState, which tracks the transition from a blank draft to a published event.
Wizard Steps
The wizard progress is divided into four logical steps, determined by the presence of specific data fields in the draft:
| Step | Required Fields | Description |
|---|---|---|
| Basics | title | Initial event identification. |
| Venue | venue, capacity | Location name and attendance limits. |
| Tickets | priceMinCop or ticketTiers | Pricing and ticket structure. |
| Preview | All of the above | Final review before publishing. |
Sources: src/lib/types/event-draft.ts:46-62, src/components/host/host-event-workflow-strip.tsx:7-12
State Transitions
The draft status moves through an enum-controlled lifecycle: draft -> pending_approval -> approved -> published.
AI Agent Integration
The hostEventAgent serves as the primary driver for the wizard. It uses specific instructions to extract structured data from Roberto's (the user's) natural language descriptions.
AI Toolset
The agent interacts with the frontend via the following tools defined in the HostEventCopilotBridge:
| Tool Name | Parameters | Purpose |
|---|---|---|
set_event_basics | title, neighborhood, dateIso | Sets core identity and time. |
set_venue | venue, capacity | Sets location and size limits. |
set_pricing | priceMinCop, description, ticketTiers | Sets financial and ticket details. |
preview_and_publish | draft (Snapshot) | Triggers the HITL approval panel. |
Sources: src/components/host/host-event-copilot-bridge.tsx:56-114, src/mastra/agents/host-event-prompt.ts:5-10
Instruction Logic
The agent is instructed to ask only one clarifying question at a time and never to invent venue addresses. It must wait for explicit approval through the preview_and_publish tool before attempting to finalize the event.
Sources: src/mastra/agents/host-event-prompt.ts:12-18
Publishing and Persistence
Once the user approves the draft in the EventPublishApprovalPanel, the system executes a commit to the Supabase database.
Database Insertion
The buildEventInsert function transforms the draft state into a payload for the public.events table. A critical requirement is setting both created_by and organizer_id to the current user's ID to ensure the event remains visible to the host via Row-Level Security (RLS) policies.
// Example of field mapping for Supabase
{
source: "host_wizard",
name: draft.title,
event_start_time: draft.dateIso,
status: "published",
organizer_id: userId,
details: {
neighborhood: draft.neighborhood,
capacity: draft.capacity,
ticket_tiers: draft.ticketTiers,
}
}
Sources: supabase/functions/approval-commit/build-event-insert.ts:25-50, src/tests/build-event-insert.test.ts:13-35
Implementation Details
- Location: Events created via this wizard are defaulted to "Medellín, CO".
- Currency: Pricing is handled in COP (Colombian Pesos).
- Validation: The
isDraftReadyForPublishutility ensures all mandatory fields (Title, Neighborhood, Date, Venue, Capacity, and Pricing) are present before allowing the commit.
Sources: src/lib/types/event-draft.ts:64-73, supabase/functions/approval-commit/build-event-insert.ts:35-36
Conclusion
The Host Event Creation Wizard represents the project's shift toward an AI-mediated Discovery and Ticketing platform. By leveraging a shared draft state between a Mastra agent and a Next.js frontend, it provides a guided experience that reduces the friction of manual form entry while maintaining strict data integrity through HITL approval panels and robust Zod-validated schemas.