Preview Window for ChatGPT API Text Manipulation Results

First off, thank you for creating such a powerful and versatile tool. The ability to manipulate text using the ChatGPT API via shortcuts has been a game-changer for my workflow. I’m reaching out to propose a feature that I believe could enhance this functionality even further.

Feature Request: When using the ChatGPT API to modify text (e.g., summarizing, editing, or translating), I’d love to see a preview window pop up displaying the result of the operation, rather than having the text directly replaced or copied to the clipboard. The preview window could include:

  1. Result Display: Clearly show the modified text returned by the ChatGPT API.
  2. Action Options: Provide buttons for the user to either apply the changes (replace the original text), copy the result to the clipboard, or cancel the operation.

Here's a sample picture I got from Raycast, it could be something like this

Hi,

I am also very interested in adding this feature. The idea of a preview window for text changes would be very helpful to me.

here is a simple example on how to achieve something like that, it asks ChatGPT to describe what the currently selected text does and puts the result into a simple floating menu - you can adapt it in any way. You might want to adapt the prompt and ask ChatGPT to output HTML that can directly be rendered.

ai-preview.bttpreset (34.4 KB)

3 Likes

Thank you. It's a good starting point, I'll work on it and try to improve it. I hope I won't get lost in it :sweat_smile:

If you come up with anything nice, please share :slight_smile: I like the idea of adding a built in option for this, but want to try out a few things first.

I will soon add a way to use a similar process for streaming responses (word by word output) as well. Currently this will need to wait for the full response to have arrived.

2 Likes

With Claude's help I managed to show the information from the api in a proper format, but I can't go any further, bettertouchtool is too deep, this is all I can do for now and it's not bad. The more I tried the more confused I got, I think I'll stick with this, I couldn't do it :smiley: :smiley:

Hi @Crokxy,

Would it be possible to share your preset? I am interested in using it as well.

Thank you in advance.

Of course, but sometimes it styles in an unintended way and doesn't work fully.
We have to wait until we get official support and streaming responses

ai-preview2.bttpreset (57.8 KB)

Instead of trying to parse the output of ChatGPT, try to adapt the system prompt and tell it to output HTML, this should work much better.

For example:

You are a helpful assistant who interprets every input as raw text unless instructed otherwise. Do not write details unless they are requested. You output needs to be simple but easy to read HTML that can directly be rendered in a webview. (Assume your output will directly be rendered within the body of a HTML document)
<html>
<head>
<style>
<!-- your CSS styling here -->
</style>
</head>
<body>
  {BTTChatGPTResponse}
</body>

</html>
1 Like

Yes, when I do it like this, it is much easier to apply still directly with css, but when I want to copy it, it copies it with html tags. And it also automatically copies the response to Clipboard even if I uncheck 'Copy response to Clipboard'.

here is an example on how you can make the copy & paste buttons paste the unformatted text:

ai-preview3.bttpreset (58.5 KB)