How-to Enabling Prototyper on Existing Project + Prototyper Full Context Clear

Background:

  1. People trying to bring their existing project (local machine, github, other cloud, etc) realize they can’t use the prototyper interface, only the code view, which uses a different model.
  2. With time the prototyper context memory gets huge and this ends up causing some troubles:
    • Slow Speeds
    • Frequent VM locks (Infinite Loading - reset needed)
    • Uncomplete interactions
    • Reduced Context Precision
    • Old code being randomly and frequently reintroduced
    • Additional errors like exceeding input token

Why Clearing the Context Is Good

  • Not only you’ll reduce quite a bit of suffering from the above problems, but also
  • The Prototyper will just work better: he’ll produce longer codes with less errors, while doing it faster!
  • We help Google by removing an unnecessary burden from their servers and by doing that we help all users from firebase studio having a better experience.

Related Topics

What I’ll Show Here
The procedure shown in this topic does the following:

  • clears the ENTIRE context from the Prototyper.
  • Bypasses the Protype creation stage, making the Prototyper ready to work from the get go.

WARNING PROTOTYPER CONTEXT WILL BE DELETE it won’t remember previous interaction.
Firebase studio has 2 context files capra-context and capra-thread, we’ll clear both.

##################################################
IMPORTANT TIP: Before clearing your context, do the following:
##################################################

Create the following structure in your project:
context/PROJECT_CONTEXT_HISTORY.md (this is where the context summary will be placed)
context/PROJECT_CONTEXT_INSTRUCTIONS.md (how to use the files from context dir)
context/PROJECT_PROGRESS.md (project progress - done - working - next features)
context/1st.md (initialization prompt)

Explain to the prototyper what you’re doing: you want to clear his context and still have a way for him to remember the main points of your current interaction.

The prompt would look something like this:

I'll reset your context memory, so  we need to make sure you can have some context from our current interaction. I created a dir named context in our project folder, there you'll find some files. Create a throughout summary from our conversation with all the important aspects from the project, objectives, things that we done, things that we'll do and any other information you thing is important. And write it to context/PROJECT_CONTEXT_HISTORY.md then create a progress from our project: DONE, WORKING, NEXT inside PROJECT_PROGRESS.md then create instructions for you on how these files should be updated and used on subsequence sessions and write it to PROJECT_INSTRUCTIONS and also create a initialization prompt that I'll give you on our next session to get you to know the codebase, and read the project context files and write it to 1st.md The whole idea of this is to create a system that will allow some general persistence from your context between sessions, you should update this files regularly along our interactions, specially when something major is achieved or discussed. 

Something in those lines, it’s a basic prompt engineering you’ll be doing, you could either use the prompt I gave above, but ideally make one more detailed and according to your liking on how you want this to be done.

NOW LET’S CLEAR THE CONTEXT

With an existing codebase loaded (either a ongoing project, loaded from github, uploaded, etc), do this Steps:

  1. Access the code view interface by clicking the <> button (top right conner)
    image

  2. Open the terminal

  3. A new window where you can type commands will be displayed

  1. Click inside the terminal to start typing the following commands, press enter after each one.

  2. First let’s backup your existing context to a dir named context_backup copy and paste the following command:

timestamp=$(date +%Y%m%d%H%M%S); mkdir -p "/home/user/studio/context/context_backup/" && cp "/home/user/.idx/ai/capra-context-state.json" "/home/user/studio/context/context_backup/capra-context-state-${timestamp}.json" && cp "/home/user/.idx/ai/capra-thread.json" "/home/user/studio/context/context_backup/capra-thread-${timestamp}.json"
  1. Add the backup folder to .gitignore
# prototyper
/context/context_backup

  1. Now let’s clear capra-thread
/clear
  1. Let’s edit the capra-context
code /home/user/.idx/ai/capra-context-state.json

  1. Delete all capra-context contents
  2. Paste the following code there
{
  "currentProposalObject": {
    "appName": "YOUR_APP_NAME",
    "coreFeatures": [
      {
        "name": "Existing Project Core",
        "description": "Details to be determined by codebase scan.",
        "categories": ["ui"]
      }
    ],
    "uiStyleGuidelines": [
      {
        "category": "layout",
        "description": "Awaiting codebase scan for details."
      }
    ]
  },
  "agentHistories": {
    "app-prototyping-agent:proposal-agent": [],
    "app-prototyping-agent:edit-app-agent": [
      {
        "role": "model",
        "content": [
          {
            "text": "I'm ready to work on your project. Please let me know what you'd like to do."
          }
        ]
      }
    ]
  },
  "currentState": "edit-app"
}
  1. Inside the code you just pasted there’s a variable appName, replace the YOUR_APP_NAME for the name of your app
  2. Wait around 30s just to make sure the auto-save will happen and to avoid the old capra-context being pulled from cache
  3. Time to RESET your project VM, go to:
    https://studio.firebase.google.com/

    Click Reset

And That’s is it!

Now your project VM will boot up and you should see the prototyper ready to work on it with the context completely blank.
IF your context is still showing, probably the capra-context file was reverted by the server, just repeat steps 8-13. You can also try to manually save it and wait for a bit more.
DO NOT do anything after saving the capra-context file, just go straight to the firebase studio url and reset the VM.

10 Likes

Hi DaC,

thanks a lot! That is a great and comprehensive guide! I have not tried it but I it looks promising :wink:

I guess your solution in summarising the most important context of your project is also something the Firebase team could implement as an intermediate solution to fix those issues.

One thing to add: What helped me after clearing the context was to first ask the prototyper to list the complete data structure of my app, as well as all features including firebase rules and cloud functions, as well as APIs. This helped a lot to get up to speed fast and without major errors :wink:

BR

3 Likes

yes, also like to say “read the code base, get to know and let me know what you found out.”

I Actually just started a new project.

  • I first tried to only “+ New Workspace” it didn’t worked because the prototyper interface is not even available. (maybe there’s a way to get it show, but I couldn’t find)
  • then I decided to prototype a new app with this prompt “create a very very simple hello world app”, it worked, it created a very simple hello world.
  • deleted everything but .gitignore and .idx .vscode
  • replaced the prototyper blueprint by a very extensive one I had built myself
  • then told him “read the blueprint inside docs and start coding the app”, and so he did.
  • at first things won’t showing, but then I asked him about the package.json file and he automatically installed node and once finished went on continue coding the blueprint.

Based in @DaC and @Fachten help, I have made my set of prompts below to use at prototyper. The step 5 and the “context clear” parts unfortunately are not possible at prototyper screen.
I pasted item by item at the prototyper and it worked.

We will reset your memory between sessions, so we need a way to retain project context and progress across our interactions.
For that, create a `context/` directory in the root of the project.
Please follow the steps below carefully.

## 1. 📚 Create a file called "PROJECT_CONTEXT_HISTORY.md"

In this file, create a structured summary of the entire project based on our conversations and codebase. Include:

- **Project Objectives and Vision**
- **Technical Stack and Architecture**
- **Features Implemented**
- **Features Currently Under Development**
- **Planned Features / Future Work**
- **Design Decisions and Constraints**
- **Open Questions / Assumptions**
- **List the complete data structure of the app**
- **List all firebase rules, cloud functions and APIs**
- **Other Important Observations**

Save this to:  
`context/PROJECT_CONTEXT_HISTORY.md`
## 2. 📊 Create a file called "PROJECT_PROGRESS.md"

Track project status using a clear, simple format:

DONE:
[Completed task 1]
[Completed task 2]

WORKING:
[In-progress task 1]
[In-progress task 2]

NEXT:
[Upcoming task 1]
[Upcoming task 2]

📄 Save this to:  
`context/PROJECT_PROGRESS.md`
 3. 🧭 Create a file called "PROJECT_INSTRUCTIONS.md"

Create internal instructions for yourself (the AI) with clear guidance on how to manage project context in subsequent sessions. These instructions **must** include:

### 🔁 When to Update
- After completing a major task.
- After deciding something new about the project.
- After a major discussion or change in scope.

### 📄 How to Update
- Update `PROJECT_CONTEXT_HISTORY.md` with new relevant info.
- Add or move items in `PROJECT_PROGRESS.md` according to task status.
- Keep each file tidy and avoid duplicated or outdated info.

### 📌 Startup Routine
Before responding in any future session, always:
1. Load and parse the content of `context/PROJECT_CONTEXT_HISTORY.md`.
2. Load and review `context/PROJECT_PROGRESS.md`.
3. Use this context to inform responses, code suggestions, and planning.
4. If context files are missing or outdated, ask the user to clarify or update them.

### ⚠️ Important Commands (to be followed by the AI)

- `ALWAYS read context/*.md files before starting any session.`
- `NEVER assume project status without checking PROJECT_PROGRESS.md.`
- `Update context files whenever a significant change happens.`
- `Log changes made by you (the AI) in PROJECT_CONTEXT_HISTORY.md.`
- `If user gives you a new context, integrate and persist it immediately.`

📄 Save this to:  
`context/PROJECT_INSTRUCTIONS.md`
## 4. 🧠 Create a file called "1st.md" (Session Boot Prompt)

Generate a prompt that can be used to kick off any future session with full project awareness. It should tell the AI to:
You are now rejoining a project with prior context.
Read the files in the context/ directory:
- PROJECT_CONTEXT_HISTORY.md
- PROJECT_PROGRESS.md
- PROJECT_INSTRUCTIONS.md

Load all relevant project information into memory.
Use the loaded context to inform all answers, decisions, suggestions, and code actions.
Ask for clarification if anything seems missing or outdated.
Follow the update routines specified in PROJECT_INSTRUCTIONS.md.

📄 Save this to:  
`context/1st.md`

5. MANUAL STEP IN THE TERMINAL!!!

  • Create the folder “context_backup” inside “context” like “context/context_backup”

  • use the script below in the terminal:

timestamp=$(date +%Y%m%d%H%M%S); mkdir -p "/home/user/studio/context/context_backup/" && cp "/home/user/.idx/ai/capra-context-state.json" "/home/user/studio/context/context_backup/capra-context-state-${timestamp}.json" && cp "/home/user/.idx/ai/capra-thread.json" "/home/user/studio/context/context_backup/capra-thread-${timestamp}.json"
## 6. Add the backup folder to .gitignore:
"# prototyper
/context/context_backup"

:warning: IMPORTANT: This prevents the context_backup folder and the backup files within it from being used as input for the App prototyper agent context. If you don’t follow this step, you’ll hit a snag “The input token count exceeds the maximum number of tokens allowed.”

7. Follow steps 7 forward from @DaC

4 Likes

Very cool addition! This will help quite a lot people less familiar with the code interface!

1 Like

Hey there,

I just tried both solutions and they are working perfectly! I only skipped step No 3 “Project Instructions” to keep it simpler for the first try.

Thanks are lot for helping out!

1 Like

Hi there!
After 3 days, today I had to run this process again because my workspace was freezing every interaction. The bad part is that it got less time to get stuck but the good part is that it worked again after cleaning.

@DaC , do you know if it’s possible to enable prototyper on a existing project using .Net Core, Angular and Azure database?

I really don’t know, this is something above my skills. But I’m using my projects with firestore though which is pretty straightforward once you find your way there. If you allow me, why not firestore ?

Personally I’m kind worried with future costs, but I understand if I’m lucky enough to any of the SaaS I’m building to get traction, they’ll be generating money anyway when the free quote gets exhausted.

@Carlos_Tecles take a look at this topic, it might explain why it’s taking less time to freeze now, even with the reset. This is something I’m also suspecting. Test it and let me know if it made your problem better.

Hi @Carlos_Tecles and @DaC , it looks very promising, I applied the suggested, but I dont undertand or was able to identify, where we tell prototyper to follow those instructions everytime, is it saved some how by itself into capra-context?
Thanks in advance and best regards,
Martin

Hi @Martin_Cafiero , I made a personal process (unfortunately manual) I run every morning:

  1. At Prototyper: Ask to update all context files, keeping then optimized and concise
  2. At Code:
  • Backup files using the Terminal
timestamp=$(date +%Y%m%d%H%M%S); mkdir -p "/home/user/studio/context/context_backup/" && cp "/home/user/.idx/ai/capra-context-state.json" "/home/user/studio/context/context_backup/capra-context-state-${timestamp}.json" && cp "/home/user/.idx/ai/capra-thread.json" "/home/user/studio/context/context_backup/capra-thread-${timestamp}.json"
  • Open the capra-context file using the Terminal
code /home/user/.idx/ai/capra-context-state.json
  • Replace the capra-context-state content to:
{
  "currentProposalObject": {
    "appName": "APP_NAME",
    "coreFeatures": [
      {
        "name": "Existing Project Core",
        "description": "Details to be determined by codebase scan.",
        "categories": ["ui"]
      }
    ],
    "uiStyleGuidelines": [
      {
        "category": "layout",
        "description": "Awaiting codebase scan for details."
      }
    ]
  },
  "agentHistories": {
    "app-prototyping-agent:proposal-agent": [],
    "app-prototyping-agent:edit-app-agent": [
      {
        "role": "model",
        "content": [
          {
            "text": "I'm ready to work on your project. Please let me know what you'd like to do."
          }
        ]
      }
    ]
  },
  "currentState": "edit-app"
}
  1. At Prototyper:, clear the capra-tread:
/clear
  1. Reset the workspace
2 Likes

Hi @Carlos_Tecles thanks for your fast answer, i think with what you propose forces a fresh start every morning. My question was more related, after “cleaning” once or when needed, make prototyper to remember to follow instructions in

Maybe is just a prompt in prototyper after each reset or as the decided to change it to restart.
Or theres a way to add this to the capra template?
What do you think?

After cleaning, prototyper will remember to follow instruction, based in the file “1st.md”
That works perfectly fine.

1 Like

I didnt mean it doesnt work, just wondering how prototyper knows to read 1st.md in every new “Session”.

@DaC @Carlos_Tecles As of today - capra has been renamed to prototyper
It is now prototyper-context-state.json and prototyper-thread.json

Having a mixture of both might lead to errors / also might be relevant for your backup routine

2 Likes

I opened the prototyper-context-state.json file here in my project and it is clear.
In the other hand, my capra is HUGE kkkkkk.
Maybe it will only change to newer projects?

@ethex thanks for the heads up! I’ll take a look at it.

@Carlos_Tecles Were you able to check if these are for new projects ? My current one is still the good old capra (never understood this name, there must be an explanation).

Anyway seems like the guys at Google are looking at our endeavors… :slight_smile:

Interesting, I did all that you suggested and after a first prompt it does this. Any clues as to what I messed up?

Hi @Jose_daVeiga .
This is a recent bug already addressed in another thread.

https://community.firebasestudio.dev/t/cannot-read-properties-of-undefined-reading-role-triggered-on-every-prompt-even-with-empty-context-seems-like-a-middleware-or-handler-bug-with-no-fallback-on-missing-role/

2 Likes

@Jose_daVeiga the problem is that the firebase studio team changed some things about the context, I need to update it here. If your project was achieved, when you opened it again, it changed to the new format. If you start the context fresh, it should work:

  • use the /clear commmand
  • now edit the capra-context file:
code ../.idx/ai/capra-context-state.json
  • Clear its contents and Copy and paste this zero context code to it:
{
  "currentProposalObject": {
    "appName": "your_app_name",
    "coreFeatures": [
      {
        "name": "Existing Project Core",
        "description": "Details to be determined by codebase scan.",
        "categories": ["ui"]
      }
    ],
    "uiStyleGuidelines": [
      {
        "category": "layout",
        "description": "Awaiting codebase scan for details."
      }
    ]
  },
  "agentHistories": {
    "app-prototyping-agent: proposal-agent": [
      {
        "role": "user",
        "content": [
          {
            "text": "..."
          }
        ]
      },
      {
        "role": "model",
        "content": [
          {
            "text": "..."
          }
        ]
      }
    ],
    "app-prototyping-agent: edit-app-agent": [
      {
        "role": "user",
        "content": [
          {
            "text": "..."
          }
        ]
      },
      {
        "role": "model",
        "content": [
          {
            "text": "..."
          }
        ]
      }
    ]
  },
  "currentState": "edit-app"
}

save and try again… this worked with me, you could also try to reset the VM before sending new commands to the prototyper.

2 Likes