Why I Prefer Option API: Clarity and Control in Vue

In the vibrant and ever-evolving landscape of front-end development, Vue.js stands as a beacon of developer-friendliness, known for its progressive adoptability and elegant syntax. As Vue has matured, particularly with the advent of Vue 3, developers have been presented with two primary paradigms for structuring their component logic: the venerable Options API and the more modern Composition API. While the latter has garnered significant attention for its powerful capabilities in handling complex logic and promoting reusability, I find myself continually drawn back to the Options API, not out of nostalgia, but due to its inherent strengths in fostering unparalleled clarity and providing a profound sense of control over my Vue components. This preference isn't a dismissal of the Composition API's merits, but rather an affirmation of the Options API's enduring value, especially when building applications that prioritize maintainability, readability, and a predictable mental model for developers of all experience levels.

My journey with Vue began with the Options API, a structured approach that immediately resonated with my desire for organization. It presents a component's capabilities in a neatly compartmentalized manner, where data holds reactive state, methods encapsulate behavior, computed properties derive values, and watch functions react to changes. This distinct separation of concerns, categorized by type rather than by feature, creates an intuitive blueprint that is remarkably easy to digest and navigate. When confronted with the task of understanding a component, the Options API guides my eyes to exactly where the state resides, where the actions are defined, or how derived values are calculated. This isn't merely about convenience; it's about reducing cognitive load, enhancing collaborative development, and ensuring a robust foundation for applications that must stand the test of time and iterative development cycles.

The argument for clarity in the Options API often centers on its opinionated structure. Unlike the more flexible, free-form nature of the Composition API, where related logic can be grouped, the Options API dictates where specific types of logic should live. This deliberate constraint becomes a powerful tool for consistency across a project or even an entire organization. When every component adheres to the same structural pattern, developers, regardless of their familiarity with a specific component, can quickly ascertain its various facets. There's a comforting predictability that comes from knowing precisely where to look for a piece of data, a handler for an event, or a lifecycle hook that initializes a third-party library. This consistency streamlines the debugging process, accelerates onboarding for new team members, and significantly reduces the mental overhead involved in maintaining complex applications.

The Foundation of Clarity: data and Reactive State

At the heart of every interactive Vue component lies its state, and in the Options API, this state is meticulously managed within the data option. This option, typically a function returning an object, is the designated repository for all reactive properties unique to a component instance. The requirement for data to be a function is a subtle yet profoundly important design choice that underpins the Options API's control over component instances. By returning a fresh object for each component, Vue ensures that every instance maintains its own independent state, thereby preventing unintended side effects or shared data mutations that could lead to unpredictable behavior across multiple uses of the same component. This fundamental principle immediately establishes a clear boundary for each component's internal world, reinforcing the notion of encapsulation and isolated responsibility.

Consider a component designed to manage a user's profile information. Within its data option, you might find properties such as userProfile: null, isLoading: true, errorMessage: '', and isEditing: false. Each of these properties serves a distinct purpose, clearly indicating the component's internal status and holding the raw information it will display or manipulate. The explicit definition of these reactive properties in a dedicated section provides an immediate overview of the component's entire internal state at a glance. There is no ambiguity about what constitutes the component's reactive data. This centralized declaration simplifies reasoning about the component's behavior, as all potential sources of truth for its internal state are consolidated in one predictable location.

Furthermore, the data option inherently guides developers toward a more declarative programming style. Instead of imperatively manipulating the DOM, developers define the state that represents the desired UI, and Vue reactively updates the DOM to reflect those changes. This separation of concerns—what the data is versus how it's rendered—is a cornerstone of modern front-end frameworks and is beautifully articulated through the Options API's structure. The clarity gained from this separation means less time spent tracing DOM manipulations and more time focused on the logical flow of the application's data. For developers integrating with external API services, the data option becomes the natural home for the fetched data, clearly signaling its origin and purpose within the component's lifecycle.

Encapsulating Behavior: The methods Option

Beyond state, components need to perform actions, respond to user interactions, and orchestrate various operations. The methods option in the Options API serves as the dedicated container for all component-specific functions, encompassing everything from event handlers to complex business logic. This clear delineation of behavior within a single, identifiable block contributes significantly to the component's overall clarity and the developer's sense of control. When reviewing a component, understanding its capabilities involves a quick glance at its methods. Each method is typically a self-contained unit of logic, designed to perform a specific task, such as submitForm, fetchData, toggleVisibility, or updateQuantity.

The explicit grouping of all callable functions within methods makes the component's interface immediately apparent. Developers can easily discover what actions a component can perform and how to invoke them, whether internally or through event emissions. This structure naturally encourages the creation of smaller, more focused methods, which are inherently easier to test, debug, and understand. For instance, a method like fetchData might encapsulate the entire process of making an asynchronous API request, handling loading states, and processing the response. Its presence within the methods block clearly indicates that this component is responsible for data retrieval, and its implementation can be found without searching through scattered setup functions or external files.

Moreover, the this context within methods reliably points to the component instance, granting straightforward access to data properties, computed properties, and other methods. This consistent contextual binding removes a layer of mental complexity that can sometimes arise in more open-ended paradigms. There's no need to explicitly bind this or worry about lexical scope issues in most common scenarios; Vue handles it gracefully, reinforcing the intuitive connection between a method and the component it belongs to. This direct and predictable access to the component's own properties and behaviors empowers developers with a strong sense of control over how the component operates and interacts with its internal state. It simplifies the process of building interactive features, knowing that all the necessary tools and data are readily available and easily referenced within the method's scope.

Deriving Insight: The Power of computed Properties

One of Vue's most powerful features, and a cornerstone of its declarative nature, is the computed property. In the Options API, computed properties are defined in their own dedicated section, providing a clear and efficient way to derive new values from existing reactive data. These properties are not merely functions; they are reactive caches that only re-evaluate when their dependencies change, offering significant performance benefits and an elegant way to transform or combine data for display. The explicit computed block immediately signals to any developer that this section contains values that are not stored directly in data but are instead dynamically calculated based on other reactive sources.

The clarity offered by computed properties is multifaceted. Firstly, they clearly separate presentation logic and data transformation from the raw data and methods. This separation makes components more readable, as the core state is distinct from how that state is presented or derived. For example, a user object in data might be transformed into fullName, isAdult, or formattedAddress in computed properties. These derived values are often crucial for the UI but do not represent the raw truth from the backend API or user input. By placing them in computed, the developer explicitly states their purpose: they are derived views of the underlying data.

Secondly, computed properties provide a declarative "recipe" for how a value is obtained. Unlike a method that might be called multiple times, computed properties describe what the derived value is, and Vue handles when it needs to be recalculated. This enhances control by centralizing the logic for derivation and allowing Vue's reactivity system to optimize updates automatically. For complex calculations or data aggregations, computed properties prevent redundant processing and keep the component's template clean and focused solely on rendering. When dissecting a component, examining its computed properties provides immediate insight into the sophisticated transformations it applies to its core data before presenting it to the user. This structured approach to data derivation greatly simplifies the understanding of data flow within the component and reinforces the developer's ability to reason about its reactive behavior.

Reacting to Change: The watch Option

While computed properties are for deriving values, the watch option in the Options API is specifically designed for performing side effects in response to changes in reactive data. This dedicated section for watchers provides a clear and controlled mechanism for reacting to specific data changes, executing asynchronous operations, or interacting with external services or the DOM when a particular piece of state mutates. The existence of a distinct watch option immediately communicates that the component is actively observing certain properties and will perform an action when those properties change, setting clear expectations for its reactive behavior.

Common use cases for watch include fetching new data from an API when a search query changes, saving user preferences to local storage, debouncing input, or performing complex DOM manipulations that fall outside the scope of simple reactive rendering. For instance, if a component needs to fetch a new list of items from a server whenever a categoryId in its data changes, a watch handler on categoryId would be the natural place for the fetchData method to be called. This creates a clear and explicit link between a specific data change and its consequential action.

The watch option further enhances control by offering fine-grained configuration options, such as immediate (to run the handler once immediately after component creation) and deep (to watch nested properties of an object). These options allow developers to precisely control the conditions under which the side effect occurs, ensuring that reactive updates are handled exactly as intended. By segregating these reactive side effects into their own watch block, the Options API prevents them from being scattered throughout methods or lifecycle hooks, thereby improving the component's readability and making it easier to trace the origins of specific actions triggered by data changes. This dedicated mechanism for reactive side effects is a testament to the Options API's commitment to clear responsibilities and controlled execution flow.

Navigating the Component Lifecycle: lifecycle hooks

Every Vue component undergoes a series of predictable stages from its creation to its destruction. The Options API provides a suite of lifecycle hooks—such as beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted—that allow developers to tap into these specific moments and execute code accordingly. The explicit presence of these hooks as top-level options within the component definition offers an unparalleled level of clarity and control over the component's lifespan. When examining a component, the developer can immediately see what actions are performed at each critical juncture, without having to search for hidden onMounted or onUpdated calls.

This structured approach to lifecycle management is incredibly powerful for orchestrating complex component behaviors. For example, created is the ideal place for initial data fetching from an API, as the component's data and methods are available, but the DOM has not yet been mounted. mounted is perfect for interacting with the DOM, integrating third-party libraries that require a rendered element, or setting up subscriptions. unmounted provides a clear opportunity to clean up resources, clear timers, or unsubscribe from global events, preventing memory leaks and ensuring efficient resource management.

The distinct naming and placement of these hooks create a clear narrative of the component's journey, making it simple to understand when specific setup or teardown operations occur. This contributes significantly to debugging, as developers know exactly where to look for initialization issues or resource leaks. The Options API's lifecycle hooks are not just event listeners; they are integral parts of the component's definition, offering precise control over when and how the component comes to life, performs its duties, and gracefully exits. This detailed mapping of behavior to the component's lifecycle reinforces the clarity and control that the Options API offers at every stage of development.

Defining Inputs and Outputs: props and emits

Components, by their very nature, are designed to be reusable building blocks. To facilitate this reusability and enable effective communication within a component hierarchy, Vue provides props for inputs and emits (or custom events) for outputs. In the Options API, these communication channels are explicitly declared within their own options, once again contributing to an incredibly clear and maintainable component interface.

The props option is an object where each key represents a prop name and its value defines the prop's type, default value, and validation rules. This explicit declaration serves as a contract for the component: it clearly states what data the component expects to receive from its parent. For example, a UserProfileCard component might declare props like userId: { type: Number, required: true }, userName: String, and avatarUrl: { type: String, default: 'default.png' }. This instantly communicates to any developer using this component exactly what data it requires and how that data should be formatted. Such upfront documentation within the code itself greatly reduces ambiguities and potential errors, ensuring that components are used correctly and predictably.

Similarly, the emits option (introduced more formally in Vue 3) provides a way to explicitly declare the custom events that a component might emit to its parent. While historically custom events were implicitly defined by simply calling $emit, emits now offers a declarative way to document these output capabilities. For example, emits: ['update:modelValue', 'delete-item', 'form-submitted'] clearly states the events this component might trigger. This improves the component's interface clarity, helps with documentation, and can even be used for validation, ensuring that developers only emit declared events. Together, props and emits form a comprehensive and explicit interface definition within the Options API, offering a robust mechanism for component communication that is both easy to understand and tightly controlled. This structured approach to component interaction is crucial for building large-scale applications where clear boundaries and communication protocols are paramount.

A Holistic View: The Component as a Coherent Unit

One of the most compelling arguments for the Options API is its ability to present the entire component as a coherent, self-contained unit. By grouping related concerns (data, methods, computed, watch, lifecycle hooks, props, emits) into their respective blocks, the Options API provides a standardized and exhaustive blueprint of a component's functionality. This structure creates a "single source of truth" for a component's definition, making it remarkably easy for any developer to grasp its full scope and intricacies simply by scanning the file.

Imagine opening a component file structured with the Options API. Your eyes naturally gravitate to the data section to understand its internal state, then to props to see its inputs, methods for its actions, computed for its derivations, watch for its reactions, and finally lifecycle hooks for its temporal operations. This predictable flow is not just an aesthetic preference; it's a cognitive aid that reduces the mental overhead required to understand a component. There's no need to piece together dispersed logic or trace imports from various files to comprehend how different parts of the component interact. Everything relevant to that component's definition is right there, clearly labeled and organized.

This holistic view is particularly beneficial in team environments and for long-term maintenance. When a new developer joins a project, or when an existing developer needs to revisit a component after a long period, the Options API's structure offers an immediate and consistent entry point. The component becomes a legible document, telling a clear story about its purpose, its state, its behavior, and its interaction points. This drastically cuts down on ramp-up time and debugging cycles, empowering developers to become productive faster and maintain applications with greater confidence. The clarity born from this structured approach directly translates into increased control over the entire development and maintenance lifecycle of the application.

The Role of APIs in Vue Applications and API Management

While the Options API provides structure and control within a Vue component, a significant portion of modern web applications involves interacting with external APIs – Application Programming Interfaces that power backend services, provide third-party data, or enable complex functionalities like AI models. These external API integrations are where the true power of a frontend framework meets the capabilities of backend infrastructure. Vue components, structured elegantly with the Options API, often serve as the bridge, fetching data, sending user input, and managing the various states associated with these network requests (loading, success, error).

When a Vue component, say, a ProductListing component, needs to display data, it often makes an API call to a backend service. This typically involves using a method like fetchProducts, which updates data properties such as products (an array), isLoading (a boolean), and error (a string). The created or mounted lifecycle hook might then trigger fetchProducts initially. The clarity of the Options API ensures that all these related pieces – the data, the method, and the lifecycle trigger – are easily identifiable and managed within the component's definition. This clear segregation ensures that the component remains a single source of truth for its own data flow and interactions.

However, the effective consumption of external APIs is not solely an in-component concern. It extends to the broader ecosystem of API management, which ensures reliability, security, and scalability for the services our Vue applications rely on. This is precisely where platforms like APIPark become indispensable. APIPark, an open-source AI gateway and API management platform, provides a robust infrastructure for managing, integrating, and deploying both AI and REST services. For Vue developers, while they focus on building intuitive user interfaces with the Options API, APIPark ensures that the underlying APIs they consume are well-governed. Imagine integrating a sentiment analysis feature into your Vue app. Your SentimentAnalyzer component, built with the Options API, would make a request to an API endpoint. With APIPark, that endpoint could be a standardized interface to various AI models, encapsulating complex prompts into simple REST API calls. This means your Vue component's logic remains lean and focused, benefiting from the robust management capabilities offered by an API gateway.

APIPark’s capabilities, such as quick integration of 100+ AI models, unified API format for AI invocation, and prompt encapsulation into REST APIs, directly contribute to the "control" aspect that I value so highly. It ensures that the external API landscape is as organized and predictable as the internal structure of my Vue components. For instance, its end-to-end API lifecycle management assists with everything from design and publication to invocation and decommissioning. This means the APIs your Vue app relies on are consistently managed, with traffic forwarding, load balancing, and versioning handled efficiently. This level of external control directly enhances the reliability and maintainability of the Vue application itself, as developers can trust that the APIs they interact with are stable and well-documented.

Furthermore, APIPark's detailed API call logging and powerful data analysis features provide invaluable insights for troubleshooting and performance monitoring. If a Vue component experiences issues with data fetching, the ability to quickly trace API calls through APIPark's logs ensures rapid problem identification and resolution. This transparency and robust management of the API layer complement the internal clarity and control provided by the Options API, creating a harmonious development environment where both frontend and backend interactions are predictable and manageable. The performance of APIPark, rivaling Nginx with high TPS and cluster deployment support, ensures that the API infrastructure can handle the demands of scalable Vue applications, preventing bottlenecks and ensuring a smooth user experience. This holistic approach, where a structured frontend meets a well-governed backend, truly maximizes the developer's sense of clarity and control across the entire application stack.

Options API and the Cognitive Advantage

Beyond mere structure, the Options API offers a significant cognitive advantage, particularly for developers who prefer a more declarative and compartmentalized approach to programming. It creates a mental model where each component is akin to a well-defined object with distinct properties (data), behaviors (methods), derived attributes (computed), and reactive observers (watchers). This object-oriented thinking, even in a framework that is primarily component-based, can be very intuitive for many developers. It aligns with how many are taught to structure code and think about software entities.

The benefit of this cognitive model is that it reduces the mental effort required to parse and understand unfamiliar code. When a developer encounters a new component, they don't have to spend time searching for where different pieces of logic might be defined or how they're interconnected. The Options API provides a clear map: "If you want to know what data this component manages, look in data. If you want to see how it responds to user input, look in methods. If you want to understand derived values, look in computed." This consistency acts as a universal language within a Vue project, fostering better communication and collaboration among team members.

Consider the challenge of maintaining a large application over several years, potentially with rotating development teams. Code clarity becomes paramount. The inherent structure of the Options API serves as a form of self-documentation. It guides future developers, allowing them to quickly onboard and contribute effectively without extensive prior knowledge of specific component implementations. This long-term maintainability is a direct result of the clarity and control embedded in the Options API's design, making it a powerful choice for enterprise-level applications where longevity and team efficiency are critical considerations. This emphasis on cognitive ease and structured understanding is a core reason for my continued preference.

Addressing the "Scatter Problem"

A common criticism leveled against the Options API is the so-called "scatter problem," where logic related to a single feature might be "scattered" across different options (data, methods, computed, watch). For example, a "user search" feature might involve a searchQuery in data, searchUsers in methods, filteredUsers in computed, and a watch on searchQuery to trigger the search. While this is true, I would argue that this is not a "problem" but rather a "structured overview."

Instead of scattering, the Options API provides a structured, multi-faceted view of a feature. It reveals how the feature utilizes the component's state (data), what actions it performs (methods), how it processes information (computed), and how it reacts to changes (watch). This isn't disparate logic; it's a comprehensive breakdown of a feature's various dimensions, each placed in its most appropriate and predictable category.

For many, this categorization by type offers a clearer understanding of the component's overall architecture than grouping by feature, especially when features become intertwined or when a single piece of state impacts multiple features. The Options API forces a developer to think about each aspect of the component's operation in its correct context, fostering a discipline that ultimately leads to more robust and understandable code. The "scatter problem" is, in my view, a strength disguised as a weakness, providing a systematic approach to component definition that prioritizes overall clarity and control.

The Learning Curve and Accessibility

For newcomers to Vue.js, the Options API presents a gentle and intuitive learning curve. Its direct mapping to object properties and common programming concepts makes it highly accessible. Beginners can quickly grasp where to declare data, define functions, and manage lifecycle events without delving into advanced JavaScript concepts like closures, reactive primitives, or explicit ref/reactive declarations, which are more central to the Composition API.

This accessibility is a significant factor in my preference, especially when working with teams that have varying levels of experience or when introducing Vue to new developers. The Options API provides a clear and consistent mental model that builds confidence and accelerates the initial learning process. Developers can focus on understanding Vue's core principles of reactivity and component-based architecture, rather than getting bogged down by the nuances of function-based component logic. This ease of entry ensures that a broader range of developers can effectively contribute to a Vue project, making it a more inclusive and productive environment. The clarity and control offered by the Options API are not just for experienced architects; they are fundamental benefits that extend to everyone on the development spectrum, ensuring that Vue remains a welcoming framework for all.

Final Thoughts on Enduring Value

My preference for the Options API is rooted in its enduring capacity to deliver clarity and control, two pillars of sustainable software development. It provides an architectural blueprint that makes components immediately understandable, highly maintainable, and remarkably consistent across a codebase. While the Composition API certainly offers powerful tools for advanced use cases and complex logic extraction, the Options API continues to shine as the foundation for building robust, readable, and easily navigable Vue applications. It's a testament to good design principles that prioritize human readability and predictable structure, ensuring that the components we craft are not just functional but also a joy to work with, both today and years down the line.

The structured approach of the Options API, with its dedicated sections for data, methods, computed, watch, and lifecycle hooks, creates a harmonious and predictable development experience. This internal consistency is further amplified when paired with robust external API management platforms like APIPark. By ensuring that the very APIs our Vue applications interact with are equally well-governed and transparent, we achieve a comprehensive level of clarity and control that spans the entire technology stack. From the initial component design to the deployment and management of backend services, this holistic approach empowers developers to build applications with confidence, knowing that every layer is optimized for maintainability, performance, and long-term success. It is this profound combination of internal structure and external governance that solidifies my unwavering preference for the Options API in Vue development.

---

Key Characteristics of Options API

Feature Section	Purpose and Contribution to Clarity/Control	Example Use Cases
data	Defines reactive state; ensures isolated state for each component instance. Provides a single, clear source of truth for internal component data.	message: 'Hello Vue!', count: 0, userProfile: null, isLoading: false
methods	Encapsulates component behaviors and functions. Clearly separates actions from state, promoting modularity and testability.	handleClick(), submitForm(), fetchData(), toggleModal()
computed	Defines derived reactive properties. Provides efficient, cached transformations of data, improving readability and performance.	fullName: 'John Doe', isFormValid: true, filteredList: [], totalPrice: 100
watch	Performs side effects in response to specific data changes. Offers precise control over reactive actions with configurable options (e.g., deep, immediate).	Fetching data when a userId changes, saving user preferences to local storage, debouncing search input.
props	Declares expected inputs from parent components. Establishes a clear contract for component usage, enhancing reusability and type safety.	title: String, postId: { type: Number, required: true }, options: Array
emits	Declares custom events emitted to parent components. Clearly defines the component's output interface, improving documentation and collaboration.	update:modelValue, item-selected, form-submitted
lifecycle hooks	Provides specific points to execute code during a component's lifecycle. Offers granular control over initialization, updates, and cleanup, preventing resource leaks.	created() for initial API calls, mounted() for DOM interactions, unmounted() for cleaning up event listeners.

---

5 FAQs about Vue's Options API

1. What is the primary difference between Vue's Options API and Composition API? The Options API structures component logic by type (data, methods, computed, watch, etc.) in distinct, pre-defined options, offering a highly organized and predictable blueprint for component definition. The Composition API, in contrast, allows developers to organize logic by feature, using functions (setup, ref, reactive, computed, watchEffect, onMounted, etc.) to group related reactive state and logic, offering greater flexibility and better reusability of logic fragments across components or even outside components. My preference for Options API stems from its inherent clarity and control through its structured approach.
2. Why would a developer choose the Options API over the Composition API for a new Vue project? A developer might choose the Options API for its clear, opinionated structure, which can be highly beneficial for readability and maintainability, especially in larger teams or projects with varying developer experience levels. It provides a consistent mental model and makes it easy to understand a component's state, behavior, and lifecycle at a glance. The Options API's gentle learning curve is also a significant advantage for newcomers to Vue. It simplifies debugging by centralizing different types of logic, enhancing the overall clarity and control over the component.
3. How does the Options API enhance the clarity of a Vue component? The Options API enhances clarity by compartmentalizing different aspects of a component's logic into dedicated sections. data explicitly shows the component's reactive state, methods define its actions, computed properties reveal derived values, and watch functions highlight reactive side effects. This structured separation makes it incredibly easy to scan a component file and immediately understand its purpose, capabilities, and dependencies. This predictable organization significantly reduces cognitive load and aids in collaboration and long-term maintenance.
4. In what ways does the Options API provide better control over component behavior? The Options API provides better control through its explicit declarations and lifecycle management. Each data property is isolated to its component instance, preventing unintended side effects. methods encapsulate specific behaviors, offering clear boundaries for actions. computed properties ensure efficient and controlled data derivation. watch allows precise reactions to data changes with fine-tuned options. The distinct lifecycle hooks offer granular control over when code executes during the component's lifespan. This comprehensive and explicit framework gives developers a strong sense of command over every facet of their component's operation, including how it interacts with external APIs.
5. Can the Options API be effectively used in large-scale applications, and how does it integrate with API management platforms like APIPark? Yes, the Options API can be very effectively used in large-scale applications due to its strong emphasis on clarity, consistency, and maintainability. Its structured nature scales well by ensuring that individual components remain understandable even as the application grows in complexity. When it comes to integrating with external APIs, the Options API's data, methods, computed, and watch options provide a clear framework for fetching, processing, and reacting to API data. Platforms like APIPark complement this by offering a robust infrastructure for managing those external APIs themselves, ensuring they are reliable, secure, and performant. APIPark's features, such as unified API formats, lifecycle management, logging, and performance monitoring, provide an essential layer of control and clarity for the API landscape that our Vue applications consume, thereby enhancing the overall stability and predictability of the entire system.

🚀You can securely and efficiently call the OpenAI API on APIPark in just two steps:

Step 1: Deploy the APIPark AI gateway in 5 minutes.

APIPark is developed based on Golang, offering strong product performance and low development and maintenance costs. You can deploy APIPark with a single command line.

curl -sSO https://download.apipark.com/install/quick-start.sh; bash quick-start.sh

In my experience, you can see the successful deployment interface within 5 to 10 minutes. Then, you can log in to APIPark using your account.

Step 2: Call the OpenAI API.