:root {
  --story-board-background: #f9f8fc;
  --story-board-border: #e2e2e7;
  --hero-background: #fbfbfc;
}

.dark {
  --story-board-background: #1a1a1a;
  --story-board-border: #333;
  --hero-background: #1a1a1a;
}

.storyBoard {
  padding: 32px 24px;
  background-color: var(--story-board-background);
  font-size: 16px;
  line-height: 36px;
  border-radius: 4px;
}

.heroContent {
  background-color: var(--hero-background);
}


.mint-pointer-events-none {
    pointer-events: none
}
.mint-absolute {
    position: absolute
}
.mint-relative {
    position: relative
}
.mint-inset-0 {
    inset: 0px
}
.mint-my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}
.mint-mt-0 {
    margin-top: 0px
}
.mint-mt-0\.5 {
    margin-top: 0.125rem
}
.mint-flex {
    display: flex
}
.mint-grid {
    display: grid
}
.mint-h-4 {
    height: 1rem
}
.mint-h-5 {
    height: 1.25rem
}
.mint-h-auto {
    height: auto
}
.mint-w-3 {
    width: 0.75rem
}
.mint-w-3\.5 {
    width: 0.875rem
}
.mint-w-4 {
    width: 1rem
}
.mint-w-5 {
    width: 1.25rem
}
.mint-flex-1 {
    flex: 1 1 0%
}
.mint-flex-none {
    flex: none
}
.mint-content-center {
    align-content: center
}
.mint-items-start {
    align-items: flex-start
}
.mint-justify-center {
    justify-content: center
}
.mint-space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}
.mint-overflow-hidden {
    overflow: hidden
}
.mint-text-wrap {
    text-wrap: wrap
}
.mint-rounded-xl {
    border-radius: 0.75rem
}
.mint-border {
    border-width: 1px
}
.mint-border-amber-500\/20 {
    border-color: rgb(245 158 11 / 0.2)
}
.mint-border-black\/5 {
    border-color: rgb(0 0 0 / 0.05)
}
.mint-border-emerald-500\/20 {
    border-color: rgb(16 185 129 / 0.2)
}
.mint-border-sky-500\/20 {
    border-color: rgb(14 165 233 / 0.2)
}
.mint-border-zinc-500\/20 {
    border-color: rgb(113 113 122 / 0.2)
}
.mint-bg-amber-50\/50 {
    background-color: rgb(255 251 235 / 0.5)
}
.mint-bg-emerald-50\/50 {
    background-color: rgb(236 253 245 / 0.5)
}
.mint-bg-gray-50\/50 {
    background-color: rgb(249 250 251 / 0.5)
}
.mint-bg-sky-50\/50 {
    background-color: rgb(240 249 255 / 0.5)
}
.mint-bg-zinc-50\/50 {
    background-color: rgb(250 250 250 / 0.5)
}
.mint-px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.mint-py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}
.mint-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.mint-text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity))
}
.mint-text-amber-900 {
    --tw-text-opacity: 1;
    color: rgb(120 53 15 / var(--tw-text-opacity))
}
.mint-text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity))
}
.mint-text-emerald-900 {
    --tw-text-opacity: 1;
    color: rgb(6 78 59 / var(--tw-text-opacity))
}
.mint-text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity))
}
.mint-text-sky-500 {
    --tw-text-opacity: 1;
    color: rgb(14 165 233 / var(--tw-text-opacity))
}
.mint-text-sky-900 {
    --tw-text-opacity: 1;
    color: rgb(12 74 110 / var(--tw-text-opacity))
}
.mint-text-zinc-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity))
}
.mint-text-zinc-900 {
    --tw-text-opacity: 1;
    color: rgb(24 24 27 / var(--tw-text-opacity))
}
.\[mask-image\:linear-gradient$0deg\2c \#fff\2c rgba\(255\2c 255\2c 255\2c 0\.6$\)\] {
    mask-image: linear-gradient(0deg,#fff,rgba(255,255,255,0.6))
}
.dark\:mint-border-amber-500\/30:is(.dark *) {
    border-color: rgb(245 158 11 / 0.3)
}
.dark\:mint-border-emerald-500\/30:is(.dark *) {
    border-color: rgb(16 185 129 / 0.3)
}
.dark\:mint-border-sky-500\/30:is(.dark *) {
    border-color: rgb(14 165 233 / 0.3)
}
.dark\:mint-border-white\/5:is(.dark *) {
    border-color: rgb(255 255 255 / 0.05)
}
.dark\:mint-border-zinc-500\/30:is(.dark *) {
    border-color: rgb(113 113 122 / 0.3)
}
.dark\:mint-bg-amber-500\/10:is(.dark *) {
    background-color: rgb(245 158 11 / 0.1)
}
.dark\:mint-bg-emerald-500\/10:is(.dark *) {
    background-color: rgb(16 185 129 / 0.1)
}
.dark\:mint-bg-gray-800\/25:is(.dark *) {
    background-color: rgb(31 41 55 / 0.25)
}
.dark\:mint-bg-sky-500\/10:is(.dark *) {
    background-color: rgb(14 165 233 / 0.1)
}
.dark\:mint-bg-zinc-500\/10:is(.dark *) {
    background-color: rgb(113 113 122 / 0.1)
}
.dark\:mint-text-amber-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity))
}
.dark\:mint-text-amber-300\/80:is(.dark *) {
    color: rgb(252 211 77 / 0.8)
}
.dark\:mint-text-emerald-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(167 243 208 / var(--tw-text-opacity))
}
.dark\:mint-text-emerald-400\/80:is(.dark *) {
    color: rgb(52 211 153 / 0.8)
}
.dark\:mint-text-green-400\/80:is(.dark *) {
    color: rgb(74 222 128 / 0.8)
}
.dark\:mint-text-sky-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(186 230 253 / var(--tw-text-opacity))
}
.dark\:mint-text-zinc-200:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity))
}
.dark\:mint-text-zinc-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(212 212 216 / var(--tw-text-opacity))
}
.dark\:\[mask-image\:linear-gradient$0deg\2c rgba\(255\2c 255\2c 255\2c 0\.1$\2c rgba$255\2c 255\2c 255\2c 0\.5$\)\]:is(.dark *) {
    mask-image: linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))
}

const template = `---
title: '<Title>'
---


 <code class="p-2 flex flex-wrap items-center justify-start">
 GET
 https://listings.vin?<QueryString>
 </code>


<ParamFields>

<ResponseExample>
<ResponseOutput>
</ResponseExample>
`

const parameter = (key, type, description) => {
 return `<ParamField query="${key}" type="${type}">
 ${description}
</ParamField>
`
}

const allFields = [
 {
 name: 'vehicle.year',
 humanName: 'Year',
 type: 'number',
 exampleValue: '2019',
 description:
 'The year of the vehicle. Example: 2019. If you want to search for a range of years, you can use the format 2019-2021.',
 },
 {
 name: 'vehicle.make',
 humanName: 'Make',
 type: 'string',
 exampleValue: 'Toyota',
 description: 'The make of the vehicle. Example: Toyota.',
 },
 {
 name: 'vehicle.model',
 humanName: 'Model',
 type: 'string',
 exampleValue: 'Corolla',
 description: 'The model of the vehicle. Example: Corolla.',
 },
 {
 name: 'vehicle.trim',
 humanName: 'Trim',
 type: 'string',
 exampleValue: 'LE',
 description: 'The trim of the vehicle. Example: LE.',
 },
 {
 name: 'vehicle.bodyStyle',
 humanName: 'Body Style',
 type: 'string',
 exampleValue: 'Truck',
 description: 'The body style of the vehicle. Example: Truck.',
 },
 {
 name: 'vehicle.transmission',
 humanName: 'Transmission',
 type: 'string',
 exampleValue: 'Automatic',
 description: 'The transmission of the vehicle. Example: Automatic.',
 },
 {
 name: 'vehicle.driveTrain',
 humanName: 'Drive Train',
 type: 'string',
 exampleValue: 'FWD',
 description: 'The drive type of the vehicle. Example: FWD.',
 },
 {
 name: 'vehicle.exteriorColor',
 humanName: 'Exterior Color',
 type: 'string',
 exampleValue: 'Black',
 description: 'The exterior color of the vehicle. Example: Black.',
 },
 {
 name: 'vehicle.interiorColor',
 humanName: 'Interior Color',
 type: 'string',
 exampleValue: 'Black',
 description: 'The interior color of the vehicle. Example: Black.',
 },
 {
 name: 'retailListing.miles',
 humanName: 'Mileage',
 type: 'number',
 exampleValue: '50000',
 description:
 'The mileage of the vehicle. Example: 50000. If you want to search for a range of mileage, you can use the format 50000-100000.',
 },
 {
 name: 'retailListing.price',
 humanName: 'Price',
 type: 'number',
 exampleValue: '20000',
 description:
 'The price of the vehicle. Example: 20000. If you want to search for a range of prices, you can use the format 20000-30000.',
 },
]

// For each field, generate a page with the field as a query parameter.
// Then mix and match the fields to generate more examples. e.g. year and make, year, make, model, etc.

const fs = require('fs')
const path = require('path')

const generateExamples = async (fields) => {
 const examples = []
 const fieldNames = fields.map((field) => field.name)

 const generate = async (fieldNames, title) => {
 const fields = allFields.filter(x => fieldNames.includes(x.name))

 const queryString = new URLSearchParams({
 ...Object.fromEntries(fields.map((field) => [field.name, field.exampleValue])),
 }).toString()

 const realData = await fetch(`https://listings.vin?${queryString}`)
 .then((r) => r.json())
 .then((d) => ({
 data: d.data,
 timings: d.timings,
 facets: d.facets,
 }))

 // Remove all but one result in the data array
 realData.data = realData.data.slice(0, 1)

 const responseOutput = '```json\n' + JSON.stringify(realData, null, 2) + '\n```'

 const example = template
 .replace('<Title>', `Search by ${title}`)
 .replace('<QueryString>', queryString)
 .replace('<ParamFields>', fields.map((field) => parameter(field.name, field.type, field.description)).join('\n'))
 .replace('<ResponseOutput>', responseOutput)

 examples.push({
 title: `Search by ${title}`,
 content: example,
 })
 }

 // Generate examples for each field
 await generate(
 [
 'vehicle.year'
 ],
 'Year'
 )

 await generate(
 [
 'vehicle.year',
 'vehicle.make'
 ],
 'Year & Make'
 )

 await generate(
 [
 'vehicle.year',
 'vehicle.make',
 'vehicle.model'
 ],
 'Year, Make, & Model'
 )

 await generate(
 [
 'vehicle.year',
 'vehicle.make',
 'vehicle.model',
 'vehicle.trim'
 ],
 'Year, Make, Model, & Trim'
 )

 await generate(
 [
 'vehicle.bodyStyle'
 ],
 'Body Style'
 )

 await generate(
 [
 'vehicle.transmission'
 ],
 'Transmission'
 )

 await generate(
 [
 'vehicle.exteriorColor'
 ],
 'Exterior Color'
 )

 return examples
}

const main = async () => {
 const examples = await generateExamples(allFields)

 // Write to ./data/listing/reference/examples/search

 const examplesDir = path.join(__dirname, 'data/vehicle/listings/reference/examples/search')

 if (!fs.existsSync(examplesDir)) {
 fs.mkdirSync(examplesDir, { recursive: true })
 }

 const allFiles = []

 examples.forEach((example) => {
 const filename = example.title.toLowerCase().replace(/ /g, '-').replaceAll(',', '') + '.mdx'
 allFiles.push(filename)

 fs.writeFileSync(path.join(examplesDir, filename), example.content)
 })

 // Output a list of all files
 console.log(
 JSON.stringify(
 allFiles.map(
 (x) => `data/vehicle/listings/reference/examples/search/${x.replace('.mdx', '')}`
 ),
 null,
 2
 )
 )
}

main()

const Ajv = require("ajv")
const fs = require("fs")
const path = require("path")

// Initialize AJV
const ajv = new Ajv({ allErrors: true, strict: false })

// Function to load JSON data from file
function loadJsonFile(filePath) {
  return JSON.parse(fs.readFileSync(filePath, 'utf-8'))
}

// Load the schema and compile the validator
const commerceSchema = loadJsonFile('./Commerce.json')

let schemas = Object.keys(commerceSchema.components.schemas).map(k => {
  const schema = JSON.parse(
    JSON.stringify(commerceSchema.components.schemas[k]).replaceAll(
      '#/components/schemas/',
      ''
    )
  )

  // Add the schema to AJV
  return ajv.addSchema(schema, k)
})

// Validate each JSON file in the examples directory
fs.readdir('./examples/', (err, files) => {
  if (err) {
    console.error("Failed to list contents of directory: " + err)
    return
  }

  // Output is a key value map of filename and validation result
  const output = {}

  files.forEach(file => {
    const filePath = path.join('./examples/', file)
    const data = loadJsonFile(filePath)

    // Ignore list
    // These files dont play nice with AJV, and we cant validate them.
    const ignore = [
      'AI.json',           'Account.json',
      'Analytics.json',    'Call.json',
      'Company.json',      'Consumer.json',
      'Contact.json',      'Credit.json',
      'CreditApp.json',    'Deal.json',
      'Dealer.json',       'InsurancePolicy.json',
      'Invoice.json',      'Lead.json',
      'Listing.json',      'Location.json',
      'Message.json',      'Sale.json',
      'SalesRep.json',     'Search.json',
      'Service.json',      'ServiceOrder.json',
      'TaxesAndFees.json', 'Trade.json',
      'Vehicle.json',      'VehicleSpec.json',
      'WebEvent.json'
    ]

    if (ignore.includes(file)) {
      return
    }

    // Compile the validator
    ajv.removeSchema(file.split('.')[0])

    if (!commerceSchema.components.schemas[file.split('.')[0]]) {
      console.error(`Schema for ${file} not found.`)
      return
    }

    const validate = ajv.compile(
      JSON.parse(
        JSON.stringify(commerceSchema.components.schemas[file.split('.')[0]])
        .replaceAll(
          '#/components/schemas/',
          ''
        )
      )
    )

    // Validate the data
    const valid = validate(data)
    if (!valid) {
      output[file] = validate.errors
    } else {
      output[file] = 'valid'
    }
  })

  console.log(
    JSON.stringify(output, null, 2)
  )
})

Listings Search Experiences

Vehicle Details Pages

Complete Digital Checkout

Pre-Approval & Credit Applications

Payment Calculators

Component Libraries

Everything you need to build modern automotive experiences.

Drivly UI

Drivly Docs

Learn how to authenticate your requests with Drivly's APIs

Auth

Authentication

The official Drivly SDK for JavaScript, available for browsers and Node.js backends.

Drivly SDK

Get real-time notifications about events in your Drivly account.

Webhooks

Get Started

Data

Services

Commerce

Join waitlist

Contact

Introduction

Learn about best practices for using the Drivly SDK and APIs.

Best Practices

Understanding the basics of a Vehicle Identification Number (VIN).

What is a VIN?

Understanding the basics of a Squish Vehicle Identification Number (VIN).

What is a Squish VIN?

A suite of AI-powered workflows and tools to help you streamline your automotive business.

Overview

Drivly's framework to build, deploy, and monitor production-ready AI-powered workflows.

AI Functions

The possibilites are unlimited – here are a few examples of what you can build with Drivly AI.

Use Cases

The Future of Workflow Automation

Transforming Automotive Commerce with AI

Integrate Drivly AI Functions with Streaming User Interfaces (UIs)

Streaming User Interfaces

Learn about function composition and how it works to create seamless, multi-step commerce interactions.

Function Composition

Everything you need to build, buy, sell, and move vehicles.

Build

Inventory management, listing, and pricing

Sell

Trade

Vehicle sourcing, selling, and management

Broker

Dropship

Invoices

Collection of APIs that provide access to a wide range of automotive data.

Access auction insights, historical data, current listings, and sales results.

Auction

Auction Data

Access detailed dealership information, inventory, pricing, and contact details.

Dealer

Dealer Data

Learn about F&I Data and how it can be used.

Finance & Insurance Data

Get current interest rates for various automotive financial products.

Current Interest Rates

Current Interest Rates Data

Access loan payoff data for customers, including payoff amount and lenders.

Loan Payoff

Loan Payoff Data

Get information about the incentives offered by various OEMs.

OEM Incentives

OEM Incentives Data

Get estimated monthly payments, taxes, and fees for vehicle financing.

Payments

Payments Data

Get proof of active insurance policy for a vehicle by VIN.

Proof of Insurance

Proof of Insurance Data

Access and manage vehicle data to enhance connectivity and functionality.

IoT Data

Learn how to search for vehicles using the Listings Search API.

Listings

Listings Search

Access detailed vehicle manufacturer data and historical insights.

Manufacturer

Manufacturer Data

Access real-time and historical data related to the automotive market.

Market

Market Data

Access data to help diagnose and repair issues with a vehicle.

Service

Service Data

Learn about the Title & Registration APIs and its purpose.

Title & Registration

Title & Registration Data

Get estimated shipping costs, distances, and ETAs for vehicle transport.

Transport

Transport Data

Learn about Vehicle Data and how it can be used.

Vehicle Data

Access digital brochures, manuals, and other documentation related to a vehicle.

Brochures & Manuals

Brochures & Manuals Data

Access detailed vehicle history reports for a vehicle by VIN.

History Reports

Access vehicle listings currently available for sale, including pricing trends and more.

Get Started

Developers

Education

Drivly UI

Component Libraries

Listings Search Experiences

Vehicle Details Pages

Complete Digital Checkout

Pre-Approval & Credit Applications

Payment Calculators

Get Started

Developers

Education

​Component Libraries

​Listings Search Experiences

​Vehicle Details Pages

​Complete Digital Checkout

​Pre-Approval & Credit Applications

​Payment Calculators

Component Libraries

Listings Search Experiences

Vehicle Details Pages

Complete Digital Checkout

Pre-Approval & Credit Applications

Payment Calculators