The effectiveness of your app blueprint and the quality of the generated code
depend on the clarity and detail of your prompts. When using
the App Prototyping agent, consider the following guidelines for effective
prompting when generating and debugging apps:

- **Be specific:** Clearly define the features, user interactions, and data requirements of your app. Ask for specific technologies, where possible. For example, if trying to create a web app with 3D elements, you may want to ask Gemini to use `three.js`.
- **Ask about additional tasks to set up services:** Gemini can write code for your app, but it cannot actually set up services, enable APIs, or provision resources (like a Cloud Storage bucket or a Stripe account). Make sure to tell Gemini that if it writes code for specific services that it should also tell you how to set up those services.
- **Request a Firebase project:** If you ask the App Prototyping agent to help you set up Firebase services, it will provision a Firebase project on your behalf. For example, you can ask "Help me add Firestore," or "Connect my app to Firebase."
- **Use Gemini to refine your prompt:** Use [Gemini for
  Google](https://gemini.google.com), [chat with
  Gemini](https://firebase.google.com/docs/studio/try-gemini) in Code view, or other Gemini surfaces to refine and optimize your prompt.
- **Provide context:** Include background information about your app's purpose, target audience, and the user experience you want.
- **Use examples:** If possible, provide examples of how users should interact with the app or what data should be displayed.
- **Iterate and refine:** Approach your development *iteratively*. Consider starting with a basic request, then add a feature, test it, refine it, then add another feature.

By following these guidelines, you can significantly improve the quality and
relevance of the app blueprints generated by Firebase Studio and its
success when debugging your app.

## Use additional prompts to refine responses

If the initial results aren't what you expect, you can refine your prompts by
adding more detail or providing specific instructions:

- **Add constraints:** Specify constraints on the UI, data model, or features.
- **Provide examples:** Provide examples of how users should interact with the app and what data should appear.
- **Use keywords:** Use keywords to describe the features or capabilities you want that the LLM might associate with the class of output you want. For example, you might use *Material Design* in a prompt where you indicate that you want your app to adhere to Google design standards.
- **Ask for specific changes:** Ask for specific changes to the generated code or blueprint. Add each feature request in a separate request.
- **Ask the model to reason:** If you're having trouble getting the results you want, try asking the model to reason through the prompt. For example, you could say "Think step by step. I want to create an input box for my task app. It should contain an 'Add task' button and a 'Cancel' button."

By using these techniques, you can iteratively refine your prompts to get the
results you want.

## Examples of effective prompts for app blueprints

Here are some examples of effective prompts for different types of apps:

**Simple task tracker:**

```text
Create a simple web app that displays a list of to-do items.
Users should be able to add new items to the list and mark items as complete.
Provide a way to delete items and export the list as a text file.
Use a clean and modern UI using Google Material Design principles.
```

**Budgeting app:**

```text
A budgeting and expense tracking app with spending categories, charts, and
budget goals. Include a clean dashboard with key insights. It should include
spending categories, charts, and budget goals. The app should allow users to
manually add expenses or upload csv files. The app should also allow users to
upload receipts, then use AI to convert the receipt into an expense entry that
users can edit. Data should be stored in browser cache, with download and
delete options.
```

**Game app prompt with assistance from Gemini (Markdown):**

```markdown
Generate a delightful sliding number puzzle game (15-puzzle) with Javascript,
HTML, and CSS.

- **Setup:** Create a 4x4 grid with numbers 1-15 and one empty space. Use a
  **solvable shuffling algorithm** to randomize the start.
- **Gameplay:** Allow clicking tiles **adjacent to the empty space** to slide
  them. Count and display the number of moves.
- **Timer:** Include a **countdown timer** starting at **120 seconds**
  (2 minutes).
- **End Conditions:**
    - If solved (numbers 1-15 in order): Alert with an encouraging winning
      statement generated by AI.
    - If timer reaches 0: Alert with a funny retort generated by AI.
```

## Tips for debugging

You can use Gemini to help you debug your code with
chat in your **Code** workspace
or the App Prototyping agent.

While Gemini can write code for you, it might sometimes also
produce errors. When it detects an error, it will attempt
to fix it. If you find that it isn't able to resolve the issue given
the error message, you can try some of the following techniques:

- **Describe the issue:** In the chat interface, describe the
  problem you're encountering as clearly and concisely as possible.
  While Gemini might have access to context like error messages
  and logs, it might not understand the full context. Describing the behavior
  along with the error message can help Gemini fix errors
  faster.

- **Ask specific questions:** Don't be afraid to ask Gemini
  direct questions about your code. For example, "What could be causing a
  null pointer exception in this function?" or "How can I prevent
  this race condition?"

- **Break down complex problems:** If you're dealing with a complex
  issue, break it down into smaller, more manageable parts. Ask
  Gemini to help you debug each part separately and think
  through problems step-by-step.

- **Use code fences:** When sharing code snippets, use code fences
  to ensure that the code is properly formatted. This makes it easier
  for Gemini to read and understand your code.

- **Iterate and refine:** Gemini may not always provide the perfect
  solution on the first try. Review the responses, ask clarifying
  questions, and provide additional information as needed.

- **Avoid prompting loops:** If Gemini gets stuck in a loop or is
  unable to answer your question, try rephrasing your prompt or
  providing additional context. Sometimes, just rewording your
  question can help Gemini understand what you're asking.

  If rephrasing your prompt doesn't resolve the loop, try
  the following techniques:
  - **Start a new chat:** If you're using Gemini
    chat in your Code
    workspace, start a new chat session to reset
    Gemini's context. This can help break free from any
    misconceptions or assumptions that Gemini may have made
    in the previous conversation.

  - **Provide counter-examples:** If Gemini is making incorrect
    assumptions, provide counter-examples to help it understand
    the correct behavior.

## Next steps

- [Get started with the App Prototyping agent](https://firebase.google.com/docs/studio/get-started-ai.md.txt).
- [Develop, publish, and monitor an app following a guided tour of the App Prototyping agent](https://firebase.google.com/docs/studio/solution-build-with-ai.md.txt).
- [Develop applications in a
  Firebase Studio workspace](https://firebase.google.com/docs/studio/get-started-workspace).