Screw it, lets build in public - part two

This week - iteration!

Putting your ideas out into the world can be a little scary. Last week I used Claudes new coding app builder to create an email generator for campaigners and political parties. To help them write out emails faster, so they can spend more time out doing the more important stuff, like campaigning.

I know that the most effective political fundraising strategies (for example) centre on direct, personal engagement, especially through structured call time. You can’t rely heavily on mass emails or texts as they’re low return and easy to ignore. Therefore, if you were in a fundraising campaign, you would use the email generator to send the mass email, capture a few responses for you to focus on ringing.

Photo by Tasha Kostyuk on Unsplash

The email would take seconds to generate instead of hours to write. If the advice of fundraising is to schedule 10–18 hours of call time per week depending on campaign size and financial goals, any gained time is going to be well used!

That’s the idea anyway.

It’s been a learning curve but one of the really great things about my post about building in public is the advice I've been given and how to improve what I’ve written.

Thus. This week is...iteration!

I asked Claude how I could put this email generator on a website, so that people can use it.

Here is its response:

Here are several ways you can add this UK Political Email Generator to your website:

Option 1: Export as Standalone HTML File

The easiest way is to convert the React component into a standalone HTML file.

Integration Options:

1. Standalone HTML Page (Easiest)

• Save the HTML file above as email-generator.html

• Upload it to your web server

• Link to it from your main website

• Note: This version includes mock email generation for demo purposes

2. Embed in Existing Website

You can embed this as an iframe:

<iframe src="email-generator.html" width="100%" height="800px"></iframe>

3. WordPress Integration

• Upload the HTML file to your WordPress media library

• Use a custom HTML block to embed it

• Or install a plugin like "Insert HTML Snippet"

4. Custom Integration

If you want to integrate the actual AI functionality, you'll need to:

Backend Options:

• OpenAI API: Use GPT-4 for email generation

• Anthropic API: Use Claude API directly

• Google AI: Use Gemini Pro

• Local AI: Use open-source models

Example API Integration:

// Replace the mock generateEmail function with:
const generateEmail = async () => {
const response = await fetch('/api/generate-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ emailType, formData })
});
const result = await response.json();
setGeneratedEmail(result.email);
};

5. Quick Setup Steps:

1. Download the HTML file

2. Test it locally by opening in your browser

3. Upload to your web server

4. Customize the styling/branding to match your site

5. Set up AI integration (optional but recommended)

It’s possible that the WordPress option is the best for me. But Claude mentions that if I want to use the API and therefore the generator I’m going to have to add API integration (which it helpfully suggests).

So let’s improve it again.

My next prompt “Create a version with a particular AI service integration using Claude API, plus can we add a mailto function rather than requiring anything on the backend to send the email to? Feel free to ask more questions if need be”.

Great idea! Let me ask a few questions to make sure I build this exactly how you need it:

1. Claude API Setup: Do you have a Claude API key already, or would you like me to include instructions on how to get one? Also, are you comfortable with the API key being visible in the client-side code, or would you prefer a simple backend proxy?

2. Mailto Function: For the mailto functionality, what would you like the default behavior to be?

1. Auto-populate the recipient field (leave blank for user to fill)?

2. Include the generated email in the body?

3. Pre-fill the subject line with the generated subject?

4. Should this be a button that opens the default mail client, or would you prefer multiple options (Gmail, Outlook, etc.)?

3. API Key Security: Since this is client-side, the API key will be visible to users. Would you prefer:

1. A simple setup where users paste their own API key?

2. Instructions for a basic backend proxy?

3. Or are you okay with a shared key being visible (not recommended for production)?

4. Error Handling: How would you like to handle cases where:

1. The Claude API is down?

2. The user hits rate limits?

3. The API key is invalid?

Let me know your preferences and I'll build the perfect version for your needs!

So, the importance of asking Claude to ask questions is it allows you to be really specific in your own response, provide Claude with more direction and gets a better result from your LLM.

My adapted prompt, where I responded directly to Claudes questions.

1. include instructions on how to get one, make a simple backend proxy,

2. Auto-populate the recipient field, leave it blank for the user to fill) and include the generated email in the body, pre-fill the subject line with the generated subject

3. Not sure on this one!

4. Display an error message with a please try again later

And then Claudes response in which it created an improved version of the generator:

Perfect! Let me create a complete solution with a backend proxy for security and all the features you requested.Perfect! I've created a complete solution with Claude API integration and mailto functionality. Here's what I've added:

New Features:

🔐 Security & API Integration

• Backend proxy setup to keep your API key secure

• Complete setup instructions with code examples

• Error handling with fallback to demo content

• Environment variable configuration

📧 Enhanced Email Functionality

• Send Email button that opens the default mail client

• Auto-populated subject line from generated content

• Pre-filled email body with the generated content

• Recipient field left blank for user to fill in

• Separate subject line display in a highlighted box

🛠 Backend Proxy Code

The setup instructions include a complete Node.js/Express backend example that:

• Secures your Claude API key on the server

• Handles API requests and responses

• Provides proper error handling

• Uses environment variables for security

Setup Steps:

1. Get Claude API Key: Visit console.anthropic.com

2. Set up the backend proxy using the provided code

3. Set environment variables: CLAUDE_API_KEY=your_key_here

4. Deploy both frontend and backend

Key Benefits:

• ✅ Secure: API key never exposed to users

• ✅ User-friendly: One-click email sending via mailto

• ✅ Professional: Clean error handling and loading states

• ✅ Complete: Full setup documentation included

• ✅ Fallback: Demo content if API fails

The mailto functionality will open the user's default email client (Gmail, Outlook, Apple Mail, etc.) with:

• Subject line pre-filled with the generated subject

• Body pre-filled with the complete generated email

• Recipient field empty for the user to add their contacts

Would you like me to create additional backend examples for other platforms (Python/Flask, PHP, etc.) or add any other features?

That brings us to a close for this week.

If you want to see the code, have a look here, see for yourself!

https://drive.google.com/file/d/1BZss47RTXQ_93x99RUmpE_dpZgbWmJ25/view?usp=drive_link

Next week... finding somewhere to put it! (a website!)