A product manager with zero coding background builds a working sponsorship-inbox SaaS in one sitting, stitching together an n8n email agent, a Claude Code frontend, and a Perplexity research API live on screen.
Posted
1 years ago
Duration
Format
Tutorial
educational
Views
8.4K
168 likes
57 · 43
Big Idea
The argument in one line.
A non-technical builder can ship a working SaaS MVP in about an hour by splitting the system into three AI-assisted layers: a no-code automation tool for data capture, an AI coding agent for the interface, and a research API for the hard analytical task.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You're non-technical or semi-technical and want to see a realistic, warts-and-all build session with an AI coding agent instead of a polished highlight reel.
You're a creator or solo founder drowning in inbound requests (sponsorships, leads, applications) and want a concrete pattern for triaging them with AI.
You want to see how n8n, Supabase, Claude Code, and a research API fit together in one real architecture, not just in isolation.
You're curious what actually goes wrong when you build with Claude Code (env files not saving, CORS errors, mismatched column casing) and how someone debugs it live.
SKIP IF…
You already know n8n and Supabase well and want a deep technical reference rather than a beginner-paced walkthrough.
You want a finished, production-ready SaaS template rather than an MVP built live with visible mistakes.
TL;DR
The full version, fast.
Moritz builds a sponsorship-request manager for creators in three layers. First, an n8n workflow watches Gmail, runs each email through a GPT-4o agent that classifies it as a brand collaboration request and extracts the brand name, website, and cleaned last message, then writes qualifying rows into Supabase. Second, he scaffolds a Next.js and ShadCN frontend with Claude Code, using his own CopyCoder tool to mock up the UI first, then wires it to live Supabase data through a phased plan Claude Code drafts and he prunes. Third, he adds a Perplexity Sonar Deep Research integration behind a Next.js API route (to dodge CORS) that generates structured brand reports on demand. The lesson: plan in phases, test each phase manually, and expect real bugs like unsaved env files and case-sensitive column names along the way.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Moritz demos the finished app (an inbox of brand sponsorship requests with one-click AI research reports), names the problem it solves, creators get buried in inbound brand DMs with no fast way to judge fit or budget, and lays out the three-phase build plan: n8n email agent into Supabase, a Claude Code frontend on top of that data, then a Perplexity research integration.
04:00 – 19:57
02 · Building the AI Email Agent with N8N
Builds the n8n workflow end to end: a Gmail trigger on new messages, a code step (written with ChatGPT's help) to flatten the raw Gmail payload, an AI agent node with a structured output parser that classifies each email as a brand collaboration request and extracts the brand name, website, and a cleaned last message, then a conditional write into Supabase. Debugs a case-sensitivity bug where messageId didn't match the database's messageld column.
19:57 – 31:40
03 · Creating the Frontend with Claude Code
Scaffolds Next.js and ShadCN in VS Code with the Claude Code extension, uses his own tool CopyCoder to turn a short app description into a rough visual mockup of three pages (inbox, reports, settings), iterates on that mockup in plain English, then has Claude Code rebuild the approved HTML as React using ShadCN components, explicitly instructing it not to fall back to vanilla markup.
31:40 – 46:40
04 · Integrating Supabase Database
Switches Claude Code into plan mode before wiring up Supabase, screenshots the live table schema so the plan matches it, and trims the AI's proposed phases down to what he actually needs now. Implements the client, env vars, and typed hooks, then replaces hardcoded UI data with live fetches. Hits two real bugs: an .env.local file that silently hadn't saved, and messages in the same thread rendering as separate conversations, fixed by grouping on thread_id and displaying only the agent's extracted last_message field.
46:40 – 1:09:20
05 · Implementing Perplexity API for Brand Research
Reads the Perplexity API docs live to choose the sonar deep research model, web search mode, and an empty domain filter, then has Claude Code draft a phased plan pre-loaded with the existing Supabase schema and the API docs. Debugs a CORS failure (fixed by proxying through a Next.js API route), an expired API key, and a malformed response wrapped in a hidden reasoning tag, landing on a strict JSON schema response format. Once the API layer is proven with one real request, batches the remaining UI phases and demos a live brand report generating end to end.
1:09:20 – 1:12:05
06 · Future Features and Improvements
Lists what's left: UI polish, an in-app reply instead of deep-linking to Gmail, canned reply templates, an eventual fully autonomous auto-reply agent gated by a settings page, multi-inbox and multi-platform support, and a longer-term idea of flipping the product into a marketplace where brands initiate outreach.
1:12:05 – 1:12:55
07 · Outro & Community
Closes with a pointer to his paid community for people who want to go deeper on building with AI, and floats releasing the project's code to members who want to extend it.
Atomic Insights
Lines worth screenshotting.
Splitting a build into three specialized tools, a no-code automation layer, an AI coding agent, and a research API, lets a non-coder ship a working SaaS MVP in about an hour.
An AI agent node fed only the subject, sender, and body of an email can reliably classify it as a brand sponsorship request and extract the brand name from the sender's domain alone.
Asking the AI agent to return only the last message in an email thread, instead of the full nested quote history, removes an entire class of UI parsing bugs later.
Structured output parsers in n8n force the AI agent's response into a fixed JSON shape, which is what makes the downstream database write reliable instead of brittle.
A visual mockup generated from a one-paragraph app description, iterated on in plain English, is a faster way to lock a design direction than describing a UI to a coding agent in words.
Telling a coding agent explicitly to use a component library's components, not vanilla markup, matters, left unsaid, it will default to generic HTML/CSS elements.
Switching an AI coding agent into plan mode before a multi-file integration, and trimming its proposed phases down to only what's needed now, produces more robust implementations than letting it code immediately.
The single biggest reliability win for a multi-phase AI build is a manual test checkpoint after every phase, so a bug gets caught one phase after it was introduced, not five phases later.
A silently unsaved environment variables file was the actual cause of a 'Supabase connection failed' error, the fix was saving the file, not debugging the Supabase client code.
Browser-side calls to a third-party research API fail on CORS by default, the fix is routing the request through your own backend API endpoint instead of calling the third-party API directly from the client.
When a research API wraps its output in extra formatting, like a hidden reasoning section before the real answer, requesting a strict JSON schema (not just 'JSON output') is what forces a clean, parseable response.
Once the hardest layer, the external API integration and its authentication, output format, and error handling, is proven with one real request, the remaining UI phases can usually be batched and implemented in one pass.
A capitalization mismatch between a workflow's output field and a database column name (messageId vs messageld) is a common, easy-to-miss failure point in no-code-to-database integrations.
Takeaway
Build the hard layer first, then let AI batch the easy one.
WHAT TO LEARN
The build only stayed manageable because every phase got a manual test before the next one started, and the riskiest layer, the external API, was proven before any UI was built on top of it.
01Introduction and App Demo
The problem driving the whole build: creators get dozens of inbound brand DMs and have no fast way to judge which ones are a real fit or can actually afford their rates.
Splitting a build into three specialized tools, a no-code automation layer, an AI coding agent, and a research API, lets a non-coder ship a working SaaS MVP in about an hour.
Demoing the finished product before building it gives a concrete target to build toward instead of discovering the design mid-build.
02Building the AI Email Agent with N8N
An AI agent node fed only the subject, sender, and body of an email can reliably classify it as a sponsorship request and infer the brand name from the sender's domain.
A structured output parser is what makes an AI agent's output usable by the next step, without it you get free-form text instead of fields a database write can depend on.
Asking the agent to extract just the thread's last message, instead of the full nested history, removes a display problem before it ever reaches the UI.
A case-mismatched field name between a workflow's output and a database column is a common, easy-to-miss failure point whenever a no-code tool writes into a hand-defined schema.
03Creating the Frontend with Claude Code
A visual mockup generated from a one-paragraph description, refined in plain English, locks a design direction faster than describing a UI to a coding agent in prose.
An AI coding agent defaults to generic markup unless you explicitly tell it to use your component library, that instruction has to be stated, not assumed.
Asking for a component like the sidebar to be built as its own separate file heads off a sloppy, tangled first draft.
04Integrating Supabase Database
Switching into plan mode before a multi-file integration, and pruning the agent's proposed phases down to what you need now, produces a more robust result than letting it start coding immediately.
A manual test checkpoint after every single phase is the cheapest bug-catching tool available, it turns a five-phases-later mystery bug into a one-phase-back fix.
An unsaved environment variables file can produce an error that looks like a backend problem, when the fix is as simple as hitting save.
Building the UI before the backend forces you to add test pages and debug blind, building the backend first lets you test directly in the browser you're already using.
05Implementing Perplexity API for Brand Research
Browser calls to a third-party API fail on CORS by default, route the request through your own backend endpoint instead of calling it from the client.
When an API response is wrapped in extra formatting you don't want, request a strict JSON schema rather than asking generally for 'JSON output'.
Once the riskiest layer, the one with authentication, external formatting, and error handling, is proven with a single real request, the remaining UI phases can usually be batched into one pass.
Pre-loading both the existing database schema and the third-party API docs into the planning step keeps the agent's plan grounded in what actually exists instead of guessing.
06Future Features and Improvements
Listing concrete next features, in-app replies, templated responses, multi-platform inboxes, a two-sided marketplace, at the end of an MVP build is how you keep scope sane while still showing the ceiling.
An MVP that only filters and surfaces requests is already useful to its one user before any autonomy or reply features exist.
Platform coverage for an inbound-request tool is capped by which platforms expose an API at all, not by build effort.
Glossary
Terms worth knowing.
n8n
A visual, node-based workflow automation tool. Each node (trigger, code step, AI agent, database write) connects to the next, letting you build an automation pipeline without writing a full backend.
Claude Code
An AI coding agent that runs in a terminal or editor, reads and writes files in your actual project, and can plan, implement, and test multi-step coding tasks from natural-language instructions.
Supabase
A hosted Postgres database with a built-in API, authentication, and dashboard, commonly used as the backend data store for small web apps.
ShadCN
A set of pre-built, customizable React UI components (buttons, inputs, avatars) that give an app a consistent, polished look without building each element from scratch.
Structured Output Parser
A node or setting that forces an AI model's response into a specific, predictable JSON shape instead of free-form text, so the data can be reliably used by the next step in a pipeline.
Row Level Security (RLS)
A Postgres/Supabase feature that restricts which rows a given request can read or write. Disabling it during development makes data access simpler but means the table isn't secured yet.
CORS (Cross-Origin Resource Sharing)
A browser security rule that blocks client-side JavaScript from calling an API on a different domain unless that API explicitly allows it, commonly worked around by routing the request through your own server first.
Perplexity Sonar Deep Research
An API model from Perplexity that runs multi-step web research on a query and returns a synthesized, citation-backed report, used here to research a brand before accepting a sponsorship.
response_format / JSON schema
An API parameter that tells a model to return output matching an exact field-by-field structure (a schema) rather than loosely-formatted JSON, reducing parsing failures downstream.
Plan Mode (Claude Code)
A mode where the coding agent writes out a step-by-step implementation plan for review before touching any files, used to catch scope or sequencing problems before code is written.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
17px
In this video, we're going to be building a full SaaS web application from start to finish. Here's what it looks like. So you have this page here, which is kind of like an inbox messaging page.
And these are all brand inbound sponsorship requests so if you click on them these are basically requests to me as a creator whether i want to partner up with this brand so you can get an overview of the messages here you can create a brand report which basically triggers a report on this brand and does some deep research to find out information about this brand And this will give me information to figure out, is this a brand, a potential partner for me to do some sponsored videos about them?
So this is what the front end looks like. We're going to be building a backend for this as well. We will be building the AI agent capability.
So everything will work. This is like an actual working application. So let me just walk through the overview here.
So the problem that we have. is content creators receive dozens of sponsorship requests daily. So I experienced this firsthand as a creator.
Once you start to build a bit of a following, then you just get so much inbound requests from all kinds of brands that want to partner up with you and that want to pay you to do some sponsored posts about them. And the problem is it takes a lot of time to read all of them and then figure out, okay, which brand is actually suitable.
to to for me for my audience like which brand has a match which brand has a good product which brand is like legit basically and maybe also which brand like has enough funding to be able to pay me the rates that i that i request right and so solution that i am thinking of here is essentially an ai powered email agent and this would be just the mvp version of that i think there's like a lot that you can still build with that if you turn it into a true ai agent but in this initial mvp version all i want to build is kind of just an email agent that filters the incoming emails for brand sponsorship requests and then puts them in a nice view for you and gives you the ability to do some quick deep research on them using ai so Here's the build that I'm envisioning here.
So the phase one of the build will be to build the Gmail integration. and hook it up with an ai agent and we will be building this part just with n8n so i think using n8n for this part is actually the easiest solution right now like later on it could be built more robust in code purely but for the start n8n is really good so what this will do is we will have a gmail integration that reads our emails on a recurring basis and then it will have an ai agent attached to this which reads the emails and filters out only the sponsorship request and then it will save the sponsorship request to a super base so that we can do it to a database basically and we will use super base for that this allows us then to access that data in phase two so phase two we will be building the ui so that's the ui that you that i showed you just now which is the interface for the user and we will be building all of that in writing actual code for that we're going to be using cloud code to write the code it will have an inbox view to have all of the sponsorship requests in one view it will read from our super base table and it will have the functionality to trigger research requests finally we want to add the capability in phase 3 to actually do deep research on a brand and for that we will be using the perplexity integration the perplexity api we will be building an integration to the perplexity api
And this will allow us to get deep research reports about brands to help us evaluate faster whether this brand is a fit for us. And if you're new here, my name is Moritz. I used to be a product manager with zero coding skills, and now I build AI applications full time.
On this channel, I document my journey and teach beginners and non -technical people how to build and monetize products with AI. Let's start building. Okay.
The first part of the build is the NNN agent. So let's start with that. We'll create a new workflow here and we'll just call it brand request agent.
And okay, let's start with the first note. So the first one should obviously be a Gmail trigger and we're going to do it on. So you can do on message received and yeah, we're going to do on message received because essentially what we want is that whenever messages come in, then a.
kind of evaluation should be done. And we should pass that through the AI agent to evaluate whether this is a brand sponsorship request. So we will be doing this for every message that comes into our Gmail.
And yeah, we can select here. Let's set up the credential. So I'm going to do sign in with Google here.
And I did set this up before. So I think it says, see the six service that. And then cloud has some access to.
When you set this up for the first time, there was something that you have to set up in Google. But if you get stuck, you can also just ask ChatGPT there. It was pretty straightforward as I remember.
Okay, so it looks like account is already connected now. Let's see if it works. So Gmail account connected and the polling time.
So how many times it actually looks for messages will be, let's do it every minute. And then event is message received. and we're not going to do simplify here we're going to toggle that and this basically returns a simplified version of the response instead of the raw data so we're going to be doing this step manually we'll get the data and then we will actually clean it up a bit to to then pass it on so what we should do here now is just do a fetch test event and this fetches the first or the latest email in my inbox so as you can see it's a it's delivered to modescamp at gmail .com and it has all of these fields it has this hml field it has here the subject field from and to field you can just scan through this and have a look okay and it has a message id here and so the first thing is just like to get an overview of what is how this data here is structured it has this text field here this is probably the one that's going to be important for us so what i actually want to do is i will i'll just go into my inbox and
send myself like a test another test email that we can use as as like a real like kind of simulate a real sponsorship request because we will be needing this later right so i'll just send it to myself sponsorship request hey we would really like to partner up with you we are huge brand and can pay you a lot so let's let's send that just make sure it's the right email yeah okay cool so now if we do the fetch test event again that's the one we got okay perfect and now we can actually pin this just to make sure that it doesn't get lost okay the next step is we're going to be as i said cleaning this up because the data that we got in is very unstructured and we're just going to figure out which data we actually need so we will do a step here just like a code step and we can see here the data that that is coming in from gmail it has id a thread id so this thread id is basically if a reply is made to the email it will have the same thread id so it's needed for it's needed for keeping track of what is inside of one thread what other information will we need probably the date probably the message id subject from to probably the text and maybe also the html okay so i went into chat gbt here and basically i wrote this prompt i'm building an nn workflow and this step helped me extract only the right fields and write the javascript for me to extract the right fields
from this email. Let me also take a screenshot of this and paste that in here too, just to give it that context. And then I said output a structured JSON I need, and then I inputted all of the fields that I need from this email.
ID, thread ID, message ID, subject date, from email and from name, to email and to name, body and HTML body. So the goal is just to clean this up a bit and remove all of the fields that we don't need and only return the fields that we think we will need. Better to take more fields.
then we actually need, because you never know, maybe we need them later and we can still make adjustments to this, but I just decided to go with these for now. So let's run this and then ChatGPT should give us the code that we can then input in there to extract the right fields. We're just going to give it the context of JSON again for context.
This is the input JSON. Okay. This seems to be the script that we can use.
And so let's input that here and then we're going to do execute step. And this then gives us. id thread id message id so this all looks good and this is cleaned up now so we can do we can rename the step to say clean up or actually let's do it filter data and this seems to be looking good let me okay yeah this looks good so we will need the id to just have an idea of this message we need the thread id to be able to keep track of threats so when you reply to this email that it's all like that it knows it's all in one thread the actual message id as well the subject line the date from which email this came from.
So basically the brand, this will be the brand. In this case, it's me because I sent it to myself, which email it arrived to. So we will basically just make sure that whenever it is sent here, that we then filter it.
Actually, like it will only be, it will only come to this email because we only have one integration. And then we have the body here, which is like the plain text body. So we can be using this to inject it into the AI in the next step.
And then we also take the HTML body, because I suspect that it will be easier to use the HTML body later in the UI to display it. But we'll see. I just decided to get both here.
OK, the next step is actually the important one. So we're going to be adding the AI agent here. And we'll just search for our AI agent node.
And you can see it's already hooked up in that it gives us the output of the previous node. as the input here and here we're going to select define below because this is connected to chat trigger node but we're actually going to define it below as the source source for the prompt we're just gonna input it ourselves and i pre -wrote this prompt here and put it here so this prompt says you're analyzing emails to extract black brand collaboration data for a content creator task identify whether the email is a brand collaboration request and extract key information and then definition about what actually a brand collaboration request is criteria for true criteria for false just to make sure that it filters the right information then i give it an output format i'll go into that later and then also just like some additional instructions and then very important the input email data so this is the variable data that is coming from the input here So the subject line, the from email, so the brand email, and also the body of the email.
So that's like, these are the only information that AI actually needs in this case. And then we're going to say require specific output format. It will say connect an output parser on the canvas to specify the output.
Okay, we're going to do that in a bit. We will have to add a chat model here as well. Just go with OpenAI and add the credentials here.
Okay, we inputted our API key, which we got from OpenAI. and saved it here and we don't need to save this so let's just let's just select a model that we will be using here and i think we should be using so i was testing it previously and i think 40 mini was doing fine so let's do 40 mini um frankly i think any model should do okay here you don't need to do go overboard with the o3 models or like the o models which are thinking models You can probably just go with either a 4 .0 or the 4 .1.
And if we go with mini, it will be slightly less intelligent. So actually, let's go with just a normal 4 .0 for now to have it a bit more intelligent, but also a bit more costly. But we can tweak that later.
Okay, so we've added the chat model here. And then we need to add an output parser, structured output parser. So make sure that the output is in the right format.
And here it comes into play what I defined here. So I want the output to be like this. So it should say, is this a collab?
And it should be a Boolean, true or false. And just give it this instruction here, true, if it's a collaboration request. I want it to give us...
the last message as well so the latest message in the email thread because this will be helpful later when i actually build the reply so build the ui for this so that i can just always show the reply because otherwise it kind of just if we if we take everything it will just always take the entire thread so i use ai to filter out just the latest message in the email thread that will make it make it easier for us later and then also the brand name name of the brand so that you know again that we don't need to because right now the only information we have is the email address from the brand and here ai can actually help us to identify based i guess based on the email address like what brand name this actually is.
So we can then use this information and display it. So we don't need to like build in some AI logic later to extract the brand name and the same with like the brand website. It will also extract that from the email.
So this is the output format that I want. So that means for my output parser, I will just put that format in there. So I'll just say define using JSON and replace that with this exact output format.
And then we can, let's test this. Okay. So based on the input here, It gave us the output collab is true.
And the last message was, hey, would really like to. So this is basically the only message here right now. If we are going to reply to this email, it would give us this only the reply.
And it wasn't able to get a brand name and a brand URL. So it left these fields empty, which is fine. OK, now in the next step, we want to actually put an evaluation step here, which is.
is this brand a brand collab and if yes we just save it to our super base database before we add this so this would be like if node basically before we add this if node we want to just combine the data that comes out of here and the data that comes out of here because if you remember here we actually just get like the important data that we need and then we kind of use some of that data for the AI to evaluate whether this is a brand request or not.
And the output that we get here is, yes, this is brand collab request or no, and also some other information. So we want to combine all of that into one so that we can save all of it together in Superbase, right? So before we do this if step, we will just combine this data.
So I will add a merge step here and this merge step. should say combine, combine by position. So like on top of each other and then number of inputs and then we can define the input.
So the first input should be coming from here and the second input should be coming from here. And so we see the first input here. Sorry, the merge step should be here and this input should be going into the merge step.
The merge step will go into the if step. So the merge step. Let's execute this and see what this looks like.
So this is basically just merging input one and input two. And what I can see here is I have this kind of nested, like it's like an output JSON, and then these fields are nested inside of that. So I don't want that.
I actually just want all of these fields to be on the same level. So it makes it easier to save. So I will just remove the nesting inside of here.
in an additional node here. And again, I'll just ask ChatGPT to write this for me. I want it to return a JSON without nesting, right?
The code for me here. Okay, this should work. Paste it in here, execute the step.
Okay, so it's giving me back these fields just, it's the same field, just like not with an output and nested inside, right? And this then in turn, If I execute this step now, you'll see that everything is just on one line.
So this makes it much cleaner. And the if step then is just the evaluation whether this field here is true, right? So for value one, we can just drag in isCollab is equal to true.
Okay, so we will just drag this parameter in and then select Boolean here and is true. And we can test this step. So the output is...
into the true branch because iscollab here is true if it was false it would go into the false branch and so what we want to do next is to this true branch we will just connect the superbase writing to the superbase and in this case we will do create row so this writes a new entry in superbase and then let's set up our credentials so you need your host and service role secret So what you do is, I've set up a SuperBase project beforehand, but what you need to do is just go into, in your SuperBase, just create a new project.
And then you will find the keys here under project settings. You'll find your, you'll find your host inside of here. And then you'll find the secret role key inside of API keys and just input it into a native.
Okay. I've set up my SuperBase account here and we can. leave this so create research row we can have this as create then table name or id since we connected this we actually get the superbase tables so we can see these i've created these two tables before so i went when test building this project there's a message table these are hosting all of the emails and then later also a brand reports table but Now all we need is the messages table and you can see there's some data in it in there already and we can just select messages because that's where we want to write the data and then we can say automap input data to columns because what I've done here is also I've just made sure that the super base tables has exactly these fields because I've kind of planned these fields out before so you know and they're all named exactly the same.
If there's anything off it will fail. and so i just made sure that it actually is exactly the same naming okay so and that's why i can select auto map and once i do that and execute the step not quite okay so there it says it says there's there was a bad request could not find message id column so you can see here this is the message id and if i go into super base the problem is that message id the i the i is actually a capital i so let's fix that i'm guessing it will be the same for thread id yeah so we will have to just fix that in in here let's make it a capital i for both of these and just run through these steps again double check if this is coming in yep execute step okay now let's run this again yep now it worked and we can see this email here we can verify if it actually landed in our super base let's refresh this there we go so it was added here into super base cool so what we have here now is this is a ai agent that listens to our emails that then cleans up some data evaluates whether this is a sponsorship request or not and if it is a sponsorship request
then it will write an entry in our super base table and basically put all of the information that we need to reconstruct this message later in our UI again. And all of this information is stored in the super base. And so the next step is then building the UI to fetch from this super base table.
Okay, next up, we're going to build the UI of this project. And we're going to go here into VS Code. and just open up an empty project and then open up cloud code here and this is with the cloud code extension so just make sure you've downloaded that and once we're here in cloud code we can make sure i'm logged in yep okay now we can just let's set up next .js and chat cn first next .js is basically this framework that we're going to be using as the basis to build this and chat cn are like ui components that make the building of the ui easier so let's just say Let me set up Next .js in this empty project.
Well, I'm going to say no. We just want to run the create NextApp command in current folder. Okay, so it's just going to run this command.
I could have done that in terminal too, but I just wanted to show you how you can do it with quad code as well if you don't know the command. And we're going to say yes and don't ask again for permission. In fact, we can actually...
we should have run maybe cloud with dangerously skip permissions but it's okay something went wrong let's okay well i think it will be easier if we just install it ourselves so the command is next app latest and then we just do dot to install it here in the root folder yeah we need to delete this again so it kind of it just it always needs to be in an empty project for some reason typescript yes yes yes yes yes and by default yes okay so it's installing the next .js base template here and meanwhile we can just cancel the cloud code actually we're gonna do shift tab to go into plan mode And just ask it, what is the command for installing Schatz Yen?
OK. And here you can see the Next .js has been set up now. The main thing you'll have to worry about is the code files inside of the source app.
And this is what we will be editing. with quad code in a while but let's just wait what it returns here okay it says so it wants to create this plan now because it doesn't know yet that we set up next .js by ourselves all i wanted to was to get the chat cn command which is this and that's all we need and we can actually just set this up ourselves so this initializes chat cn okay and so now chat cn is initialized and it basically i think it no it didn't create anything yet but once we want to add certain ui components to it like buttons and so on they will be more consistent and they will be in this chat cn style and it just makes it easier to build the front end and cloud code we can skip this for now we can just okay let's come back to this later okay so we have we have a base we can just run this to verify it we do npm run dev to run this right now empty application on our localhost if we open up localhost we will see that it's just basically yeah like an empty next .js application with nothing in it yet the page that you see right now is actually this page here so the code defined inside of this file is what you see on the screen okay good now what we will do is we will define build the front end and what i like to do for that is
Before we just type in any command into Cloud Code, I like to go into CopyCoder, which is the app I've built, to kind of help with this process a bit. And what I'll do is I'll just describe the app idea here. I want to build an AI agent app that is an inbound sponsorship request manager.
It should have one page, which is like an inbox, kind of should look a bit like WhatsApp. messages and that should house all of the inbound brand requests and then it should have another page for the reports so these are reports that are being generated about a brand and then a third page which is a settings page okay so we can do we can type in this prompt and then we just hit generate web app and what it will do is just plan out this app for us real quick and then we can get some designs to just get like a rough idea of what the design could look like okay so inbox reports settings that's the pages we wanted so now we can just we could refine the prompts of the pages a bit more so it says here what drops whatsapp style message interface for brand request grid layout for report cards and two column layout with settings categories that sounds good to me and will generate those designs okay the designs have been generated let's check them out yeah so it created the sidebar here
with inbox report settings and then it has like a messaging style inbox here and if you click on it you get the details of the message basically let's see so it has this i think it looks pretty cool so it has like this accept and decline button and then it has this campaign overview which i like the deliverables brand guidelines okay so i like the overall style what i would just change is kind of the information that is being displayed here so i actually kind of just want it to be more like a messaging interface and then it can have this overview here of you know like a summary of the of what what has been talked about in the messages it doesn't really need to accept and decline for now it just should be basically like like us just like an interface for the messages so for the emails in in our case right so let's change so we can do that edit right here let's do that quickly so i can say edit this i don't need any brand campaign stats and accept or decline actions here i just want
a standard messaging interface to to send and receive messages with the brand and then we can apply this change and meanwhile while it's doing that we can check out the other page so this one does look good to me it's just like a simple card layout with like brand reports. So that's fine to me.
And then I guess we can refine this once we actually have it live in the app. And the settings page is also fine for me, although the layout seems to have broken a bit here, but we can easily fix that later in the app. So as I said, this step is kind of just for like getting an idea of the visuals and to iterate on the visuals a bit.
And it made this change as I wanted. So this is, yeah, this is how I wanted it. That's perfect.
Okay. So now that we have the basic Next .js and ChatCN set up, I can actually just go here into source code and copy this. I don't need to do like a complex export and build this entire application from scratch because I have the basic template here already set up.
So what I'll do is I'll go in here and let's restart this. Okay. Let's start with building the...
We can build the... basic of the application first and make sure that the sidebar is set up and also the initial page. I have the HTML design of the app that i want to build here i want you to take the html code and implement it in this project using sheds using react and chat cn components okay so this part is important because we wanted to actually use the chat cn components and yeah because otherwise it would just create like vanilla react components and we wanted to we want to force it to use chat cn okay and then i pasted the hml actually i just remembered something make sure that when you build the sidebar that it's in a separate component sometimes it makes this mistake okay so it creates a to -do list analyze the current project structure set up chat cn components if not already configured and create sidebar create header do we have a header in here i guess we do Maybe we don't need it.
Okay, looks good. I'll create the... Okay, so it wants to create this directory now to house the ShadCN components.
And there's actually a better way to do that. I know you can just install the needed components with npx ShadCN. I think it was add.
ShadCN add command. there we go so it detected that we need several of ui components the input button badge and avatar components and it's adding those components in here and just installed those okay that's good now it's creating the sidebar components with navigation yes here we go it created the sidebar component now it creates the header component i'll tell later too Maybe remove the header component again if we don't need it.
I'll have a look. I have a feeling we don't need it right now. Next up, it's creating the conversation list component and then the message area component.
And what you'll notice, of course, is that it will create some dummy data at first. So of course, this will not be integrated with our SuperBase data yet. We're just creating the UI for now in this first step, and then we will hook it up to SuperBase later.
Okay, implementation is done. So let's check it out. Okay, nice.
So we have the sidebar. which does not work yet and these buttons also don't work yet okay now we can actually iterate on it a bit to make it functional right okay first Remove the header component.
We don't need that yet. Now make the sidebar navigation actually work. We will need to create the other pages for that though.
So actually let's not do that yet. We can do that later. I want to just fix this page again a bit and just iterate on it to get it into the style that we want.
Make sure that everything... just have a look on the main page okay i have done a couple of iterations on the ui so this part is largely just largely just like telling this little fixes that you want for example the sidebar should be fixed when scrolling i should be able to scroll the conversation list and message area individually that's the message i wrote here the one i wrote before was the header of the conversation list needs to be contained it is spreading all the way so just like little tweaks in the ui also taking screenshots and pasting it in there and what i'm what i get now is this so you can see it looks very similar to the earlier interface that i had to build that i showed you in the intro of this video and so what we have here now is a sidebar which is fixed we only have this page for now and then we have this what's called a conversation list which is you know like all of the different messages which can be scrollable and then when you click on it you should be able to see in the message area you should be able to see the messages appear here and then you have like on top you have like this little header part which is summarizing or has like summary information it has these buttons to archive and create brand report and then it has the messages which should be showing up here so i think at this stage it is good enough now for us to start integrating the
with super base so that we actually get some live data in here because if I continue building on the UI now there might be too many things we have to change later in the UI so it's good to set up the integration now and then we can iterate on the UI a bit more so that's kind of the other steps I would take now so let's go into our database and okay what we want to do is we're going to go here to database and then you see this database the messages database here i will just take a screenshot of that because that seems to be the best overview information of the fields that are inside of our table right now and then i'll go back here to cloud code we're going to go into the planning mode i'll paste this and i'll say i want to now integrate my super base super base back end with my front end you can see from the image the fields the table contains i want you to create a comprehensive to -do list first that outlines all of the phases for integration and showing the data that's in super base live
in our UI. Each phase should have some simple testing as well. I prefer if you tell me exactly what to test instead of writing tests.
Okay, since this is in plan mode, it won't actually create any files yet, but it will create the plan now. And then it will probably suggest a file that we can then implement. Okay, so it created this plan here.
And always when I want to implement something a bit bigger, I have it create a plan because that's just makes sure that the implementation is much more robust. And yeah, you just make sure you get higher quality from this. Okay, so it has a phase one setup and configuration, set up the super base client.
Okay. And then testing. Phase two is create TypeScript interface and data fetching.
Yeah. Phase three is state management. Set up React hooks and state management for messages.
Okay. Phase four, conversation list integration. Phase five, message area integration.
I will probably modify it to not implement that yet since we want to implement the brand report functionality later. And that will also in itself be a bit more. of a complex task because as i said we want to implement perplexity api real -time features add real -time updates using super based subscriptions i'm not sure if we need that i might tell it to simplify that i guess we could have that advanced features add collaboration detection threading and enhanced search we definitely don't need collaboration detection that seems too advanced or what does it say use is collab field to highlight collaboration requests okay performance and polish final testing and deployment so i would say everything until phase five is fine so let's let's do that we just need it up until phase five for now the rest is too advanced okay so it just shortened it and then okay don't start coding yet just create a md file with this plan for now no so it's kind of simplified the plan now no i want the plan to be exactly what you wrote earlier in the same level of detail okay i guess yes okay it created the plan here i'll just organize a bit nicer with a folder to do this and move it in here okay super base integration plan
brandy ai phases one to five sounds good now we can actually i am going to just exit this instance of cloud code now and start a new one just for better context management yeah okay no actually i am going to do just the compact it's going to run the compact command which kind of compresses the conversation we had so far and then we can continue from there and from there we can then start implementing the phases okay then let's start implementing just phase one off and then we'll tag the super base integration plan okay it's going to install the super base packages it's going to create the environment variables so it will create this env local file here and i will have to put in my super base keys in here okay phase one is done installed super base package created env local file i have inputted my keys in there and then it's set up the super base client configuration in here the super base client configuration and create a typescript types which are here so this is matching the table format that we have in super base and then verify the build completes without errors added connection test sounds good we don't need to test this one further i think we or actually uh since it's running we can just go into the application to see what's happening now okay it says internal server error i think it's because we need to okay yeah it hasn't
actually set up like the required things for it to work yet so let's just ignore this for now and push on and then later on we can debug if something doesn't work okay so let's mark everything as done in the to -do list and then continue with phase two okay let's continue with phase three i find phase one and phase two are not easily testable they should be tested in the browser dev tools so once we implement phase three we should be able to test it in the ui directly okay update And start with phase three.
Okay, phase three was completed. And the way I understand it, it's set up like these hooks for custom hook for fetching message list, custom hook for single message detail. So it's kind of like setting up the functions here to fetch the messages from internally.
But what it hasn't done yet, and that's... for phase four is to actually replace the hard coded data with live super based data so that's when we actually start to see some things because right now what's showing up here is still the hard coded data and so let's do that now okay let's start with phase four okay okay phase four has now been completed and we should be able to check and make sure if it's fetching correctly.
So, okay, we're getting an error, fail to load messages. What we can do now is go to inspect, let's go to console and have a look here. And let's just take a screenshot of the whole thing.
And we'll paste it back in here and say, there's an error failing to fetch down. messages okay so don't feel free to sometimes interrupt it because it's saying the error is likely because messages table doesn't exist just correct it because we know the messages table does exist the messages table does exist the permissions are set to no rls so we actually in superbase have for simplicity's sake we have rls disabled so it's not secure yet this is just to make it easier while we're developing and we're just going to tell that permissions are set to no rls find the issue okay so now it's now it's kind of doing the right thing it's saying let me add some better error logging to find out what the issue is so this is better let me also add a simple test function to check if we can connect now when you refresh the page let's refresh the page okay let's take a screenshot of that again and actually we can expand this to give it some more information this is a network course error
okay okay i managed to fix it with a bit of back and forth so what i didn't realize was it kept trying to get the data from super base but it kept saying that a super base url and key are not correct and like Checking through the console logs, it was like always placeholder. And then what I realized was that is just that the nth local file needs to be saved.
So I actually like inputted the stuff there, but I didn't actually save the file. And so it was strange because like normally when I work in cursor, everything just saves automatically when you make changes. And I guess now in this code, I haven't activated that it saves automatically.
So I had to just basically save the file and then it worked. So sometimes you just get like stuck on these little issues for a bit, but yeah, now it's working. you can see here that so right now we've only been working on this part and this is now this is now actual live data from our database so and i know this because this is the latest message that i've sent and it got picked up here so we can actually we can test this again hey following up here and the thing is like every message in this thread will get picked up so the first place it will get picked up is here inside of the n8n right so we should see here in the executions here in a bit that this latest message should yeah there we go so this one is picking up the latest message that is coming and then if we go if it's if it succeeded we can go here into the database and there we go so not yet actually yeah here hey following up here that's the one i just sent and it just got inserted into the database and now if i go back into my front end and so i think the automatic fetching hasn't been implemented yet but if i refresh the page it should be there
yeah there we go hey following up here so what you'll see is that it it doesn't match them in a thread yet so this is actually the first message here this is the second message and this is the third one which are actually all in a thread but it's just creating separate message instances right now so we we have to fix that later but the good news is that it is picking up the data from superbase now so now we can continue with the implementation continue with phase five we can actually just give it some positive feedback it worked continue with phase five okay phase five is done and phase five was basically the message area integration so previously only this part was working and now this part should be working as well so we can verify this if we we can actually see this here if we click this this shows up you you can see it's not perfect yet but it's showing the data right it's showing the data that's supposed to be here okay so it it is working and now we should just make these like little tweaks here to fix this so in this case what's actually happening is that it's it's like not really looking at the thread id when displaying data so there's a thread id here and it should be considering the thread id to group the messages together so let's implement this now and just make these like little ui fixes okay it's working but messages
are not grouped together properly when they have the same thread id in superbase it means they are one thread also i don't want you so the other thing i noticed is that it is displaying so on this latest message which is this entry here it's displaying everything so like it's displaying not just let's see here yeah exactly so i think it's displaying the whole the whole body here and the whole body contains hey following up here yeah sounds good and so on or maybe it's even displaying the html i'm not sure could be either way i kind of and that's why i implemented this last message feature because that makes the display much easier because this last message property here just contains the last message so we can just just be displaying only the last message message and that'll make it much easier That was actually something I implemented in the beginning in this project, because in my initial project where I tested this whole implementation, that was one of the things I ran into.
So I figured it would be best to do it this way. So let's implement that. So let's add that.
So I want you to display the message from the last. message field instead and you should be looking at the sender and receiver information to figure out who sent. the message okay so we're kind of putting two things in one here fix the thread thread thing and then also fix that it should display last message instead of the whole message so let's see if it okay the thread messaging has been fixed so we can see if we click into this this is now one conversation here and it contains the thread but it seems to have not it's not displaying just the last message right now because i can see from here that it's actually displaying the whole thing so we should fix that too okay the threading is fixed but in the message area you should be displaying only the last message field because that field is cleaned and only contains the latest message making it easier to display the conversation flow.
The other field contains the history of the messages but all nested within each other like it is typically in emails. So yeah, in emails, it is typically like that. That's kind of just nested, so it's not very nice.
But since we want to, like, this is a bit of a beauty feature, but since we want to make it look like it's just like a very simple messaging app in a way, so just like back and forth messages, I think it's easier to implement it this way. There might be some better way to implement this later on. Maybe I'll figure out a better way, but for now, we can just try this.
Okay, so let's check it out. Yeah. see this looks much better now so it's only displaying the last message the last message is being filtered out by our n8n workflow so the ai agent within the n8n is doing this filtering and now it's only displaying the last message and this looks like a much better conversation flow so to improve this we could you know it's all from the same center now because i was sending these emails to myself as a test but to improve this we could have this on the left side and then put this on the right side so that's just a small ui tweak and yeah so if we click through the others we can see okay so all of these don't have don't have any thread information this one does this was also a test so incoming message and then these are the reply messages so yeah i think we at this stage we have the front end of this page working like we could make some small beauty tweaks as as i mentioned like put this here also what you'll notice is i kind of simplified this by just having an open in gmail button here so let's see if this works okay it doesn't work yet but my thinking was like i could implement the messaging functionality here which would you know implement it would basically use the gmail api to send messages which is fine and we can do that but
an even faster way to do it for now is just have a link to the gmail message it will open up in a new tab and then we can type our reply there and we'll still see it here so this is just an easier way to implement this for now and so we have the ui step done so if we go into our plan here step two of the ui is done and now next up we will implement the research functionality and so basically this button when you click this button it should generate a report and you should then be able to see the reports on the reports page so let's do that next okay now let's build the report generation feature and for that i'm going to switch back into the code here in cloud code we can actually do we'll just do a clear to reset everything and what i will also do now we didn't we could have done this earlier but i will do an init now because this just kind of creates a file for Claude to understand the code base that you're in right now and it will make things a bit easier for Claude Code to work on this repository.
Okay, that created this Claude MD file here and it basically summarizes what this project is about. Okay, let's continue. So the first thing we'll want to do is actually before we code anything here let's go into the web and yeah let's have a look at the perplexity api because as i mentioned we want to do a deep research on a brand and there is a api by perplexity that does this really well and we can go here to the overview i had a look at it earlier so there are a couple of different models that they have sonar lightweight cost effective search model and then this is like the reasoning model and then there's this deep research model which is the one that we want and so if you just look into it okay here's some like response examples if we go and open up the api reference here this should give us all of the information that we need so basically there are a couple of different endpoints there's this generates models response for the given chat conversation chat completions endpoint so this is i guess it's like normal post endpoint and this one creates an asynchronous chat completion job
Okay. Okay. I'm not sure.
I'll let AI decide later which one to pick. I guess this one will be fine. Okay.
And these endpoints are just to like check which operations are currently running, which async operations are currently running, I guess. And if we look at some of the properties in here, authorization, obviously, then there's this like model property. So you can pick your model here.
We will do the deep research one. And then you put your messages in here is where the prompt goes. You can pick your search mode and then there is academic or web.
so when set to academic results we'll prioritize scholarly resources so we will go for web reasoning effort we can like pick low medium high and a couple of other things i think one thing that's important is this search domain filter needs to be empty because this basically says list the domains that you want to search in and we will want to do like a general internet search about a brand so we don't want to put anything in here and keep this empty and yeah we won't need streaming yeah i think the rest we will kind of let ai decide or let cloud code decide how to construct this but we will give it a bit of guidance of course okay so we have an understanding of the perplexity api so let's go back into our cloud code instance here and then we can start planning this i want to build the next feature which is the creation of the brand reports the way it works is i should be able to click the generate report button for a brand which is in the message area header if you remember that was
this part here and and then it will trigger perplexity api request will say sonar deep research to do some research about this brand and return it as a report on the reports page the reports page should have a simple card layout and if you click on the cards the detailed report opens up okay did we miss anything yeah we need to tell it to actually generate the plan first let's see if we missed anything here and then we can specify this later we can also let's just go into plan mode just to make sure it doesn't start coding generate a plan first inside of todo that lets us implement this whole thing okay Let's do it.
We will need to, I forgot that. We will need to give it perplexity API docs links so that it can actually go and check and, you know, construct the endpoint in the right way. Okay.
It came back with a suggestion here. It says phase one is the database schema and types. So actually, since I had already created this database previously, and I kind of just want to reuse it, not this one.
So this is the. table that i created previously during my tests and i will want to reuse this so i will actually just tell it modify this plan to use the table that we already have and let's see perplexity api integration yeah we will need to pass in the docs for to be more precise here reports api layer that sounds fine state management okay navigation and routing reports page ui message area integration yeah report generation workflow implement background job system for report system yeah okay so it will show like states pending generating failed and so on okay other than that it sounds good so let's just make these small changes so for for phase one i actually already created a database table in superbase for this so i want you to use that to use and match that let's get that information okay we're gonna go to database tables and brand reports here and then we can take a screenshot that should do fine or can we copy and paste this let's take a screenshot should be okay screenshot also for phase two here is the perplexity api docs for reference make sure you see it and put the detailed api call
details in the plan and then i'll let me get the link link and then i'll say i want to use sonar deep research as model search mode web and what else did we say we can do let's do reasoning reasoning mode low to test and we want we could do a max tokens as well oh yeah search domain filter search domain filter should be empty and okay also make make sure that every phase is being tested at testing into the plan ideally testing by me the user not automated okay it made the adjustments added the testing changed phase one and phase two to add more details this looks good yeah i think yes and auto accept edits it didn't actually write to do list so sometimes it like just creates it and then like i need to tell it to actually create the file so it didn't create a file now so we need to just direct it create the to -do list file exactly like you planned above inside of the list first, because if we don't do this, then it might get lost, you know, in the context.
So we want to make sure that the file is existing so that we can really go through the phases one by one. Okay, I'll just verify again if everything is right. And yeah, it does look right.
A structure with nine phases, each containing, yeah, probably eight and nine are kind of a bit overkill, but we'll see as we go. Okay, let's... start with phase one okay the first thing i did here was to create or tell me to add the perplexity api key in my inf local so i will go and do that and i did create so if you go here to quick start and then uh you can get your api key here okay i've inputted my api key in there okay i've inputted my api key in the nflocal file and made sure to save it this time very important and then i can continue here okay so phase one was just about putting in the variable i guess user testing verify typescript types compile without error check environment variable is loaded in browser console okay actually the tests were already done here as it seems so you can just say okay then okay it doesn't matter i'll just say mark phase one as done move on to phase two and i'll just tell it like always mark things as done after you've completed and ask me before moving to the next phase so phase two is going to be the perplexity api integration and yeah it's using those completions endpoint model deep research web
Mode reasoning effort low for testing and search domain filter empty. So the API call structure looks roughly correct. And it says you are a brand research analyst.
Provide comprehensive brand analysis. So the prompt is here still quite simple, as you can see. I will just answer it here.
Should I proceed with phase two? Yes. The prompt is relatively simple.
Research and analyze brand name, include company overview and, you know, like strength, sweetness and so on. So we could optimize that later to get better results back. do need to think about this a bit now because depending on the report that we get back we need to parse that data to display it right so we need to make sure that actually what we get back is somehow in a certain in a specific json format or like like a specific format so that we can display it properly so we might want to add this part i forgot about this so let's see how what it does here let's wait for it to finish okay so we can test it first it says open a browser console add this test api call okay okay i asked it now how i can test this because i wasn't sure exactly like what it means to just test the api call manually in the browser dev console or or how to do it and then it does say you can you need to call it through a component or create a test button so that's kind of how i'm used to doing it
I don't know if there's a different, easier method, but I'll just tell it to do that then quickly and then we can test it quickly. Yes, implement that so I can test it lightweight. Okay, so it will add a temporary test button to the message area component.
So I do think it's important to test this part because if we continue building and then this part doesn't work, and this part is like calling the perplexity API. Then we're going to have to do a bunch of debugging later to find out what exactly was not working. So it's better to debug this now and just make sure that the API connection is working.
So we can now go to look for the test API button, click the test, watch for button changes testing, and then check the browser console. So it should be here. Yeah, test API.
Let's go to testing. OK, test failed. So good that we did it now.
Let's see what it actually gave back. go to console here and let's screenshot that it says test failed okay access to fetch ad from origin has been blocked by course policy the perplexity api doesn't allow direct browser requests from okay to create an xjs api route which i guess is what it wants to do here is that the case in phase three reports database api layer yeah i think it's actually what it wanted to implement here okay well it went ahead and did that so what did it implement now it implemented the api it implemented something here okay the route the api perplexity route .ts file so it should be handled inside of here now so we'll just need to make sure that when it implements phase three that it doesn't write like duplicated stuff and now let's test it still failed okay it responded with status 401 unauthorized here please check your invalid invalid api key okay so let me check that because i use an old one maybe i just need to okay i have replaced the api key with a new one then i press test again and now it seems to be working because it's still running and usually these like deep research reports run for a while at least it's not failing immediately so i kind of know something seems to be different this time and i'm guessing once it actually comes back
it happened here okay and now it returned something so the api test was successful and we can see okay it inserted a dummy brand apple inc and then it gave me the report back here which looks good okay so the api test worked that's good and now as i mentioned earlier we can actually modify the we can modify the api call a bit so that it can return and like adjust the prompt a bit so that it returns exactly the format that we will need later to show the reports.
Okay, it worked. I want to modify the API call prompt a bit to make sure that the reports come back in the intended format later so that we can display them properly. I basically want the report to contain some general information about the brand and then a more detailed section and then a section with links to example content because remember the brand report is for a creator to evaluate whether the brand would be a good fit in terms of sponsoring partnerships make according adjustments to the plan.
I'll tag the plan and API. So actually one thing I remembered and that we should just make sure now after I have checked the updated prompt here. So it kind of improved the prompt here, but I think what is still missing is, and I remember that in the API, they have this field called response format.
So it basically enables structured JSON output formatting. And so we should really utilize that and I'll let that know here. In the perplexity API, there is a response format field.
I want us to utilize that so that we get an exact format back. Make sure there are no parsing problems later in the UI. Okay, so it is going to the perplexity doc again to just verify that.
Okay, so it created a JSON response format, but I just want it to be a bit simpler. This seems like there are too many fields. Okay, that's fine.
But make the response format a bit simpler. Looks... Too complex.
No, I just feel like if it's too complex, there are just too many variables there where things can go wrong. So let's just keep it simple. And so it's simplifying too much now.
I meant to keep it simple within the bounds of the structure I described earlier. Yeah, keep the three main sections, but just simple within it. Okay, partnership analysis.
Okay, well, let's add in brand overview. There should be... some information about the funding and in the detail analysis i want to mostly have some information about what their product does the content examples section should just be an array of links so I do have to be quite specific here.
Otherwise, it's just doing what it wants. Okay, so now let's run the test again. Okay, now it turned it into a bad request.
So let us screenshot this. Actually, we are going better. Can we copy paste this?
No. Okay, add request now. Okay, it says the problem is with the response format.
So let's check in the API docs again. It does have this. So it's just an object.
What does it mean? Okay, so apparently I was able to fix it. by saying that it's a not a json object but a json schema so also wasn't quite sure what what exactly the difference was but basically the object just was like giving it directly as an object and the schema is like giving it the blueprint and so that seemed to work and now i tested it again and it returned this part here so i should make sure so i can actually yeah Nice, I can mark the whole thing and probably copy paste it.
That's good because I want to actually input that so that it can know the exact response and make sure that when we parse it later, as you can see, it has like this think part and I'm not sure if you can remove it from the response maybe, but it seems to kind of return this think part. And then there's this brand overview part, which is the data that we requested.
So let me just give it that and say, okay, it worked. attached, you will find its response. Make sure that the plan is adjusted accordingly so everything goes smooth later when we implement the UI phase.
Wait a minute, I think I didn't actually copy this. Let me try this again. Here you go.
Okay, now it's updating the plan. Okay, proceed. Also, we should add, make sure not duplicate.
anything since we did the testing earlier you can use that i just want to prevent it to write two api routes okay so this phase three is basically to communicate with super base right to get get and post the reports and so on and again we have a bit of problem with the testing now because we need to like get it to write some tests so i actually like For next time, I think it's really much better to just implement the front end and then like build the backend parts onto it because then you have like, it's easier for you to test.
This way you kind of have to always just hope that it's working or like write additional testing pages. So in this case, let's ask it, can you write something lightweight for us to test this? Okay, it wrote the test for us and now we can go into the front end and click test DB.
Added this new button here. Okay. And it says database test failed.
Let's have a look at the console here. We'll take that, put it here. Test failed.
Okay. So with copy and pasting a bit, it seemed to have fixed the issue. So it was just a mismatch in some of the fields, which can happen because this database was created beforehand.
And it's kind of, you know, sometimes it like doesn't match exactly. This problem will usually not happen if you haven't created a database table yet. and basically tell the AI to give you SQL code to create the table because then it kind of originates from the original logic.
So yeah, this can happen sometimes. But if we test DB now, we can see it says DB tests completed and it should have created a new input if it refreshes here. Okay, so it likely, it created this second one here down here.
Simple test brand. Good, so we can actually delete those again. Okay, now let's go back and have a look.
at what we have now in our plan so this was this was phase three and if we look at phase four five so four is like the react hooks and state management for like basically calling the reports and calling perplexity and so on and so not the actual api calls but like the the hooks within the application then phase five is navigation and page routing reports page ui components so it seems to be all ui from now on which should make things a lot easier and then message area integration which is also ui so what i'll do is now since like Setting up APIs and like database is usually the most complex stuff.
And once that's done, the UI thing is usually pretty easy for the AI to do. So I think we can just do it a bit faster here and just say implement everything until phase seven. Okay, it works.
Now continue with the plan and implement everything up until and including phase seven because it now seems to be all UI stuff. mostly okay so it has implemented everything up until phase eight actually now and so we should go and test it and i'm sure there will be a couple of issues because it always happens when when you implement more things at at once then there will always be a few issues so let's open up our developer tools here we'll click on console and then you can see that this create brand report button should now work it says generating okay and there we go there's an error so let's start debugging this it seems to be an error here when doing a patch to the super base table so this is probably when updating the super base table so let's paste that in clicking okay i've managed to fix the issues now so first there was something with the database status updating that went wrong and then there was some problem with the parsing so one problem that i actually also saw in my initial test was that the perplexity api returns the
the report always with the thinking tag. And so the parsing kind of naturally assumes that there's no thinking section. And so it kind of fails in the parsing.
But then when that was fixed, it actually all worked. And now we can actually test this. So if we just go to this brand here, I know this formatting here is not perfect yet, but I just take this message because the brand here is there.
It exists. There is a brand. So if we click create brand report, it'll take this brand and then.
send it to the API. So in this case, SparkLoop, we can do create brand report. It will start generating and we can see here from the logs, it's even checking for existing reports of this brand.
So that's like an additional logic that the AI... just implemented it was part of the plan i guess and then starting brand research sending it to the perplexity api so that's all working and now we just have to wait okay as we can see it came back successfully we still have to improve this obviously this this is not great ui yet but we can see report completed if we press ok it reroutes us to the brand reports page and here we can now also see we can close this we can see these were all like the test ones i was creating and that failed and this one actually completed so we click into it and then we can also see the brand report here so this is awesome we even have a regenerate here so this pretty much completes our flow because we have we have the messages again we can optimize how they're being displayed here like it's cut off a bit we can optimize how the brand is being fetched in this case since i was just sending myself some test requests there's no brand so that's going to be a problem when i click create brand report i got to remove these two buttons here now if i if i
actually pick a brand so let's take passion fruit and then click create brand report we are going to get a report on this brand okay so the report came back and i actually realized it's here it kind of identified tonic ai as the brand which i think is not quite right in the original ai agent which is doing the parsing of the brand so we have to fix that but the report was created of tonic ai so this part definitely works so yeah this we can have a look at the entire workflow now.
So we implemented as a summary, the AI agent part. So that's parsing and kind of like not parsing, but like looking through emails that are coming into my inbox and filtering the sponsorship requests. We set that up with innate N and then we build out all of the UI.
So this part, the messaging and you know, all of the buttons and the reports page and so on. And then in the last part, we've set up the perplexity API integration to generate the actual brand reports.
Now, there are, of course, still a lot of other things that can be added here, I think is already quite useful. I have a filtering of my brand reports here that I can check into so that at least, you know, they're kind of separated from my inbox. So there's a filtering going on and I can quickly generate reports on them.
So as a creator, this tool is already quite useful. There are things that we can improve, right? So I put some of them down here.
Obviously, like some of the things I mentioned just now with, you know, like some of the UI fixes and just making the overall flow a bit better. That'll probably take, you know, one or two hours to just like go through. iterate them and fix them and then i think there are a couple cool features that we can add here too so we can implement the actual like the actual reply feature here so that i can you know use this as a messaging app and doesn't need to reroute me to gmail to reply so that's one kind of and then also just add some templates into the reply so often when i get a request from a brand and i've done a research on them and i want to proceed then i'll send them my media kit and say, hey, check out my rates.
Do you want to proceed? And so there are several templated replies that we can let the user define so that you can send out these templated replies easily to the brands. Later on, maybe you could even turn this into a fully autonomous agent that does these initial this initial communication for you, the replies for you automatically, of course, depending on how you've customized it and how much autonomy you actually want to give it.
So that's where the settings page would come into play. You can define very much how autonomous the AI agent should be. And then I think one of the big things is also like we've only implemented this for Gmail right now, but you might want to have it linked up with multiple Gmail inboxes or even with other, with like your social media platforms.
right, with X and IG. And this will be slightly limited by which of these platforms actually have an open AI that allow you to tap into this data. So I know, for example, that TikTok does not.
Yeah, once you actually enable all of these integrations, this will be really useful. And then I think finally, this whole thing can actually just also turn into, if you open up a platform for brands to just go there as the starting point to reach out to creators, that could be a really nice marketplace as well. So lots of different directions.
that this product can be taken to. But it was nice to see that in this short time, we can at least spin up like an initial MVP version. Okay, and if you want to learn more about building software with AI, I've started this community where we have calls weekly.
I have a, there are a bunch of courses in there. for beginners to learn how to get started with this stuff. So I've tried to condense everything I know and put that into these courses.
I'm also thinking about, since I will be building more of these things and I cannot follow through with each of these products to kind of just put them into my community as like, you know, this for example the mvp version i'll put the code into the community and then whoever is inside the community and wants to take this project to the next level can use that and get started with that and basically work on this this product so yeah that's something i'm thinking about let me know if you'd like that and yeah thanks a lot for watching this video i hope you enjoyed this and i hope to see you in the next one thanks
The Hook
The bait, then the rug-pull.
Moritz opens on the finished product, a WhatsApp-style inbox of inbound brand sponsorship requests with a one-click AI research report, before rewinding to build the entire thing live: the email agent, the database, the interface, and the research integration, bugs included.
Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.
Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
A 15-minute screen-share that takes you from blank terminal to a live, deployed CRM with email notifications and background automations — no code written by hand.
An 18-minute build diary of a custom personal OS: Telegram voice notes, live net worth, habit tracker, CRM, and the Supabase memory layer that ties it all together.
A 27-minute free course showing how to build a Telegram-connected Claude Code agent with persistent memory, Siri voice triggering, and a multi-agent board of directors using Bun, Supabase, and an open-source GitHub repo.
Every night at 1am, 3am, 4am, and 5am, a set of Claude Code agents build something, grade themselves against a rubric, and write their own rules before the next run.
01:30
02:30
04:28
05:24
06:05
07:17
08:13
09:09
10:05
11:02
11:58
12:54
13:51
14:47
15:43
16:39
17:59
18:32
19:28
21:18
22:12
22:42
24:23
25:15
25:44
26:31
27:47
28:30
29:04
30:11
32:08
33:04
34:00
34:56
35:54
36:58
37:20
38:17
39:30
40:25
41:09
41:59
43:01
44:19
45:15
45:59
48:05
49:03
49:38
50:55
51:47
52:48
53:45
54:41
55:38
56:29
57:23
58:14
59:38
60:21
61:24
61:58
62:53
63:49
64:47
66:03
66:31
67:42
68:51
70:42
71:37
72:30
72:46
14:58
31:44
18:08
26:47
26:30
15:25