Integration App - Braze

Table of contents

• Table of contents
• Business context
• Goal
• AI-assisted development process
  • Research and planning
  • Feature building
    • UI prototyping
    • Integration logic implementation
  • Optimization and refinement
• Outcome
• Conclusions
• Lessons learned

Business context

Content teams previously managed customer engagement data manually between Contentful and Braze. This process caused disconnected experiences across channels, repetitive campaign setup, inconsistent messaging and personalization, and delays in campaign launches.

Because teams worked with content entries that required frequent updates, real-time synchronization was critical. Braze, as a customer engagement platform, required seamless integration with Contentful to keep campaigns timely and consistent across channels.

Goal

Enable content managers to synchronize Contentful content with Braze through a seamless integration.

AI-assisted development process

1. Research and planning

What we did: Analyzed integration requirements and explored technical approaches.

AI contribution:

• Researched Braze API capabilities and campaign management features.
• Suggested integration patterns for synchronizing content with campaigns.
• Identified technical challenges with the Braze REST API and webhooks.
• Explored Braze content blocks and template management.
• Proposed multiple implementation designs.

Human insight:

• Validated business requirements against Braze API limitations.
• Added context about marketing team workflows and campaign creation.
• Refined scope to align with Braze partner app requirements and Contentful Marketplace standards.

Result: Clear understanding of how Contentful content enhances Braze campaign workflows.

Example input:

I need to update Braze content blocks with new data from Contentful using the Braze API.

Context:
- List the endpoints I must use and provide an example for each.
- List how I must map Contentful fields to Braze content blocks.
- Be short and concise.
- I am building a Contentful App to enable content managers to sync Contentful content with Braze through a seamless integration.

Help me brainstorm different approaches and considerations.

Example output:

Braze API endpoints

Update Content Block
POST /content_blocks/update

Example:
curl -X POST 'https://rest.iad-01.braze.com/content_blocks/update' \
-H 'Content-Type: application/json'
-H 'Authorization: Bearer YOUR_REST_API_KEY'
-d '{
"content_block_id": "existing_id",
"name": "updated_name",
"description": "Updated description",
"content": "Updated content",
"state": "active"
}'

Create Content Block
POST /content_blocks/create

Example:
curl -X POST 'https://rest.iad-01.braze.com/content_blocks/create' \
-H 'Content-Type: application/json'
-H 'Authorization: Bearer YOUR_REST_API_KEY'
-d '{
"name": "content_block_name",
"description": "Description",
"content": "HTML or text content",
"state": "active",
"tags": ["tag1", "tag2"]
}'

Contentful to Braze field mapping:
title --> name --> Max 100 chars
description    --> description --> Max 250 chars
body --> content --> Max 50KB
tags --> tags --> Array of strings
slug --> Custom field    --> For identification

2. Feature building

With technical requirements defined, the team adopted an iterative approach to build features step by step.

2.1. UI prototyping

What we did: Converted designs into functional UI skeleton components.

AI contribution:

• Generated React components for the feature in progress.
• Produced the initial UI skeleton from mockups and descriptions.
• Suggested a responsive layout for content selection.
• Proposed UX improvements.

Human insight:

• Enhanced UX with feedback from marketing teams.
• Added accessibility features to the interface.
• Refined workflows to match real use cases.
• Added validation feedback.

Result: UI component skeleton that defined the interface structure and user experience.

Example input:

Create UI code for a new Config Screen location based on the attached screenshot.

Requirements:
- The Config Screen must have:
- An input field for the Braze API key.
- A multiselect component to select which content types the app installs to.
- Use Contentful's Forma 36 Multiselect and design system.
- Just create the basic UI, hardcode the possible content types and any complex logic.

Context: This screen is an iframe inside the Contentful platform. You do not need to add the install/save button.

Example output:

export interface AppInstallationParameters {
  brazeApiKey?: string;
  contentTypes?: string[];
}

const AVAILABLE_CONTENT_TYPES = [
  { id: 'blogPost', name: 'Blog Post' },
  { id: 'product', name: 'Product' },
  { id: 'campaign', name: 'Campaign' },
];

const ConfigScreen = () => {
  ...
  return (
    <Flex flexDirection="column" className={css({ margin: '80px', maxWidth: '800px' })}>
      <Form>
        <Heading>Braze Integration Configuration</Heading>
        <Paragraph>
          Configure your Braze integration to sync content from Contentful to your Braze campaigns.
        </Paragraph>

        <FormControl isRequired>
          <FormControl.Label>Braze API Key</FormControl.Label>
          <TextInput
            value={parameters.brazeApiKey || ''}
            onChange={handleApiKeyChange}
            placeholder="Enter your Braze API key"
            helpText="Your Braze API key is required to authenticate with the Braze platform."
          />
        </FormControl>

        <FormControl>
          <FormControl.Label>Content Types to Sync</FormControl.Label>
          <Multiselect
            items={AVAILABLE_CONTENT_TYPES}
            selectedItems={selectedContentTypeOptions}
            onSelectionChange={handleContentTypesChange}
            placeholder="Select content types to sync with Braze"
            helpText="Content types are automatically synced to Braze when published or updated."
            noMatchesMessage="No content types found."
            clearSearchText="Clear search."
            searchPlaceholder="Search content types..."
          />
        </FormControl>
      </Form>
    </Flex>
  );
};

export default ConfigScreen;

2.2. Integration logic implementation

What we did: Built the integration using a test-driven development approach.

AI contribution:

• Generated TypeScript interfaces for the Braze integration.
• Created test suites covering API interactions.
• Suggested state management patterns.
• Populated states through the Contentful SDK and CMA.

Human insight:

• Integrated Braze REST API endpoints.
• Handled rate limits and edge cases.
• Optimized performance for content volume.
• Implemented error handling and webhook retries.

Result: Prototype with test coverage that met Braze requirements.

Example input:

I want you to create the fetch logic to display the available content types in the multiselect, so the user can select the content types where the app should be configured.

Requirements:
- Remove the hardcoded logic.
- The first time the Config Screen renders, fetch all available content types through the CMA.
- When the user clicks Install, persist the selected content types on the Editor Interface.
- Reference successful implementations such as the Iterable App.
- Follow the TDD approach in the test directory.

Context: The goal is to select through the Config Screen the content types that will have the app configured on the sidebar.

After building all features, the team refined the solution for production use.

3. Optimization and refinement

What we did: Refactored the integration code, optimized performance, and added advanced features for production use.

AI contribution:

• Suggested code refactoring patterns to improve maintainability and reduce duplication.
• Optimized API calls and reduced redundant operations.
• Suggested performance optimizations.

Human insight:

• Scoped features to marketing needs.
• Reduced unnecessary complexity.
• Added governance rules for publishing and syncing content.
• Implemented error handling and retry mechanisms.

Result: Production-ready workflows aligned with Braze requirements.

Example input:

Our Braze integration is slow when syncing large amounts of content.
The current code processes content sequentially and makes individual API calls for each item.
I must optimize this for better performance and refactor the code for maintainability.

Context:
- Sequential API calls are too slow.
- Code has duplicate error handling logic.
- No batching for bulk operations.
- Hard to test individual functions.

Help me refactor and optimize this code.

Outcomes

• Content managers can synchronize content in real time from Contentful to Braze, reducing back-and-forth with marketing teams.
• The integration improves personalization and reduces setup delays.
• Campaigns launch faster and deliver consistent customer experiences.

Conclusions

AI accelerated technical tasks such as API exploration, endpoint mapping, test generation, and UI skeleton creation. These tasks gave the team a solid technical baseline.

However, building integration apps required deep business understanding of marketing workflows, campaign lifecycles, and partner requirements. Although AI saved time in coding and research, the process still took longer because of the need to align with external business rules.

In this way, AI acted as a productivity multiplier for technical work, but couldn’t replace the human effort needed to contextualize business goals and make decisions about workflows.

Lessons learned

• AI jumpstarts technical integration work — It accelerates early development, but integration apps always demand significant human involvement to interpret business processes and ensure compliance with partner platforms.
• Balancing automation with validation is critical — AI automation increases speed, but business validation remains essential in integration apps.