Tutorial: AI Data Extraction in Bubble with Cloudflare Workers
Tutorial on how to build a Cloudflare Worker without code that can use AI to extract data and return it to Bubble. And an update on my new AI & NoCode project 'Create With' 👀
Hey there!
Welcome to this week's NoCode SaaS newsletter, where I take you along on my journey of building profitable software businesses without code using Bubble.
This week’s tutorial is all about how to build a Cloudflare Worker without code that can extract structured data using OpenAI and return it to Bubble - it’s a super cool technique I’ve been using lots of my apps.
I’m heading to New York this weekend for the second ever BubbleCon. I can’t wait to see lots of you there. I’m hosting a AI and NoCode fireside chat on Day 2, so be sure to check that out as we have an awesome panel with George and Emily!
But first I wanted to update you on a busy few weeks - super excited to have just launched Create With!
It's bringing together a bunch of different projects I’ve been working on over the last few years.
The NoCode UK Conference I organized with Kieran and Ash
Tutorials, interviews and reporting from AI and NoCode events around the world
The next few years hold incredible opportunity for more and more people to change their lives through learning how to build apps, without being a traditional programmer.
We wanted to pool our resources so we can help as many people as possible upskill with AI and NoCode and start building.
Kieran, Ash and I recorded a podcast this week where we spoke about the reasoning for the change and some of what we have planned.
The Create With Conference is going to be back bigger and better than ever in London in 2025 - earlybird tickets are already on sale and going fast. We’re pulling together the leading experts in AI and NoCode, who have been there and done it themselves to speak at the event. Can’t wait to reveal more about this soon!
Please consider subscribing to the free Create With Newsletter - we’re aiming to make an unmissable weekly summary of what’s happening in AI and NoCode. With the top news, tutorials and events from around the world.
Now, on to this week’s tutorial…
Creating a Cloudflare Worker to Extract Data Using AI
I’ve written before about how much I love Cloudflare Workers.
Workers are small JavaScript programs that run on Cloudflare's network.
They execute incredibly fast and can handle tasks like processing HTTP requests, making network calls, and interacting with APIs—all without the need for a traditional server setup.
They’re an amazing tool to use with Bubble, as they can complete tasks at a very low cost - and they can do things you simply can’t do in Bubble.
And the best thing is, you can create them without writing any code all through a web UI, and they hook up to Bubble easily via the API Connector.
In this tutorial, I’m going to walk through…
Use AI (OpenAI's GPT-4o-mini model) to extract key information from resumes.
Generate the worker code automatically using Anthropic's Claude AI assistant.
Integrate the worker with Bubble.io using the API Connector plugin.
You can watch the tutorial here…
Step-by-Step Guide
1. Set Up Your Cloudflare Worker
Log into Cloudflare: Access your Cloudflare account dashboard.
Navigate to Workers: Click on the "Workers" section on the left sidebar.
Create a New Worker:
Click "Create a Worker" and select "Create a blank worker."
Name your worker (e.g.,
Resume-AI-Extractor) and click "Deploy."
2. Generate Worker Code Using AI
Open Anthropic's Claude:
Provide a prompt outlining what you want the worker to do. For example here is the example prompt I use in the video
I want to create a Cloudflare Worker which extracts key info from a resume and returns it as a structured JSON object.
- The Cloudflare Worker variable for the OpenAI key is OPENAI_API_KEY.
- Use the OpenAI model 'gpt-4o-mini'.
- Use OpenAI's JSON mode to return structured data.
- Make a POST request to the worker with an object containing the text from a resume, e.g.:
{
"resume_text": "Your resume text goes here..."
}
- I want the worker to return a standard structure of data from a resume. You should define the structure.
Receive the Generated Code:
Claude will generate the JavaScript code for your worker, handling the POST request, calling the OpenAI API, and returning the structured data.
Copy the Code:
Paste the generated code into your Cloudflare Worker's code editor.
3. Securely Store Your OpenAI API Key
Set Environment Variables:
In Cloudflare, go to your worker's "Settings" and add an environment variable for your OpenAI API key.
Name it (e.g.,
OPENAI_API_KEY) and paste your API key.Encrypt the Variable to keep your API key secure.
Don’t forget to press ‘Deploy’ to store the key.
4. Test Your Worker
Prepare Sample Data:
Use a sample resume text to test your worker.
A great tip is to just ask Claude to generate you some test data to use in a post request, it will be formatted correctly and saves you spending time on mocking up test data!
Use the Testing Pane:
In the Cloudflare editor, switch to the right hand pane where you can test out your Worker code.
Set the request method to
POSTand paste your sample resume into the request body.
Run the Test:
Click "Send" to execute the worker.
Check the output. The worker should return structured JSON data extracted from the resume.
If you get any errors in the output from the worker, you can copy and paste the error and put it into Claude to ask it to fix the Worker code.
Tip: You can take screenshots of the errors and upload them to Claude, it recognises them too!
5. Integrate with Bubble.io
Copy the Worker's URL:
You'll need this to set up the API call in Bubble.
Set Up the Bubble API Connector:
In your Bubble app, head to the API Connector
Create a new API call:
API Name:
Cloudflare WorkerCall Name:
Resume ExtractorMethod:
POSTURL: Paste your worker's URL.
Body Type: JSON
Request Body: Include a parameter for
resume_text.
Initialize the Call:
Bubble will detect the data structure from the worker's response.
Use the API in Your App:
You can now use this API call in your workflows to extract data from resumes and use it within your Bubble app.
Why Use Cloudflare Workers for AI Tasks?
Cost-Effective: Cloudflare Workers are inexpensive to run, with a generous free tier - you probably will never need to pay unless you’re running millions of requests.
Performance: They run on Cloudflare's global network, ensuring low latency and high speed. There’s minimal lag when you make the request from Bubble, the Worker starts working immediately.
Scalability: Easily handle increasing workloads without worrying about server management - not to mention the reduced WU consumption.
Security: Store sensitive data like API keys securely using environment variables.
Things to Keep in Mind
Security Measures: Consider adding authentication to your worker to prevent unauthorized access. I’ll cover this in a future edition, it’s as simple as asking Claude to implement
Error Handling: Implement robust error handling in your worker code to manage exceptions gracefully, Claude can handle writing all of this for you.
Customization: Tailor the data extraction and JSON structure to fit your application's needs - the possibilities are pretty endless.
Next Steps and Enhancements
While we've focused on extracting data from resumes, this approach can be extended to other documents like invoices, contracts, or any text-based data.
You could also:
Add More Features: Integrate additional AI models or services as needed, you can even make multiple calls to different AIs and group together the responses. I have used looping to make hundreds of requests to OpenAI from a single worker and then batched together the outputs - it’s amazing.
Expand Functionality: Use the worker to perform other tasks like data validation, sentiment analysis, or language translation, you can even use the built in Workers AI Meta models to use AI analysis for free - we’ll cover this in another future edition.
That’s it for this week!
You don’t need to be a hardcore coder to use Cloudflare Workers, I believe they’re something every Bubble developer should have in their pocket.
For doing complex things with AI, reformatting data or other custom logic, they’re the perfect partner to your Bubble App - I’ve already built over 20 for doing different tasks in my own apps!
I hope you found this guide helpful! As always, feel free to reach out with any questions or feedback. I'm excited to see how you implement this in your projects.
Stay tuned for next week’s issue where I’ll write up everything that happened at BubbleCon!
We’ll have some exciting interviews from the conference lined up, so don’t forget to subscribe to the Create With Newsletter and Podcast to stay posted!
Need help building or planning a AI and NoCode App? Check out my Dev & Consulting options! I’ve worked with lots of founders to help them build and launch AI powered apps with Bubble
That’s it for this week - happy building!
James.