Streaming User Interfaces

Drivly AI enables real-time, dynamic interactions for creating responsive and engaging UIs. Let’s explore how Streaming UIs can enhance various automotive commerce workflows.

​

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

Drivly’s AI functions with Streaming User Interfaces leverages real-time API data and analytics to provide seamless, responsive, and highly personalized experiences.

Let’s explore a few examples:

​

Dynamic Pricing

Stream real-time pricing adjustments based on market conditions, inventory levels, and customer demand.

By using AI function Predictive Analytics, you can stream pricing data dynamically using the DrivlyPricing component.

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

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

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

​

Customer Segmentation

Personalizing the customer experience based on their behavior and preferences.

Using AI Function Segmentation you can stream personalized recommendations using the Recommendations component.

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

Provide instant support and pass along key information to customers through natural language (NLP).

By using AI function NLP, you can stream pricing data dynamically using the ChatbotResponse component.

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

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

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

​

Online Dealerships

With Streaming UI you can use componenents to create a personalized listings experience based on consumer credit profiles.

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

Imagine a customer ordering a new car. As they select different makes, models, colors, and features, each choice updates instantly based on availability and lead times.

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

As we approach AGI-level capabilities, automotive experience will transcend today’s possibilities:

• 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.