> ## Documentation Index
> Fetch the complete documentation index at: https://docs.driv.ly/llms.txt
> Use this file to discover all available pages before exploring further.

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

```javascript theme={null}
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.

```javascript theme={null}
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.

```javascript theme={null}
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.

<Steps>
  <Step title="Initialization">
    Set up the listings interface with Drivly UI components that will be filled in data streams from the Drivly SDK.

    ```javascript theme={null}
    import { createStreamUi } from "drivly-sdk";
    ```
  </Step>

  <Step title="Server Action">
    Fetch specific vehicles from Drivly APIs, such as YMM, vehicle specs, pricing, and availability for prime and sub-prime buyers.

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

  <Step title="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.

    ```javascript theme={null}
    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>
      );
    }
    ```
  </Step>

  <Step title="Client-Side Rendering">
    Dynamically update the UI as the customer goes through a digital checkout experience.

    ```javascript theme={null}
    <VehicleDetailStream vehicleId={selectedVehicleId} />
    ```
  </Step>
</Steps>

***

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

<Steps>
  <Step title="Initialization">
    Prepare the build interface with basic UI components.

    ```javascript theme={null}
    import { createStreamableUI } from "drivly-sdk";
    ```
  </Step>

  <Step title="Server Action">
    Fetch build options using Server Actions to get available build options from the [Build API](/commerce/build).

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

  <Step title="Streaming Components">
    Stream

    With Drivly's [Build API](/commerce/build) you can stream build details dynamically, creating a seamless customization experience.

    ```javascript theme={null}
    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>
      );
    }
    ```
  </Step>

  <Step title="Client-Side Rendering">
    Dynamically update the UI to streamline the ordering process.

    ```javascript theme={null}
    <BuildOptionsStream modelId={selectedModelId} />
    ```
  </Step>
</Steps>

<Info>[Drivly UI](/developers/drivly-ui) – coming soon!</Info>

***

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