What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based conversation flow builder. The finished tool will let you:
- Design multi-turn conversations with System, User, and Assistant message roles
- Add, edit, and delete message cards with color-coded role indicators
- Drag and reorder messages to rearrange the conversation flow
- Export the full conversation as JSON, ready to paste into an API call
- Load pre-built conversation templates for common use cases
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
No coding experience needed
This project is designed for complete beginners. The AI does the heavy coding — you learn how to guide it.
Describe the Conversation Builder UI
Open your AI tool and start a new conversation. The first step is to get a working layout with the ability to add messages in different roles. Be specific about the visual structure you want:
Build me a single HTML file for a conversation flow builder. It should have:
- A header with the title "Conversation Flow Builder"
- A toolbar area with three buttons to add a message: "Add System Message", "Add User Message", "Add Assistant Message"
- When a button is clicked, a new message card appears in the main area below
- Each card should show the role name (System, User, or Assistant) with a color-coded left border — green for System, blue for User, purple for Assistant
- Each card has a textarea where the user can type the message content
- Each card has a delete button (X) to remove it
- Display message numbers (1, 2, 3...) on each card so users can see the conversation order
- Use a dark theme with clean styling
Put all HTML, CSS, and JavaScript in one file. Use Tailwind CSS via CDN.
Notice how this prompt describes the layout, the three distinct roles, the color coding, and the interactive behaviors. This gives the AI a clear picture of exactly what to build rather than leaving design decisions up to chance.
Add Role-Based Message Cards
Save the AI's output as conversation-flow-builder.html and open it in your browser. Test that the three "Add" buttons work and that message cards appear with the right colors. Then enhance the cards with more features:
Improve the message cards in the conversation flow builder:
- Add a role dropdown on each card so users can change a message's role after creating it (System, User, or Assistant). The card's border color should update when the role changes.
- Add a character count below each textarea showing "X characters"
- Add a "Duplicate" button next to the delete button that clones a message card with the same role and content
- The System message should have a subtle icon (gear) next to the role label, User should have a person icon, and Assistant should have a robot/sparkle icon
- Auto-resize the textarea as the user types so it grows with the content
Keep everything in one HTML file with the same dark theme.
This is where the conversation builder starts feeling like a real tool. The role dropdown is important because users often realize mid-design that a message should come from a different speaker. Auto-resizing textareas prevent the awkward scrolling that happens with fixed-height inputs.
Add Drag-to-Reorder
Conversations are all about order — a system message needs to come first, and user/assistant messages need to alternate correctly. Adding drag-and-drop makes it easy to rearrange the flow:
Add drag-and-drop reordering to the conversation flow builder:
- Add a drag handle (three horizontal lines icon) on the left side of each message card
- When the user clicks and drags the handle, they can move the card up or down in the list
- Show a visual indicator (a blue line or highlighted gap) where the card will be dropped
- After dropping, automatically renumber all the message cards (1, 2, 3...)
- Add a smooth animation when cards shift positions
- Do NOT use any external drag-and-drop libraries — implement it with native HTML5 drag and drop API (dragstart, dragover, drop events)
Keep everything in one file with no external dependencies besides Tailwind CSS via CDN.
Drag-and-drop can be tricky for AI to implement correctly. If the drag behavior feels buggy (cards snapping to wrong positions, flickering), tell the AI exactly what's going wrong. Native HTML5 drag-and-drop works well for simple list reordering like this.
Here are common issues and how to ask the AI to fix them:
Cards flicker or jump during drag
Tell the AI: "The cards flicker when I drag them. Use e.preventDefault() in the dragover handler and add a CSS class to reduce opacity on the dragged card."
Drop position is wrong
Tell the AI: "The card drops in the wrong position. Calculate whether the mouse is in the top or bottom half of the target card using getBoundingClientRect() and insert before or after accordingly."
Message numbers don't update after reorder
Tell the AI: "After I drop a card in a new position, the message numbers still show the old order. Call a renumber function in the drop event handler that loops through all cards and updates their displayed numbers."
Add JSON Export
The whole point of a conversation flow builder is to produce output you can actually use. The standard format for AI API calls is a JSON array of message objects. Let's add export functionality:
Add JSON export to the conversation flow builder:
- Add an "Export JSON" button in the toolbar area
- When clicked, generate a JSON array in the standard OpenAI/Claude messages format: [{"role": "system", "content": "..."}, {"role": "user", "content": "..."}, {"role": "assistant", "content": "..."}]
- Display the JSON in a modal overlay with a dark code-formatted view using monospace font and syntax highlighting (color the keys, strings, and brackets differently)
- Add a "Copy to Clipboard" button on the modal that copies the JSON and shows a brief "Copied!" confirmation
- Add a "Download as .json" button that saves the conversation as a file
- Also add an "Import JSON" button that lets users paste in a JSON array and have it populate the message cards
Keep everything in one HTML file.
The JSON format used here — an array of objects with role and content keys — is the standard format used by the OpenAI API, Claude API, and most other AI services. Being able to visually design conversations and export them in this format is genuinely useful when working with AI APIs.
Add Conversation Templates
Pre-built templates help users get started quickly and learn effective conversation patterns. Ask the AI to add a template system:
Add a template system to the conversation flow builder:
- Add a "Templates" dropdown button in the toolbar
- Include at least 4 built-in templates:
1. "Code Review" — a system message setting the AI as a code reviewer, a user message with a code block placeholder, and an assistant response template
2. "Creative Writing" — a system message for a writing assistant, a user message asking for help with a story, and an assistant response
3. "Data Analysis" — a system message for a data analyst, a user message with a CSV data description, and an assistant response
4. "Customer Support" — a system message with brand voice guidelines, a user complaint message, and an assistant response
- When a template is selected, ask "This will replace your current conversation. Continue?" before loading
- Add a "Save as Template" button that saves the current conversation to localStorage so users can create their own reusable templates
- Show saved custom templates in the dropdown alongside the built-in ones, with a delete option for custom templates
Keep everything in one file with the same dark theme.
Templates are a great finishing touch because they turn the builder from a blank canvas into a learning tool. Users can load a template, study how the system message shapes the AI's behavior, and modify it for their own use case.
What You Learned
This project teaches more than just building a UI. By completing it, you practiced:
Multi-Turn AI Conversations
You understand how System, User, and Assistant roles work together to shape AI behavior across multiple turns.
Role-Based Messaging
You learned how system prompts set context, user messages drive the conversation, and assistant messages demonstrate expected behavior.
JSON Data Structures
You worked with the standard messages JSON format used by OpenAI, Claude, and other AI APIs for multi-turn conversations.
Drag-and-Drop Interactions
You built interactive drag-and-drop reordering using native browser APIs — a technique used in project management tools, kanban boards, and form builders.
Tips for Working with AI on This Project
Test each role separately. After Step 1, add one System, one User, and one Assistant message to make sure each role works before moving on.
Validate the exported JSON. Paste your exported JSON into a JSON validator (search "JSON validator online") to make sure it's properly formatted before using it in API calls.
Start with the built-in templates. If drag-and-drop feels too complex on the first try, skip Step 3 and come back to it later. The core builder and JSON export are the most important parts.
Experiment with system messages. The system message is the most powerful part of a conversation flow. Try different system prompts and see how they change the AI's behavior.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.