Size
7.1 KB
Version
1.0.1
Created
Nov 9, 2025
Updated
about 1 month ago
1// ==UserScript==
2// @name Claude AI Prompt Generator
3// @description A new extension
4// @version 1.0.1
5// @match https://*.claude.ai/*
6// @icon https://claude.ai/favicon.ico
7// @grant GM.getValue
8// @grant GM.setValue
9// ==/UserScript==
10(function() {
11 'use strict';
12
13 console.log('Claude AI Prompt Generator extension loaded');
14
15 // Debounce function to prevent excessive calls
16 function debounce(func, wait) {
17 let timeout;
18 return function executedFunction(...args) {
19 const later = () => {
20 clearTimeout(timeout);
21 func(...args);
22 };
23 clearTimeout(timeout);
24 timeout = setTimeout(later, wait);
25 };
26 }
27
28 // Function to create the AI prompt generator button
29 function createPromptGeneratorButton() {
30 console.log('Creating prompt generator button');
31
32 // Check if button already exists
33 if (document.querySelector('#ai-prompt-generator-btn')) {
34 console.log('Button already exists');
35 return;
36 }
37
38 // Find the input container with the send button
39 const sendButtonContainer = document.querySelector('button[aria-label="Send message"]')?.closest('div[data-state]');
40 if (!sendButtonContainer) {
41 console.log('Send button container not found, retrying...');
42 return;
43 }
44
45 // Create the AI generator button
46 const aiButton = document.createElement('button');
47 aiButton.id = 'ai-prompt-generator-btn';
48 aiButton.className = 'border-0.5 transition-all h-8 min-w-8 rounded-lg flex items-center px-[7.5px] group !pointer-events-auto !outline-offset-1 text-text-300 border-border-300 hover:text-text-200/90 hover:bg-bg-100 active:scale-[0.98]';
49 aiButton.setAttribute('aria-label', 'Generate AI Prompt');
50 aiButton.title = 'Generate AI Prompt';
51 aiButton.innerHTML = `
52 <div class="flex items-center justify-center gap-1.5 px-1">
53 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
54 <path d="M12 2L2 7l10 5 10-5-10-5z"/>
55 <path d="M2 17l10 5 10-5"/>
56 <path d="M2 12l10 5 10-5"/>
57 </svg>
58 <span style="font-size: 11px; font-weight: 500;">AI</span>
59 </div>
60 `;
61
62 // Insert button before the send button container
63 sendButtonContainer.parentElement.insertBefore(aiButton, sendButtonContainer);
64 console.log('AI prompt generator button created');
65
66 // Add click event listener
67 aiButton.addEventListener('click', handlePromptGeneration);
68 }
69
70 // Function to handle prompt generation
71 async function handlePromptGeneration() {
72 console.log('AI prompt generation triggered');
73
74 // Find the input field
75 const inputField = document.querySelector('div[role="textbox"][data-testid="chat-input"]');
76 if (!inputField) {
77 console.error('Input field not found');
78 alert('Could not find the chat input field');
79 return;
80 }
81
82 // Get current text from input
83 const currentText = inputField.textContent.trim();
84
85 if (!currentText) {
86 alert('Please type what you want first, then click the AI button to generate a detailed prompt');
87 return;
88 }
89
90 // Show loading state
91 const aiButton = document.querySelector('#ai-prompt-generator-btn');
92 const originalHTML = aiButton.innerHTML;
93 aiButton.disabled = true;
94 aiButton.style.opacity = '0.6';
95 aiButton.innerHTML = `
96 <div class="flex items-center justify-center gap-1.5 px-1">
97 <div style="width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div>
98 <span style="font-size: 11px; font-weight: 500;">AI</span>
99 </div>
100 `;
101
102 // Add spinning animation
103 if (!document.querySelector('#ai-spinner-style')) {
104 const style = document.createElement('style');
105 style.id = 'ai-spinner-style';
106 style.textContent = `
107 @keyframes spin {
108 to { transform: rotate(360deg); }
109 }
110 `;
111 document.head.appendChild(style);
112 }
113
114 try {
115 console.log('Calling RM.aiCall with user input:', currentText);
116
117 // Call the AI API to generate an enhanced prompt
118 const enhancedPrompt = await RM.aiCall(
119 `You are a prompt engineering expert. The user wants to ask Claude AI about: "${currentText}"
120
121 Create a detailed, well-structured prompt that will help Claude provide the best possible response.
122 The prompt should:
123 - Be clear and specific
124 - Include relevant context
125 - Break down complex requests into steps if needed
126 - Use proper formatting
127 - Be conversational and natural
128
129 Return ONLY the enhanced prompt text, nothing else. Do not include any meta-commentary or explanations.`
130 );
131
132 console.log('AI response received:', enhancedPrompt);
133
134 // Clear the input field and insert the enhanced prompt
135 const paragraph = inputField.querySelector('p');
136 if (paragraph) {
137 paragraph.textContent = enhancedPrompt;
138 paragraph.classList.remove('is-empty', 'is-editor-empty');
139 }
140
141 // Trigger input event to update Claude's UI
142 inputField.dispatchEvent(new Event('input', { bubbles: true }));
143
144 console.log('Enhanced prompt inserted successfully');
145
146 } catch (error) {
147 console.error('Error generating prompt:', error);
148 alert('Failed to generate prompt. Please try again.');
149 } finally {
150 // Restore button state
151 aiButton.disabled = false;
152 aiButton.style.opacity = '1';
153 aiButton.innerHTML = originalHTML;
154 }
155 }
156
157 // Function to initialize the extension
158 function init() {
159 console.log('Initializing Claude AI Prompt Generator');
160
161 // Wait for the page to be ready
162 if (document.readyState === 'loading') {
163 document.addEventListener('DOMContentLoaded', init);
164 return;
165 }
166
167 // Try to create the button immediately
168 createPromptGeneratorButton();
169
170 // Use MutationObserver to handle dynamic content loading
171 const observer = new MutationObserver(debounce(() => {
172 createPromptGeneratorButton();
173 }, 500));
174
175 // Observe the entire document for changes
176 observer.observe(document.body, {
177 childList: true,
178 subtree: true
179 });
180
181 console.log('MutationObserver set up');
182 }
183
184 // Start the extension
185 init();
186
187})();