Streaming User Interfaces
Integrate Drivly AI Functions with Streaming User Interfaces (UIs)
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.
Initialization
Set up the listings interface with Drivly UI components that will be filled in data streams from the Drivly SDK.
import { createStreamUi } from "drivly-sdk";
Server Action
Fetch specific vehicles from Drivly APIs, such as YMM, vehicle specs, pricing, and availability for prime and sub-prime buyers.
const getVehicleDetails = async (VehicleId) => {
return fetch(`/api/drivly/listing/${VehicleId}`).then((response) =>
response.json()
);
};
Streaming Components
Stream vehicle details from Drivly’s API such as dynamic pricing, specs, history, availability and financing options as the customer interacts with the UI.
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>
);
}
Client-Side Rendering
Dynamically update the UI as the customer goes through a digital checkout experience.
<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.
Initialization
Prepare the build interface with basic UI components.
import { createStreamableUI } from "drivly-sdk";
Server Action
Fetch build options using Server Actions to get available build options from the Build API.
const getBuildOptions = async (modelId) => {
return fetch(`/api/build/vin/${modelId}`).then((response) => response.json());
};
Streaming Components
Stream
With Drivly’s Build API you can stream build details dynamically, creating a seamless customization experience.
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>
);
}
Client-Side Rendering
Dynamically update the UI to streamline the ordering process.
<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.