Build a FULL Stack App for your n8n AI Agent in 20 Minutes

N8n is an incredibly powerful tool for building AI agents without code, but you still need a frontend to interact with your agent! Sure, you can just use the chat widget provided by n8n, but often times you need something much more to have a good user experience. Not to mention for any real use case you need much more robust security...

In this video, I show you how to use my favorite combo (Claude + Streamlit + Supabase) to build an incredibly clean and secure frontend with authentication to interact with your n8n AI agents. Take this as a huge head start and just run with it! What I should you how to build can be extended to include a payment system and rate limiting as well since this setup puts the n8n agent behind an authentication wall so you can manage the LLM usage for each user super easily.

I will also be putting on a LOT more content on n8n in the near future, so stay tuned! Lot of amazing use cases I want to cover, and I'll even show how to use other platforms like OpenWebUI and v0 in the near future to create frontends in other ways for n8n agents.

00:00 - Why full stack for n8n agents?
02:09 - Creating a basic full stack app for the n8n agent
08:26 - Testing the n8n agent app
10:47 - Adding authentication to our n8n agent app
18:56 - Testing the full n8n agent app
19:52 - Outro

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Here's a link to the video where I dive a lot deeper into setting of up the RAG AI agent in n8n and configuring Supabase:

I didn't talk about deploying Streamlit applications in the video, but check out this resource and see how easy it is to deploy these apps to production!

The prompts, code, and n8n workflows in the video can be found here:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Artificial Intelligence is no doubt the future of not just software development but the whole world. And I'm on a mission to master it - focusing first on mastering AI Agents.

Join me as I push the limits of what is possible with AI. I'll be uploading videos at least two times a week - Sundays and Wednesdays at 7:00 PM CDT! Sundays and Wednesdays are for everything AI, focusing on providing insane and practical educational value. I will also post sometimes on Fridays at 7:00 PM CDT - specifically for platform showcases - sometimes sponsored, always creative in approach!

[IamSoniw]

The n8n AI Agent video is extremely helpful for progressing to the next steps. Having installed n8n through self-hosting, I'm now determined to start exploring n8n step by step.

[mharding]

Hi Cole, thank you for following up on this. Great to see n8n connected to a webhook. Keep up the good videos.

[NmkDozer]

This video is a gold mine. Ill be looking more n8n videos. Thanks

[orryoz]

Great video Cole keep up the good work! Very detailed and useful! This helped me kick start one of my ideas!

[phantomslayer]

Bro, thank you so much, you can’t understand, how much you’ve helped me ❤😎 love the awesome content

[dawitgebeta]

Can you show us how you can deploy these to production? I find my challenge to be when I try deploying to the web/production instead of just localhost

[sicilianapanama]

hello!! amazing video, you are running n8n as self hosting or using the cloud?

[brianchap]

Hey man I love your videos. I’m having a hard time connecting n8n this way though. Do I have to run it on a local environment or can I get it working through the bolt.new development model?

[nanvenfaden]

Hi awesome video, i have two questions: how can you get the chat history from n8n for each user that logins and display it in the sidebar and how can use the Rag with keyword search? Just a basic explanation will go a long way, thanks.

[TheEngVibe]

Thanks for your great content, Cole Medin. I've learned a lot!

But this time I really need your help
I’m getting the following error: "Invalid JWT: unable to parse or verify signature, token is malformed: token contains an invalid number of segments."
Even though I’m using the correct JWT secret from Supabase, the token keeps throwing this error. I’ve already checked the format using verification tools, and everything looks correct.

Any ideas on how to fix it? Thanks in advance! 🙏

[eco-kraken]

that was exactly what i was looking for. thank you very much!😄

[annasc]

Spectacular! Too beautiful, thank you Cole!!!

[UmairFaiser]

hello man can you put a very basic vedio guiding on how to use n8n and create advanced automations..i watched many tutorials but i love the way u put explanations..sorry for asking this BTW..if it sounds too basic

[AkulSamartha]

This is awesome. How to take it to PROD?

[gilsonmiranda]

Great content! Is it possible to make n8n ia chatbot ask for parameters not given by user to make and external api request?

[neponel]

local everything (llm, n8n, vector db) hardware is almost ready for pro users. no need for so many paid saas providers. tts and stt are small enough and good enough to compete with top voice models. i think right now an ai automation cold calling workflow can be built and used with everything included for .05c per min

[JerryLJackson]

How about a video that shows how to create a simple custom Chat html embed and UI for copy and pasting as an iframe on a clients web page? 🙏 The default n8n chat ux design looks terrible and has a start chat activate button and powered by logo that’s a problem

[zhangteng]

I am really looking forward to seeing how OpenWebUI and n8n can be integrated seamlessly. When will your explanation be available?

[frostyface]

Just found you today, been watching a few AI channels, will be checking out more of your content, 👍 good job

[jimmyjam]

In the HTTP Request node, do I enter my SupaBase anon key or secret key?