Your First Conversation
This guide walks you through building your first application with Mosaic Builder, step by step. We'll create a complete task management system through natural conversation.
Before You Start
Make sure you have:
Understanding the Interface
Main Components
┌─────────────────────────────────────────────┐
│ Mosaic Builder │
├──────────────┬──────────────────────────────┤
│ │ │
│ Chat │ DSL Panel │
│ Messages │ ┌──────────────────┐ │
│ │ │ Phase: Discovering│ │
│ [Input] │ │ Readiness: 0% │ │
│ │ │ Entities: [] │ │
│ │ └──────────────────┘ │
└──────────────┴──────────────────────────────┘Step 1: Start the Conversation
Your First Message
Type this in the chat:I need a task management application for my teamWhat Happens
Watch as the AI responds and the DSL panel updates: AI Response: > I'll help you build a task management application. Let me understand your requirements... > > I can see you'll need to track tasks for your team. Let me ask a few questions to better understand your needs: > - Should tasks be organized into projects or categories? > - Do you need user accounts and authentication? > - What information should each task contain? DSL Panel Updates:Task, TeamStep 2: Add More Details
Provide Requirements
Continue the conversation:Yes, tasks should be organized into projects.
Each task needs a title, description, status (todo, in progress, done),
priority (low, medium, high), assignee, and due date.
Team members should be able to create and edit tasks.Observe the Evolution
AI Response: > Great! I'm understanding your structure better. You want: > - Projects to organize tasks > - Tasks with detailed tracking fields > - Team members who can manage tasks > > Should team members have different roles (like admin, member)? > And do you want to track task history or comments? DSL Panel Updates: - Project
- Task (fields: title, description, status, priority, dueDate)
- TeamMember
- Project → Tasks (one-to-many)
- Task → TeamMember (many-to-one: assignee)Step 3: Clarify and Refine
Add Business Logic
Yes, we need two roles: admin and member.
Admins can create projects and invite members.
Members can only work on tasks in their projects.
Add comments on tasks for collaboration.Watch Confidence Build
AI Response: > Perfect! I now have a clear picture of your task management system. Here's what I understand: > > Entities: > - User (with roles: admin, member) > - Project > - Task (with all the fields you mentioned) > - Comment > > Key Relationships: > - Projects have many Tasks > - Tasks belong to one Project > - Tasks have one assignee (User) > - Tasks have many Comments > - Users can be in many Projects > > Permissions: > - Admins: full access, create projects, invite members > - Members: create/edit tasks in their projects > > Is this correct? Should I add anything else like task attachments or notifications? DSL Panel Updates:Step 4: Confirm Structure
Validate Understanding
That's exactly right! Also add:
- Task attachments for files
- Email notifications when tasks are assigned
- Activity log to track changesFinal Refinements
AI Response: > Excellent! I've added those features. Your task management system now includes: > > ✅ Complete entity model with Users, Projects, Tasks, Comments, Attachments > ✅ Role-based permissions (Admin/Member) > ✅ File attachments on tasks > ✅ Email notifications for assignments > ✅ Activity logging for audit trail > > The structure is ready for code generation. Would you like me to explain any part of the model, or shall we proceed with generating the code? DSL Panel Updates:Step 5: Generate Code
Review Before Generation
Check the DSL Panel to see:Entities:
User:
- id: uuid
- email: string (unique)
- name: string
- role: enum [admin, member]
- createdAt: datetime
Project:
- id: uuid
- name: string
- description: text
- ownerId: uuid (ref: User)
- createdAt: datetime
Task:
- id: uuid
- title: string
- description: text
- status: enum [todo, in_progress, done]
- priority: enum [low, medium, high]
- projectId: uuid (ref: Project)
- assigneeId: uuid (ref: User)
- dueDate: datetime
- createdAt: datetime
- updatedAt: datetime
Comment:
- id: uuid
- content: text
- taskId: uuid (ref: Task)
- authorId: uuid (ref: User)
- createdAt: datetime
Attachment:
- id: uuid
- filename: string
- url: string
- taskId: uuid (ref: Task)
- uploadedBy: uuid (ref: User)
- createdAt: datetime
ActivityLog:
- id: uuid
- action: string
- entityType: string
- entityId: uuid
- userId: uuid (ref: User)
- metadata: json
- createdAt: datetime
Relationships:
- User → Projects (many-to-many via membership)
- Project → Tasks (one-to-many)
- Task → Comments (one-to-many)
- Task → Attachments (one-to-many)
- User → ActivityLogs (one-to-many)Click Generate Code
Click the "Generate Code" button. Options appear:
Select what you need and click "Generate".
Step 6: Review Generated Code
Prisma Schema Example
model User {
id String @id @default(uuid())
email String @unique
name String
role Role @default(MEMBER)
createdAt DateTime @default(now())
ownedProjects Project[] @relation("ProjectOwner")
projects ProjectMember[]
assignedTasks Task[]
comments Comment[]
attachments Attachment[]
activities ActivityLog[]
}
model Project {
id String @id @default(uuid())
name String
description String?
ownerId String
owner User @relation("ProjectOwner", fields: [ownerId], references: [id])
createdAt DateTime @default(now())
tasks Task[]
members ProjectMember[]
}
model Task {
id String @id @default(uuid())
title String
description String?
status Status @default(TODO)
priority Priority @default(MEDIUM)
projectId String
project Project @relation(fields: [projectId], references: [id])
assigneeId String?
assignee User? @relation(fields: [assigneeId], references: [id])
dueDate DateTime?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
comments Comment[]
attachments Attachment[]
}
enum Role {
ADMIN
MEMBER
}
enum Status {
TODO
IN_PROGRESS
DONE
}
enum Priority {
LOW
MEDIUM
HIGH
}API Route Example
// app/api/tasks/route.ts
export async function GET(request: Request) {
const tasks = await prisma.task.findMany({
include: {
assignee: true,
project: true,
comments: { take: 5 }
}
});
return Response.json(tasks);
}
export async function POST(request: Request) {
const data = await request.json();
const task = await prisma.task.create({
data: {
...data,
// Send notification
// Log activity
}
});
return Response.json(task);
}Step 7: Iterate and Improve
Continue the Conversation
You can keep refining:Add a dashboard that shows:
- Tasks due today
- Overdue tasks
- Team workload
- Project progressThe AI will update the DSL and you can regenerate code with the new features.