Streaming User Interfaces

​

Key Concepts

• Server Actions: Functions on the server that fetch specific data or perform operations as requested by the client, such as fetching vehicle details, pricing information, or customer profiles.
• Streamable UI Components: These components allow incremental rendering of UI elements as data becomes available. For example, as a customer interacts with a virtual dealership, details about selected vehicles, financing options, and insurance quotes can be streamed progressively.
• Client-side Integration: The client receives streamed data and dynamically updates the UI, similar to how a dealership’s system would update information in real-time as a customer browses different cars and services.

​

Workflows with Streaming UIs

​

Dynamic Pricing

function DynamicPricingStream({ vehicleId }) {
  const { data, error, isLoading } = useStream(() =>
    fetchDynamicPricing(vehicleId)
  );

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage />;

  return <PricingDetails data={data} />;
}

​

Customer Segmentation

function RecommendationsStream({ customerId }) {
  const { data, error, isLoading } = useStream(() =>
    fetchRecommendations(customerId)
  );

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage />;

  return <RecommendationsList data={data} />;
}

​

Customer Service & Support

function ChatbotStream({ query }) {
  const { data, error, isLoading } = useStream(() =>
    fetchChatbotResponse(query)
  );

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage />;

  return <ChatbotReply data={data} />;
}

​

Online Dealerships

import { createStreamUi } from "drivly-sdk";

const getVehicleDetails = async (VehicleId) => {
  return fetch(`/api/drivly/listing/${VehicleId}`).then((response) =>
    response.json()
  );
};

function VehicleDetailStream({ VehicleId }) {
  const { data, error, isLoading } = useStream(() =>
    getVehicleDetails(VehicleId)
  );

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage />;

  return (
    <div>
      <VehicleSpecs data={specs.vin} />
      <DynamicPricing data={pricing.vin} />
      <FinancingOptions data={payments.vin} />
    </div>
  );
}

<VehicleDetailStream vehicleId={selectedVehicleId} />

​

Ordering A New Build

import { createStreamableUI } from "drivly-sdk";

const getBuildOptions = async (modelId) => {
  return fetch(`/api/build/vin/${modelId}`).then((response) => response.json());
};

function BuildOptionsStream({ modelId }) {
  const { data, error, isLoading } = useStream(() => getBuildOptions(modelId));

  if (isLoading) return <LoadingSpinner />;
  if (error) return <ErrorMessage />;

  return (
    <div>
      <BuildConfigurations data={data.build.vin} />
      <ColorOptions data={data.colors} />
      <FeaturePackages data={data.specs.vin} />
    </div>
  );
}

<BuildOptionsStream modelId={selectedModelId} />

​

The Future of Streaming UI

• Hyper-Personalization: AI will understand and anticipate customer preferences on an individual level, providing tailored recommendations before the customer even asks.
• Seamless Transactions: Ability to handle complex negotiations, financing, and all deal paperwork seamlessly.
• Proactive Maintenance and Upgrades: Vehicles will be monitored continuously, with AGI predicting maintenance needs and suggesting upgrades proactively, ensuring optimal performance and customer satisfaction.

​

Insurers

• Real-Time Risk Assessment: Analyze driving data and conditions in real-time to provide dynamic insurance quotes, adjust premiums based on driving behavior, and streamline total loss replacements.
• Automated Claims Processing: From incident assessment to document processessing and payout, using vehicle data and accident reports.
• Fraud Detection: Predict and identify fraudulent patterns and anomalies, reducing the risk of insurance fraud.

​

Lenders

• Instant Loan Approval: Analyze credit history, vehicle inventory and financial data (DTI, PTI, LTV) to approve or adjust loan applications in real-time, offering personalized loan terms.
• Dynamic Interest Rates: Interest rates will be adjusted dynamically based on market conditions, borrower profiles, and risk assessments, optimizing both lender margins and borrower satisfaction.
• Automated Compliance: Ensure all financial documents and loan agreements comply with regulatory standards, reducing the burden on compliance officers.

​

Car Concierges

• Personalized Recommendations: AGI will provide tailored vehicle suggestions based on customer preferences, lifestyle, usage, and market trends.
• Proactive Service Scheduling: Schedule maintenance and repairs proactively based on vehicle data and predictive analytics.
• Customer Support: Virtual assistants will handle inquiries and provide support instantly, resolving issues and answering questions with human-like accuracy and empathy.