Harbor AI: Deep Dive into Content Generation & AI Integration

Deep Dive into Harbor: Development, Features, and AI Integration

This document provides a deep dive into the development and features of Harbor, a SaaS project focused on content generation and related tools. It explores the project’s recent architectural overhaul, the integration of AI models, and the practical application of these technologies in building and enhancing the platform.

Architectural Overhaul and Development Environment

Harbor has undergone a significant architectural restructuring, particularly over the Christmas period. This rebuild was aimed at improving the development workflow and addressing long-standing issues. The new architecture allows for more efficient development and iteration.

Development Environment Setup

The primary development environment utilizes npx convex dev for backend services and npm run dev for frontend development. Convex is highlighted as a foundational technology for its comprehensive capabilities in building scalable applications.

# Initialize Convex backend
npx convex dev

# Navigate to project directory (assuming Harbor V2 as an example)
cd harbor-v2

# Start the development server
npm run dev

The local development server is accessible at localhost.

Version Control and Deployment

The project utilizes Git for version control. Committing changes and pushing to the main branch are standard procedures for deployment. The process is described as being remarkably fast, indicating an efficient CI/CD pipeline.

# Stage changes
git add .

# Commit changes with a descriptive message
git commit -m "feat: Add new section for Scout feature"

# Push to the main branch
git push origin main

The developer notes a personal learning curve with GitHub, indicating that while the process is functional, there’s room for improvement in personal Git proficiency.

Core Features and Development Workflow

Harbor’s core functionality revolves around content creation, with a recent emphasis on integrating AI-driven features. The platform aims to assist users in generating various forms of content, from articles to marketing materials.

Landing Page Development and Graphics Generation

A key objective is the creation and enhancement of landing pages, similar to the existing homepage. This involves generating compelling graphics that accurately represent the platform’s features.

The developer is exploring the use of Nano Banana in conjunction with AI models like Gemini 3 Flash for this purpose. The process involves:

Defining the Task: Requesting Nano Banana Pro to create new sections for the homepage, advertising specific features.
Feature Integration: Adding Scout and Featured Generator as new features to be showcased.
Graphic Generation: The goal is to generate graphics similar in style to existing ones, likely using Photoshop or similar tools as inspiration. The developer acknowledges not being the original creator of the initial graphics.

Prompt Engineering for Graphic Generation

An example prompt demonstrates the interaction with Nano Banana and Gemini 3 Flash:

Prompt to Nano Banana Pro:

“Using Nano Banana Pro, can you make some new sections to this homepage section? Content creation, link building. We’ve added scout feature and featured generator as new features. How did you originally do the graphics? That’s a good question. I actually have no idea. I didn’t make them. Probably Photoshop or what’s it called? I think they’re actually just photoshopped from the dashboard potentially. It looks like Photoshop. I wouldn’t be surprised if it was Photoshop to be honest with you, but good question. I’m not actually sure as new features. Can you look into the new features? Look at all of the images on my homepage section. The section you can see in the image and add two new clickable sections like the three that exist now advertising the new feature and features I should say features and using nano banana to make similar images question mark”

The developer notes that while Gemini 3 Flash can be buggy, its speed is a significant advantage. The output from Nano Banana provides a good starting point for manual image creation if direct AI generation is not fully satisfactory.

Image Referencing and Integration

A critical aspect of graphic generation is providing context for the AI. In cases where the AI might not fully grasp the visual requirements, direct image referencing is employed.

Process:

Take a screenshot of the relevant section of the dashboard or existing UI.
Feed this screenshot to Nano Banana along with the prompt.
The AI then attempts to generate similar images or incorporate the visual style.

The developer expresses that sometimes the AI may not directly generate the image but will provide a prompt that is sufficient for manual creation.

Implementing New Sections

After generating or creating the graphics, these are integrated into the homepage. The example demonstrates adding a “Scout” section.

Workflow:

Use Nano Banana Pro to generate the content and potentially the image.
Review changes.
Accept all proposed changes.
Run the project locally to preview.
Push changes to the main branch.

The resulting “Scout” section is observed to look better than previous ones, though resolution and mobile responsiveness are noted as areas for potential refinement.

AI Model Integration and Usage

Harbor leverages various AI models, with a focus on accessibility and performance.

Gemini 3 Flash

Gemini 3 Flash is frequently used due to its speed. The developer acknowledges its occasional bugs but finds its rapid response time valuable for tasks like content generation and image creation. The discontinuation of Gemini 2.5 Flash endpoints on January 15, 2026, is noted, implying an upcoming successor or alternative.

Opus 4.5

Opus 4.5 is recognized as a superior model but is often rate-limited, making it less suitable for continuous use. However, its availability for free use in Anti-Gravity (a platform likely providing access to these models) is mentioned, with the caveat of limitations.

Claude

Claude is frequently mentioned as a preferred model for more detailed research and content refinement. The developer intends to use Claude for pushing content and potentially for advanced tasks like Post Hog data analysis. For more in-depth guidance on leveraging Claude’s capabilities, readers can refer to Claude Skills: A Comprehensive Guide to Customizing Your AI Assistant.

Anti-Gravity Platform

Anti-Gravity is the platform used to access and interact with various AI models, including Gemini 3 Flash and Opus 4.5. The developer highlights the ability to use Anti-Gravity for free by managing multiple accounts, effectively circumventing token limits. This is presented as a cost-saving strategy, potentially replacing paid subscriptions to other services.

// Example of using Anti-Gravity (conceptual)
// This is not actual code, but illustrates the interaction
async function generateContent(prompt, model) {
  const response = await fetch('/api/antigravity/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, model })
  });
  const data = await response.json();
  return data.content;
}

The developer expresses a preference for Claude Code but explores the capabilities of free models for cost-effectiveness.

Content Generation and SEO Integration

Harbor’s functionality extends to generating content for various purposes, including landing pages and articles. The platform’s performance on search engines is a key indicator of its effectiveness.

Homepage Ranking and Traffic Generation

Harbor’s homepage is performing well on Google, with a significant number of impressions. This success is attributed to the recent relaunch and architectural improvements. The developer aims to leverage this ranking to drive more traffic.

Keyword Research and Page Creation

The developer utilizes tools like keywordtool.io to identify relevant keywords and content gaps. This informs the creation of new landing pages and articles. Examples include:

AI SEO
Free AI SEO tool
AI SEO software
Best AI SEO tools 2025 (with plans to update to 2026)

The strategy involves creating detailed landing pages that incorporate exact phrase matches in meta titles and content, along with comparison tables.

Article Generation Workflow

The process for generating articles involves:

Research: Using AI models to gather information on target keywords.
Prompting: Crafting prompts that instruct the AI to create detailed articles, including meta titles, comparison tables, and specific data points.
Content Refinement: Reviewing and potentially refining the generated content, often with more advanced models like Claude.

The developer notes that Anti-Gravity with Gemini 3 Flash can generate articles quickly, but more detailed research might require Claude or similar models. For insights into refining AI outputs, consider Improving Claude Outputs: A Technical Approach to Prompt Engineering.

Specific Page Generation Example: “AI SEO Software”

The developer initiates the creation of a landing page for “AI SEO software”.

Prompt elements:

Target keyword: AI SEO software
Strategy: Create a landing page with a meta title and title using exact phrase match.
Content: Pack the article with data, include a giant comparison table at the top.
Placement: Ensure Harbor is positioned at the top.

The AI is instructed to research online for competitor information and stats. The process involves using Anti-Gravity and potentially Gina (an AI model that seems to have been invoked unexpectedly). The developer observes that the AI is not performing internal scraping as expected, but rather using external web access.

The generated content is reviewed for detail and structure. The developer notes that while the output is visually appealing, it could be more detailed. The ability to generate these pages for free is a significant benefit.

Image Generation and Visual Assets

Beyond content, visual assets are crucial for landing pages and marketing materials. Nano Banana is central to this process.

Generating Featured Images

The developer uses Nano Banana to generate featured images for articles and landing pages. The process involves:

Prompting: Providing a description of the desired image.
Generation: Nano Banana (powered by Gemini 3 Flash or other models) generates images.
Review: Assessing the quality and relevance of the generated images.

The developer notes that while Nano Banana does a good job, sometimes the resolution or aspect ratio might not be perfect, requiring manual adjustments.

Image Format and Optimization

A user points out that images generated by Harbor are large in KB, suggesting the use of WebP format for better optimization. The developer acknowledges this feedback and plans to investigate the possibility of outputting images in WebP format.

User Management and Analytics

Harbor employs several tools to monitor user activity, sign-ups, and feature usage.

Clerk for User Authentication

Clerk is used for user authentication and managing user accounts. It provides insights into the number of sign-ups and active users. The developer highlights the significant number of sign-ups, attributing them to the platform’s free tier and promotional efforts.

PostHog for Analytics

PostHog is integrated for detailed usage analytics. It tracks page views, active users, content creators, and content generation metrics.

Page Views: 686 on December 30th.
Weekly Active Users: 213.
Weekly Active Creators: 213.
Total Content Generated: 3,860.

PostHog is described as an essential tool for understanding user behavior and platform performance.

Convex for Backend Data

Convex serves as the backend data store and provides logs for monitoring application behavior and debugging issues.

Feature Development and Prioritization

The developer actively solicits and implements new features based on user feedback and internal ideas.

Feature Requests and Implementation

Scout Feature: Implemented and integrated into the landing page.
Featured Generator: Implemented.
Choice of Voice: Considered a valuable feature for implementation.
Link Bait Generators: Ideas like calculators or tools to generate links are being explored.
Page Generator: Another potential feature, though its exact form is yet to be defined.
Visualizations within Content: A core feature of Harbor’s original offering, with plans to reintroduce and enhance it.
WordPress Plugin: A strong contender for future development, aimed at automating posting.
Shopify Plugin: Also under consideration, similar to the WordPress plugin.
Invoices: Implemented after a long wait for user requests.
Presets: Implemented for saving user configurations and preferences.
Sentry Integration: Added to SEO Grove for error tracking and debugging.

Prioritization Process

The developer consults feature request lists and general ideas to determine the next steps. The ease of development on Harbor allows for rapid iteration and implementation. This aligns with the principle of making decisions that are a “hell yeah” to ensure focus and drive. The Strategic Imperative of Hell Yeah in Decision-Making discusses this approach.

AI Model Capabilities and Limitations

The exploration of various AI models reveals their strengths, weaknesses, and evolving capabilities.

Model Performance Comparison

Gemini 3 Flash: Fast, accessible, but can be buggy. Good for quick tasks.
Opus 4.5: High quality, but rate-limited. Best for critical tasks when available.
Claude: Preferred for detailed research, refinement, and complex reasoning.

The developer’s strategy involves using the fastest, free models for initial generation and then employing more powerful models for refinement.

Prompt Engineering and Context

The effectiveness of AI generation heavily relies on prompt engineering. Providing clear instructions, context, and examples is crucial.

Using Image References

When visual output is critical, providing reference images to the AI improves the chances of achieving the desired aesthetic.

Tone and Style Transfer

Harbor includes a “copy tone of site” feature. This allows users to input a URL, and the AI attempts to mimic the writing style and tone of that website for generated content. This is achieved by analyzing the content on the provided URL.

// Conceptual example of tone copying
async function copySiteTone(siteUrl) {
  const response = await fetch('/api/ai/copy-tone', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url: siteUrl })
  });
  const data = await response.json();
  return data.toneDescription; // A description of the tone to be used in prompts
}

This feature is particularly useful for service-based websites where maintaining a consistent brand voice is important.

Limitations and Workarounds

Limited Research Depth (Flash Models): Gemini 3 Flash may not perform deep research, necessitating the use of models like Claude.
Image Generation Quality: While improving, AI-generated images may require manual editing for resolution and responsiveness.
Date Awareness: Some models may not always be aware of the current date, leading to outdated content (e.g., referencing 2026 when it’s 2025). This requires manual correction.
Unexpected Model Invocation: Sometimes, the AI might default to a model (like Gina) that wasn’t explicitly requested, indicating potential underlying system configurations.
Context Window: While models like Gemini 3 Flash have large context windows, careful prompt design is still necessary for optimal results.
Free Model Limitations: Using free models often involves managing account limits and potential rate restrictions. The developer’s workaround of using multiple accounts for Anti-Gravity circumvents these limitations.

Model Updates and Future Prospects

The developer notes the discontinuation of Gemini 2.5 Flash and anticipates new model releases. This suggests a dynamic landscape where AI capabilities are continuously evolving. The trend towards more accessible and capable “cheap” models is a significant observation. This also touches upon the broader landscape of AI development, as seen in discussions about platforms like Alibaba’s Axio AI Platform.

Technical Implementation Details

This section delves into specific technical aspects of Harbor’s development.

Convex for Backend Operations

Convex is central to Harbor’s backend. Its ability to handle real-time data, background functions, and database operations makes it suitable for a SaaS application.


import { query } from "convex/server";

export const getArticleCount = query({
  args: {},
  handler: async ({ db }) => {
    const articles = await db.query("articles").collect();
    return articles.length;
  },
});

Web Development Stack

While not explicitly detailed for the entire stack, the use of npx npm run dev suggests a modern JavaScript framework (e.g., Next.js, React). The developer’s mention of Next.js for a client project further supports this.

Image Handling and Optimization

The user feedback regarding large image file sizes and the suggestion for WebP format highlights the importance of image optimization.

Potential Implementation for WebP Output:

If the AI model or the platform supports it, specifying WebP as an output format during image generation is ideal.

// Conceptual example of requesting WebP image
async function generateOptimizedImage(prompt) {
  const response = await fetch('/api/nano-banana/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      prompt,
      format: 'webp', // Request WebP format
      quality: 80      // Specify quality level
    })
  });
  const data = await response.json();
  return data.imageUrl;
}

If direct WebP output is not available, post-processing images using server-side tools or client-side libraries would be necessary.

CLI Tools and MCPs

The discussion around CLI tools and MCPs (Model Connector Protocols) is relevant for AI agent development. The potential to monetize AI through agentic CLIs is an interesting avenue, as explored in Monetize AI: Earn Money with AI Agentic CLIs.

CLI Tools: Standard command-line interfaces for services (e.g., Digital Ocean CLI, Stripe CLI) are often preferred and more readily available.
MCPs: These are designed for AI agents to interact with third-party services within an agentic flow. While they can be powerful, the developer suggests that for many use cases, direct CLI interaction by the AI is sufficient and simpler. The overhyping of MCPs for tasks achievable via CLI is noted.

Example of AI using CLI (conceptual):

An AI agent might execute a command like aws s3 sync ./local-folder s3://my-bucket to upload files.

WordPress Integration

For clients requiring easy content management, WordPress is recommended.

Development Approach: Building a WordPress site can be done by:
- Using a theme and customizing it.
- Designing locally (e.g., using Stitch, exporting HTML/CSS) and then implementing this design within a WordPress theme or page builder.
Local Development: The developer advises against using basic local WordPress installations due to the lack of CLI command support. Docker is recommended for a more robust local WordPress environment that supports CLI operations.

# Example of setting up WordPress with Docker (conceptual)
# This would involve a docker-compose.yml file
docker-compose up -d

Deployment Platforms

Netlify: Mentioned as a deployment platform for front-end applications.
DigitalOcean: Used for server infrastructure.
Convex: Provides the backend infrastructure and data layer.

Project Management and Future Vision

Harbor’s development is characterized by rapid iteration, feature expansion, and a focus on user value.

Development Philosophy

The developer emphasizes building features that are “too good not to use” and making the platform accessible. The free tier is a strategic choice to attract users and gather feedback. This approach is crucial for building a sustainable digital system, as discussed in The Billion-Dollar Formula: Building and Selling Digital Systems.

Future Feature Ideas

WordPress Plugin: Automating posting for WordPress users.
Shopify Plugin: Similar automation for Shopify stores.
Link Bait Tools: Calculators, interactive tools to attract backlinks.
Case Studies: In-depth content to showcase platform benefits.
Page Generator: A tool to create entire landing pages.
Visualizations: Reintroducing and enhancing visual content generation within articles.
API Access: Offering an API for advanced users to integrate Harbor’s functionality into their own workflows.

Growth Strategy

Content Marketing: Leveraging AI to generate content for SEO and attract organic traffic.
Community Engagement: Responding to user feedback and implementing requested features.
Partnerships/Deals: Considering platforms like AppSumo for wider reach, though contract terms are a consideration. This also relates to avoiding The Perils of Undervaluing Your Startup.
Free Tier and Freemium Model: Attracting users with a free offering, with plans to introduce paid tiers in the future.

Performance Monitoring

The developer uses multiple tools to monitor key performance indicators:

Clerk: For user sign-ups and authentication.
PostHog: For detailed product analytics and user behavior.
Convex Logs: For backend error tracking and debugging.

This multi-faceted approach ensures a comprehensive understanding of the platform’s health and user engagement. The article also touches upon broader AI trends, such as AI Skills Expansion.