Add AI-powered JSDoc description generation with OpenAI and multi-format support

README.MD

@@ -1,15 +1,23 @@
 # JSDoc Builder
 
-JSDoc Builder is a CLI tool for automatically generating JSDoc comments for JavaScript and TypeScript files. It parses functions and variables to infer parameter types, return types, and descriptions, and then inserts JSDoc comments directly into the source code.
+JSDoc Builder is a CLI tool for automatically generating JSDoc comments for JavaScript, TypeScript, JSX, TSX, and Vue files. It parses functions and variables to infer parameter types, return types, and descriptions, and then inserts JSDoc comments directly into the source code.
 
 ## Features
 
 - Automatically generates JSDoc comments for:
   - Function declarations
   - Arrow functions
   - TypeScript types and interfaces
+- Supports multiple file formats:
+  - JavaScript (`.js`)
+  - TypeScript (`.ts`)
+  - JSX (`.jsx`)
+  - TSX (`.tsx`)
+  - Vue Single File Components (`.vue`)
 - Infers parameter and return types from TypeScript annotations.
+- **AI-Powered Descriptions**: Use OpenAI to generate meaningful function descriptions automatically.
 - Outputs clean and structured JSDoc comments.
+- Preserves Vue SFC structure (template, script, and style sections).
 
 ## Installation
 
@@ -27,15 +35,42 @@ npm install jsdoc-builder --save-dev
 
 ## Usage
 
-### CLI Command
+### Basic Usage (Without AI)
 
 Run the following command to generate JSDoc comments for a file:
 
 ```bash
 jsdoc-builder <file-path>
 ```
 
-Replace `<file-path>` with the path to the JavaScript or TypeScript file you want to process.
+Replace `<file-path>` with the path to the JavaScript, TypeScript, JSX, TSX, or Vue file you want to process.
+
+### AI-Powered Usage
+
+To enable AI-powered description generation using OpenAI:
+
+```bash
+jsdoc-builder <file-path> --ai --api-key YOUR_OPENAI_API_KEY
+```
+
+Or set the API key as an environment variable:
+
+```bash
+export OPENAI_API_KEY=your_api_key_here
+jsdoc-builder <file-path> --ai
+```
+
+You can also specify a different model:
+
+```bash
+jsdoc-builder <file-path> --ai --model gpt-4
+```
+
+### CLI Options
+
+- `--ai` - Enable AI-powered description generation
+- `--api-key <key>` - OpenAI API key (can also be set via `OPENAI_API_KEY` environment variable)
+- `--model <model>` - AI model to use (default: `gpt-3.5-turbo`)
 
 ### Example
 
@@ -51,7 +86,7 @@ const multiply = (a: number, b: number): number => {
 };
 ```
 
-#### Command:
+#### Basic Command (Without AI):
 
 ```bash
 jsdoc-builder example.ts
@@ -81,6 +116,136 @@ const multiply = (a: number, b: number): number => {
 };
 ```
 
+#### AI-Powered Command:
+
+```bash
+export OPENAI_API_KEY=your_api_key_here
+jsdoc-builder example.ts --ai
+```
+
+#### AI-Generated Output:
+
+The AI will generate contextual descriptions based on the function code, parameter names, and types:
+
+```typescript
+/**
+ * @description Adds two numbers and returns their sum
+ * @param {number} a
+ * @param {number} b
+ * @returns {number}
+ */
+function add(a: number, b: number) {
+  return a + b;
+}
+
+/**
+ * @description Multiplies two numbers and returns the product
+ * @param {number} a
+ * @param {number} b
+ * @returns {number}
+ */
+const multiply = (a: number, b: number): number => {
+  return a * b;
+};
+```
+
+### JSX Example
+
+#### Input File (`example.jsx`):
+
+```jsx
+function Component(props) {
+  return <div>{props.title}</div>;
+}
+
+const ArrowComponent = (props) => {
+  return <div>{props.content}</div>;
+};
+```
+
+#### Command:
+
+```bash
+jsdoc-builder example.jsx
+```
+
+#### Output File (`example.jsx`):
+
+```jsx
+/**
+ * @description Press Your { Function Component } Description
+ * @param {any} props
+ * @returns {void}
+ */
+function Component(props) {
+  return <div>{props.title}</div>;
+}
+
+/**
+ * @description Press Your { Function ArrowComponent } Description
+ * @param {any} props
+ * @returns {void}
+ */
+const ArrowComponent = (props) => {
+  return <div>{props.content}</div>;
+};
+```
+
+### Vue Example
+
+#### Input File (`example.vue`):
+
+```vue
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script>
+function greet(name) {
+  return `Hello, ${name}`;
+}
+
+export default {
+  name: 'ExampleComponent',
+  setup() {
+    return { greet };
+  }
+}
+</script>
+```
+
+#### Command:
+
+```bash
+jsdoc-builder example.vue
+```
+
+#### Output File (`example.vue`):
+
+```vue
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script>
+/**
+ * @description Press Your { Function greet } Description
+ * @param {any} name
+ * @returns {void}
+ */
+function greet(name) {
+  return `Hello, ${name}`;
+}
+
+export default {
+  name: 'ExampleComponent',
+  setup() {
+    return { greet };
+  }
+}
+</script>
+```
+
 ## API
 
 ### `generateJSDoc(filePath: string): void`

example/example.jsx

@@ -0,0 +1,17 @@
+/**
+* @description Press Your { Function Component } Description
+* @param {any} props
+* @returns {void}
+*/
+function Component(props) {
+    return <div>{props.title}</div>;
+}
+/**
+* @description Press Your { Function ArrowComponent } Description
+* @param {any} props
+* @returns {void}
+*/
+const ArrowComponent = (props) => {
+    return <div>{props.content}</div>;
+};
+export default Component;

example/example.tsx

@@ -0,0 +1,21 @@
+interface Props {
+    title: string;
+    count?: number;
+}
+/**
+* @description Press Your { Function Component } Description
+* @param {Props} props
+* @returns {void}
+*/
+function Component(props: Props) {
+    return <div>{props.title}</div>;
+}
+/**
+* @description Press Your { Function ArrowComponent } Description
+* @param {Props} props
+* @returns {JSX.Element}
+*/
+const ArrowComponent = (props: Props): JSX.Element => {
+    return <div>{props.title}</div>;
+};
+export default Component;

example/example.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script>/**
+* @description Press Your { Function greet } Description
+* @param {any} name
+* @returns {void}
+*/
+function greet(name) {
+    return `Hello, ${name}`;
+}
+/**
+* @description Press Your { Function farewell } Description
+* @param {any} name
+* @returns {void}
+*/
+const farewell = (name) => {
+    return `Goodbye, ${name}`;
+};
+export default {
+    name: 'ExampleComponent',
+    setup() {
+        return {
+            greet,
+            farewell
+        };
+    }
+};
+</script>
+
+<style scoped>
+div {
+  color: blue;
+}
+</style>

package.json

@@ -2,7 +2,7 @@
   "name": "jsdoc-builder",
   "version": "0.0.6",
   "author": "dori",
-  "description": "Generate JSDoc comments for JavaScript and TypeScript files.",
+  "description": "Generate JSDoc comments for JavaScript, TypeScript, JSX, TSX, and Vue files.",
   "publishConfig": {
     "access": "public"
   },
@@ -29,6 +29,11 @@
     "typescript-docs",
     "typescript-jsdoc",
     "javascript-documentation",
+    "jsx-documentation",
+    "tsx-documentation",
+    "vue-documentation",
+    "react-jsdoc",
+    "vue-jsdoc",
     "cli-tool",
     "developer-tools"
   ],
@@ -39,6 +44,7 @@
   },
   "dependencies": {
     "commander": "^10.0.0",
+    "openai": "^6.9.1",
     "typescript": "^5.0.0"
   },
   "devDependencies": {