Bringing Your Prototype Home¶
Your Chat Prototype Isn't Throwaway Work¶
You built something real in Challenge 1: a working prototype. That work doesn't have to disappear just because you're moving to a new environment. It's your starting point.
Think of it like...
Drafting a document in an email and then moving it into a shared folder so your team can work on it together. The writing doesn't change; you're just putting it somewhere better.
That's what you're about to do: take the prototype you built in chat and bring it into your project. Once it's there, your AI coding assistant can read it, edit specific parts, and help you build on it. All the things that weren't possible in chat.
A quick note about the future: You don't always have to start in chat and then move to an AI coding assistant. Going forward, you can start from a blank slate directly in your AI coding assistant. No chat step needed. We started you in chat for Challenge 1 because it's a more familiar, less technical environment to get comfortable in. Now that you've made the transition, your AI coding assistant is where you'll start from here on out.
Migrate Your Prototype
Mob Session | ~10 minutes total | Gather around the computer used in Challenge 1. One person drives, everyone else navigates.
Rotate the driver. Pick someone who hasn't been at the keyboard recently.
You're going to copy your prototype from chat and bring it into your project. Here's how:
Step 1: Copy your prototype from chat
On this computer, go back to the chat tool where you built your prototype in Challenge 1. If your team built multiple prototypes, pick your favorite. Find it and copy the code behind it.
In Your AI Assistant
Open your prototype artifact. Look for the menu icon (three dots) in the top right corner. Click it and choose Copy. That copies all the code behind your prototype.
Open your prototype artifact. Switch from the preview to the code view. You'll see a toggle for this in the upper right. Once you're in code view, a copy button appears near the top right. Click it to copy the code.
Open the conversation where you built your prototype. If you used Canvas, click Share & export at the top right of the Canvas panel and choose Copy contents. You can also switch to Code view using the toggle at the top of the Canvas and select all the code to copy. If you didn't use Canvas, scroll to the code block in the conversation and use the copy button.
Step 2: Hand it to your AI coding assistant
Open your AI coding assistant and paste the code in with a prompt like:
This project has a web framework set up but the application itself is empty.
Here's a prototype I built in another tool.
Please build it out properly into the web application so I can see it in a browser.
Then paste the code right after your prompt.
Your AI assistant will read the existing project structure, understand how the web application is set up, and build your prototype into it, working with the framework that's already there rather than starting from scratch.
If copy-paste doesn't work: Sometimes chat tools make it hard to grab the code, or the paste is too large for the terminal. If that happens, don't worry. There's a backup plan. Instead of pasting code, use the user story skills you learned in Lesson 1 to have your AI assistant rebuild it. Give it these stories:
This project has a web application set up but the application itself is empty.
Build me a Vessel Traffic Dashboard for the Houston Ship Channel into this web application based on these user stories:
As a VTS watchstander,
I want to see all vessels in my area with their name, speed, heading, and navigational status,
so that I can quickly assess what traffic is in the channel. (use sample data)
As a VTS watchstander,
I want vessels grouped by status (underway, at anchor, moored),
so that I can scan by category and focus on what needs attention. (use sample data)
As a VTS watchstander,
I want a channel conditions summary,
so that I know the overall status of my area at a glance.
It won't be identical to your chat version, but it gives you a working starting point built into the existing web application, and you just practiced writing user stories in a real project.
Step 3: See it running
Go back to your Environment to see your app running. If you've closed the tab, open {{{{ VARIABLE WORKSPACE_URL }}}} and click the Live Preview button within your project. Your application is now running from a real file in your project, not inside a chat window.
Your project already has real maritime data pre-loaded in the data/beginner/maritime/ directory. You'll connect to it in Challenge 2.
Step 4: Save & Sync
You know the drill:
Save my progress and sync it.
What's Real, What's Fake?
Mob Session | ~5 minutes total | Gather around one screen. Your team should have your prototype migrated first.
Now that your app lives in your project, ask your AI coding assistant:
Read through my app and tell me:
Which parts show real, live data, and which parts are using hardcoded or made-up information?
List them out.
Look at what it tells you.
Discuss: Look at the two user stories your team wrote in the last section. Which pieces of made-up data would those stories replace with real data? That's your roadmap for Challenge 2.
Key Insight
Your chat prototype is a head start, not a throwaway. Bringing it into your project means you don't start from zero. You start from something that already works and make it better. And now that your AI coding assistant can read the actual files, it can tell you exactly what's real and what's hardcoded, which is exactly what you need to know before you start connecting to live data in Challenge 2.