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. Find your prototype 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.
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:
Build me an Expedition Safety Brief for Yellowstone into this web application based on these user stories:
As a backcountry hiker, I want to see the current NPS alert status for my destination, so that I can quickly assess whether conditions are safe to enter. (use mock data)
As a backcountry hiker, I want to see a weather forecast summary for my planned area, so that I can decide whether it's safe to go out. (use mock data)
As a backcountry hiker, I want a pre-hike safety checklist, so that I don't leave camp without essential gear and information. ```
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 workspace to see your app running. If you've closed the tab, open [{{{{ VARIABLE WORKSPACE_URL }}}}]({{{{ VARIABLE WORKSPACE_URL }}}}){:target="_blank"}, click into your workspace, and click the **Web App** button. Your Field Guide is now running from a real file in your project, not inside a chat window.
**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.