Smart Intake SDK

React + Vite + Tailwind v4 implementation of the Smart Intake split-pane experience. This package powers the applicant runtime, admin creation flow, and any embedded previews.

Installation

npm install smart-intake-sdk

Peer Dependencies: This package requires React 18+ or 19+:

npm install react react-dom

Quick Start

import { initSmartIntakeSDK } from 'smart-intake-sdk'
import 'smart-intake-sdk/style.css'

const { destroy } = initSmartIntakeSDK({
  target: '#smart-intake',
  config: {
    apiBaseUrl: 'https://your-api.example.com/api/v1',
    apiToken: 'your-api-token',
    flowPublicId: 'flow_abc123',
  },
})

// Clean up when done
destroy()

With React

import { useEffect, useRef } from 'react'
import { initSmartIntakeSDK } from 'smart-intake-sdk'
import 'smart-intake-sdk/style.css'

function SmartIntakeEmbed({ flowId, apiToken }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const sdkRef = useRef<{ destroy: () => void } | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    sdkRef.current = initSmartIntakeSDK({
      target: containerRef.current,
      config: {
        apiBaseUrl: 'https://your-api.example.com/api/v1',
        apiToken,
        flowPublicId: flowId,
      },
    })

    return () => {
      sdkRef.current?.destroy()
    }
  }, [flowId, apiToken])

  return <div ref={containerRef} style={{ height: '100vh' }} />
}

Configuration

The SDK accepts these configuration options:

type SmartIntakeSDKConfig = {
  // Required
  apiBaseUrl: string      // Your Smart Intake API endpoint
  apiToken: string        // Authentication token
  flowPublicId: string    // The flow to render

  // Optional
  appearance?: 'light' | 'dark'           // Color scheme (default: 'light')
  previewTheme?: 'light' | 'dark' | 'hybrid'  // Preview mode theme
  hideDevHeader?: boolean                  // Hide the dev toolbar
  cableUrl?: string                        // WebSocket URL override
  initialMessage?: string                  // Seed the conversation
  locale?: string                          // Locale code (default: 'en-US')
  theme?: ThemeOverrides                   // Custom theme overrides
}

Theme Customization

Override colors and typography to match your brand:

initSmartIntakeSDK({
  target: '#smart-intake',
  config: {
    apiBaseUrl: '...',
    apiToken: '...',
    flowPublicId: '...',
    appearance: 'dark',
    theme: {
      colors: {
        primary: '#111e6c',
        accentGreen: '#1db954',
      },
      typography: {
        fontFamily: '"Source Sans 3", system-ui',
      },
    },
  },
})

Seeding Conversations

Pre-populate the conversation with an initial message:

initSmartIntakeSDK({
  target: '#smart-intake',
  config: {
    flowPublicId: 'flow_123',
    initialMessage: 'Hi! I need help refinancing my mortgage.',
  },
})

Development

Setup

cd code/smart-intake-sdk
npm install
npm run dev

Visit http://localhost:5173 to see the split-pane shell rendered with mock data.

Scripts

| Command | Description | | --- | --- | | npm run dev | Launch Vite dev server | | npm run build | Type-check + build production bundle | | npm run preview | Preview the production build | | npm run lint | Run ESLint | | npm run storybook | Launch Storybook playground on port 6006 | | npm run build-storybook | Build static Storybook | | npm run test | Run Vitest unit tests |

Storybook

Run npm run storybook to explore components:

• Foundations/Theme Tokens – color palette, typography, spacing scale, icon set
• Surfaces/Split Pane – default, loading skeleton, and dark-mode variants
• Widgets/WidgetRenderer – renders any descriptor via the registry + chat host

API Reference

initSmartIntakeSDK(options)

Initialize and mount the SDK to a DOM element.

Parameters:

• target: HTMLElement | string - DOM element or CSS selector
• config: SmartIntakeSDKConfig - Configuration options

Returns: { destroy: () => void } - Cleanup function

SmartIntakeProvider

React context provider for advanced integrations:

import { SmartIntakeProvider } from 'smart-intake-sdk'

<SmartIntakeProvider config={{ apiBaseUrl: '...', apiToken: '...' }}>
  <YourApp />
</SmartIntakeProvider>

TypeScript

Full TypeScript support with exported types:

import type { SmartIntakeSDKConfig, SmartIntakeTheme, ThemeOverrides } from 'smart-intake-sdk'

Browser Support

• Chrome/Edge 88+
• Firefox 78+
• Safari 14+

License

MIT