admin/ClaudeMarketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: scaffold Next.js 15 project with TypeScript and Tailwind

Browse Source
This commit is contained in:
Trey t
2026-03-23 11:50:39 -05:00
commit 3abe46fba6
395 changed files with 18064 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/reference/transcript_clean.txt
+727
View File
@@ -0,0 +1,727 @@
Take a look at this. A branded video, a
high quality Instagram ad, content
scheduled and posted across YouTube,
Instagram, and threads. All from one
single command. We didn't do any of this
manually. We didn't hire a team. We just
ran five AI agents inside clock code and
they handled everything automatically.
So, if you have been watching the AI
space lately, you already know how
popular clock is. And with open claw
blowing up, everyone is talking about
how to build multi- aents workflow. But
most people are actually burning through
tokens and getting nowhere fast. So
today we're going to show you the
smarter way to do this. We are building
a full social media marketing engine.
Five agents working together. One
researches your content ideas. One
builds actual video using Remotion. One
designs your Instagram ads in HTML. One
writes your captions for every platform.
and one schedules and posts everything
automatically. So basically a fivep
person content team running inside your
clock code for the cost of just a few
API calls. Let's get into it. Let's
start by walking through the
environment. And before any agent runs,
we just need three things in place. And
I want to go through each one because
understanding what and why can make the
rest of this build make sense. This is
where we put all the creative
references. And right now we have sample
assets in here. Things the AI can pull
from as official and creative context
when it is generating output for the
brand. So you can think of this as the
mood board that your team would normally
keep in a shared drive. And except here,
Claude has direct access here. And then
the next one is the knowledge folder. So
you can think of this like a brand brain
like everything Claude needs to know
about who this brand is and how it
communicates and we have three files
inside. The first one is brand identity.
This can cover the brand personality,
core traits and tone of voice. So this
is a kind of document that a brand
strategist would spend weeks building.
And here this is a structured file that
every agent in this pipeline can
reference. So the second file is
platform guidelines and this is exactly
what it sounds like like a guide on how
the brand formats content depending on
where it is going like Instagram's bags
YouTube structure threats tone etc and
each platform has its own rules and this
file can actually lay them out clearly
so every agent follows them
automatically. All right so the third
file is product campaign. So this file
basically outlines how the brand
typically approaches campaigns and how
visuals are usually handled and also is
about what a typical content package
looks like and it gives the agent a
frame of reference before they start
generating everything. All right. Then
we have clot md. This is the file that
we have and if you have worked with clot
code before you know this file and if
you have not this is the most important
file in any clot code project. So
basically you can treat this empty file
as the source of truth for the entire
workspace because it can tell clot what
the project is, how the folder is
structured, what files are available and
what rules to follow when navigating
everything. So without it, Clot is just
guessing. And with it, Clot knows
exactly where it is and what it is
working with before it does anything. So
if you look at this right now, you will
notice we only have three agents
declared here. And don't worry about
that. We will be updating this as we
build each agent throughout the video.
All right. And last, this is important.
This is our comprehensive CL skills and
plugins document like 600 lines. We
built it from the 33page clot skills
guide that Enthropic released recently.
So everything you or clot code needs to
know to create a well structured
reliable skill, it is in here like the
YML front meta rules, the trigger
patterns, the workflow structures, the
testing framework, all of it basically.
And this is not just a reference
document. This is the foundation we are
building every agent skill frame. Okay.
So before we jump into clot code and
start building, we need to be clear on
what each skill is actually supposed to
do. And the best way to do this is just
to plan it first with cloud of course.
And here is what looks like. We open CLA
and set 4.6 is fine for this. It's not a
complex task. So we actually do not need
opus 4.6 here. And then we can ask it to
help us plan and draft the key details
and description for the skill we want to
create. And we can also attach the
automate clot skills document. So clot
has the full context on what a
well-built skill looks like. All right.
So what's great about this step is that
clot does not just give you an answer.
It can ask you questions. It wants to
understand the scope, the expected
behavior, the edge cases, etc. and you
just answer them as they come. So after
some back and forth, CL outputs the key
details and description for the skill
and from there you can tweak it, refine
it or if you're happy with it, just copy
it into your notepad and move on. And
since we are building five agents for
this pipeline, that means five skills.
You can go through this planning
conversation five times, once for each
agent until all five are defined. And
here's what ours looks like with all
five done. like key details, clear
descriptions, scope defined for each
agent before we write a single line of
skill code and also we posted this PDF
and the ultimate cloth skills MD file in
our premium community and also if you
want it for free you can let us know in
the comment section below. If we have
enough requests then we are going to
post it in our free community as well.
So with this ready we can move into
cloud code and start building. Okay, now
that our research is ready, it's time to
put it to work. So in this section, we
are going to create two agents. A video
ad specialist which can handle
programmatic video content for the brand
and also an ad creative designer which
can build static ads for platforms like
Instagram. And we're going to build both
skills first and then test them one at a
time. All right. So, let's start with
the video ad specialist first. And here
in cloud code, we can just use this
prompt to kickstart. And the prompt is
help me create an agent skill. I will
give you the key details about the
skill. And then you can use the ultimate
clot skills and plugins empty to create
it. And then we can just paste in the
key details we planned out earlier. And
those are the details that we drafted
with clot before coming into clot code.
And that is the important thing to
notice here because we're not just
asking clot to figure out what the skill
should do. We have already done that. We
are just handing it the brief and asking
it to build. All right. So let's hit
enter and let Claude work through it. So
after a while it's done. The video ad
specialist skill is ready. And we can
just open the skills folder and take a
look at what Claude actually created.
And here it is. We have a section
defining where the skill gets triggered,
a critical rule that can tell the agent
to check the knowledge files before
doing anything else and also the full
workflow steps laid out in order. So
basically this skill wraps around the
remote skill. So what that means is the
remotion skill handles the video
creation best practices, the technical
side, the rendering, the scene
structure, the motion logic, etc. And
the job for this agent skill is just
focus on the brand. It can take
everything Remotion knows about building
Fido and filter it through the brand
knowledge that we set up earlier. So
basically, it's just one skill handles
the craft and the other handles the
brand and together they can produce
something that is both technically
wellbuilt and on brand. And if you have
not installed the official clot remotion
skill, please do it now. And also you
can check out our previous video on how
to install this skill as well. All
right, so now let's move on to the
second skill, the add creative designer.
All right, so same process. We just ask
Claude to create a new skill and
reference the automate clot skills and
plugins document as the guide and pasts
in the key details for this agent. And
this ad creative designer has a
different job from the video ad
specialist. So for the feeder ad
specialist that agent actually generates
motion content through remotion but this
ad creative designer agent actually
focuses on static ad creatives like
square format Instagram ready built
through HTML and captured as a clean
image. So basically same prompt
structure just different skill brief.
All right so let us hit enter and wait
for clot to finish. And there it is.
Both skills are now built and ready for
the project. And as you can see the
structure is very similar to the video
ad specialist like same trigger logic
same rule about checking the knowledge
files first same step-by-step
workflowful format but the way this
agent actually works is quite different
from the video one and here's how this
one works. So basically it starts by
calling nanobanana mcp which can
generate images using the branch
knowledge folder and the sample assets
we set up earlier as visual reference.
So the images it can produce are not
random. They are informed by the brand
and from that it just uses the react
canvas to design the static at layout in
HTML like typography spacing color etc.
All applied according to the brand
guidelines and then this is the part
that can make the output clean and
production ready. It just launches a
playright browser to take a precise
capture of that HTML file and saves it
as a PNG file. So what you end up with
is not just a rough export or a browser
screenshot. It is a pixel accurate image
of a designed ad ready to upload. So
this three-step workflow, generate,
design, capture is what actually makes
this agent produce something that
actually looks like it came from a
creative team. All right, so to set up
the playright SDK, you can check out our
previous video where we also did
something similar to this and you can
find the link in the description. And
now let's test the agents. We will start
with the ad creative designer and the
static ad. So here's the prompt that we
are going to use. and let me walk you
through it. So, first we just state the
task and mention the skill we want to
use. And now you can trigger a skill
without naming it directly because cloud
is intuitive enough to pick it up from
natural language most of the time. But
if you want to make absolutely sure that
the right skill is being used, just
mention it and then prompt. And then the
goal for this prompt is very simple.
Just produce an Instagram ad. We just
supply it with JSON inputs that can
define what the ad should contain like
the headline, the copy and the facial
direction. And then we just instruct it
to build the ad in HTML with CSS styling
applied. And that is exactly the
workflow we walked through earlier.
Generate, design, and capture. All
right. So now I've already run this
prompt and as you can see all the steps
have finished executing. So let's just
open the output folder and see what came
out. And here it is. So honestly for the
amount of input we gave it, it is a
pretty strong result. Like just basic
JSON inputs, a simple prompt, no
detailed design brief at all, no menu
layout work, and the agent can produce a
clean styled onbrand static ad and ready
to use. So this is what a well
ststructured skill with good brand
context can deliver. So you do not need
to overengineer the prompt because the
skill can already know what to do with
the information you give it. So now
let's test the video ad specialist. And
here's the prompt that we're going to
use. Just like the static ad, we're just
keeping it very simple. We are going to
ask it to create a promotional video for
the brand. So we can define the target
audience and we can lay out five sins in
total. And we will include a few rules
around how the SVGs should be handled.
And that's it. No detailed storyboard,
no frame by frame direction, just the
essentials. And we can let the skill
fill in the rest. So we can hit enter
and wait for the output. So now you
might be wondering why we are suddenly
in Google anti-gravity's AI chat when we
were just inside clock code. So the
reason is very straightforward. These
are quick individual agent tests. We do
not want to burn through CL code tokens
on isolated test runs. Right? So for
this just smaller test, we can just use
school antigravity. It can keep things
efficient and when we run the complete
five agent pipeline at the end that is
when we are going to go back into cloud
code and let everything run together
properly. All right. So this is done and
unlike our previous remote videos where
you open Remotion Studio and manually
click render, we just built an automatic
render script directly into the skill.
So the finished video just go straight
to the outputs folder without any menu
steps. And let's open it and take a look
at this.
Great. It looks pretty good. Not
mind-blowing, but with the prompt we
gave it, this is exactly what you
expect. So what's happening here is that
Claude just read the brand knowledge
folder and then pulled the right facial
references and produced an infographic
style video that feels on brand. So no
detailed brief, no manual scene
building, just a first simple prompt and
brand context and that is the solid
baseline. All right. So both creative
agents are built and tested. Now we can
add the intelligence layer that can feed
everything which is the research agent.
So what this agent actually does is more
than just research. There are basically
two things happening here. The agent
finds and synthesizes information but it
also creates resources that you can
specialize and share with other people.
So you can think about like formatted
briefs, structured outputs, things that
you can actually hand to a client or a
team member without doing extra work and
that can make it really useful beyond
just being a background process in the
pipeline. So there are two layers in
this research agent. The first one is of
course web search and for this we are
using a simple and reliable web search
API called Tavly AI. It is clean,
straightforward and built for exactly
this kind of use case. And then the
second one is the agent skill itself of
course and that can take what tally
finds and it kills the research workflow
like synthesizing the results
structuring the output and formatting
everything into something usable later.
So basically Tavly handles the searching
and the skill handles the thinking. All
right. So let's start with the skill
itself. Just like what we did for the
previous two agents, we can just type in
the prompt asking clot to create a skill
and then just paste in the key details
we planned out earlier. So Clot can read
through everything and it can use the
ultimate clot skills and plotins
documents as the guide and it can then
build the skill file. Great, it is
ready. And if we check the skills
folder, here it is like same structure
as the others like trigger logic and
waffle steps clean and consistent. All
right. Now let's set up the tablet
integration. And here we just simply ask
claude to set up the Tavly AI SDK for
us. And we can use this prompt and paste
in the Tavly documentation directly. And
you can find the documentation link in
the description. So just open it, hit
the copy button and paste it straight
in. And same reason as the playright
setup earlier, we're not asking Claude
to guess. We are giving it the exact
current documentation so that the setup
is accurate from the start. And great,
it is done. Tablet is installed and all
we need to get it working is the EMV
file and the API key inside. All right,
so this is how it looks. This is an
example EMV file and you can see
something like this and also the Tavly
API key and all you need to do is just
paste your key here and it can start
working. So you may ask, hey Andy, how
to get the API key. So you can just get
it from your dashboard and you can just
click the add API key button and just
name your key and then click create. And
just like that, your API key is ready.
Just click copy and paste in your EMV
file. All right. So the research agent
is built and the web search layer is
already done. And now let us put
together with the final two agents and
get the full pipeline connected. And now
let's build the copyrightiting agent.
And at this point the process is
familiar like same prom structure as
before. We just ask CL to create the
skill past in the key details we planned
earlier and just hit enter. So as the
name suggests, the agent basically
handles all the marketing copy like
captions, descriptions, platform,
specific writing, anything that requires
words tailored to a specific channel and
audience. So it can know the brand voice
from the knowledge folder and it can
know the platform formats from the
guidelines that we set up at the start.
And it's done. Another skill added to
the folder. Okay, now the last agent,
the distribution agent. This agent just
has two main jobs. Publishing content
uploads programmatically and generating
the right metadata for YouTube uploads.
So title, description, tags, like all of
it handled by this agent. So nothing has
to be filled in manually. And in order
to make this work, we need three more
API integrations. YouTube API, the meta
Instagram and threats API. We actually
have a previous video to talk about how
we can set this up. You can also check
it out in our description. Now, you can
see that we have already done the setup.
So, next we can focus on the agent
skill. And just like earlier, we can
just use the key details that we've
built with Claude in the very beginning
to build the skill now. So, if we check
the skills photos on the left, all five
skills are done and ready now. the
research agent, the video ad specialist,
ad creative designer, copyrightiting
agent and distribution agent. The full
pipeline is complete. And now before we
move on, let me give an important note
here first. So earlier Clark just gave
us this table with all the environment
variables needed, right? And below that
some notes on how the posting actually
works. And the third bullet point is the
one that we need to pay attention to. So
for Instagram post requests to work like
meaning for content to actually get
uploaded to Instagram, the assets being
posted need to be at a publicly
available URL.
Remember it's a publicly available URL.
So it's not stored locally on your
machine. So a local file path will not
work here. The platforms needs to be
able to reach the assets from the
outside. Right. And this is where the
agent will first upload the output files
so the APIs can access them when we fire
the post request. All right. So before
we set up superbase, we can just look at
the example EMV file quickly. So we can
know exactly what keys you are going to
need to make this whole pipeline run. So
first of course your Tavly API key and
then your YouTube Instagram threats keys
and then your superbase project URL and
service key and we'll go through exactly
where to get your superbase storage up.
So now let's get superbase storage set
up. This is the last piece before we can
run the full pipeline. So please pay
attention. Okay, we can just start from
a fresh superbase project and the first
thing you need is your project URL and
you can find it right on the dashboard
as soon as you open the project. It's
very easy to locate. Just copy it and
paste it into your EMV file. So next is
your service key. And now if you have
followed our previous projects, you
would notice that we usually go for the
anon key. And you might be wondering,
hey Andy, why are we using the service
key here instead? And here's the reason.
because this pipeline actually runs as a
serverside node.js script and there is
no user section attached to this and no
logged in superbase user. Basically,
it's just a backend automation script
uploading files directly to a storage
bucket. So, if you used the anony key in
this situation, the upload will fail and
there are two reasons for that. First,
there is no authenticated user section
attached to the request. And second, the
storage bucket has RO full security
policies that can block unauthenticated
uploads by default. And if you want to
learn more details, you can actually
check out the superbase documentation as
well. So the service ro should only ever
be caught server side, never exposed in
the browser. And that is exactly how we
are going to use it here. a backend
pipeline, no front end, no user section.
Now, if this project ever had a front
end, so like a dashboard where users
upload their own files, then you could
opt for the nonkey and set up proper
role level security policies. But for an
automation pipeline like this one that
we're going to set up here, the service
key is what we're going to use. So, you
now know where your service key is. Just
copy and paste it into your EMV file
alongside your project URL. All right,
so please hang on. We are not quite done
with Superbase yet. We need to create
the storage bucket that the pipeline
will upload assess into. From a
dashboard, we can click on storage on
the left hand side. And once you're
inside, you can click create bucket and
then give it a name. We're specifically
using campaign-uploads
for this project. and make sure to set
it to the public. And this specific name
is very important because in our code,
the referenced bucket name from where
the outputs will be outload is hotcoded.
So please make sure to remember what
bucket name CL gives you before creating
the bucket. And also the public setting
is what allows the YouTube and Instagram
APIs to reach the uploaded files of
course. And this is exactly what we
needed for Instagram, right? And that's
it. Superbase storage is configured and
the bucket is ready. So all five agents
are built, the APIs are connected, the
storage layer is in place, every single
piece of the pipeline is now ready. And
now it's time to see all five agents run
together as one connected pipeline.
Let's do the full test run now. All
right. So before we run it in clot code,
let me show you the prompt that we are
going to use. So here it is. It is a
simple job payload like no need to over
complicate a pilot test right and the
payload contains the core brief like the
brand the campaign goal the content
requirements and the other agents can
analyze and then reach it as it moves
through the pipeline and then the
distribution agent will convert
everything into a JSON script that can
trigger the full automation sequence
just simple input and then the agents
can do the rest so let's Just copy this
prompt and paste it into clot code. And
then we can hit enter. And now you can
see clot code is starting to reference
the relevant agent skills for each part
of the task. And it is reading the
pipeline identifying which agent handles
which job and queuing everything in
order. And now that the JSON is ready,
right, we will allow to clot code to
create the file in the project. And
here's the first breakdown of the
payload. And it's looking pretty good,
right? All agents are cued and ready for
execution. But one thing to notice here
though, the distribution agent C
actually has added a constraint that
sued uploads will run in simulation
mode. Meaning no real API call goes out
and that is not what we want, right?
Because we need the actual upload to
happen so that the Instagram API can
reach the files. So then we can just
tell clot to proceed with real superbase
uploads before we let it run. Okay, that
should do it. And now we can just wait.
This will take a few minutes to
complete. All right, after everything is
done and before we approve the upload,
we can just check the outputs first. So
we can start from the research report.
We actually have two versions here. One
in document format and one in HTML. And
this is quite a nice bonus, right? It
can give us two different use cases from
the same output. So let's open the HTML
version. And here it is an interactive
research dashboard. Clean layout, easy
to follow, and the brand colors are
actually being applied throughout,
right? And this is a kind of output you
would share with a client or a team lead
before a campaign kicks off, right? And
also the information quality is solid
and it is already presented in a format
that is easy to digest. So if you need a
more traditional format, the
documentation version is there as well
and it is in mockdown but that is
straightforward to convert to a like
Google doc or word file. And now let's
check the static ad and the video ad.
Here's the static ad. Very simple and
looks pretty good, right? And what
stands out is the consistency here. And
this is the second time that our ad
creative designer has produced something
that looks pretty good and on brand with
minimal input. And that consistency is
what makes this workflow really great.
Okay, so now the video ad, let's go
ahead and find it here and hit play.
It's pretty good, right? For a simple
prompt with no custom assets and no
detailed storyboard. So you can imagine
with comprehensive prompts, a proper PRD
and custom worked assets. This workflow
with remote can actually produce
impressive outputs. And again what we
are seeing here is just the baseline
quality not the best quality yet. Now
that we are happy with the deliverables
right we can just publish them. So over
here in superbase we can already see the
outputs sitting in the storage bucket
and the pipeline actually handled the
upload automatically. And now here is
our publish MD file. It has basically
everything in one place like public
urls, copy, metadata, scheduling
details, etc. And all we have to do is
to just approve this with a simple
confirmation prompt just like this. Now
we can wait for claude to write the
upload script and contact the YouTube
and meta APIs and this should be fast.
Great, this is done. Here is the publish
confirmation. And there it is, the
YouTube video link. You can just open it
and see if the upload went through.
Great, the video is live on our test
channel. It is uploaded and playable.
And let's check Instagram. And again,
this is our test account. Great. You can
see the posts here, including some from
previous projects we built with the same
setup. And now you can notice there are
four copies of the ad uploaded because
we specified four uploads in the prompt
but only asked for one ad to be created.
So the agent did exactly what it was
told. It uploaded the one ad for four
times. So you can just fix this by just
tweaking your prompt to match your
intentions. So to recap, from a single
job payload, five agents actually worked
in sequence to produce a research
report, a static ad, a video ad,
platform specific copy, and a scheduled
upload to YouTube and Instagram. All
connected or automated. And this is what
it looks like when your marketing team
actually runs on skills.
All right. So that's your full content
marketing team running on autopilot
inside CL code. Research, video, ads,
copy, scheduling, five agents, one
single workflow. And now if you want the
exact template and workflow we used
today, plus if you want to have the AI
website design course and 101 tech
support, feel free to join our any no
code premium community. You can find a
link in the description and drop a
comment below and tell me which agent
that you are most excited to try first.
I read every single one of your
comments. And also, if you found this
video helpful, hit the like and
subscribe button for more video like
this in the future. I'll see you in our
next one.