Home Insight AI

React SDK

Embeddable AI chat widget for real estate applications. The Home Insight AI SDK provides a single React component that analyzes home inspections, loan documents, and provides instant answers with citations.

Features

  • One-line integration - Drop in a single React component
  • Document analysis - Understands inspection reports, loan estimates, closing disclosures
  • Citation support - Every answer includes source references with page numbers
  • Two layout modes - Popup (floating widget) or Sidebar (full-height panel)
  • Custom brand colors - Match your site's color scheme
  • Mobile responsive - Works on all screen sizes

Installation

Shell
npm install home-insight-ai-sdk

Quick Start

Property-Level Chat (Recommended)

Chat across ALL documents for a property:

React
import { HomeInsightChat } from 'home-insight-ai-sdk';
import 'home-insight-ai-sdk/style.css';

function App() {
  return (
    <HomeInsightChat
      apiKey="hi_live_your_api_key"
      propertyId="prop_abc123"
      propertyAddress="123 Oak St, Austin, TX"
      layout="popup"           // or "sidebar" for full-height
      primaryColor="#5b7cff"   // Your brand color
    />
  );
}

Single Document Chat (Backward Compatible)

Chat with one document:

React
<HomeInsightChat
  apiKey="hi_live_your_api_key"
  analysisId="ana_xyz789"
/>

Upload Fallback

If no propertyId or analysisId is provided, allow users to upload files:

React
<HomeInsightChat
  apiKey="hi_live_your_api_key"
  allowUpload={true}  // Shows upload UI when no propertyId/analysisId
  propertyAddress="123 Main St, Austin, TX"  // Optional: pre-fill address
/>

Perfect for users who don't have existing properties yet! The SDK automatically shows the upload interface, allowing users to drag & drop documents and start chatting immediately.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes | - | Your Home Insight AI API key | | propertyId | string | No | - | Property ID - chat across ALL documents (recommended) | | analysisId | string | No | - | Analysis ID - chat with single document (backward compatible) | | preUploadedFiles | string[] | No | - | Array of file URLs to analyze | | propertyAddress | string | No | - | Property address for context | | layout | 'popup' \| 'sidebar' | No | 'popup' | Widget layout mode | | position | 'bottom-right' \| 'bottom-left' | No | 'bottom-right' | Widget position (popup mode) | | theme | 'light' \| 'dark' | No | 'light' | Color theme | | primaryColor | string | No | '#5b7cff' | Primary brand color (hex) | | accentColor | string | No | '#4a63d9' | Accent color for hover states (hex) | | apiBaseUrl | string | No | Production URL | API base URL | | allowUpload | boolean | No | true | Allow file upload in widget |

Note: Provide either propertyId (recommended for multi-document chat) OR analysisId (single document).

Layout Modes

Popup Mode (Default)

Small chat widget that appears as a floating button in the corner.

React
<HomeInsightChat
  apiKey="hi_live_..."
  propertyId="your-property-id"
  layout="popup"  // Default
  position="bottom-right"  // or "bottom-left"
/>

Features:

  • 380px × 550px window
  • Toggle button to open/close
  • Positions: bottom-right or bottom-left
  • Non-intrusive, familiar interface
  • Good for general website integration

Sidebar Mode

Full-height sidebar that's toggleable on the right side of the screen.

React
<HomeInsightChat
  apiKey="hi_live_..."
  propertyId="your-property-id"
  layout="sidebar"
/>

Features:

  • 400px width, full screen height
  • Click bubble to toggle open/close
  • Slides in from the right
  • Perfect for property listing pages
  • More space for chat history
  • Mobile responsive (full width on phones)

Recommended Use Cases:

  • Real estate property detail pages
  • Home inspection report viewers
  • Dedicated chat/support pages
  • Applications where chat is the primary feature

Custom Brand Colors

Match your brand by customizing the primary color used throughout the widget.

React
<HomeInsightChat
  apiKey="hi_live_..."
  propertyId="your-property-id"
  primaryColor="#10b981"  // Your brand color
  accentColor="#059669"   // Darker shade for hover states
/>

Where Colors Are Applied:

  • Header background gradient
  • Toggle button background
  • Send button
  • Links and interactive elements
  • Progress indicators
  • File upload buttons

Color Examples:

| Brand | Primary Color | Accent Color | |-------|---------------|--------------| | Green | #10b981 | #059669 | | Purple | #8b5cf6 | #7c3aed | | Orange | #f59e0b | #d97706 | | Red | #ef4444 | #dc2626 | | Teal | #14b8a6 | #0d9488 |

Tips:

  • Use hex color codes (e.g., #10b981)
  • Accent color should be slightly darker for better hover states
  • Test colors against white text for accessibility (WCAG AA: 4.5:1 contrast)

Complete Example: Property Listing Page

React
import { HomeInsightChat } from 'home-insight-ai-sdk';
import 'home-insight-ai-sdk/style.css';

export function PropertyDetailPage() {
  return (
    <div style={{ paddingRight: '420px' }}>  {/* Leave space for sidebar */}
      {/* Your property listing content */}
      <h1>Beautiful newly renovated home</h1>
      <p>1938 Marin Avenue, Berkeley, CA 94707</p>

      {/* Sidebar chat - toggleable */}
      <HomeInsightChat
        apiKey="hi_live_..."
        propertyId="a3e532e2-d03a-4deb-bb3c-7f3d2cbc7141"
        layout="sidebar"
        primaryColor="#10b981"  // Your brand green
        accentColor="#059669"
        theme="light"
      />
    </div>
  );
}

TypeScript Support

Full TypeScript support included:

React
import { HomeInsightChat, HomeInsightChatProps } from 'home-insight-ai-sdk';

const props: HomeInsightChatProps = {
  apiKey: 'hi_live_abc123',
  theme: 'dark',
  position: 'bottom-right'
};

<HomeInsightChat {...props} />

Browser Support

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Next Steps

Support

Home Insight AI - Developer Portal