It’s strange that it works in the browser but not the app. If possible can you try this:
I’m wondering if works in the app on macOS? I’m using the 6.4.0 and tried with a prefix of :gpt but it didn’t do anything. Has this been implemented or not?
I haven’t tested the other prefixes supported by MacGPT. But I’ll do that later today I think.
No need. None of the 5 MacGPT trigger words is working inside BSS
We will investigate why OS-level text completions are not working in Bootstrap Studio. However we won’t be doing tighter integration like website generation at this time.
I just got an email from Google today that their Bard A.I. now has coding capabilities.
I plan to play around with it over the next few days, and I’ll let you all know how it compares to ChatGPT.
I am interested to know your thoughts on bard coding capabilities. 
So far, being a total neophyte when it comes to writing JS, I’m pretty impressed with Bard. I can see it becoming a very useful tool for me in learning how JavaScript works (and eventually how to write it.)
Some months ago, I asked a friend here in the forum if he could do me a favor and create a JavaScript that would pause a background video on one of my websites after a person scrolled a specified distance (which he kindly did for me.)
I then decided to give the same task to Bard, and compare the results. Here’s how it went down…
ME: Create a javascript that pauses a video after a user has scrolled down the page 820 pixels
BARD: Sure, here is the JavaScript code to pause a video after a user has scrolled down the page 820 pixels:
window.onscroll = function() {
var scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
$('video').pause();
}
};
BARD: This code will listen for the scroll event on the window object. When the event is fired, it will get the current scroll position of the window using the window.pageYOffset property. If the scroll position is greater than or equal to 820 pixels, the code will pause the video using the $(‘video’).pause() method.
To use this code, you would need to add it to the HTML document where the video is located. For example, you could add it to the head section of the document:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.onscroll = function() {
var scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
$('video').pause();
}
};
</script>
</head>
BARD: This code would pause the video when the user has scrolled down the page 820 pixels.
ME: Please change the above code into vanilla javascript
BARD: Sure, here is the vanilla JavaScript code to pause a video after a user has scrolled down the page 820 pixels:
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
for (const video of document.querySelectorAll('video')) {
video.pause();
}
}
});
BARD: This code is similar to the jQuery code, but it uses the native addEventListener() method to listen for the scroll event. It also uses the querySelectorAll() method to get all of the video elements on the page, and then it pauses each one using the pause() method.
To use this code, you would need to add it to the HTML document where the video is located. For example, you could add it to the head section of the document:
<head>
<script>
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
for (const video of document.querySelectorAll('video')) {
video.pause();
}
}
});
</script>
</head>
BARD: This code would pause the video when the user has scrolled down the page 820 pixels.
ME: please adjust to the code to target a video with the ID myVid
BARD: Sure, here is the code to target a video with the ID myVid:
const myVid = document.getElementById('myVid');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
myVid.pause();
}
});
BARD: This code is similar to the previous code, but it uses the getElementById() method to get the video element with the ID myVid. It then pauses the video using the pause() method.
To use this code, you would need to add it to the HTML document where the video is located. For example, you could add it to the head section of the document:
<head>
<script>
const myVid = document.getElementById('myVid');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
myVid.pause();
}
});
</script>
</head>
BARD: This code would pause the video with the ID myVid when the user has scrolled down the page 820 pixels.
ME: Please adjust the code so the video starts playing if the user scrolls back up
BARD: Sure, here is the code to adjust the code so the video starts playing if the user scrolls back up:
const myVid = document.getElementById('myVid');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
myVid.pause();
} else if (scrollTop < 820) {
myVid.play();
}
});
BARD: This code is similar to the previous code, but it also checks if the scroll position is less than 820 pixels. If it is, the code will play the video using the play() method.
To use this code, you would need to add it to the HTML document where the video is located. For example, you could add it to the head section of the document:
<head>
<script>
const myVid = document.getElementById('myVid');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
myVid.pause();
} else if (scrollTop < 820) {
myVid.play();
}
});
</script>
</head>
BARD: This code would pause the video with the ID myVid when the user has scrolled down the page 820 pixels, and it would play the video when the user scrolls back up.
ME: Please add a listener to ensure the DOM content has fully loaded
BARD: Sure, here is the code to add a listener to ensure the DOM content has loaded:
document.addEventListener('DOMContentLoaded', function() {
const myVid = document.getElementById('myVid');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
myVid.pause();
} else if (scrollTop < 820) {
myVid.play();
}
});
});
BARD: This code is similar to the previous code, but it also listens for the DOMContentLoaded event. This event is fired when the DOM content has finished loading. So, by listening for this event, we can ensure that the video will not be paused until the DOM content has finished loading.
To use this code, you would need to add it to the HTML document where the video is located. For example, you could add it to the head section of the document:
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
const myVid = document.getElementById('myVid');
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset;
if (scrollTop >= 820) {
myVid.pause();
} else if (scrollTop < 820) {
myVid.play();
}
});
});
</script>
</head>
BARD: This code would pause the video with the ID myVid when the user has scrolled down the page 820 pixels, and it would play the video when the user scrolls back up. It would also ensure that the video is not paused until the DOM content has finished loading.
ME: How is the script you created different from the following script (this is the script that my friend created for me.)
document.addEventListener(
'DOMContentLoaded',
function () {
'use strict';
const video = document.querySelector('#myVid');
const scrollHandle = () => {
if (window.pageYOffset > 820) video.pause();
else video.play();
};
window.addEventListener('scroll', scrollHandle, false);
},
false
);
BARD: The main difference between the two scripts is that the first script uses the getElementById() method to get the video element with the ID myVid, while the second script uses the querySelector() method to get the first video element on the page. The second script also uses a function expression to create a function that is called when the scroll event is fired. This function checks the scroll position and pauses or plays the video accordingly.
The first script is more explicit, as it uses the getElementById() method to get the video element with the ID myVid. This makes it easier to understand what the code is doing. The second script is more concise, as it uses the querySelector() method to get the first video element on the page. This makes it more efficient, as it does not need to specify the ID of the video element.
Ultimately, the best script to use depends on your specific needs. If you need to be explicit about what the code is doing, then the first script is a good choice. If you need to be efficient, then the second script is a good choice.
So Bard got the job done - albeit in a different way than my friend did. I’ve noticed that Bard usually will write code using jQuery unless you specify beforehand to use vanilla JS.
Nice!! These days i have Visual Studio Code, ChatGPT, Bard all open all the time for learning. Imagine if you could chat like that inside BSS. I don’t know how but i am sure there might be a way.
Pinegrow has added ChatGPT as a window inside the program. Since I don’t have a ChatGPT account, I haven’t been able to evaluate it, but I believe it is an interactive window (meaning, ChatGPT can directly make changes to settings and code inside Pinegrow.) They rolled out these feature very shortly after they hype started building around ChatGPT.
I think the Bootstrap Studio developers should start looking into how to add one of these chatbot APIs into BSS as soon as possible. They are complete game changers in terms of being able to quickly do things that are outside the scope of the program, or things that a person simply doesn’t know how to do.
Imagine being able to type into a window, “Create custom CSS rules to increase all the padding in the current website by 10% at the xxl breakpoint” or “add a 5 second “slide-in from the right” animation to every image on this page, and have the animation triggered when the user scrolls” or, "using the first 20 images in the folder named “cars,” create a finished Bootstrap Carousel. The time savings would be incredible.
I suspect most of the bigger website development players (ex. Wix, Webflow, Squarespace, etc.) will likely be adding something like this in the next year, and those that don’t are going to be at a serious disadvantage.
I use AI content improvers and grammar-checkers constantly. I haven’t really started using Bard in my development flow yet, but that may start changing as I learn more about its capabilities. I have three large widescreen monitors, so almost always I keep a browser open on one of them when I’m developing for previewing my site, and using various cloud-based utilities.
Having an AI assistant inside BSS that can actually change the settings and code would be astounding.
The one big advantage Bard has over ChatGPT is that it can pull data from the live internet. So it’s constantly adding to it’s abilities, and will have the ability to work with the most current releases of stuff. GPT4 is (I believe) limited to data 2021 and older. That means it may not even have knowledge of Bootstrap 5 (you could probably check this.)
Bard can create HTML using Bootstrap, but it also makes mistakes. For example, I told it to create am HTML page with a Bootstrap 5 accordion, and it correctly created the code with an accordion that had three items. Then I told it to change the content of the third accordion item to read, “This accordion was created with Bard.” But instead of replacing the content, it changed the text in the button. When I pointed out the error and asking it to correct it, it rewrote the exact same code but claimed it was corrected.
So it’s not quite there yet. It seems the deeper you go into a task, the more easily the bot gets “confused.”
I suspect that this is a matter of learning how to write more clear and concise instructions. As I understand it, there are already people starting companies that specialize in writing effective chatbot prompts (which doesn’t surprise me.)
As I suspected, it was a matter of prompting. I created a new page with a Bootstrap Accordion, and it made the same mistake, but this time I told it, “you made a mistake. You put the text in the button instead of the card-body.” Then it rewrote the code correctly…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Accordion</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Bootstrap 5 Accordion</h1>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, fugiat, quidem, illo quisquam voluptatem temporibus accusantium deleniti officiis minus nobis natus distinctio, eaque adipisci sequi voluptate!
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordionExample">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, fugiat, quidem, illo quisquam voluptatem temporibus accusantium deleniti officiis minus nobis natus distinctio, eaque adipisci sequi voluptate!
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">
Accordion Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordionExample">
<div class="card-body">
This accordion was created with Bard
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
@printninja
if you ask chatGPT it gives you this with current version of bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Accordion Example</title>
<!-- Add Bootstrap CSS stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-QlFd65HhXe1b5RyqJvzXU3qYFlmD9np6rpbQbM1aDj+KyLZwJGQx4jh+ZmlKtG6x3kld98vzl6V9PyWTzT9TlQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Accordion Example</h1>
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#myAccordion">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum, urna ac feugiat rhoncus, mauris quam tincidunt odio, eu tincidunt dolor nibh ac sem. Praesent eget mauris leo. Etiam suscipit pharetra eros quis convallis.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#myAccordion">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet elementum nisi, non fringilla neque. Duis dapibus varius mauris, eu pharetra mauris mollis sit amet.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#myAccordion">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, urna quis maximus bibendum, odio libero commodo velit, ac egestas dolor enim a nibh.
</div>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap JS script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap
Interesting. Some clear differences. One problem with the code that ChatGPT produced… it does not work because there is no 5.3.2 distribution of Bootstrap. The URL it used for the CDN does not seem to exist…
https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css
The exact instructions I gave Bard the first time were, " Create an HTML page with a Bootstrap accordion Bootstrap 5.0" It chose to use 5.0.0-beta1
Then I tried it again and wrote, " Create an HTML page with a Bootstrap accordion using the latest version of Bootstrap" and it chose to use 5.0.2
Then I told it, “Create an HTML page with a Bootstrap accordion using the latest version of Bootstrap 5.2” and it used 5.2.0
Then I told it “Create an HTML page with a Bootstrap accordion using the alpha version of Bootstrap 5.3” and it chose to use 5.3.0-alpha3 (the latest version.)
All the accordions worked when I tested the code produced by Bard.
These chatbot AI’s are a rabbit hole that goes very deep…
PineGrow have been actively improving the AI integration. I used the first version to build the structure of a one page lander in the matter of minutes. It sure can be handy.
ChatGPT is already a big part of my workflow. At this stage it’s a great code assistant, not a replacement. It does drift off context, and adds things occasionally.
I’ve had it assess code for optimisation, which it’s optimised and in the process removed entire functions. 
so you still need an idea of what it’s doing so you can correct it.
It would be great to see some interaction in BSS. I’m sure the devs will make the decision when that’s a good time or if it happens at all. Other apps like Blocs have started to implement AI as well, the implementation there is a mix of ChatGPT API and leveraging the ML built into MacOS (I think). It is still in beta.
I am still on the waitlist for v4. Friends of mine who joined the waitlist after me, already have access 
Although I heard V4 is a lot more expensive to use.
Super excited for BS 6.5 
“AI Assistant - add your OpenAI API key and use ChatGTP to modify and create designs for you”