Tuesday, September 10, 2024
macOS 15 Sequoia
BetterSnapTool and BetterTouchTool work great on macOS 15 Sequoia [...]
Thursday, March 7, 2024
Cool Stuff From The Community Forum
This post shows creative things users in the community forum came up with [...]
Thursday, June 29, 2023
BTT v4.136: Floating Menus
BTT 4.136 with a powerful new feature called Floating Menus has just been released [...]
Saturday, February 25, 2023
Blog Series: #1 ChatGPT + BetterTouchTool = ❤️
Starting a new series on cool things you can do with BetterTouchTool. [...]
Blog Series: #1 ChatGPT + BetterTouchTool = ❤️
Posted on Saturday, February 25, 2023
◀︎ Go back to all postsCommentsStarting today I'll trying to post one or two cool thing you can do with BetterTouchTool per week.
Let's start with something that is being talked about a lot lately: OpenAI's ChatGPT. Many people already use it for their daily work. I'll show you how to use BTT to integrate it seamlessly into your macOS experience.
This post will show two things:
- Show ChatGPT via a menu bar icon
- Use ChatGPT inline in every textfield in macOS. (Via OpenAI's paid APIs, so without hitting the constant capacity issues)
1. Menu Bar ChatGPT
One nice feature in BetterTouchTool is the ability to create custom menu bar icons, which can be used for any sort of functionality. In this example we will combine it with the "Floating Web View" action in BetterTouchTool to make a Menu Bar ChatGPT.
If you do not want to configure this yourself, download the preset that contains the final config here: https://share.folivora.ai/sharedPreset/0a6db263-af37-4eb0-bc83-2d91a4010ae4
Step 1: Create Custom Menubar Icon
-
Go to the Automations & Named & Other Triggers section in BetterTouchTool. Then add a new Trigger and choose "Custom Menu Bar Icon".
-
Give it some identifier in the Config tab.
-
Go to the Common tab and choose Icon: From SF Symbols. This is Apple's icon library , you can browse all the icons by installing the free SF Symbols app from https://developer.apple.com/sf-symbols/ . In this example we use an icon named brain
-
Check the Show Only Icon No Text checkbox
-
Done! Now your menubar should show a nice little brain icon.
Step 2: Show ChatGPT in a little window when clicking the Menu Bar Icon
Now we need to make the Custom Menu Bar Icon do something.
-
To do this, assign a new action and select "Show Floating WebView/HTML Menu".
-
Enter the ChatGPT URL in the "HTML/Content" tab
-
Set an appropriate size, I'm using 500px width x 600px height.
-
Check the "Resizable" checkbox to make the window resizable
-
Check the "Specify Position" checkbox. We want to show ChatGPT on the top right where the menu bar icons are. Choose "Top right of webview & screen with mouse" as the anchor, then enter something like x: -200 to make it move a little to the left.
-
Check the Use white background checkbox.
2. Inline ChatGPT
This idea comes from user @extr via https://news.ycombinator.com/item?id=34614796#34615673 It is not technically ChatGPT (the ChatGPT API is not yet available), however it will deliver very similar results. It is using the APIs offered by OpenAI.
This requires at least BetterTouchTool 4.015 to work properly.
Step 1: Sign Up for the OpenAI API and retrieve an API key
This requires access to the paid Open AI APIs. Signing up is free and you can set a maximum amount of money you want to spent.
-
Register a paid account here: https://platform.openai.com/
-
Add an API key here: https://platform.openai.com/account/api-keys
-
Set usage limits (max amount you are willing to pay): https://platform.openai.com/account/billing/limits
Step 2: Configure BetterTouchTool
In BetterTouchTool we will make use of the "Transform & Replace Selection With Java Script" action To configure this in a very flexible way we also make use of "Reusable Named Triggers", which can be called from any other trigger type in BTT.
-
Go to the "Automations & Named & Other Triggers" section in BetterTouchTool.
-
Add a new trigger and select "Reusable Named Trigger"
-
Give it a name (in this example I call it OpenAIAPI)
-
Assign the action "Transform & Replace Selection With Java Script" and insert this Java Script and insert your API Key.
//edit: 01. March 2023, updated to use the cheaper ChatGPT API:
async (clipboardContentString) => {
// ------------------------------------------------
// CONFIGURATION (API Key):
// ------------------------------------------------
const OPENAI_API_KEY = "YOUR_TOKEN_HERE";
// here you can pre-configure the AI with some configuration prompt:
const BEHAVIOR_DESCRIPTION = "You are a helpful AI assistant.";
// ------------------------------------------------
// CODE starts here (no change required)
// ------------------------------------------------
let previousChat = [];
showHUD("Transforming...", "brain", 100);
try {
if(BEHAVIOR_DESCRIPTION) {
previousChat.push({"role": "system", "content": BEHAVIOR_DESCRIPTION});
}
previousChat.push({"role": "user", "content": clipboardContentString ? clipboardContentString : ''});
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${OPENAI_API_KEY}`,
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: previousChat
}),
});
showHUD("Success", "checkmark.circle", 1);
const data = await response.json();
const text = data.choices[0].message.content;
return `${clipboardContentString} ${text}`;
} catch (error) {
showHUD("Error", "x.circle", 3);
return "Error";
}
function showHUD(text, icon, duration) {
const hudConfig = {
BTTActionHUDHideWhenOtherHUDAppears: true,
BTTActionHUDDetail: text,
BTTIconConfigSFSymbolName: icon,
BTTActionHUDDuration: duration,
BTTActionHUDSlideDirection: 0,
BTTIconConfigImageHeight: 50,
BTTActionHUDTitle: "",
BTTIconConfigIconType: 2,
};
const actionDefinition = {
BTTWaitForReply: false,
BTTPredefinedActionType: 254,
BTTHUDActionConfiguration: JSON.stringify(hudConfig),
};
callBTT("trigger_action", { json: JSON.stringify(actionDefinition) });
}
};
-
Now you are almost done, you just need to choose a trigger that you want to use to execute this. For example you can go to the "Keyboard Shortcuts" section in BTT and add a new keyboard shortcut, then assign the "Trigger Named Trigger" action and enter the name you defined (in this example OpenAIAPI)
