WEBVTT

1
00:00:00.080 --> 00:00:00.950
This is Campfire.

2
00:00:01.000 --> 00:00:03.780
It's a real-time chat application with multiple rooms.

3
00:00:03.940 --> 00:00:07.060
We built it in about 20 minutes using Elements and Claude Code

4
00:00:07.380 --> 00:00:09.600
Opus 5.5 on Medium.

5
00:00:10.080 --> 00:00:12.590
Here's the exact prompt I used to build the application.

6
00:00:12.920 --> 00:00:16.510
Let's paste that prompt in and watch some of the highlights in high speed.

7
00:00:16.990 --> 00:00:19.660
You're watching the build server state up in the upper right.

8
00:00:19.790 --> 00:00:21.890
It'll flip occasionally from OK to error,

9
00:00:22.150 --> 00:00:25.210
and that's the server telling Claude how to fix its own issues.

10
00:00:25.270 --> 00:00:26.610
And over on the lower right,

11
00:00:26.630 --> 00:00:29.080
you're seeing the application user interface come

12
00:00:29.080 --> 00:00:31.300
together as the Claude agent drives it,

13
00:00:31.470 --> 00:00:32.850
tests each of the pages,

14
00:00:32.950 --> 00:00:34.420
and make sure that it works.

15
00:00:34.590 --> 00:00:36.300
And here we are at the end clocking in at

16
00:00:36.300 --> 00:00:39.540
about 20 minutes with a full blown chat application.

17
00:00:40.110 --> 00:00:41.380
Let's take a couple of minutes and I'll walk

18
00:00:41.380 --> 00:00:43.450
you through this application and some of its features.

19
00:00:43.590 --> 00:00:46.260
I've got two windows open so we can see the real-time chat,

20
00:00:46.350 --> 00:00:46.860
and on the left,

21
00:00:46.990 --> 00:00:48.190
I'll log in as Maya.

22
00:00:48.350 --> 00:00:50.380
Claude gave us this nice feature that lets us click

23
00:00:50.380 --> 00:00:53.180
the seeded login so that we can quickly log in.

24
00:00:53.690 --> 00:00:55.830
And you can see there's a create an account link here.

25
00:00:55.970 --> 00:00:56.470
If we

26
00:00:56.650 --> 00:00:57.720
needed to create new accounts,

27
00:00:57.780 --> 00:00:58.240
we could do that.

28
00:00:58.330 --> 00:00:59.890
This is all wired up completely.

29
00:01:00.050 --> 00:01:02.800
The email and password authentication is baked in such

30
00:01:02.800 --> 00:01:04.840
that you're storing those records in your own database,

31
00:01:04.930 --> 00:01:07.470
not using an external service that you'd have to pay for.

32
00:01:07.730 --> 00:01:08.720
Let's go back to sign in,

33
00:01:08.850 --> 00:01:09.920
log in as Maya,

34
00:01:10.130 --> 00:01:11.040
and then over on the right,

35
00:01:11.090 --> 00:01:12.430
I'll log in as Jonas,

36
00:01:12.450 --> 00:01:13.680
who's just a regular member.

37
00:01:14.940 --> 00:01:16.330
As soon as I start typing,

38
00:01:17.050 --> 00:01:19.210
notice on the right it says Maya is typing,

39
00:01:19.300 --> 00:01:20.740
so that's the presence indicator.

40
00:01:20.900 --> 00:01:25.010
The real-time uh status information is coming down to this other browser,

41
00:01:25.060 --> 00:01:26.250
this other connected client.

42
00:01:26.910 --> 00:01:29.240
And as soon as I type that message and press enter,

43
00:01:29.390 --> 00:01:32.880
it appears just like you would expect in any real-time chat application.

44
00:01:33.390 --> 00:01:35.690
The other cool thing I can do here is I can

45
00:01:36.030 --> 00:01:37.660
mouse over and do emojis,

46
00:01:37.750 --> 00:01:38.130
so.

47
00:01:39.840 --> 00:01:40.720
We'll do a couple here.

48
00:01:40.850 --> 00:01:43.950
We're really happy to see that Maya is in the chat room here.

49
00:01:44.660 --> 00:01:45.160
And

50
00:01:45.300 --> 00:01:46.920
then I can also go over

51
00:01:47.150 --> 00:01:48.530
to uh different channels,

52
00:01:48.580 --> 00:01:49.740
the announcements channel,

53
00:01:50.140 --> 00:01:51.840
uh or the off-topic channel.

54
00:01:52.060 --> 00:01:53.080
And if I'm an

55
00:01:53.340 --> 00:01:54.050
administrator,

56
00:01:54.220 --> 00:01:55.820
notice that I get a manage link,

57
00:01:55.980 --> 00:01:56.730
and over on the right,

58
00:01:56.820 --> 00:01:58.410
since this person is not an administrator,

59
00:01:58.460 --> 00:01:59.500
I do not see those.

60
00:02:01.040 --> 00:02:01.590
OK.

61
00:02:02.720 --> 00:02:04.330
Let us try a

62
00:02:04.600 --> 00:02:05.020
fun thing,

63
00:02:05.080 --> 00:02:06.980
which is first to upload an image.

64
00:02:07.160 --> 00:02:10.110
And this is demonstrating the ability to upload a file.

65
00:02:10.280 --> 00:02:12.400
So I'll click the Lakeside Campfire

66
00:02:12.590 --> 00:02:14.300
file and upload that

67
00:02:14.800 --> 00:02:15.350
and say,

68
00:02:15.440 --> 00:02:16.600
here's a nice image.

69
00:02:19.860 --> 00:02:24.290
And the file is stored in the database as uh as bytes and we're presenting it here in

70
00:02:24.290 --> 00:02:28.420
real time onto the chat application and I'll go ahead and add a nice emoji to that.

71
00:02:28.540 --> 00:02:29.060
There we go,

72
00:02:29.180 --> 00:02:29.970
that looks good.

73
00:02:30.730 --> 00:02:32.560
I've opened up a terminal on the left and I'll use

74
00:02:32.560 --> 00:02:35.970
the elements db command to drop me into the Postgres instance.

75
00:02:36.170 --> 00:02:38.200
One of the nice things about working with Elements is you can

76
00:02:38.200 --> 00:02:41.640
drive the user interface directly from the user from the database.

77
00:02:41.930 --> 00:02:43.320
So if I paste in this SQL query,

78
00:02:43.410 --> 00:02:46.840
what it does is it inserts into messages something that says hi from the database,

79
00:02:47.050 --> 00:02:48.270
and we see that show up

80
00:02:48.450 --> 00:02:50.390
immediately in the user interface on the right.

81
00:02:50.810 --> 00:02:53.600
It's really nice for being able to drive interfaces like this,

82
00:02:53.690 --> 00:02:55.420
both for testing and also some,

83
00:02:55.590 --> 00:02:58.560
there's some real use cases where you'll want to do that even in production.

84
00:02:59.330 --> 00:03:01.250
To summarize some of the features we've seen here,

85
00:03:01.450 --> 00:03:02.390
first we've got

86
00:03:02.520 --> 00:03:04.640
users and user roles and authentication.

87
00:03:04.690 --> 00:03:07.280
You can log in using the email and password of the user,

88
00:03:07.530 --> 00:03:09.200
and we can see that some of the users are,

89
00:03:09.450 --> 00:03:11.040
are one of the user is an administrator,

90
00:03:11.090 --> 00:03:12.440
the others are regular members.

91
00:03:12.810 --> 00:03:13.560
Once you're logged in,

92
00:03:13.650 --> 00:03:15.760
we can see presence indication over on the right.

93
00:03:15.890 --> 00:03:16.840
So the Jonas

94
00:03:16.940 --> 00:03:20.370
user, myself, is logged in and the other users are currently logged out.

95
00:03:20.780 --> 00:03:23.820
Real-time messaging we've seen a few times as I type into the message

96
00:03:24.380 --> 00:03:25.200
box here,

97
00:03:25.620 --> 00:03:29.400
it goes over the wire and gets broadcast to all the connected clients instantly.

98
00:03:29.700 --> 00:03:30.810
We're able to connect

99
00:03:30.980 --> 00:03:32.220
or add a file

100
00:03:32.380 --> 00:03:34.390
and that file goes into our database.

101
00:03:34.880 --> 00:03:38.150
And file uploading is really useful for all sorts of use cases.

102
00:03:38.320 --> 00:03:40.550
In this case we've demonstrated that we can upload a file,

103
00:03:40.840 --> 00:03:41.630
store it in our database,

104
00:03:41.650 --> 00:03:43.390
and present it back to the user.

105
00:03:43.640 --> 00:03:45.310
So really cool chat application,

106
00:03:45.520 --> 00:03:46.830
and I hope you have a lot of fun.

107
00:03:47.090 --> 00:03:50.990
Go ahead and download it and you can use the scaffolding that already exists so that

108
00:03:50.990 --> 00:03:54.670
you can start off with this application and then you can customize it to your liking.

109
00:03:55.040 --> 00:03:55.830
Have fun building.