Platform Feature App - Closest Preview

Table of contents

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

Business context

Content editors often need to see how their work will appear on the live website, but previewing content directly in Contentful can be challenging. While Live Preview enable editors to view changes in context, understanding which page an individual component or entry belongs to can still be time-consuming.

In Contentful, content is often structured so that page entries reference other types of entries—such as components, sections, or modules—that hold the actual content. This means that even if a component is ready, editors must first locate the page that includes it in order to see how it will look in the full layout.

The Closest Preview app streamlines this process by automatically identifying the nearest page entry with content preview enabled. In each entry’s sidebar, editors can quickly access a link to this closest page and preview the content. This makes content review more efficient, reduces unnecessary revisions, and ensures editors can see exactly how their work will appear on the live site.

Goal

Enable content editors to quickly find the page that uses their component so they can preview it.

AI-assisted development process

1. Research and planning

What we did: Analyzed content hierarchy navigation requirements and explored technical approaches for finding closest page-level entries.

AI contribution:

• Researched Contentful's content model and entry relationship patterns.
• Suggested technical approaches for traversing content hierarchies to find page-level parents.
• Identified performance considerations for large content volumes and complex relationships.
• Explored integration possibilities with Contentful's existing preview system and Live Preview functionality.
• Proposed multiple implementation designs for content hierarchy navigation.

Human insight:

• Validated requirements against Contentful's platform capabilities and content model structure.
• Added context about content editor workflows and preview usage patterns.
• Refined scope based on actual user pain points and content hierarchy navigation needs.

Result: Clear understanding of content hierarchy navigation possibilities and user needs.

Example scenario:

The Config Screen location has a Multiselect which needs to show only content types that don't have content preview enabled. To achieve the goal we asked the following to the agent:

I need to modify the existing Config Screen to show only content types in the multiselect list that aren't an entry with content preview configured.

Context:
- The simplest approach is fetching all the entries and check which ones has a field with id "slug".
    - If the entry contains a field with the ID `slug`, the entry is treated as having content preview active.
- I would like to directly fetch the content types that hasn't the content preview configured through the sdk.

Help me research different ways to differentiate when the content type and entry has the content preview configured and active.

After some back and forth with the agent we obtained the following information:

// Research Approaches Explored with the AI agent

1. Editor Interface Configuration
Approach: Check the EditorInterface configuration to see if live preview is enabled.
Result: ❌ Not viable
The EditorInterface configuration doesn't contain information about live preview settings
Live preview configuration is not stored in the editor interface data structure

2. Content Type Schema Direct Query
Approach: Query content types directly based on their field definitions using CMA queries.
Result: ❌ Not supported
Contentful's CMA doesn't support querying content types by field definitions
No query parameters available for filtering by field schema
Only supports basic parameters: skip, limit, order

3. Entry-Based Detection with Exists Operator
Approach: Query entries using 'fields.slug[exists]': false to find entries without slug fields.
Result: ❌ API limitation
'fields.slug[exists]': false is not valid Contentful query syntax
Returns 400 BadRequest error
Contentful doesn't support querying for absence of fields

4. Entry-Based Detection with Nin Operator
Approach: Query entries using 'fields.slug[nin]': [''] to find entries without slug fields.
Result: ❌ Incorrect logic
This would only find entries that have slug fields but with empty values
Doesn't find entries that don't have the slug field at all

After following the human-in-the-loop principle we concluded that the most reliable and maintainable approach is to:

1. Fetch all content types using the standard CMA endpoint
2. Check field definitions for the presence of a slug field
3. Filter out content types that have slug fields (indicating live preview)

This solution is simple, reliable, and works within Contentful's current API limitations while providing the functionality needed for the Closest Preview app.

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 for the sidebar app.

AI contribution:

• Generated React components for the sidebar app interface.
• Produced the initial UI skeleton from mockups and descriptions.
• Suggested responsive layouts for preview links and navigation controls.
• Proposed UX improvements for content editor workflows.

Human insight:

• Enhanced UX with feedback from content editors.
• Added accessibility features to the sidebar interface.
• Refined workflows to match real content editing processes.
• Added validation feedback and user guidance for preview navigation.

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

Example input:

Create UI code for a Contentful sidebar app that shows links to the closest page-level entry for preview.

Requirements:
- The sidebar app must have:
  - A list of links to the closest page-level entries.
  - A button to open preview in a new browser tab.
  - Loading states while finding the closest page.
- Use Contentful's Forma 36 design system.
- Just create the basic UI, hardcode the page links and any complex logic.

Context: This is a sidebar app that will be installed on non-page-level entry editors.

Example output:

export interface ClosestPreviewProps {
  entryId: string;
  spaceId: string;
  environmentId: string;
}

const ClosestPreviewApp = ({
  entryId,
  spaceId,
  environmentId,
}: ClosestPreviewProps) => {
  const [closestPages, setClosestPages] = useState<
    Array<{ id: string; title: string; previewUrl: string }>
  >([]);
  const [loading, setLoading] = useState(true);

  // Hardcoded example data
  const examplePages = [
    {
      id: 'page1',
      title: 'Home Page',
      previewUrl: 'https://preview.example.com/home',
    },
    {
      id: 'page2',
      title: 'About Page',
      previewUrl: 'https://preview.example.com/about',
    },
  ];

  useEffect(() => {
    // Simulate finding closest pages
    setTimeout(() => {
      setClosestPages(examplePages);
      setLoading(false);
    }, 1000);
  }, [entryId]);
  const openPreview = (previewUrl: string) => {
    window.open(previewUrl, '_blank');
  };

  return (
    <Flex
      flexDirection="column"
      className={css({ padding: '16px', gap: '12px' })}
    >
      <Heading>Closest Preview</Heading>
      <Paragraph>
        Navigate to the closest page-level entry to preview this content.
      </Paragraph>
      {loading ? (
        <Spinner size="small" />
      ) : (
        <Flex flexDirection="column" gap="8px">
          {closestPages.map((page) => (
            <Flex
              key={page.id}
              justifyContent="space-between"
              alignItems="center"
            >
              <Text>{page.title}</Text>
              <Button
                size="small"
                buttonType="primary"
                onClick={() => openPreview(page.previewUrl)}
              >
                Preview
              </Button>
            </Flex>
          ))}
        </Flex>
      )}
    </Flex>
  );
};

export default ClosestPreviewApp;

2.2. Logic implementation

What we did: What we did: Built the content hierarchy navigation logic using a test-driven development approach.

AI contribution:

• Generated TypeScript interfaces for content hierarchy traversal and page finding.
• Created test suites covering content relationship queries and navigation logic.
• Suggested state management patterns for closest page discovery.
• Implemented preview URL generation for found page-level entries.

Human insight:

• Integrated with Contentful's CMA to query entry relationships and content types.
• Handled edge cases and performance optimization for large content volumes with complex hierarchies.
• Implemented error handling and fallback mechanisms for hierarchy traversal failures.
• Added caching strategies for improved content hierarchy navigation performance.

Result: Prototype with test coverage that met content hierarchy navigation requirements.

Example input:

I want you to create the logic for finding the closest page-level entry for any content entry.

Requirements:
- Remove the hardcoded logic.
- Use Contentful CMA to traverse content relationships.
- Find page-level entries that reference the current entry.
- Generate preview URLs for found page-level entries.
- Follow the TDD approach in the test directory.

Context: The goal is to create a function that can find the closest page-level entry so content editors can access Live Preview.

3. Optimization and refinement

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

AI contribution:

• Suggested code refactoring patterns to improve maintainability and reduce duplication.
• Optimized content hierarchy traversal and reduced redundant API calls.
• Suggested performance optimizations for large content volumes with complex relationships.

Human insight:

• Scoped features to content editor needs.
• Reduced unnecessary complexity in hierarchy navigation logic.
• Added governance rules for content access and relationship validation.
• Implemented error handling and retry mechanisms for hierarchy traversal failures.

Result: Production-ready content hierarchy navigation aligned with content editor requirements.

Example input:

Our content hierarchy navigation system is slow when traversing large content volumes with complex relationships.

The current code processes content relationships sequentially and makes individual API calls for each entry.
I must optimize this for better performance and refactor the code for maintainability.

Context:
- Sequential hierarchy traversal is too slow.
- Code has duplicate relationship query logic.
- No caching for frequently accessed hierarchies.
- Hard to test individual navigation functions.

Help me refactor and optimize this code.

Outcome

• Content editors can quickly navigate to the closest page-level entry to access Live Preview functionality.
• The app reduces the time needed to find relevant page contexts for non-page content.
• Improved content editing workflow with direct access to preview functionality for all content types.

Conclusions

The platform feature app streamlined editorial workflows by letting editors jump directly to the closest page with preview enabled.

AI contributed significantly to exploring content hierarchy navigation approaches and generating UI prototypes. This helped the team quickly test multiple technical solutions.

Unlike integration apps, platform feature apps exist mostly within Contentful’s ecosystem. This made AI contributions more immediately applicable. With fewer external business dependencies, the team implemented AI-suggested solutions faster.

AI has a stronger impact on platform feature apps, where complexity lies more in technical execution than in understanding external business models.

Lessons learned

• Faster iteration cycles — AI accelerated development by reducing iteration loops and providing ready-to-test code and navigation logic.
• Essential editor feedback — Editors’ feedback ensured that UX improvements matched real workflows.
• Performance tuning — Performance optimization and caching required human insight, but AI helped identify candidate solutions more quickly.