YT YouTube2Text

YouTube2Text → Transcripts → I Built an AI Chatbot SaaS with Claude Opus 5.5 + Floot

I Built an AI Chatbot SaaS with Claude Opus 5.5 + Floot — Transcript

by Olly Rosewell · 4,295 words · 593 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00What's going on, guys? This is Oliver
0:02from roseworld.dev and
0:03roseworld.dev/build.
0:05And in today's video, um, I'm going to
0:07be building a full support bot and
0:11chatbot for websites using Flute MCP and
0:15a Claw Desktop. Right. So effectively
0:18what we've built here um is a
0:20fullyfledged chatbot and support bot for
0:24small businesses or software companies
0:26or websites where you basically sign up
0:29and then from sign up um AI will
0:32effectively learn about your business
0:34and create a brain and from there
0:36visitors to your website can effectively
0:39ask questions to the chatbot um and it
0:41knows everything about your business um
0:43and goes from there. Now, every single
0:45thing, including how Flute works, how to
0:48set up Flute MCP with um Claude, and
0:51obviously all of the PRDs for design,
0:54all of the PRDs for um how this looks
0:57and how this actually operates, and
0:59every single stepby-step sort of
1:01instruction to build this is going to be
1:02in the description. But effectively the
1:05reason um I wanted to try out flute is
1:07I'm effectively going through this sort
1:10of stage in my career as you know
1:12building software where um there's a lot
1:15of tools out there um and you have to
1:17connect each one so you have to connect
1:19a back end to a front end you have to uh
1:21deploy on this or deploy on that you
1:22have to you know create databases etc um
1:25flute um is one of those sort of um apps
1:28really that kind of does everything in
1:30that in that sort of box and the point
1:32is that all of this was created did um
1:34from sort of one sign in and sort of one
1:36one kind of area instead of having to
1:38mish mash and sew together a load of
1:41different apps. So if I just go through
1:43exactly what this does. So if we click
1:45start for free, how it works is you
1:48upload your help docs, paste one script
1:50tag before the body inside your app um
1:54like your own website and then the bot
1:55answers from your docs and then if it
1:57can't answer any questions, it will take
1:59um over and just send you you know send
2:01your team a message now. So, what we're
2:04going to do is we're going to go um and
2:06I'm going to say test two. I am going to
2:09just pop in a um username and email. And
2:13what it's going to say, it's going to
2:14say create your workspace. So, what
2:16we're going to do is I'm using um a app
2:19that I built ages ago called agent and
2:21the website is use day, right? So, we're
2:24going to create the workspace
2:26and what's going to happen is you're
2:27going to be sent to this beautiful
2:28dashboard where the setup is three
2:31steps. You teach the bot about your
2:33business. You brand the widget and then
2:36you install the snippet on your site.
2:38Now, the most important part of this is
2:40that all of this is self-contained um
2:43within Flute. So, I'll explain how the
2:44front end and back end works now. So,
2:47obviously, you've actually got the front
2:48end. You've got the inbox, the knowledge
2:50base, you've got the widget and the
2:52creation of that widget, and you've got
2:54the settings um for business hours and
2:56effectively everything that the client
2:58needs or the user needs to set up their
3:00chatbot, right? and obviously usage and
3:02plans. Now, one thing that you don't see
3:04or one thing that is so important um for
3:07something like Flute is that it actually
3:09manages the back end right here as well.
3:11So, we're actually in the preview, but
3:13if you actually go to services, you'll
3:15see that there is a full kind of list of
3:18different things that you can explore.
3:19And one thing that you can explore is
3:21the Flute database for Tail Desk, which
3:23is this fictional app. So, we're going
3:25to click on that. And as you can see
3:27from scratch, and this is all going to
3:29be in the description for you to
3:30actually build yourself. Um, Flute
3:32created dozens of tables, right? So,
3:35we're not having to go external. We're
3:37not having to create a database
3:38somewhere else. We're not having to
3:39create a backend. You're literally just
3:41going to ask it through Claude what to
3:43build and it's going to create the back
3:45end for you. So, as you can see, this is
3:47all of the this is the list of all the
3:49different conversations that we've had
3:51in our previous tests. You've got um,
3:53you know, you've got messages that were
3:55sent. So, do you sell cars? What are
3:57your phone lines? Um, you know, how much
3:59is delivery? Delivery cost $4.95,
4:00whatever it may be. And from there, then
4:03obviously you've got usage. So, every
4:04single user has used 18 messages or 100
4:07or one, etc. All of this back end um is
4:11created just straight through um Claude.
4:13It's not like you're having to go to
4:14Superbase or set up some kind of other
4:16sort of back end and then connect the
4:18two. Um it's all just from one prompt
4:20effectively. Now, I think a pretty cute
4:23thing about Flute specifically, um,
4:25which is present in some other apps, but
4:26it just it just never feels as polished,
4:29is that we can effectively just annotate
4:31things that we want our agent to change
4:33and post it directly in the chat. So, if
4:35we click annotate, it's going to say
4:37screenshot added to the chat. And what
4:39I'm going to do, um, is actually just,
4:41um, literally just circle this. Um, and
4:44what's going to happen now is I'm going
4:47to pop this in
4:49and we've effectively got the website
4:52screenshot straight from the actual
4:54Flute app. And I can say uh make this
4:56section
4:58um smaller and add a five-star
5:02uh you know review banner. And obviously
5:04from there now all from just annotating
5:07the actual thing and and you know
5:08circling it we've got uh Claude actually
5:11working directly with the app now to
5:13effectively change what we asked it to.
5:15And as you can see from there it's taken
5:18the hero that we actually circled with
5:20the annotation tool changed the review
5:22banner and made it smaller. So you can
5:24literally see your docsy team takes
5:26over. It has taken that and then
5:27obviously because we don't actually have
5:29any reviews, it has given us a
5:31placeholder review with the five stars
5:32placeholder replaced with the real
5:34customer review customer name company.
5:37So super clean and all of that was done
5:40obviously in a couple of seconds with
5:41the annotation, but it just stops you
5:43from effectively having to talk out loud
5:45and like trying to figure out what you
5:47want. You can just annotate things or at
5:49least, you know, I suppose um circle
5:51them, that kind of thing and make things
5:53a bit easier for everyone. On top of
5:54that, something that I never really talk
5:56about on the channel um because we don't
5:58do as much sort of like um of that raw
6:00marketing stuff. We just do the builds
6:02is that um Flute is the kind of tool
6:04that will allow you to um effectively
6:06optimize your SEO from the actual
6:08dashboard. With other builders, I found
6:11that it just creates like a slop kind of
6:13like chunk of um of code and it looks
6:15good and it's fine, but you know on the
6:17back end you haven't got things
6:18optimized for people to find you
6:20organically through Google or that kind
6:21of thing. Um, so that's where obviously
6:23inside the SEO tab you can add
6:25robots.txst, sitemaps, etc.
6:28pre-rendering whatever it may be. Um,
6:29and then obviously set up your domains
6:31and everything. So it's really sort of
6:33effective for people who want something
6:35out of the box really. Now the end goal
6:37of this entire video across everything
6:39is of course to have a working chatbot
6:42widget support kind of AI tool. And as
6:45you can see in the bottom right, just as
6:47a test on my website, I'm asking my own
6:50website questions and the AI um is
6:52answering those questions and then
6:55routting me to a team member if the
6:57knowledge base doesn't have the actual
6:59answers. So, what I'll do, guys, I'll
7:01hop into the build and if you guys have
7:03any questions at all, let me know. But
7:05all of the instructions to build this
7:06are going to be in the description. So
7:09guys, inside of the description, you'll
7:11actually have access to the tail uh and
7:14flute one pager as well as the uh pretty
7:18sort of extensive tail PRD. Right? So
7:21this entire PRD goes through everything
7:23that we're going to be building today.
7:24And you can just copy and paste it from
7:26the description, but inside the one
7:28pager, we're just going to talk about
7:29what we're building, right? So think of
7:31it like uh a shop assistant, right? You
7:33hand them an FAQ and a price list and
7:35then when a customer asks questions from
7:37that list or from that FAQ they answer
7:40straight away. So how this works so how
7:42tail this you know fictional sort of app
7:45is going to be working. So the business
7:47signs up um and uploads its documents.
7:49So it might be a PDF a word file pasted
7:51FAQs. Now Tails then cuts them into
7:56small passages and files so that it can
7:57find one quickly. This is called sort of
8:00vectoring and that kind of thing. Now
8:02the business picks a color and a
8:03greeting. So you can sort of design the
8:05uh chatbot in the corner. Visitors ask a
8:08question. So Tails finds the five most
8:10relevant passages from that business's
8:11documents based on those vectors. And
8:14then if the answer isn't in the
8:15documents, the bot will say so and hand
8:17the chat to a team. Every person that
8:20replies from the inbox um they get, you
8:22know, the user, so us, we get an email
8:24saying that someone's messaged us. And
8:26here's how we're going to set up flute
8:28in the desktop app, right? So, open the
8:30claw desktop app, which is where we are
8:32now. And go to settings/connectors,
8:35right? And what we're going to do is
8:37we're going to add the flute connector.
8:38So, this is mcp.flute.com.
8:42We're just going to go over to settings.
8:44We are going to go down to connectors.
8:47Um, so I already actually have flute
8:49connected, but what we're going to do,
8:51um, is I'll just quickly disconnect
8:52that. What I'm going to do next is
8:55remove this and we will just do it from
8:58scratch so that you guys can follow
8:59along. So we're going to go add add
9:01custom connector. We're going to name
9:03this flute. Copy paste the MCP server.
9:06Continue. Just save these settings as
9:09they are. Add.
9:12Checking connection. And it says we're
9:14not connected to Flute. So we're going
9:15to have to open the dashboard um at
9:17Flute on the actual browser and connect.
9:20So it says inside the browser finish
9:22connecting a connector. We're going to
9:24click continue connecting
9:26and then it should be done and dusted.
9:29So it says connect Claude to uh with
9:31Flute. So obviously we've got the
9:34correct email address from my Claude
9:35desktop app and we're going to click
9:37approve.
9:39One last step and then you're ready to
9:40build. So you can either just copy paste
9:42this. It recommends co-work, but I'm
9:44finding really really good sort of luck
9:45and sort of long um long runs inside of
9:49claw desktop and it's where I natively
9:50build apps. So, we're going to click
9:52finish connecting
9:54and then from there we can just jump
9:56back to our project. As you can see now,
9:59what we've got is a flute as a
10:01connector. So, we're just going to shut
10:03this. And how it's going to work is that
10:05we start our prompt with with flute
10:08build x. So we're going to start with
10:10with flute build me a support chatbot
10:12for websites. That phrase is what tells
10:14Claude to use the connector. So the next
10:17thing we're going to do is actually
10:18start a new project. From here it says
10:22obviously local and no folder. So we're
10:24going to click on working directory and
10:26click no folder. Open folder. I'm now
10:30going to create a folder called flute 2.
10:33Open it up and trust workspace. And we
10:36now have Flute 2, which is the empty
10:38folder inside of Claude. So, we can get
10:41started with the actual build. Just to
10:43make sure everything is fine, I've sent
10:45a quick hi inside the chat and it says
10:47I'm in Flute 2 folder. I'm ready to work
10:49on the coal, you know, the code build or
10:51debug, whatever it may be. So, what
10:54we're going to do is I'm going to head
10:55back over to um the Flute One Pager,
10:59change the artifact, which you guys will
11:00have in the description, and I'm
11:02literally just going to copy and paste
11:03this. Right. So, what we'll do now is go
11:06back to Flute 2.
11:09I'm going to paste this entire thing in.
11:13Going to make a load of space.
11:15I'm going to say, "Hi, with Flute." I'll
11:19just double check and say with flute
11:21connector,
11:23please build this from the PRD below.
11:30So
11:32run a long agentic session
11:37and ask for any approvals
11:44and we can get going.
11:55Brand new project in flute. We are also
11:57guys on Opus 5.5. It's the brand new
11:59model. I'm using high. Um you can
12:02obviously use medium, whatever it may
12:03be. Um but this is going to be the one
12:05that's going to, you know, really sort
12:06of like connect everything together
12:08because Opus 5.5 is literally crazy. So
12:11what we're going to do is just going to
12:12click uh send and it's going to get
12:14started. So what I'll do is I will show
12:16you each checkpoint just to go through
12:18how the connectors are working. Um and
12:21we'll build an app. Now the first
12:23important caveat is what model. So flute
12:27is asking us what model we should use
12:28for the actual chat configuration. So in
12:31other words, if someone says I need help
12:33with this, what model are we going to
12:35call to answer that? And I would choose
12:38Haiku to be honest, right? If you have a
12:41um a business that's not really complex
12:43like say like you know like a dental
12:45clinic that um dental clinics are
12:47complex of course, but the questions
12:48that customers are going to be asking
12:50are not complex. It's just do you do
12:51teeth whitening? How much is composite
12:53bonding? Um can I get a tooth taken out?
12:55whatever it may be. Right, we're going
12:56to choose Haiku 4.5 and it says build
12:59one already lives at Tailsk. Um, so what
13:02I'll do, um, I'm just going to use Tail
13:04Desk 2 because it's a brand new one.
13:06Free plan limits or early access. Um, so
13:09what we will do, um, is I'm going to
13:12just choose that people can have 100
13:15chats per month. Is your anthropic key
13:19workspace
13:20um, scoped? So that can be a little
13:23confusing. Um but what I'll do um is I'm
13:27going to click workspace scoped and we
13:30are just going to let it get started. So
13:32the first thing you can see it's doing
13:34with um flute is obviously rendering the
13:37actual project inside our dashboard and
13:40throughout this session claude is going
13:43to cut away and basically start building
13:47um our flute app tail inside the
13:51browser. And also from here um you'll be
13:54able to see the live preview. So as you
13:56can see when we're ready to hit publish
13:58etc. then we've got a live app. Right.
14:01And obviously what you can do here is
14:03click open live preview.
14:07It's going to ask if you'd like to open
14:08an external link. So just click yes. And
14:11as you can see from scratch we have now
14:13got tail running in the browser. And
14:17obviously Flute is just working with
14:19Claude on the desktop app to build the
14:22app. So we're just going to keep on
14:23coming back and forth to see the
14:25progress. Okay guys, so Flute with
14:28Claude actually ran continuously um
14:31without disruption um for a while. Okay.
14:35Right. So um well over sort of 30
14:37minutes. It went through um the creation
14:40of the landing pages. It even which is
14:42insane. It even went through the process
14:45of creating its own um completely
14:48fictional brand and its own website and
14:52then from there it put the embed code of
14:55the actual chat widget on the site to
14:57test it which is just insane right so
15:00from here um I just asked Eli5 like put
15:05in bullets what flute has done and how
15:07the app works so flute is a website
15:09builder that also hosts the site um made
15:12a new project called tail. Set the look
15:15with the off-white background square
15:17corners. Switched on login and a
15:19database to remember everything. Built
15:21in eight steps. After each one, Flute
15:24saved a checkpoint that we can roll back
15:26to if we need and then published it. So,
15:28how the app works, business signs up and
15:30makes a workspace. It teaches the bot
15:32based on the website. It styles the chat
15:35bubble, pastes one line of code on its
15:38own website. Um, so like the fictional
15:40website Northwind, which is like a home
15:42improvement company. A visitor asks a
15:45question, it gets answered by Claude. If
15:48the answer isn't in the docs, um, then
15:50the bot says I don't have that and calls
15:51a human ex, etc., etc. So, I I then
15:55asked how to test it. So, sign up,
15:57create a workspace, teach it about the
15:59business, test the brain, brand it, and
16:01then try it as a visitor in an anonymous
16:03tab. Now, I asked how did Flute test
16:07everything? So [snorts] Fluke gave um
16:10Fluke created a small computer next to
16:12the app and wrote short scripts um to
16:15pretend to be people basically. So there
16:17were three test accounts, Northwind, Bob
16:20and Car. There were burglar tests. So
16:23basically Flute ran tests to try and
16:25steal other users data which um actually
16:29ended up not working which is great. So
16:31Flute had built a completely secure app.
16:34um you can leave the page um and see
16:36what happens when users leave the page,
16:38created fake websites, created limits,
16:40created uploads for the PDFs um and then
16:43tested in a real browser and then just
16:45checked all the back end. So basically
16:48what we're going to do is we're actually
16:49just going to head over and test the app
16:52um from start to finish and I'll just
16:53show you exactly what Flut has done um
16:56and I'll show you the back end etc. So
16:59first off, an absolutely insane website.
17:01So your docs answer and your team takes
17:03over. So, we've got this beautiful um
17:06ASCI animation, Asky animation. Uh we've
17:09got the sign up to live widget in 15
17:12minutes. We've got what happens between
17:13a question and an answer. We got this
17:15beautiful design here. How the bot
17:17works, guys. Like, insane, right? So,
17:21all of the [snorts] design PRDs, by the
17:22way, will be in the descriptions. You
17:24guys can use it. But, um from there,
17:26what we're going to do is we're going to
17:27sign up for an account. So, start free.
17:31Let's say email is Oliver Bert uh plus
17:34test my name and then my password and
17:38we're going to create an account
17:42from there. It says create your
17:44workspace. So let's say my app is deent.
17:48So Dejent is just an app I uh you know
17:50like a a test design I built a couple of
17:53days ago and the website is usedent.com
17:56and we're going to create the workspace.
17:58Now that we've created the workspace, it
18:00gives us a setup test. So teach the bot
18:03brand the widget and install on your
18:05site. So I'm just actually going to be
18:07lazy and open up the use agent app. And
18:10I'm just going to uh copy paste this and
18:12go back into flute. Um what I'm going to
18:15do or I tell you what I could do is open
18:17a doc and uh copy paste it download as
18:22doc x and then we can upload this as the
18:26knowledge base for the agent.
18:29So it's processed um or it's processing
18:32and it's ready. Insane guys. So now
18:34we've got a knowledge base or brain for
18:36tail on behalf of the agent. So anyone
18:38who comes to the agent um the website
18:41they'll be able to answer questions
18:43about the app. We're just back on the
18:45setup screen and the next thing we're
18:46going to do is click brand the widget.
18:49So I'm going to call it deun test
18:51widget. Um, the logo we'll keep just
18:54blank for now, but obviously we can
18:55actually I'll tell you what, I'll
18:56actually upload one. So, I've got this
18:58cheesy photo of myself uh that I use for
19:01a different portfolio. So, I'm just
19:02going to paste that in. And that should
19:04be um I tell you what, if I'm there,
19:07then I may as well say Ollie from
19:08Dayton, you know. Um the color, let's
19:11say like a nice blue, man. Looks
19:14awesome. Bottom right. So, this is going
19:16to be in the bottom right of every
19:17website. Ask a question. Let's say start
19:20a question. So, uh, let's say, what's
19:23the cost?
19:25Uh, do you do refunds?
19:28And can I book a call? So, now we've got
19:31the starter um questions that we can
19:34use. Offline message. Nobody's online
19:36right now. And then, obviously, what
19:38we're going to do is going to head up to
19:39the top and click save. Now, go back to
19:41Tail Desk. The final thing we can do is
19:43get the snippets. So, I'm actually going
19:45to click on this. There's now, man, it's
19:47it's so cool, man. There's now um
19:49instructions for um setting up the
19:51snippet. So, let's click copy on this.
19:54And it says paste one line before body.
19:57Now, just a quick um sort of cutaway,
19:59guys. I've actually just asked it to add
20:01the widget to um my agent session, which
20:04is in one of my old apps. So, it says
20:06swapped and pushed um we've now put the
20:10um header text
20:12um the header code from Flute on the
20:15Dent website. So, what we're going to
20:17do, we're going to head back over and
20:19we're going to open Degent, my, you
20:21know, my fictional test app inside uh
20:25incognito tab to test um the inbox. So,
20:28obviously, as you can see here, there's
20:29nobody waiting. We're just going to go
20:31and head over to an incognito tab now.
20:34So, we are now on Day under the
20:36incognito tab and the chat widget has
20:39arrived in the bottom right corner,
20:40which is insane. So, what we're going to
20:42do is we're going to click this. We've
20:44got Ollie from day agent there. It's so
20:46clean, man. And we said, "What's the
20:48cost? Do you do refunds? Can I book a
20:50call?" Let's say, um, how much
20:54does it cost to get started? Now, what
20:57we're going to do is if I go down, uh,
20:59this this website, it literally says
21:00it's 129. So, let's say, how much does
21:02it cost to get started?
21:05[snorts]
21:06The agent costs 129 a month, no contract
21:08or setup fees. And that is aligned and
21:11accurate with the actual um brain and
21:13the knowledge base that we uploaded. And
21:16now lo and behold, heading back over to
21:18the tail inbox, you'll see the
21:21conversation. So it says visitor 1134,
21:24which is accurate. How much does it cost
21:26to get started?
21:28Look at that, man. So it says day cost
21:30129 a month, but it actually even tells
21:31us the sources um of the actual
21:35information. So what we've created
21:37effectively is a widget um embeddible
21:40code hosted by Flute that allows people
21:44to effectively um give their own
21:47website, a chatbot and a support agent.
21:49And all of these emails are actually
21:51being sent to us so that we don't miss a
21:53beat either. So as you can see guys,
21:55I've actually opened an example um email
21:58that has just been sent as a test from
22:00Tails and it says a visitor wants a
22:02person because they ask how much is
22:04delivery. So the same thing applies to
22:06every test question and message that
22:08we've sent and what we've now identified
22:11is that tail with flute flute has
22:14created um the app from scratch um with
22:18login authentication
22:20um user save data uploading the
22:22knowledge base and managing a a real
22:25time inbox which is absolutely insane.
22:27Um, and obviously from there guys,
22:30inside of the description is going to be
22:32the PRD for this. Um, [snorts] as well
22:34as links to start Flute and try Flute
22:36out for yourself. Um, again, my mission
22:39to effectively bring building into one
22:42app as opposed to having to set up
22:44Claude, then Superbase, then this, then
22:45that, um, is getting closer and closer
22:48because Flute has just effectively
22:50without any real input except a PRD,
22:52created an app from scratch that we
22:54could sell tomorrow. So absolutely
22:56insane. Guys, what I'll do, I'll stop
22:58the video there. Any problems at all,
23:00give me a shout. Any questions, let me
23:01know.

About this transcript

This page contains the full transcript of I Built an AI Chatbot SaaS with Claude Opus 5.5 + Floot by Olly Rosewell, generated from the public captions YouTube serves with the video. The transcript has 4,295 words across 593 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.