Table of contents

• When to use AI
  • Brainstorming partner
  • Feature planning & implementation
    • When to use
    • Process
  • UI Prototyping
    • When to use
    • Process
  • Test generation
    • When to use
    • Process
      • Unit testing
      • Integration testing
• When not to use AI

When to use AI

This section covers the most common AI use cases when building apps and how to apply them.

Brainstorming partner

You can use AI to explore ideas, gather quick insights, clarify requirements, and outline potential solutions. Different modes support idea exploration, enabling iterative conversations similar to speaking with an expert. You ask questions, receive immediate answers, and follow up as needed.

Feature planning & implementation

For generating ideas for features based on requirements or user stories.

When to use

Perfect for: Known features, prototypes, learning frameworks, rapid iteration

Not ideal for: Complex business logic, security-sensitive features

Process

1. Ideation phase

Create a prompt and ask your agent. You should always review the available modes in your AI agent and select the mode that best fits the task. Prompt structure:

I'm planning a [feature type] for [target audience].

Context:
- [Technical implementation options]
- [Business goals, user needs, constraints]

Help me brainstorm different approaches and considerations.

Example:

I'm planning an integration to HubSpot for our Contentful space for marketing teams.

Context:
- One option is to show connected entries in the Page location of a Contentful app. Another option is to show them in the Sidebar location.
- Marketing teams need to sync page-level data directly with Braze, manage lead tracking efficiently, and ensure consistency between Contentful entries and Braze content blocks.

Help me brainstorm different approaches and considerations, and compare with existing apps such as the Bulk Edit app.

2. Implementation phase

This phase covers component implementations and research details. Use the agent create components and basic wiring. Prompt Structure:

I want you to create a skeleton implementation for [feature detail] with the following structure:

Requirements:
- [Mention successful implementations for reference]
- [Detail common patterns and unique approaches]
- [Provide skeleton implementation with empty components and placeholders]
- [Other requirements]

Context: [detailed business context, constraints, goals]

Example:

I want you to create a skeleton implementation for a new Page location inside my Contentful app with a simple initial table that will show all the existing connected entries in Braze.

Requirements:
- Analyze successful implementations such as Bulk Edit app for reference
- Follow the TDD approach first building the suite of test and then the skeleton implementation.
- Make it simple and as a starting point with empty placeholder functions and empty components.
- The table should have at first the following columns: the entry display name, status, total of fields and last updated date

Context:
- This is going to be a new app inside Contentful platform to integrate with Braze
- Each field from each entry will be a content block in Braze
- Our goal is to be able to see which entries has fields that are connected to a content module in Braze

Don't forget to:

1. Start Simple: Basic structure, add complexity incrementally
2. Include Placeholders: TODO comments, mock data, clear interfaces
3. Follow Conventions: Consistent naming, framework best practices
4. Plan for Growth: Extensible structure, configuration options

3. Refining phase

After receiving AI-generated research and implementation recommendations, you must refine, validate, and adapt the AI outputs to your specific context and constraints. This phase may involve iterating between the ideation and implementation phases. Don't forget to:

• Take incremental steps - Implement changes in small, reversible batches to reduce risk and make rollbacks easier.
• Follow AI best practices - Consult the Recommendations for AI app building docs and apply prompt hygiene, safety checks, and verification steps.
• Review and validate recommendations - Have subject-matter experts verify AI outputs against product requirements and quality standards.
• Customize suggestions - Adapt AI-generated suggestions to your specific business requirements and constraints.

UI Prototyping

AI generates UI code from Figma screenshots or UI descriptions. Developers can use this to quickly prototype single screens and convert designs into functional code. Work on one screen at a time to improve results and keep implementations manageable.

When to use

Best for: Single-screen prototypes, design-to-code conversion, rapid UI iteration, component generation.

Not ideal for: Complex app architectures, full application development, advanced interactions.

Process

1. Prepare the design

• Take a clear screenshot of your mockup design.
• Ensure that all text is readable and colors are visible.
• Include any interactive states, such as hover and focus, in separate screenshots.

2. Generate a single screen with a prompt

Use the following prompt structure to generate code:

Create UI code for this [screen type] based on the provided [Mockup screenshot or UI description].

Requirements:
- [Component structure]
- [Styling approach, such as CSS modules or styled-components]
- [Responsive behavior]
- [Interactive elements]

Context: [project constraints, design system, integration needs]

Example:

Create UI code for this configuration screen based on the provided mockup screenshot.

Requirements:
- Form validation and state management
- Contentful Forma 36 for styling
- No responsiveness required
- Add the Multiselect component from Forma 36 as an initial skeleton component (no fetch implementation)

Context:
- This is the configuration screen for a new Contentful app
- Follow our design system color palette
- Match the provided mockup design exactly

3. Review and iterate

Use the following prompt to refine components:

Refine this UI component for [feature] with:
- Accessibility improvements
- Performance optimizations
- Integration with [specific systems]

Context: [current project state and requirements]

Test generation

AI can generate unit and integration tests from code or specifications. This helps developers save time and improve coverage, but results should be reviewed carefully to ensure accuracy and reliability.

When to use

Perfect for: Unit tests, Simple integration tests, simple mocking.

Not ideal for: End-to-end tests and complex integration tests.

Process

Unit testing

1. Prompt specifications Specify the prompt requirements for unit test generation, including at minimum the following:

   • Function signature - Provide the full function signature and a concise description of expected behavior, including input and output types.
   • Happy-path scenarios - Request tests that validate normal or expected inputs and outputs.
   • Edge cases and error conditions - Include boundary conditions, invalid inputs, and expected error handling.

2. Example prompt structure

   Use this template as a starting point:

   Generate unit tests for the following function using Vitest:
   
   function calculateTotal(items) {
       // Implementation details...
   }
   
   Requirements:
   - Test happy path with valid inputs.
   - Test edge cases (empty array, zero tax rate).
   - Test error conditions (invalid inputs).
   - Use descriptive test names.
   
   See the rules file.

Integration testing

1. Prompt specifications

   Specify the prompt requirements for integration tests, including at minimum the following:

   • Components - Specify which components interact and their roles.
   • External dependencies - Identify external services, APIs, or third-party SDKs to mock.
   • Data flow and state management - Describe how data moves between components and how state should change.
   • User workflows - Define end-to-end user scenarios to verify.

2. Example prompt structure

   Use the example below and replace the component names with your app's exact identifiers:

   Generate integration tests for the connected fields workflow in the page location.
   
   Components involved:
   - ConnectedEntriesTable
   - PageLocation
   - ConnectedFieldsModal
   - SDKNotifier
   
   Test scenarios needed:
   - Disconnect single field - Disconnect one field from an entry and validate UI and API calls.
   - Bulk disconnect - Disconnect all fields from an entry and validate bulk behavior.
   - Field validation and errors - Validate field validation and error handling behavior.
   - UI state updates - Confirm UI state updates when fields connect or disconnect.
   - Entry removal - Confirm entry removal when all fields disconnect.
   - Bulk selection operations - Validate field selection and bulk operations.
   
   See the rules file.

When not to use AI

We don’t recommend using AI for the following tasks:

• Unknown logic — Implementing logic that is completely unknown to you.
• Abstract questions — Answering abstract questions that lack sufficient context.
• Full architecture — Fully architecting an application from scratch.
• Large-scale refactors — Large-scale refactors without human supervision.
• Sensitive configuration — Configuration changes that require explicit review and compliance. Like setting up API keys or credentials.
• Product decisions — Making product decisions.
• New app scaffolding — Creating the scaffolding for a new application. The Create Contentful App CLI already handles app scaffolding in a way that aligns with what the App Framework expects. Nertheless, you can create a prompt for your agent to use the CLI for scaffolding.