summarize-with-ai-widget.ts

// Name: Summarize with AI Widget
// Description: Get a summary of any topic using OpenAI and display in a widget.
// Author: AI Script Generator

import '@johnlindquist/kit'
import { OpenAI } from 'openai'

// Initialize OpenAI client with API key from environment variable
const openai = new OpenAI({
  apiKey: await env('OPENAI_API_KEY', {
    hint: `Get an API key from <a href="https://platform.openai.com/account/api-keys">here</a>`,
    secret: true,
  }),
});

// Get topic from user using arg prompt
const topic = await arg('Enter a topic to summarize:')

// Generate summary using OpenAI API
const response = await openai.chat.completions.create({
  model: 'gpt-4o-mini', // Using gpt-4o-mini for faster and cheaper responses
  messages: [{ role: 'user', content: `Summarize the following topic in a few sentences: ${topic}` }],
});

// Extract summary from OpenAI response
const summary = response.choices[0]?.message?.content || 'Failed to generate summary.';

// Create a widget to display the summary
const summaryWidget = await widget(
  `
<div class="p-4 bg-white text-black">
  <h1 class="text-2xl font-bold mb-2">Summary of "${topic}"</h1>
  <p>{{ summary }}</p>
  <button id="copy-button" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">Copy Summary</button>
</div>
`,
  {
    state: { summary },
    width: 500,
    height: 400,
    alwaysOnTop: true,
    resizable: true,
    draggable: true,
  }
);

// Handle widget button click to copy summary to clipboard
summaryWidget.onClick(async (event) => {
  if (event.targetId === 'copy-button') {
    await clipboard.writeText(summary);
    toast('Summary copied to clipboard!');
    summaryWidget.close(); // Close widget after copying
  }
});