[{"data":1,"prerenderedAt":895},["ShallowReactive",2],{"page:\u002Fdocs\u002F5.x\u002Ftutorials\u002Fquickstart":3},{"id":4,"title":5,"body":6,"description":876,"extension":877,"frontmatter":878,"heading":5,"meta":886,"navigation":888,"order":882,"path":889,"seo":890,"sitemap":891,"source":892,"stem":893,"__hash__":894},"docs\u002Fdocs\u002F5.x\u002Ftutorials\u002Fquickstart.md","Your first TypeScript client from an API spec",{"type":7,"value":8,"toc":865},"minimark",[9,13,834,838],[10,11,12],"p",{},"Generate TypeScript types and an Axios client for one Petstore operation. You need Node.js 22.22 or higher and npm. You'll inspect the generated operation and its types.",[14,15,17,22,101,105,112,468,474,478,484,685,696,709,713,726,738,763,768,772,790,812,831],"steps",{"level":16},"2",[18,19,21],"h2",{"id":20},"_1-create-a-project","Create a project",[23,24,29],"pre",{"language":25,"filename":26,"code":27,"class":28},"shell","Terminal","mkdir kubb-first-client\ncd kubb-first-client\nnpm init -y\nnpm pkg set type=module\nnpm install -D kubb typescript @kubb\u002Fplugin-ts @kubb\u002Fplugin-axios\nnpm install axios","highlights",[30,31,33,46,47,46,54,46,62,46,76,46,94],"code",{"class":32},"language-shell",[34,35,38,42],"span",{"class":36,"style":37},"line","display: inline",[34,39,41],{"style":40},"color:#6f42c1;--hls-dark:#b392f0","mkdir ",[34,43,45],{"style":44},"color:#24292e;--hls-dark:#e1e4e8","kubb-first-client","\n",[34,48,49,52],{"class":36,"style":37},[34,50,51],{"style":40},"cd ",[34,53,45],{"style":44},[34,55,56,59],{"class":36,"style":37},[34,57,58],{"style":40},"npm ",[34,60,61],{"style":44},"init -y",[34,63,64,66,69,73],{"class":36,"style":37},[34,65,58],{"style":40},[34,67,68],{"style":44},"pkg set type",[34,70,72],{"style":71},"color:#d73a49;--hls-dark:#f97583","=",[34,74,75],{"style":44},"module",[34,77,78,80,83,86,89,91],{"class":36,"style":37},[34,79,58],{"style":40},[34,81,82],{"style":44},"install -D kubb typescript ",[34,84,85],{"style":44},"@",[34,87,88],{"style":44},"kubb\u002Fplugin-ts ",[34,90,85],{"style":44},[34,92,93],{"style":44},"kubb\u002Fplugin-axios",[34,95,96,98],{"class":36,"style":37},[34,97,58],{"style":40},[34,99,100],{"style":44},"install axios",[18,102,104],{"id":103},"_2-add-the-specification","Add the specification",[10,106,107,108,111],{},"Create ",[30,109,110],{},"petStore.yaml"," in the project root:",[23,113,116],{"language":114,"filename":110,"code":115,"class":28},"yaml","openapi: 3.0.3\ninfo:\n  title: Petstore\n  version: 1.0.0\nservers:\n  - url: https:\u002F\u002Fpetstore.swagger.io\u002Fv2\npaths:\n  \u002Fpet\u002F{petId}:\n    get:\n      operationId: getPetById\n      parameters:\n        - name: petId\n          in: path\n          required: true\n          schema:\n            type: integer\n      responses:\n        '200':\n          description: A pet\n          content:\n            application\u002Fjson:\n              schema:\n                $ref: '#\u002Fcomponents\u002Fschemas\u002FPet'\ncomponents:\n  schemas:\n    Pet:\n      type: object\n      required: [id, name]\n      properties:\n        id:\n          type: integer\n        name:\n          type: string",[30,117,119,46,131,46,139,46,153,46,165,46,172,46,185,46,192,46,201,46,211,46,224,46,233,46,246,46,259,46,271,46,280,46,293,46,302,46,312,46,324,46,333,46,342,46,351,46,364,46,371,46,380,46,389,46,400,46,422,46,431,46,439,46,449,46,457],{"class":118},"language-yaml",[34,120,121,125,128],{"class":36,"style":37},[34,122,124],{"style":123},"color:#005cc5;--hls-dark:#79b8ff","openapi",[34,126,127],{"style":71},": ",[34,129,130],{"style":123},"3.0.3",[34,132,133,136],{"class":36,"style":37},[34,134,135],{"style":123},"info",[34,137,138],{"style":71},":",[34,140,141,144,147,149],{"class":36,"style":37},[34,142,143],{"style":71},"  ",[34,145,146],{"style":123},"title",[34,148,127],{"style":71},[34,150,152],{"style":151},"color:#032f62;--hls-dark:#9ecbff","Petstore",[34,154,155,157,160,162],{"class":36,"style":37},[34,156,143],{"style":151},[34,158,159],{"style":123},"version",[34,161,127],{"style":71},[34,163,164],{"style":123},"1.0.0",[34,166,167,170],{"class":36,"style":37},[34,168,169],{"style":123},"servers",[34,171,138],{"style":71},[34,173,174,177,180,182],{"class":36,"style":37},[34,175,176],{"style":71},"  - ",[34,178,179],{"style":123},"url",[34,181,127],{"style":71},[34,183,184],{"style":151},"https:\u002F\u002Fpetstore.swagger.io\u002Fv2",[34,186,187,190],{"class":36,"style":37},[34,188,189],{"style":123},"paths",[34,191,138],{"style":71},[34,193,194,196,199],{"class":36,"style":37},[34,195,143],{"style":71},[34,197,198],{"style":123},"\u002Fpet\u002F{petId}",[34,200,138],{"style":71},[34,202,203,206,209],{"class":36,"style":37},[34,204,205],{"style":71},"    ",[34,207,208],{"style":123},"get",[34,210,138],{"style":71},[34,212,213,216,219,221],{"class":36,"style":37},[34,214,215],{"style":71},"      ",[34,217,218],{"style":123},"operationId",[34,220,127],{"style":71},[34,222,223],{"style":151},"getPetById",[34,225,226,228,231],{"class":36,"style":37},[34,227,215],{"style":151},[34,229,230],{"style":123},"parameters",[34,232,138],{"style":71},[34,234,235,238,241,243],{"class":36,"style":37},[34,236,237],{"style":71},"        - ",[34,239,240],{"style":123},"name",[34,242,127],{"style":71},[34,244,245],{"style":151},"petId",[34,247,248,251,254,256],{"class":36,"style":37},[34,249,250],{"style":151},"          ",[34,252,253],{"style":123},"in",[34,255,127],{"style":71},[34,257,258],{"style":151},"path",[34,260,261,263,266,268],{"class":36,"style":37},[34,262,250],{"style":151},[34,264,265],{"style":123},"required",[34,267,127],{"style":71},[34,269,270],{"style":123},"true",[34,272,273,275,278],{"class":36,"style":37},[34,274,250],{"style":123},[34,276,277],{"style":123},"schema",[34,279,138],{"style":71},[34,281,282,285,288,290],{"class":36,"style":37},[34,283,284],{"style":71},"            ",[34,286,287],{"style":123},"type",[34,289,127],{"style":71},[34,291,292],{"style":151},"integer",[34,294,295,297,300],{"class":36,"style":37},[34,296,215],{"style":151},[34,298,299],{"style":123},"responses",[34,301,138],{"style":71},[34,303,304,307,310],{"class":36,"style":37},[34,305,306],{"style":71},"        ",[34,308,309],{"style":123},"'200'",[34,311,138],{"style":71},[34,313,314,316,319,321],{"class":36,"style":37},[34,315,250],{"style":71},[34,317,318],{"style":123},"description",[34,320,127],{"style":71},[34,322,323],{"style":151},"A pet",[34,325,326,328,331],{"class":36,"style":37},[34,327,250],{"style":151},[34,329,330],{"style":123},"content",[34,332,138],{"style":71},[34,334,335,337,340],{"class":36,"style":37},[34,336,284],{"style":71},[34,338,339],{"style":123},"application\u002Fjson",[34,341,138],{"style":71},[34,343,344,347,349],{"class":36,"style":37},[34,345,346],{"style":71},"              ",[34,348,277],{"style":123},[34,350,138],{"style":71},[34,352,353,356,359,361],{"class":36,"style":37},[34,354,355],{"style":71},"                ",[34,357,358],{"style":123},"$ref",[34,360,127],{"style":71},[34,362,363],{"style":151},"'#\u002Fcomponents\u002Fschemas\u002FPet'",[34,365,366,369],{"class":36,"style":37},[34,367,368],{"style":123},"components",[34,370,138],{"style":71},[34,372,373,375,378],{"class":36,"style":37},[34,374,143],{"style":71},[34,376,377],{"style":123},"schemas",[34,379,138],{"style":71},[34,381,382,384,387],{"class":36,"style":37},[34,383,205],{"style":71},[34,385,386],{"style":123},"Pet",[34,388,138],{"style":71},[34,390,391,393,395,397],{"class":36,"style":37},[34,392,215],{"style":71},[34,394,287],{"style":123},[34,396,127],{"style":71},[34,398,399],{"style":151},"object",[34,401,402,404,406,408,411,414,417,419],{"class":36,"style":37},[34,403,215],{"style":151},[34,405,265],{"style":123},[34,407,127],{"style":71},[34,409,410],{"style":123},"[",[34,412,413],{"style":151},"id",[34,415,416],{"style":71},", ",[34,418,240],{"style":151},[34,420,421],{"style":123},"]",[34,423,424,426,429],{"class":36,"style":37},[34,425,215],{"style":123},[34,427,428],{"style":123},"properties",[34,430,138],{"style":71},[34,432,433,435,437],{"class":36,"style":37},[34,434,306],{"style":71},[34,436,413],{"style":123},[34,438,138],{"style":71},[34,440,441,443,445,447],{"class":36,"style":37},[34,442,250],{"style":71},[34,444,287],{"style":123},[34,446,127],{"style":71},[34,448,292],{"style":151},[34,450,451,453,455],{"class":36,"style":37},[34,452,306],{"style":151},[34,454,240],{"style":123},[34,456,138],{"style":71},[34,458,459,461,463,465],{"class":36,"style":37},[34,460,250],{"style":71},[34,462,287],{"style":123},[34,464,127],{"style":71},[34,466,467],{"style":151},"string",[10,469,470,471,473],{},"The ",[30,472,223],{}," operation accepts a pet ID and returns a pet with an ID and name.",[18,475,477],{"id":476},"_3-configure-generation","Configure generation",[10,479,107,480,483],{},[30,481,482],{},"kubb.config.ts"," beside the specification:",[23,485,488],{"language":486,"filename":482,"code":487,"class":28},"typescript","import { defineConfig } from 'kubb\u002Fconfig'\nimport { pluginTs } from '@kubb\u002Fplugin-ts'\nimport { pluginAxios } from '@kubb\u002Fplugin-axios'\n\nexport default defineConfig({\n  input: '.\u002FpetStore.yaml',\n  output: { path: '.\u002Fsrc\u002Fgen', clean: true },\n  plugins: [\n    pluginTs({ output: { path: 'models' } }),\n    pluginAxios({ output: { path: 'clients' } }),\n  ],\n})",[30,489,491,46,511,46,527,46,543,46,545,46,559,46,574,46,607,46,618,46,646,46,672,46,680],{"class":490},"language-typescript",[34,492,493,496,499,502,505,508],{"class":36,"style":37},[34,494,495],{"style":71},"import ",[34,497,498],{"style":123},"{ ",[34,500,501],{"style":44},"defineConfig ",[34,503,504],{"style":123},"} ",[34,506,507],{"style":71},"from ",[34,509,510],{"style":151},"'kubb\u002Fconfig'",[34,512,513,515,517,520,522,524],{"class":36,"style":37},[34,514,495],{"style":71},[34,516,498],{"style":123},[34,518,519],{"style":44},"pluginTs ",[34,521,504],{"style":123},[34,523,507],{"style":71},[34,525,526],{"style":151},"'@kubb\u002Fplugin-ts'",[34,528,529,531,533,536,538,540],{"class":36,"style":37},[34,530,495],{"style":71},[34,532,498],{"style":123},[34,534,535],{"style":44},"pluginAxios ",[34,537,504],{"style":123},[34,539,507],{"style":71},[34,541,542],{"style":151},"'@kubb\u002Fplugin-axios'",[34,544],{"class":36,"style":37},[34,546,547,550,553,556],{"class":36,"style":37},[34,548,549],{"style":71},"export ",[34,551,552],{"style":71},"default ",[34,554,555],{"style":40},"defineConfig",[34,557,558],{"style":123},"({",[34,560,561,563,566,568,571],{"class":36,"style":37},[34,562,143],{"style":123},[34,564,565],{"style":123},"input",[34,567,127],{"style":71},[34,569,570],{"style":151},"'.\u002FpetStore.yaml'",[34,572,573],{"style":71},",",[34,575,576,578,581,583,585,587,589,592,594,597,599,602,605],{"class":36,"style":37},[34,577,143],{"style":71},[34,579,580],{"style":123},"output",[34,582,127],{"style":71},[34,584,498],{"style":123},[34,586,258],{"style":123},[34,588,127],{"style":71},[34,590,591],{"style":151},"'.\u002Fsrc\u002Fgen'",[34,593,416],{"style":71},[34,595,596],{"style":123},"clean",[34,598,127],{"style":71},[34,600,601],{"style":123},"true ",[34,603,604],{"style":123},"}",[34,606,573],{"style":71},[34,608,609,611,614,616],{"class":36,"style":37},[34,610,143],{"style":71},[34,612,613],{"style":123},"plugins",[34,615,127],{"style":71},[34,617,410],{"style":123},[34,619,620,622,625,628,630,632,634,636,638,641,644],{"class":36,"style":37},[34,621,205],{"style":123},[34,623,624],{"style":40},"pluginTs",[34,626,627],{"style":123},"({ ",[34,629,580],{"style":123},[34,631,127],{"style":71},[34,633,498],{"style":123},[34,635,258],{"style":123},[34,637,127],{"style":71},[34,639,640],{"style":151},"'models' ",[34,642,643],{"style":123},"} })",[34,645,573],{"style":71},[34,647,648,650,653,655,657,659,661,663,665,668,670],{"class":36,"style":37},[34,649,205],{"style":71},[34,651,652],{"style":40},"pluginAxios",[34,654,627],{"style":123},[34,656,580],{"style":123},[34,658,127],{"style":71},[34,660,498],{"style":123},[34,662,258],{"style":123},[34,664,127],{"style":71},[34,666,667],{"style":151},"'clients' ",[34,669,643],{"style":123},[34,671,573],{"style":71},[34,673,674,676,678],{"class":36,"style":37},[34,675,143],{"style":71},[34,677,421],{"style":123},[34,679,573],{"style":71},[34,681,682],{"class":36,"style":37},[34,683,684],{"style":123},"})",[10,686,687,688,691,692,695],{},"This configuration writes types to ",[30,689,690],{},"src\u002Fgen\u002Fmodels"," and the client to ",[30,693,694],{},"src\u002Fgen\u002Fclients",".",[697,698,700,701,704,705,708],"blockquote",{"as":699},"warning","Keep ",[30,702,703],{},"src\u002Fgen"," dedicated to generated files. ",[30,706,707],{},"clean: true"," removes its contents before each run.",[18,710,712],{"id":711},"_4-generate-the-client","Generate the client",[23,714,716],{"language":25,"filename":26,"code":715,"class":28},"npx kubb generate",[30,717,718],{"class":32},[34,719,720,723],{"class":36,"style":37},[34,721,722],{"style":40},"npx ",[34,724,725],{"style":44},"kubb generate",[10,727,728,729,732,733,735,736,695],{},"Kubb reports a successful build and writes this tree. Open ",[30,730,731],{},"src\u002Fgen\u002Fclients\u002FgetPetById.ts"," and notice that ",[30,734,223],{}," accepts typed path parameters and returns a typed result. Its imported types live in ",[30,737,690],{},[739,740],"file-tree",{":tree":741},[742],{"name":743,"type":744,"children":745},"src","dir",[746],{"name":747,"type":744,"children":748},"gen",[749,751,756],{"name":750,"type":744},".kubb",{"name":752,"type":744,"children":753},"clients",[754],{"name":755},"getPetById.ts",{"name":757,"type":744,"children":758},"models",[759,761],{"name":760},"GetPetById.ts",{"name":762},"Pet.ts",[10,764,470,765,767],{},[30,766,750],{}," directory holds shared client and serialization helpers.",[18,769,771],{"id":770},"_5-regenerate-after-a-change","Regenerate after a change",[10,773,774,775,778,779,781,782,784,785,787,788,138],{},"Add a ",[30,776,777],{},"tag"," property to the ",[30,780,386],{}," schema in ",[30,783,110],{},", alongside ",[30,786,413],{}," and ",[30,789,240],{},[23,791,794],{"language":114,"filename":792,"code":793,"class":28},"petStore.yaml — properties","tag:\n  type: string",[30,795,796,46,802],{"class":118},[34,797,798,800],{"class":36,"style":37},[34,799,777],{"style":123},[34,801,138],{"style":71},[34,803,804,806,808,810],{"class":36,"style":37},[34,805,143],{"style":71},[34,807,287],{"style":123},[34,809,127],{"style":71},[34,811,467],{"style":151},[10,813,814,815,817,818,821,822,824,825,827,828,830],{},"Run ",[30,816,715],{}," again and open ",[30,819,820],{},"src\u002Fgen\u002Fmodels\u002FPet.ts",". It now includes an optional ",[30,823,777],{}," field because ",[30,826,777],{}," is not listed in the schema's ",[30,829,265],{}," array. The client continues to import the regenerated types.",[10,832,833],{},"You now have a typed client and have seen how a specification change flows into its output.",[18,835,837],{"id":836},"continue","Continue",[839,840,841,854,859],"card-group",{},[842,843,847,848,853],"card",{"title":844,"icon":845,"to":846},"Call generated operations","i-iconoir-code","\u002Fextensions\u002Fkubb-labs\u002Fplugin-axios\u002Fguides\u002Fcalling-operations","Use the generated Axios client. ",[849,850,852],"a",{"href":851},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-axios\u002Fguides\u002Fbase-url","Configure its host"," for your API.",[842,855,858],{"title":477,"icon":856,"to":857},"i-iconoir-settings","\u002Fdocs\u002F5.x\u002Fhow-to\u002Frecipes","Add React or Vue hooks, validation, and mocks.",[842,860,864],{"title":861,"icon":862,"to":863},"Configuration reference","i-iconoir-bookmark","\u002Fdocs\u002F5.x\u002Freference\u002Fconfiguration","Look up specification versions, options, and config formats.",{"title":866,"searchDepth":867,"depth":867,"links":868},"",5,[869,871,872,873,874,875],{"id":20,"depth":870,"text":21},2,{"id":103,"depth":870,"text":104},{"id":476,"depth":870,"text":477},{"id":711,"depth":870,"text":712},{"id":770,"depth":870,"text":771},{"id":836,"depth":870,"text":837},"Follow five steps to generate TypeScript types and a typed Axios client from a one-operation Petstore API spec, then inspect the output and regenerate it.","md",{"layout":879,"title":5,"description":876,"outline":880,"order":882,"navigation":883},"doc",[870,881],3,1,{"title":884,"icon":885},"Generate your first client","i-iconoir-rocket",{"layout":879,"outline":887},[870,881],{"title":884,"icon":885},"\u002Fdocs\u002F5.x\u002Ftutorials\u002Fquickstart",{"title":5,"description":876},{"loc":889},"kubb-labs\u002Fkubb\u002Fdocs\u002F5.x\u002Ftutorials\u002Fquickstart.md","docs\u002F5.x\u002Ftutorials\u002Fquickstart","LqIjH8YkAhpV_xBMk5RWmpkZpJiC3F14qQIjmDWc6sQ",1792931642184]