diff --git a/changelog/1.0.02.md b/changelog/1.0.02.md
new file mode 100644
index 000000000..2e3709e46
--- /dev/null
+++ b/changelog/1.0.02.md
@@ -0,0 +1,31 @@
+## 1.0.02
+
+## Features:
+
+### Webapp/GitHub App
+
+* For users doc usecase there is now a pull request comments flow that kicks off a ui to generate custom docs
+
+### GitHub App:
+
+* New docs on auto pilot workflow that listens for changes on code and creates relevant user-facing documentation
+
+### Web App:
+
+* In the editor we now support streaming interfaces on simple ai tasks
+
+## Bug fixes:
+
+## Web app
+
+* In the web editor drafts with new tag had issues being deleted, we now fixed that
+
+## Security enhancements/fixes:
+
+## Backend
+
+* Updated latest npm packages, specifically fastify as recommend by npm audit to deal with fastify multipart
+
+### Open source User-facing Starter template
+
+* Removed a test GitHub client id for a new test feature in the open source docusaurus template.  Important to note client ids are typically public and usually apparent in the client side code, versus client secrets, but decided to remove and delete the client id for extra measure
diff --git a/changelog/1.0.03.md b/changelog/1.0.03.md
new file mode 100644
index 000000000..40baac7d4
--- /dev/null
+++ b/changelog/1.0.03.md
@@ -0,0 +1,15 @@
+## 1.0.03
+
+## Features
+
+## Vs Code Extension
+
+* Switched from Webpack to Vite for the vue webview, for faster loading and rendering and better coexistence with other npm packages
+
+## Security enhancements/fixes:
+
+## Vs Code Extension
+
+* Updated latest npm packages for both the extension and vue web app including mermaid
+
+* Updated security logic for the nonce in the webview
diff --git a/docs/add-shatter-effect-to-sprite.md b/docs/add-shatter-effect-to-sprite.md
new file mode 100644
index 000000000..1396e4deb
--- /dev/null
+++ b/docs/add-shatter-effect-to-sprite.md
@@ -0,0 +1,65 @@
+
+
+  # Shatter Effect
+
+The `addShatterEffect` function allows you to create a dynamic shatter animation for your sprite. This effect simulates breaking or shattering the sprite into multiple pieces, which can be useful for destruction animations, transitions, or special effects in games.
+
+## Usage
+
+```javascript
+const result = await sprite.addShatterEffect(description, shatterOptions, options);
+```
+
+### Parameters
+
+1. `description` (string): A text description of the sprite you want to generate and apply the shatter effect to.
+2. `shatterOptions` (object, optional): Customization options for the shatter effect.
+3. `options` (object, optional): General options for sprite generation.
+
+### Shatter Options
+
+The `shatterOptions` object can include the following properties:
+
+- `pieces` (number, default: 12): The number of pieces the sprite will shatter into.
+- `spread` (number, default: 100): How far the shattered pieces will spread from the original position.
+- `frames` (number, default: 15): The number of animation frames to generate for the shatter effect.
+- `pattern` (string, default: 'radial'): The pattern for breaking the sprite. Options are 'radial' or 'grid'.
+
+### Return Value
+
+The function returns an object with the following properties:
+
+- `original` (string): Base64-encoded string of the original sprite image.
+- `shatterFrames` (array): An array of Base64-encoded strings representing each frame of the shatter animation.
+- `settings` (object): The settings used to generate the effect, including pieces, spread, frames, and pattern.
+
+## Example
+
+```javascript
+const shatterResult = await sprite.addShatterEffect('red crystal', {
+  pieces: 20,
+  spread: 150,
+  frames: 20,
+  pattern: 'grid'
+});
+
+console.log(shatterResult.original); // Base64 string of the original sprite
+console.log(shatterResult.shatterFrames.length); // Number of animation frames
+console.log(shatterResult.settings); // Applied shatter effect settings
+```
+
+## Tips for Using Shatter Effect
+
+1. Adjust the `pieces` value to control the granularity of the shatter effect. More pieces create a more detailed break but may increase processing time.
+
+2. Use a higher `spread` value for a more explosive effect, or a lower value for a subtle crumble.
+
+3. Increase the `frames` count for a smoother animation, especially when using a large `spread` value.
+
+4. Experiment with both 'radial' and 'grid' patterns to see which works best for your specific sprite and desired effect.
+
+5. For best results, use sprites with clear, distinct shapes or objects that make sense to shatter (e.g., crystals, rocks, or solid objects).
+
+6. Consider using the shatter effect in combination with other effects like particle systems or sound effects to enhance the overall impact of the animation in your game or application.
+
+  
\ No newline at end of file
diff --git a/docs/chat.md b/docs/chat.md
new file mode 100644
index 000000000..e588dcfed
--- /dev/null
+++ b/docs/chat.md
@@ -0,0 +1,66 @@
+# chat Documentation
+
+## Brief Description
+The `chat` method facilitates communication with an AI model, allowing for multi-turn conversations with support for images.
+
+## Usage
+To use the `chat` method, first import and initialize the Ollama class, then call the `chat` method with your request parameters.
+
+```javascript
+import { Ollama } from 'ollama'
+
+const ollama = new Ollama()
+const response = await ollama.chat(chatRequest)
+```
+
+## Parameters
+- `request` (ChatRequest): An object containing the following properties:
+  - `model` (string, required): The name of the model to use for the chat.
+  - `messages` (Message[], optional): An array of message objects representing the conversation history.
+  - `stream` (boolean, optional): If true, the response will be streamed.
+  - `format` (string | object, optional): The desired format for the response.
+  - `keep_alive` (string | number, optional): Duration to keep the model loaded in memory.
+  - `tools` (Tool[], optional): An array of tool objects that can be used by the model.
+  - `options` (Partial<Options>, optional): Additional options for the chat request.
+
+## Return Value
+- If `stream` is false: Promise<ChatResponse>
+- If `stream` is true: Promise<AbortableAsyncIterator<ChatResponse>>
+
+The ChatResponse object includes properties such as the model name, creation timestamp, the generated message, and various performance metrics.
+
+## Examples
+
+1. Basic chat request:
+
+```javascript
+const response = await ollama.chat({
+  model: 'llama2',
+  messages: [{ role: 'user', content: 'Hello, how are you?' }]
+})
+console.log(response.message.content)
+```
+
+2. Streaming chat with image:
+
+```javascript
+const imageData = await fetch('https://example.com/image.jpg').then(res => res.arrayBuffer())
+const stream = await ollama.chat({
+  model: 'llava',
+  messages: [
+    { role: 'user', content: 'What's in this image?', images: [new Uint8Array(imageData)] }
+  ],
+  stream: true
+})
+
+for await (const chunk of stream) {
+  process.stdout.write(chunk.message.content)
+}
+```
+
+## Notes or Considerations
+- The `chat` method supports multi-modal interactions, allowing you to include images in the conversation.
+- When using images, they can be provided as either Uint8Arrays or base64 encoded strings. The method will handle the encoding internally.
+- Streaming responses can be useful for real-time applications or when dealing with long responses.
+- Be mindful of the model's context length limitations when sending large conversation histories.
+- The method automatically handles base64 encoding of images, making it easier to work with various image formats.
\ No newline at end of file
diff --git a/docs/configuring-dev-docs-json-for-generating-documentation.md b/docs/configuring-dev-docs-json-for-generating-documentation.md
new file mode 100644
index 000000000..6be513bde
--- /dev/null
+++ b/docs/configuring-dev-docs-json-for-generating-documentation.md
@@ -0,0 +1,146 @@
+# Advanced configuring dev-docs.json for Generating Documentation
+
+The `dev-docs.json` file offers various configuration options to customize how Dev-Docs generates documentation for your code files. This guide focuses on the "ai" section of the configuration, which provides powerful features for tailoring the documentation process.
+
+## AI Section Configuration
+
+The "ai" section in `dev-docs.json` allows you to set up specific prompts and filters for different files or directories in your project. Here's an overview of the key configuration options:
+
+### 1. File-Specific Prompts
+
+You can define custom prompts for individual files using the following structure:
+
+```json
+"ai": {
+  "variablesAndFunctions": {
+    "path/to/your/file.js": {
+      "prompts": [
+        {
+          "title": "Function Purpose",
+          "question": "What is the main purpose of this function?",
+          "documentation": "Explain the function's primary role in the codebase."
+        },
+        {
+          "title": "Input Parameters",
+          "question": "What are the input parameters for this function?",
+          "documentation": ""
+        }
+      ]
+    }
+  }
+}
+```
+
+### 2. Directory-Specific Prompts
+
+To apply prompts to all files within a specific directory:
+
+```json
+"ai": {
+  "variablesAndFunctions": {
+    "src/components": {
+      "prompts": [
+        {
+          "title": "Component Overview",
+          "question": "Provide a brief overview of this component.",
+          "documentation": ""
+        }
+      ]
+    }
+  }
+}
+```
+
+### 3. Global Filters
+
+You can set global filters to control which symbols are documented:
+
+```json
+"ai": {
+  "internalTypeFilters": ["class", "method", "function"],
+  "codeFilters": ["async function", "export default"],
+  "nameFilters": ["handleSubmit", "render"]
+}
+```
+
+### 4. Import Handling
+
+Configure how imports are handled in documentation:
+
+```json
+"ai": {
+  "importFolders": ["src/utils", "src/helpers"],
+  "importFiles": ["src/constants.js", "src/types.ts"],
+  "importTypeFilters": ["class", "function"],
+  "importCodeFilters": ["export const"],
+  "importNameFilters": ["util", "helper"]
+}
+```
+
+### 5. Documentation Output
+
+Customize the output of generated documentation:
+
+```json
+"ai": {
+  "docPath": "docs/api-reference",
+  "docSubFolder": "components",
+  "populateDoc": "docs/template.md",
+  "branch": "documentation-updates"
+}
+```
+
+### 6. Context Prompts
+
+Add custom context prompts for more detailed documentation:
+
+```json
+"ai": {
+  "contextPrompt": "dev-docs/context-prompt-template.md",
+  "folderContextPrompt": "dev-docs/folder-context-template.md"
+}
+```
+
+### 7. Code Summary
+
+Customize the code summary generation:
+
+```json
+"ai": {
+  "codeSummaryPrompt": "Provide 3 bullet points summarizing the code's functionality",
+  "defaultLength": "3-5 Sentences"
+}
+```
+
+### 8. File Mappings
+
+Define custom mappings for documentation organization:
+
+```json
+"ai": {
+  "mappings": [
+    {
+      "files": ["src/main.ts"],
+      "cloudDir": "Getting Started"
+    },
+    {
+      "folder": ["src/components"],
+      "cloudDir": "Components"
+    }
+  ]
+}
+```
+
+## Best Practices
+
+1. Start with global filters and gradually add file-specific or directory-specific prompts as needed.
+
+2. Use context prompts to provide additional information about your project's structure or conventions.
+
+3. Regularly review and update your `dev-docs.json` configuration as your project evolves.
+
+4. Utilize the `mappings` feature to organize your documentation in a logical structure.
+
+5. Leverage import handling to ensure comprehensive documentation of dependencies and utilities.
+
+By carefully configuring these options in your `dev-docs.json` file, you can create highly tailored and comprehensive documentation for your codebase, enhancing its maintainability and accessibility for developers.
diff --git a/docs/core-features-and-use-cases-for-developer-roles.md b/docs/core-features-and-use-cases-for-developer-roles.md
new file mode 100644
index 000000000..30208aaa4
--- /dev/null
+++ b/docs/core-features-and-use-cases-for-developer-roles.md
@@ -0,0 +1,57 @@
+
+
+  # Core Features and Use Cases for Developer Roles
+
+## Documentation Generation
+- AI-powered content creation from existing codebase and docs
+- Automatic internal documentation generation on code commits
+- User-facing documentation creation from codebase
+
+## Editor Capabilities
+- Rich text and raw Markdown editing
+- Image and table insertion
+- Frontmatter editing
+- Draft management (create, rename, delete, modify)
+
+## Integration and Workflow
+- GitHub App for automated documentation workflows
+- Chrome Extension for capturing UI workflows
+- Repository connection to AI editor
+
+## Collaboration and Review
+- Merge drafts to different branches
+- Audit documentation for inconsistencies and gaps
+
+## Use Cases by Role
+
+### Developer
+- Generate code documentation automatically
+- Create and edit technical documentation
+- Integrate documentation into development workflow
+
+### Technical Writer
+- Leverage AI to draft initial content
+- Collaborate with developers using GitHub integration
+- Maintain consistency across documentation
+
+### Project Manager
+- Ensure up-to-date project documentation
+- Monitor documentation coverage and quality through audits
+- Streamline onboarding with comprehensive docs
+
+### DevOps Engineer
+- Set up automated documentation generation pipelines
+- Manage documentation as code alongside application code
+- Implement version control for documentation
+
+### UX Designer
+- Document UI workflows using the Chrome Extension
+- Collaborate on user guides and interface documentation
+- Ensure consistency between design and documentation
+
+### API Developer
+- Generate API documentation from codebase
+- Maintain changelogs automatically
+- Create interactive API guides for external users
+
+  
\ No newline at end of file
diff --git a/docs/dev-docs-core-features-and-use-cases.md b/docs/dev-docs-core-features-and-use-cases.md
new file mode 100644
index 000000000..509a6ef9a
--- /dev/null
+++ b/docs/dev-docs-core-features-and-use-cases.md
@@ -0,0 +1,66 @@
+
+
+  # Dev-Docs: Core Features and Use Cases for Developer Roles
+
+## Overview
+
+Dev-Docs is a comprehensive documentation platform designed to streamline the process of creating, managing, and maintaining both internal and external documentation for software projects. It offers AI-powered tools and integrations to enhance developer productivity and improve documentation quality.
+
+## Core Features
+
+1. AI-assisted content generation
+2. GitHub integration
+3. Markdown editing and raw content viewing
+4. Documentation auditing
+5. Draft management
+6. Automated workflows for documentation and changelog generation
+7. Chrome extension for capturing UI workflows
+8. User-facing documentation generation from codebase
+
+## Use Cases for Different Developer Roles
+
+### Software Engineers
+
+- Generate internal documentation directly from codebase
+- Create and manage drafts for technical specifications
+- Collaborate on documentation through GitHub integration
+- Utilize AI-assisted content generation for code explanations
+
+### Technical Writers
+
+- Create and edit user-facing documentation
+- Use AI-powered tools to generate content from existing docs
+- Audit documentation for consistency and completeness
+- Manage multiple drafts and versions of documentation
+
+### DevOps Engineers
+
+- Set up automated workflows for documentation generation
+- Configure GitHub App for continuous documentation updates
+- Manage changelogs through automated processes
+- Integrate documentation generation into CI/CD pipelines
+
+### Product Managers
+
+- Create and maintain product documentation
+- Use the Chrome extension to capture and document UI workflows
+- Generate content from existing documentation for product updates
+- Collaborate with development teams on technical specifications
+
+### Open Source Project Maintainers
+
+- Generate user-facing documentation from project codebase
+- Manage contributions to documentation through GitHub
+- Automate changelog generation for releases
+- Improve project visibility and adoption through SEO-optimized docs
+
+### QA Engineers
+
+- Document test cases and procedures using AI-assisted generation
+- Capture and document UI workflows for testing purposes
+- Collaborate on test documentation through draft management
+- Audit existing documentation for accuracy and completeness
+
+By leveraging Dev-Docs' features, development teams can significantly improve their documentation processes, leading to better code quality, improved collaboration, and enhanced project maintainability.
+
+  
\ No newline at end of file
diff --git a/docs/devops-documentation-best-practices.md b/docs/devops-documentation-best-practices.md
new file mode 100644
index 000000000..534009841
--- /dev/null
+++ b/docs/devops-documentation-best-practices.md
@@ -0,0 +1,53 @@
+# DevOps Documentation Best Practices
+
+Effective documentation is crucial for DevOps teams to maintain infrastructure, streamline processes, and ensure knowledge sharing. Follow these best practices to create and maintain high-quality DevOps documentation:
+
+## 1. Keep Documentation Close to the Code
+
+Store documentation in the same repository as the code it describes. This ensures documentation stays in sync with code changes and is easily accessible to developers.
+
+## 2. Use Version Control
+
+Manage documentation with the same version control system as your code. This allows you to track changes, revert if needed, and maintain a history of documentation updates.
+
+## 3. Adopt a "Documentation as Code" Approach
+
+Write documentation in plain text formats like Markdown. This allows for easy version control, collaboration, and integration with CI/CD pipelines.
+
+## 4. Automate Documentation Generation
+
+Use tools to automatically generate documentation from code comments, configuration files, and other sources. This helps keep documentation up-to-date with minimal manual effort.
+
+## 5. Implement a Documentation Review Process
+
+Include documentation reviews in your code review process. This ensures accuracy, completeness, and adherence to style guidelines.
+
+## 6. Use Templates and Style Guides
+
+Create templates and style guides for different types of documentation. This promotes consistency and makes it easier for team members to contribute.
+
+## 7. Include Diagrams and Visuals
+
+Use diagrams, flowcharts, and other visuals to explain complex systems and processes. Tools like PlantUML or Mermaid can be used to create diagrams as code.
+
+## 8. Document the Why, Not Just the How
+
+Explain the reasoning behind architectural decisions, configuration choices, and processes. This context is valuable for future maintenance and onboarding.
+
+## 9. Keep Documentation Up-to-Date
+
+Regularly review and update documentation. Implement processes to ensure documentation is updated whenever related code or infrastructure changes.
+
+## 10. Make Documentation Discoverable
+
+Organize documentation logically and provide clear navigation. Use tools like wikis or static site generators to create easily searchable documentation portals.
+
+## 11. Include Runbooks and Troubleshooting Guides
+
+Create detailed runbooks for common operations and troubleshooting guides for known issues. This helps reduce downtime and empowers team members to resolve issues independently.
+
+## 12. Document Your Documentation Process
+
+Create meta-documentation that explains how to contribute to and maintain documentation. This helps new team members understand your documentation workflow.
+
+By following these best practices, DevOps teams can create and maintain documentation that enhances collaboration, improves efficiency, and supports the ongoing management of infrastructure and processes.
\ No newline at end of file
diff --git a/docs/editor/Connect the starter template to the ai editor.md b/docs/editor/Connect the starter template to the ai editor.md
index cd06243f4..5ddbd70c7 100644
--- a/docs/editor/Connect the starter template to the ai editor.md	
+++ b/docs/editor/Connect the starter template to the ai editor.md	
@@ -1,6 +1,6 @@
 # Connect the starter template to the AI editor
 
-## Step 1: Navigate to the Dev-Docs dashboard
+## Step 1: Navigate to the Dev-Docs dashboard!!! Jamie is cool
 
 ![Dev-Docs dashboard](/img/connect_the_starter_template_to_the_ai_editor/step_1.png)
 
diff --git a/docs/editor/connect-existing-docs-repo-to-editor.md b/docs/editor/connect-existing-docs-repo-to-editor.md
new file mode 100644
index 000000000..497388b2f
--- /dev/null
+++ b/docs/editor/connect-existing-docs-repo-to-editor.md
@@ -0,0 +1,43 @@
+# Connect your existing docs to the AI editor
+
+## Step 1: Click connect your own docs
+
+![Set up docs](/img/connect_the_starter_template_to_the_ai_editor/step_8.png)
+
+Back in Dev-Docs, you'll see a prompt to set up your docs. Click "Connect your own docs" to proceed.
+
+## Step 2: Set up User-Facing Docs
+
+![Set up User-Facing Docs](/img/connect_the_starter_template_to_the_ai_editor/step_11.png)
+
+Click on "install the GitHub App".
+
+## Step 3: Confirm repository selection
+
+![](/img/connect_the_starter_template_to_the_ai_editor/step_13.png)
+
+Click "install" or "Configure" if you have installed already.
+
+## Step 4: Select your account or org
+
+![](/img/connect_the_starter_template_to_the_ai_editor/step_16.png)Select your GitHub account you want to install it on
+
+## Step 5: Add the docs repo
+
+![](/img/connect_the_starter_template_to_the_ai_editor/step_17.png)From the dropdown you find your docs repo. Be sure to select it and click "save".
+
+## Step 6: Associate your repo with your Dev-Docs org
+
+![](/img/connect_the_starter_template_to_the_ai_editor/step_22.png)Check to make sure your repo name matches your desired Dev-Docs org and click "complete GitHub App Setup"
+
+## Step 7: Set your documentation repo
+
+![](/img/connect_the_starter_template_to_the_ai_editor/step_25.png)You should now see a dialog that tells you to select your documentation repo. Make sure to select the one we set up from the dropdown. This is basically telling Dev-Docs this is where my docs will live, and therefore is the location the Dev-Docs editor should connect to.
+
+## Step 8: Open the editor on your new docs
+
+![](/img/starter_template_edit_docs.png)
+
+## Step 9: Push changes to GitHub
+
+![Push to GitHub](/img/connect_the_starter_template_to_the_ai_editor/step_28.png)You'll now have access to the AI editor interface where you can start creating and editing your documentation.
diff --git a/docs/editor/web-editor-overview.md b/docs/editor/web-editor-overview.md
new file mode 100644
index 000000000..1c23b63b7
--- /dev/null
+++ b/docs/editor/web-editor-overview.md
@@ -0,0 +1,46 @@
+---
+sidebar_position: 1
+---
+
+  # Web Editor Overview
+
+The Dev-Docs web editor is a powerful tool designed to streamline the process of creating, editing, and managing documentation. It offers a range of features that enhance the documentation workflow, particularly in conjunction with GitHub integration.
+
+## Key Features
+
+1. Rich Text and Raw Markdown Editing: Users can switch between a rich text editor and raw markdown view, providing flexibility in content creation and formatting.
+
+2. Draft Management: The editor allows users to create, rename, modify, and delete drafts, facilitating a smooth content development process.
+
+3. AI-Assisted Content Generation: Users can leverage AI to generate content based on existing documentation or codebase, streamlining the creation of new documentation.
+
+4. Image and Table Insertion: The editor supports easy addition of visual elements like images and tables to enhance documentation clarity.
+
+5. Frontmatter Editing: Users can add and edit frontmatter, which is crucial for managing metadata in documentation files.
+
+6. Automatic Saving: Changes are automatically saved, ensuring that work is not lost during the editing process.
+
+## GitHub Integration
+
+The web editor interacts seamlessly with GitHub, offering several key functionalities:
+
+1. Repository Connection: Users can connect their GitHub repositories to the Dev-Docs platform, allowing direct access to codebase and existing documentation.
+
+2. Branch Management: The editor supports merging drafts to specific branches on GitHub, facilitating version control and collaborative workflows.
+
+3. Automated Workflows: Through the Dev-Docs GitHub App, users can set up automated workflows for generating internal documentation and changelogs based on code changes.
+
+4. Push to GitHub: Users can push their edited content directly to GitHub repositories, maintaining synchronization between the web editor and the codebase.
+
+5. Content Generation from Codebase: The editor can generate documentation content by analyzing the connected GitHub repository's codebase.
+
+## Benefits
+
+- Streamlined Documentation Process: The web editor simplifies the creation and management of both internal and user-facing documentation.
+- Improved Collaboration: GitHub integration allows for better team collaboration on documentation projects.
+- Enhanced SEO and Sales Support: By facilitating comprehensive and up-to-date documentation, the web editor indirectly supports improved SEO and sales efforts.
+- Consistency and Quality: Features like AI-assisted generation and auditing tools help maintain consistency and quality across documentation.
+
+The Dev-Docs web editor, with its robust features and GitHub integration, serves as a comprehensive solution for managing documentation alongside code development, catering to both technical and non-technical users involved in the documentation process.
+
+  
diff --git a/docs/encodeImage.md b/docs/encodeImage.md
new file mode 100644
index 000000000..8fa13aa9f
--- /dev/null
+++ b/docs/encodeImage.md
@@ -0,0 +1,35 @@
+# encodeImage Documentation
+
+## Brief Description
+`encodeImage` is a function that converts an image file to a Base64-encoded string representation.
+
+## Usage
+To use `encodeImage`, you need to import it from the module where it's defined and provide the path to the image file you want to encode.
+
+```javascript
+import { encodeImage } from './path/to/module';
+```
+
+## Parameters
+- `imagePath` (string, required): The file path to the image that needs to be encoded.
+
+## Return Value
+Returns a string containing the Base64-encoded representation of the image.
+
+## Examples
+
+```javascript
+// Example 1: Encoding a local image file
+const encodedImage = encodeImage('./images/example.png');
+console.log(encodedImage); // Outputs: Base64 string representation of the image
+
+// Example 2: Using the encoded image in an HTML img tag
+const imgSrc = `data:image/png;base64,${encodeImage('./logo.png')}`;
+document.getElementById('myImage').src = imgSrc;
+```
+
+## Notes or Considerations
+- Ensure that the file path provided to `encodeImage` is correct and that the file exists.
+- The function uses synchronous file reading, which may block the main thread for large files. Consider using an asynchronous version for better performance in production environments.
+- The encoded string can be significantly larger than the original file size, so be mindful when working with large images or when storage/bandwidth is a concern.
+- This function is useful for embedding images directly in HTML or CSS, or for sending image data over protocols that only support text.
\ No newline at end of file
diff --git a/docs/generate-complete-user-facing-documentation.md b/docs/generate-complete-user-facing-documentation.md
new file mode 100644
index 000000000..e7fb7a4d6
--- /dev/null
+++ b/docs/generate-complete-user-facing-documentation.md
@@ -0,0 +1,67 @@
+
+
+  # Generate Complete User-Facing Documentation
+
+## Overview
+
+The "Generate Complete Public Facing Documentation" command in VS Code is a powerful feature that automatically creates comprehensive, user-friendly documentation for your project. This command is part of the Dev-Docs extension and is designed to analyze your codebase and generate a set of markdown files that can be used as public-facing documentation.
+
+## How to Use
+
+1. Open your project in VS Code.
+2. Ensure you have the Dev-Docs extension installed and configured.
+3. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac).
+4. Type "Generate Complete Public Facing Documentation" and select the command.
+5. Confirm the action when prompted.
+
+## What It Does
+
+When you run this command, it performs the following actions:
+
+1. Analyzes your entire codebase.
+2. Identifies key areas that require documentation.
+3. Generates markdown files for various aspects of your project, such as:
+   - Getting started guides
+   - API references
+   - Configuration instructions
+   - Troubleshooting guides
+   - Best practices
+   - Architecture overviews
+
+## Output
+
+The command creates a series of markdown files in a designated documentation repository associated with Dev-Docs. These files are organized in a logical structure and are ready to be used as public-facing documentation for your project.
+
+## Customization
+
+The generation process takes into account your project's structure and any existing documentation. You can customize the output by modifying the `dev-docs.json` file in your project root, which allows you to specify:
+
+- Custom root directories
+- File exclusions
+- Documentation categories
+- Branch names for documentation commits
+
+## Benefits
+
+- Saves time by automating the documentation process
+- Ensures comprehensive coverage of your project's features
+- Maintains consistent documentation structure
+- Facilitates keeping documentation up-to-date with code changes
+
+## Best Practices
+
+- Run this command periodically as your project evolves
+- Review and edit the generated documentation for accuracy and clarity
+- Use this as a starting point and enhance the documentation with specific use cases and examples
+
+## Troubleshooting
+
+If you encounter issues with the documentation generation:
+
+1. Ensure your Dev-Docs extension is up to date
+2. Check that you have the necessary permissions for the associated documentation repository
+3. Verify that your `dev-docs.json` configuration is correct
+
+For more detailed information or support, refer to the Dev-Docs extension documentation or reach out to the extension's support channels.
+
+  
\ No newline at end of file
diff --git a/docs/generate.md b/docs/generate.md
new file mode 100644
index 000000000..b0645a981
--- /dev/null
+++ b/docs/generate.md
@@ -0,0 +1,73 @@
+# generate Documentation
+
+## Brief Description
+The `generate` method sends a text prompt to an Ollama model and receives a generated response, with optional streaming support.
+
+## Usage
+To use the `generate` method, you need to create an instance of the Ollama class or use the default exported instance. Then, call the `generate` method with the appropriate parameters.
+
+```javascript
+import ollama from 'ollama'
+
+const response = await ollama.generate(/* parameters */)
+```
+
+## Parameters
+The `generate` method accepts a single object parameter with the following properties:
+
+- `model` (string, required): The name of the model to use for generation.
+- `prompt` (string, required): The text prompt to send to the model.
+- `stream` (boolean, optional): If set to `true`, the response will be streamed. Default is `false`.
+- `system` (string, optional): A system message to precede the prompt.
+- `template` (string, optional): A custom prompt template.
+- `context` (number[], optional): The context for continued generation.
+- `options` (object, optional): Additional generation options like temperature, top_k, etc.
+- `images` (Uint8Array[] | string[], optional): Images to include with the prompt.
+- `format` (string | object, optional): The desired output format.
+
+## Return Value
+- If `stream` is `false`: Returns a `Promise<GenerateResponse>`.
+- If `stream` is `true`: Returns a `Promise<AbortableAsyncIterator<GenerateResponse>>`.
+
+The `GenerateResponse` object includes properties like `response`, `context`, and various timing information.
+
+## Examples
+
+1. Basic usage:
+```javascript
+const response = await ollama.generate({
+  model: 'llama2',
+  prompt: 'Tell me a short joke'
+})
+console.log(response.response)
+```
+
+2. Streaming response:
+```javascript
+const stream = await ollama.generate({
+  model: 'llama2',
+  prompt: 'Write a short story',
+  stream: true
+})
+
+for await (const part of stream) {
+  process.stdout.write(part.response)
+}
+```
+
+3. Using images:
+```javascript
+const response = await ollama.generate({
+  model: 'llava',
+  prompt: 'What\'s in this image?',
+  images: ['./path/to/image.jpg']
+})
+console.log(response.response)
+```
+
+## Notes or Considerations
+- The `images` parameter can accept file paths (as strings) or Uint8Arrays containing image data.
+- When using `stream: true`, you receive an `AbortableAsyncIterator` which allows you to abort the generation process if needed.
+- The `context` parameter can be used for continuing a conversation or generation based on previous interactions.
+- Custom `options` allow fine-tuning of the generation process, such as adjusting temperature or setting stop tokens.
+- Ensure you have the appropriate model loaded on your Ollama instance before calling `generate`.
\ No newline at end of file
diff --git a/docs/linkedin-message-value-props-devtool-startup-founders.md b/docs/linkedin-message-value-props-devtool-startup-founders.md
new file mode 100644
index 000000000..a1636f0c1
--- /dev/null
+++ b/docs/linkedin-message-value-props-devtool-startup-founders.md
@@ -0,0 +1,29 @@
+# LinkedIn Message Value Props for DevTool Startup Founders
+
+## 1. Streamline Your Documentation Process
+
+Are you tired of juggling multiple tools for your dev documentation? Dev-Docs offers an all-in-one solution that seamlessly integrates with your existing workflow. Our AI-powered platform helps you create, manage, and publish documentation directly from your codebase, saving you valuable time and resources.
+
+## 2. Enhance Team Collaboration
+
+Dev-Docs bridges the gap between developers and technical writers. Our intuitive web editor and VS Code extension allow team members to contribute to documentation effortlessly, regardless of their technical expertise. Boost your team's productivity and ensure your documentation always stays up-to-date.
+
+## 3. Leverage AI for Better Documentation
+
+Harness the power of AI to generate high-quality documentation automatically. Dev-Docs can analyze your codebase and existing docs to create new content, suggest improvements, and even generate API documentation. Stay ahead of the curve by incorporating cutting-edge AI technology into your documentation process.
+
+## 4. Seamless GitHub Integration
+
+Our GitHub app integration automates documentation workflows, allowing you to generate internal docs and changelogs with ease. Keep your documentation in sync with your code changes and streamline your development process.
+
+## 5. Customizable and Flexible
+
+Dev-Docs adapts to your needs. Whether you prefer Markdown, rich text editing, or our custom Dev-Docs syntax, we've got you covered. Customize your documentation's look and feel with our theme editor and add interactive elements like chatbots to enhance user engagement.
+
+## 6. Improve SEO and User Experience
+
+Well-documented projects attract more users and contributors. Dev-Docs helps you create comprehensive, user-friendly documentation that improves your project's visibility and adoption rate. Our platform ensures your docs are easily searchable and accessible, boosting your SEO efforts.
+
+## 7. Scale Your Documentation Effortlessly
+
+As your project grows, so do your documentation needs. Dev-Docs scales with you, providing tools to manage complex documentation structures, versioning, and multi-language support. Stay organized and efficient, no matter how large your project becomes.
diff --git a/docs/ollama-functions-overview.md b/docs/ollama-functions-overview.md
new file mode 100644
index 000000000..b3f992eef
--- /dev/null
+++ b/docs/ollama-functions-overview.md
@@ -0,0 +1,53 @@
+
+
+  # Ollama Functions Overview
+
+Ollama provides a set of powerful functions that make it easy for developers to interact with large language models (LLMs) in their applications. These functions are designed to be intuitive, flexible, and efficient, catering to a wide range of use cases.
+
+## Key Functions
+
+1. **generate**: Generates text based on a given prompt, allowing for fine-tuned control over the model's output.
+
+2. **chat**: Enables conversational interactions with the model, supporting multi-turn dialogues and context management.
+
+3. **embed**: Creates vector embeddings for text input, useful for semantic search and text similarity tasks.
+
+4. **create**: Allows developers to create custom models by specifying parameters and training data.
+
+5. **pull**: Downloads pre-trained models from the Ollama registry, making it easy to access a variety of LLMs.
+
+6. **push**: Enables sharing of custom models by uploading them to the Ollama registry.
+
+7. **list**: Retrieves information about available models on the local system.
+
+8. **show**: Displays detailed metadata about a specific model.
+
+9. **copy**: Creates a duplicate of an existing model with a new name.
+
+10. **delete**: Removes a model from the local system.
+
+## Benefits for Developers
+
+1. **Ease of Use**: The functions are designed with a clean and consistent API, making it straightforward for developers to integrate LLMs into their projects.
+
+2. **Flexibility**: Supports both streaming and non-streaming responses, allowing developers to choose the most suitable approach for their use case.
+
+3. **Customization**: Offers extensive options for fine-tuning model behavior, including temperature, top-k, and top-p sampling.
+
+4. **Efficient Resource Management**: Provides options for managing model loading and unloading, optimizing memory usage.
+
+5. **Cross-Platform Compatibility**: Works seamlessly across different environments, including browsers and Node.js.
+
+6. **Rich Ecosystem**: The ability to create, share, and use custom models fosters a vibrant community of developers and researchers.
+
+7. **Image Support**: Functions like `chat` and `generate` support multi-modal inputs, allowing for image processing alongside text.
+
+8. **Tool Integration**: The `chat` function supports the use of custom tools, enabling developers to extend the model's capabilities with external functions.
+
+9. **Robust Error Handling**: Implements comprehensive error checking and provides informative error messages for easier debugging.
+
+10. **Asynchronous Operations**: All functions return Promises or AsyncIterators, allowing for efficient asynchronous programming patterns.
+
+By providing these well-designed functions, Ollama empowers developers to easily harness the power of LLMs in their applications, fostering innovation and creativity in the AI development community.
+
+  
\ No newline at end of file
diff --git a/docs/revolutionizing-technical-writing-how-our-editor-makes-documentation-a-breeze.md b/docs/revolutionizing-technical-writing-how-our-editor-makes-documentation-a-breeze.md
new file mode 100644
index 000000000..cea4d5b3d
--- /dev/null
+++ b/docs/revolutionizing-technical-writing-how-our-editor-makes-documentation-a-breeze.md
@@ -0,0 +1,69 @@
+
+
+  # Revolutionizing Technical Writing: How Our Editor Makes Documentation a Breeze
+
+In the fast-paced world of software development, creating and maintaining high-quality technical documentation can often feel like a daunting task. However, with our innovative web editor, we're transforming the way teams approach technical writing, making it more efficient, collaborative, and even enjoyable. Let's explore how our editor is simplifying the documentation process and empowering both technical and non-technical team members.
+
+## Streamlined Content Creation
+
+Our editor offers a user-friendly interface that caters to various content creation needs:
+
+1. **Rich Text and Markdown Support**: Switch seamlessly between rich text and raw markdown views, giving you the flexibility to write in the format you're most comfortable with.
+
+2. **Easy Media Integration**: Adding visual elements is a breeze. With just a few clicks, you can insert images and tables to enhance your documentation's clarity and appeal.
+
+3. **Draft Management**: Create, rename, modify, and delete drafts effortlessly. This feature allows for iterative content development without the fear of losing work.
+
+4. **Frontmatter Editing**: Easily manage metadata for your documentation files, ensuring proper organization and searchability of your content.
+
+## AI-Powered Assistance
+
+Our editor leverages artificial intelligence to supercharge your writing process:
+
+1. **AI-Generated Content**: Generate new content based on your existing documentation or codebase, providing a solid starting point for your writing.
+
+2. **Smart Editing Tools**: Use AI helpers to refine your content. Whether you need to make text longer, shorter, change its tone, or fix grammar and spelling, our AI tools have got you covered.
+
+3. **Content Auditing**: Utilize AI to audit your documentation for inconsistencies, ensuring a cohesive and professional end product.
+
+## Seamless GitHub Integration
+
+For development teams, our editor's GitHub integration is a game-changer:
+
+1. **Direct Repository Connection**: Connect your GitHub repositories to access your codebase and existing documentation directly within the editor.
+
+2. **Branch Management**: Merge your drafts to specific branches on GitHub, maintaining version control and facilitating collaborative workflows.
+
+3. **Automated Documentation Generation**: Set up workflows to automatically generate internal documentation and changelogs based on code changes.
+
+4. **Push to GitHub**: Synchronize your edited content directly with your GitHub repositories, ensuring your documentation stays up-to-date with your code.
+
+## Collaborative Features
+
+Our editor promotes teamwork and efficient collaboration:
+
+1. **Real-Time Saving**: Changes are saved automatically, allowing team members to work on documentation simultaneously without conflicts.
+
+2. **Review and Feedback**: Easily share drafts for review and incorporate feedback from team members.
+
+3. **Version History**: Keep track of changes and revert to previous versions if needed, providing a safety net for collaborative editing.
+
+## Benefits for Technical Writing Teams
+
+1. **Increased Efficiency**: By streamlining the documentation process, teams can produce high-quality content faster than ever before.
+
+2. **Improved Consistency**: AI-assisted generation and auditing tools help maintain a consistent voice and style across all documentation.
+
+3. **Enhanced Accessibility**: The user-friendly interface makes it easier for non-technical team members to contribute to documentation efforts.
+
+4. **Better Integration with Development**: The tight GitHub integration ensures that documentation evolves alongside the codebase, reducing the likelihood of outdated or inaccurate information.
+
+5. **SEO and Sales Support**: Comprehensive and up-to-date documentation indirectly supports improved SEO efforts and can be a valuable asset for sales teams.
+
+## Conclusion
+
+Our web editor is more than just a tool; it's a comprehensive solution for modern technical writing challenges. By combining user-friendly features, AI assistance, and seamless integration with development workflows, we're making it easier than ever to create, maintain, and collaborate on technical documentation. Whether you're a seasoned technical writer, a developer documenting your code, or a product manager contributing to user guides, our editor empowers you to produce high-quality documentation efficiently and effectively.
+
+Experience the future of technical writing with our innovative editor and transform the way your team approaches documentation. Say goodbye to the struggles of traditional documentation processes and embrace a more streamlined, collaborative, and intelligent way of creating technical content.
+
+  
\ No newline at end of file
diff --git a/docs/rotateSpritesheet.md b/docs/rotateSpritesheet.md
new file mode 100644
index 000000000..76b996810
--- /dev/null
+++ b/docs/rotateSpritesheet.md
@@ -0,0 +1,36 @@
+# rotateSpritesheet Documentation
+
+## Brief Description
+`rotateSpritesheet` is a function that rotates a spritesheet image by a specified number of degrees.
+
+## Usage
+To use `rotateSpritesheet`, you need to import it from the module where it's defined. Then, you can call the function with an image buffer and the desired rotation angle.
+
+## Parameters
+- `inputBuffer` (Buffer): The input image buffer containing the spritesheet.
+- `degrees` (Number): The number of degrees to rotate the spritesheet. Positive values rotate clockwise, negative values rotate counterclockwise.
+
+## Return Value
+Returns a Promise that resolves to a Buffer containing the rotated spritesheet image.
+
+## Examples
+
+```javascript
+import { rotateSpritesheet } from './spritesheetUtils';
+
+// Assuming you have an image buffer
+const imageBuffer = getImageBufferSomehow();
+
+// Rotate the spritesheet 90 degrees clockwise
+const rotatedSpritesheet = await rotateSpritesheet(imageBuffer, 90);
+
+// Use the rotated spritesheet
+// For example, save it to a file or use it in your game engine
+```
+
+## Notes or Considerations
+- The function uses the Sharp library for image processing, which provides high-performance image manipulation.
+- Rotation is performed around the center of the image.
+- The output image dimensions may change if the rotation is not a multiple of 90 degrees.
+- Consider the impact on your spritesheet's layout when rotating. You may need to adjust your animation frames or sprite positions after rotation.
+- Large spritesheets may require more processing time and memory.
\ No newline at end of file
diff --git a/docs/sprite-ai-function-overview.md b/docs/sprite-ai-function-overview.md
new file mode 100644
index 000000000..e71ce4dc7
--- /dev/null
+++ b/docs/sprite-ai-function-overview.md
@@ -0,0 +1,46 @@
+
+
+  # SpriteAI Function Overview
+
+## Core Functions
+
+- `generateSprite(description, options)`: Generate a sprite based on a description.
+- `generatePixelArt(description, options)`: Create pixel art sprite.
+- `generateIsometric(description, options)`: Generate isometric sprite.
+- `generateAnimatedEmoji(description, options)`: Create animated emoji sprites.
+- `generateRetroConsole(description, consoleType, options)`: Generate sprites for specific retro consoles.
+
+## Sprite Manipulation
+
+- `splitSpriteSheet(imageBuffer, columns, rows, options)`: Split a spritesheet into individual frames.
+- `createParticleEffect(description, particleCount, options)`: Generate particle effects from a sprite.
+- `createColorCycle(description, options)`: Create color cycling animation.
+- `combineSprites(description1, description2, position, options)`: Combine two sprites.
+- `addOutline(description, outlineOptions, options)`: Add outline to a sprite.
+- `createGlitchArt(description, glitchOptions, options)`: Apply glitch effect to a sprite.
+- `generateSpriteVariations(description, variations, options)`: Generate multiple variations of a sprite.
+- `optimizePalette(description, maxColors, options)`: Optimize sprite color palette.
+- `createPixelPerfect(description, scale, options)`: Create pixel-perfect scaled version of a sprite.
+- `addShadow(description, shadowOptions, options)`: Add shadow effect to a sprite.
+- `createMirrorSprite(description, direction, options)`: Create mirrored version of a sprite.
+- `createSpriteAnimation(description, frameCount, options)`: Generate sprite animation frames.
+- `addReflectionEffect(description, reflectionOptions, options)`: Add reflection effect to a sprite.
+- `addWaveEffect(description, waveOptions, options)`: Apply wave distortion to a sprite.
+- `addPixelationEffect(description, pixelationOptions, options)`: Apply pixelation effect to a sprite.
+- `addMosaicEffect(description, mosaicOptions, options)`: Create mosaic effect from a sprite.
+- `addDissolveEffect(description, dissolveOptions, options)`: Apply dissolve effect to a sprite.
+- `addSplashEffect(description, splashOptions, options)`: Add splash effect to a sprite.
+- `addShatterEffect(description, shatterOptions, options)`: Create shatter effect for a sprite.
+- `addKaleidoscopeEffect(description, kaleidoscopeOptions, options)`: Apply kaleidoscope effect to a sprite.
+
+## Utility Functions
+
+- `removeBackgroundColor(inputPath, outputPath, targetColor, colorThreshold, options)`: Remove background color from an image.
+- `encodeImage(imagePath)`: Encode an image to base64.
+- `getUniqueColors(imagePath, options)`: Get unique colors from an image.
+- `rotateSpritesheet(inputBuffer, degrees)`: Rotate a spritesheet.
+- `tintSprite(inputBuffer, color)`: Apply tint to a sprite.
+- `calculateOptimalAnimationSpeed(frameCount)`: Calculate optimal animation speed.
+- `generateSpriteMetadata(imageBuffer, frameWidth, frameHeight)`: Generate metadata for a sprite.
+
+  
\ No newline at end of file
diff --git a/docs/static-site-generators-for-documentation.md b/docs/static-site-generators-for-documentation.md
new file mode 100644
index 000000000..7599bc896
--- /dev/null
+++ b/docs/static-site-generators-for-documentation.md
@@ -0,0 +1,79 @@
+# Comprehensive Guide to Using Static Site Generators for Documentation
+
+Static site generators are powerful tools for creating fast, secure, and easily-maintainable documentation websites. This guide will walk you through the process of choosing and using a static site generator for your documentation needs.
+
+## What are Static Site Generators?
+
+Static site generators take your content (usually written in Markdown) and templates, and generate a complete static HTML website. This approach offers several benefits for documentation:
+
+- Fast load times
+- Improved security
+- Easy version control
+- Simplified hosting
+
+## Popular Static Site Generators for Documentation
+
+1. **Jekyll**
+   - Ruby-based
+   - Integrates well with GitHub Pages
+   - Large community and plugin ecosystem
+
+2. **Hugo**
+   - Go-based
+   - Extremely fast build times
+   - Flexible content management
+
+3. **Docusaurus**
+   - React-based
+   - Specifically designed for documentation sites
+   - Features like versioning and search built-in
+
+4. **MkDocs**
+   - Python-based
+   - Simple and easy to use
+   - Great for smaller projects
+
+## Choosing the Right Generator
+
+Consider the following factors when selecting a static site generator:
+
+- Your team's technical expertise
+- The size and complexity of your documentation
+- Desired features (search, versioning, i18n)
+- Integration with existing tools and workflows
+
+## Setting Up Your Documentation Project
+
+1. Install your chosen static site generator
+2. Initialize a new project
+3. Configure your site settings
+4. Create your content structure
+5. Write your documentation in Markdown
+6. Customize your theme and layout
+
+## Best Practices for Documentation Sites
+
+- Use clear and consistent navigation
+- Implement a search function
+- Optimize for mobile devices
+- Include versioning for different releases
+- Integrate analytics to track usage
+
+## Hosting and Deployment
+
+Many static site generators integrate seamlessly with platforms like:
+
+- GitHub Pages
+- Netlify
+- Vercel
+
+These platforms often offer automatic deployment when you push changes to your repository.
+
+## Maintaining Your Documentation
+
+- Regularly review and update content
+- Use a style guide for consistency
+- Implement a review process for contributions
+- Monitor site analytics to identify areas for improvement
+
+By following this guide, you'll be well-equipped to create and maintain high-quality documentation using static site generators.
\ No newline at end of file
diff --git a/docs/testingfunjamie.md b/docs/testingfunjamie.md
new file mode 100644
index 000000000..dff0915bc
--- /dev/null
+++ b/docs/testingfunjamie.md
@@ -0,0 +1 @@
+# hey