forked from CopilotKit/CopilotKit
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstack-v2.html
More file actions
1118 lines (1013 loc) · 42.1 KB
/
Copy pathstack-v2.html
File metadata and controls
1118 lines (1013 loc) · 42.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CopilotKit Stack — Big Picture</title>
<style>
:root {
--bg: #fafafc;
--bg-soft: #ededf5;
--surface: rgba(255, 255, 255, 0.74);
--surface-strong: rgba(255, 255, 255, 0.92);
--surface-tint: rgba(190, 194, 255, 0.1);
--text: #010507;
--text-secondary: #57575b;
--text-muted: #838389;
--border: #dbdbe5;
--border-strong: rgba(1, 5, 7, 0.12);
--lilac: #bec2ff;
--mint: #85ecce;
--mint-deep: #189370;
--orange: #ffac4d;
--yellow: #fff388;
--blue: #3d92e8;
--shadow-soft: 0 16px 44px rgba(1, 5, 7, 0.07);
--shadow-card: 0 10px 24px rgba(1, 5, 7, 0.05);
--glass: blur(18px);
--radius-xl: 32px;
--radius-lg: 24px;
--radius-pill: 999px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
body {
font-family: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(
circle at 12% 10%,
rgba(190, 194, 255, 0.42),
transparent 24%
),
radial-gradient(
circle at 88% 12%,
rgba(133, 236, 206, 0.34),
transparent 23%
),
radial-gradient(
circle at 52% 92%,
rgba(255, 172, 77, 0.18),
transparent 22%
),
linear-gradient(180deg, #f7f7f9 0%, #fafafc 55%, #ffffff 100%);
overflow-x: hidden;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image: radial-gradient(
rgba(190, 194, 255, 0.34) 0.8px,
transparent 0.8px
);
background-size: 28px 28px;
opacity: 0.28;
pointer-events: none;
}
.page {
position: relative;
z-index: 1;
width: min(1260px, calc(100% - 32px));
margin: 24px auto;
padding: 28px 0 56px;
}
.hero {
position: relative;
z-index: 1;
text-align: center;
padding: 10px 12px 36px;
}
.hero-logo {
display: flex;
justify-content: center;
margin-bottom: 26px;
}
.hero-logo svg {
display: block;
width: min(360px, 66vw);
height: auto;
}
.eyebrow {
font-family: "Spline Sans Mono", "SFMono-Regular", monospace;
font-size: 12px;
line-height: 1;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 16px;
}
.hero h1 {
max-width: none;
margin: 0 auto 14px;
font-size: clamp(32px, 6vw, 58px);
line-height: 1.04;
letter-spacing: -0.06em;
font-weight: 700;
}
.hero p {
max-width: 860px;
margin: 0 auto;
font-size: clamp(15px, 2vw, 18px);
line-height: 1.6;
color: var(--text-secondary);
}
.hero-notes {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 22px;
}
.hero-note {
padding: 10px 14px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.72);
color: var(--text-secondary);
font-family: "Spline Sans Mono", "SFMono-Regular", monospace;
font-size: 12px;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.stack {
position: relative;
z-index: 1;
width: min(1120px, 100%);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
}
.layer {
padding: 18px 20px 20px;
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.84);
background: var(--surface);
box-shadow: var(--shadow-card);
backdrop-filter: var(--glass);
}
.layer-label {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
padding: 0 4px;
}
.tag {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: var(--radius-pill);
font-family: "Spline Sans Mono", "SFMono-Regular", monospace;
font-size: 11px;
line-height: 1;
letter-spacing: 1.3px;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.line {
flex: 1;
min-width: 60px;
height: 1px;
background: linear-gradient(
90deg,
rgba(1, 5, 7, 0.12),
rgba(1, 5, 7, 0.02)
);
}
.desc {
font-size: 12px;
line-height: 1.4;
color: var(--text-muted);
white-space: nowrap;
}
.layer-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding-bottom: 8px;
}
.chip {
display: inline-flex;
align-items: center;
padding: 10px 16px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
background: var(--surface-strong);
box-shadow: 0 4px 12px rgba(1, 5, 7, 0.04);
font-size: 13px;
line-height: 1.1;
font-weight: 600;
transition:
transform 0.18s ease,
background 0.18s ease,
border-color 0.18s ease;
}
.chip:hover {
transform: translateY(-2px);
}
.chip.sm {
padding: 8px 13px;
font-size: 12px;
}
.chip-frontend {
color: #1663b0;
background: rgba(61, 146, 232, 0.08);
border-color: rgba(61, 146, 232, 0.22);
}
.chip-genui {
color: #4b509d;
background: rgba(190, 194, 255, 0.2);
border-color: rgba(190, 194, 255, 0.52);
}
.chip-interaction {
color: var(--mint-deep);
background: rgba(133, 236, 206, 0.18);
border-color: rgba(133, 236, 206, 0.52);
}
.chip-state {
color: #b7670d;
background: rgba(255, 172, 77, 0.15);
border-color: rgba(255, 172, 77, 0.42);
}
.chip-framework {
color: #806113;
background: rgba(255, 243, 136, 0.36);
border-color: rgba(255, 172, 77, 0.26);
}
.chip-platform {
color: #46464f;
background: rgba(233, 233, 239, 0.88);
border-color: rgba(175, 175, 183, 0.48);
}
.chip-provider {
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.9);
border-color: rgba(219, 219, 229, 1);
}
.chip-protocol {
color: #4b509d;
background: rgba(190, 194, 255, 0.16);
border-color: rgba(190, 194, 255, 0.48);
}
.subgroups {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 12px;
}
.subgroup {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.74);
box-shadow: var(--shadow-card);
}
.subgroup-label {
font-family: "Spline Sans Mono", "SFMono-Regular", monospace;
font-size: 10px;
line-height: 1;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--text-muted);
}
.chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.spectrum {
display: flex;
align-items: center;
gap: 8px;
width: min(78%, 640px);
margin: 6px auto 12px;
color: var(--text-muted);
font-family: "Spline Sans Mono", "SFMono-Regular", monospace;
font-size: 8px;
letter-spacing: 1px;
text-transform: uppercase;
}
.spectrum-line {
flex: 1;
height: 1px;
background: linear-gradient(
90deg,
rgba(190, 194, 255, 0.7),
rgba(190, 194, 255, 0.08)
);
}
.divider {
width: 1px;
min-height: 24px;
background: rgba(1, 5, 7, 0.08);
margin: 0 4px;
}
.connector {
display: flex;
justify-content: center;
padding: 8px 0;
}
.connector-line {
position: relative;
width: 1px;
height: 24px;
}
.connector-line::after {
content: "";
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.c-blue {
background: rgba(61, 146, 232, 0.24);
}
.c-blue::after {
border-top: 5px solid rgba(61, 146, 232, 0.24);
}
.c-lilac {
background: rgba(190, 194, 255, 0.44);
}
.c-lilac::after {
border-top: 5px solid rgba(190, 194, 255, 0.44);
}
.c-mint {
background: rgba(133, 236, 206, 0.34);
}
.c-mint::after {
border-top: 5px solid rgba(133, 236, 206, 0.34);
}
.c-orange {
background: rgba(255, 172, 77, 0.28);
}
.c-orange::after {
border-top: 5px solid rgba(255, 172, 77, 0.28);
}
.c-gray {
background: rgba(131, 131, 137, 0.22);
}
.c-gray::after {
border-top: 5px solid rgba(131, 131, 137, 0.22);
}
.central {
display: flex;
justify-content: center;
padding: 8px 0;
}
.central-node {
width: min(520px, 100%);
padding: 20px 28px;
text-align: center;
border-radius: 28px;
border: 1px solid rgba(190, 194, 255, 0.58);
box-shadow: 0 18px 34px rgba(1, 5, 7, 0.06);
}
.central-node h3 {
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 800;
}
.central-node p {
margin-top: 4px;
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary);
}
.central-cpk {
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.92),
rgba(255, 255, 255, 0.84)
),
linear-gradient(
90deg,
rgba(190, 194, 255, 0.22),
rgba(133, 236, 206, 0.18),
rgba(255, 172, 77, 0.1)
);
}
.central-agui {
background: rgba(255, 255, 255, 0.82);
}
.framework-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
}
.protocol-wing {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 180px;
padding: 16px 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--shadow-card);
width: fit-content;
max-width: min(100%, 420px);
}
.wing-label {
font-family: "Spline Sans Mono", "SFMono-Regular", monospace;
font-size: 10px;
line-height: 1;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--text-muted);
}
.wing-desc {
font-size: 11px;
line-height: 1.5;
color: var(--text-muted);
text-align: center;
}
.h-connector {
display: flex;
align-items: center;
padding: 0 4px;
}
.h-line {
width: 24px;
height: 1px;
}
.h-line-lilac {
background: rgba(190, 194, 255, 0.4);
}
.h-line-orange {
background: rgba(255, 172, 77, 0.28);
}
.arrow {
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.arrow-left-lilac {
border-right: 5px solid rgba(190, 194, 255, 0.4);
}
.arrow-right-lilac {
border-left: 5px solid rgba(190, 194, 255, 0.4);
}
.arrow-left-orange {
border-right: 5px solid rgba(255, 172, 77, 0.28);
}
.arrow-right-orange {
border-left: 5px solid rgba(255, 172, 77, 0.28);
}
.frameworks-center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
width: 100%;
overflow: visible;
padding: 12px 16px;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.84);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--shadow-card);
}
.frameworks-center .chip {
white-space: nowrap;
}
@media (max-width: 900px) {
.page {
width: min(100% - 20px, 1260px);
margin: 10px auto;
padding: 18px 0 34px;
}
.hero {
padding-bottom: 28px;
}
.layer {
padding: 16px 14px;
border-radius: 24px;
}
}
@media (max-width: 640px) {
.page {
width: calc(100% - 12px);
padding: 12px 8px 24px;
}
.hero-logo {
margin-bottom: 20px;
}
.desc {
white-space: normal;
}
.layer-content,
.subgroups {
justify-content: flex-start;
}
.spectrum {
width: 100%;
}
.divider,
.h-connector {
display: none;
}
.frameworks-center {
width: 100%;
justify-content: flex-start;
}
}
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div class="hero-logo" aria-label="CopilotKit logo">
<svg
viewBox="0 0 1044.21 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="CopilotKit"
>
<g transform="translate(7.74 31.74)">
<g id="CopilotKit">
<path
d="M111.689 53.5173H78.8802C78.647 50.8028 78.0267 48.3403 77.0185 46.1299C76.0487 43.9195 74.6918 42.0192 72.9466 40.4291C71.2403 38.8006 69.1654 37.5591 66.7223 36.7063C64.2791 35.8143 61.5062 35.3683 58.4038 35.3683C52.9745 35.3683 48.379 36.6867 44.6173 39.3235C40.8943 41.9611 38.0633 45.742 36.1243 50.6669C34.224 55.5919 33.2739 61.5063 33.2739 68.4092C33.2739 75.7001 34.2434 81.8084 36.1825 86.7334C38.1602 91.6199 41.0106 95.3042 44.7336 97.7855C48.4566 100.229 52.9358 101.45 58.1711 101.45C61.1573 101.45 63.8331 101.082 66.1988 100.345C68.5644 99.5695 70.6198 98.4647 72.3649 97.0293C74.11 95.5947 75.5258 93.8687 76.6117 91.8523C77.7362 89.7965 78.4923 87.4895 78.8802 84.9297L111.689 85.1629C111.301 90.2041 109.885 95.3426 107.442 100.578C104.999 105.774 101.528 110.583 97.0293 115.004C92.57 119.386 87.0435 122.916 80.4507 125.591C73.8579 128.267 66.1988 129.605 57.4731 129.605C46.5369 129.605 36.7254 127.259 28.0384 122.567C19.3904 117.874 12.5456 110.971 7.50404 101.858C2.50134 92.7443 0 81.5948 0 68.4092C0 55.1467 2.55952 43.9776 7.6786 34.9026C12.7977 25.7893 19.7006 18.9057 28.3875 14.252C37.0744 9.55957 46.7696 7.2133 57.4731 7.2133C64.9965 7.2133 71.9189 8.24101 78.2403 10.2964C84.5614 12.3518 90.1067 15.3572 94.877 19.3129C99.6472 23.2297 103.486 28.0578 106.395 33.7978C109.303 39.5371 111.068 46.1102 111.689 53.5173Z"
fill="#010507"
/>
<path
d="M169.874 129.606C160.179 129.606 151.88 127.686 144.977 123.847C138.074 119.968 132.781 114.578 129.096 107.675C125.412 100.733 123.57 92.6864 123.57 83.5337C123.57 74.3818 125.412 66.3544 129.096 59.4515C132.781 52.5092 138.074 47.1186 144.977 43.2796C151.88 39.4014 160.179 37.4626 169.874 37.4626C179.569 37.4626 187.868 39.4014 194.771 43.2796C201.674 47.1186 206.968 52.5092 210.652 59.4515C214.336 66.3544 216.178 74.3818 216.178 83.5337C216.178 92.6864 214.336 100.733 210.652 107.675C206.968 114.578 201.674 119.968 194.771 123.847C187.868 127.686 179.569 129.606 169.874 129.606ZM170.107 105.872C172.822 105.872 175.168 104.96 177.145 103.138C179.123 101.315 180.655 98.7169 181.741 95.3428C182.827 91.9686 183.37 87.9553 183.37 83.3013C183.37 78.6087 182.827 74.5946 181.741 71.2597C180.655 67.8856 179.123 65.2873 177.145 63.4648C175.168 61.6422 172.822 60.7306 170.107 60.7306C167.237 60.7306 164.775 61.6422 162.719 63.4648C160.664 65.2873 159.093 67.8856 158.007 71.2597C156.922 74.5946 156.378 78.6087 156.378 83.3013C156.378 87.9553 156.922 91.9686 158.007 95.3428C159.093 98.7169 160.664 101.315 162.719 103.138C164.775 104.96 167.237 105.872 170.107 105.872Z"
fill="#010507"
/>
<path
d="M229.208 161.484V38.6256H261.086V54.2155H261.784C262.948 51.1908 264.655 48.4182 266.903 45.8976C269.153 43.3377 271.945 41.3016 275.28 39.7893C278.615 38.2376 282.493 37.4626 286.914 37.4626C292.809 37.4626 298.413 39.0331 303.726 42.174C309.077 45.3157 313.421 50.2603 316.756 57.0078C320.13 63.7561 321.817 72.52 321.817 83.3013C321.817 93.6168 320.208 102.168 316.989 108.955C313.809 115.741 309.543 120.802 304.191 124.137C298.878 127.473 293.041 129.14 286.682 129.14C282.493 129.14 278.751 128.461 275.455 127.104C272.197 125.708 269.405 123.827 267.078 121.462C264.79 119.057 263.025 116.342 261.784 113.317H261.319V161.484H229.208ZM260.621 83.3013C260.621 87.6444 261.183 91.4064 262.308 94.5866C263.471 97.7275 265.101 100.171 267.195 101.916C269.327 103.622 271.868 104.476 274.815 104.476C277.762 104.476 280.263 103.642 282.319 101.974C284.413 100.268 286.003 97.8437 287.089 94.7028C288.214 91.5226 288.776 87.7221 288.776 83.3013C288.776 78.8804 288.214 75.0995 287.089 71.9578C286.003 68.7776 284.413 66.3544 282.319 64.6866C280.263 62.9803 277.762 62.1267 274.815 62.1267C271.868 62.1267 269.327 62.9803 267.195 64.6866C265.101 66.3544 263.471 68.7776 262.308 71.9578C261.183 75.0995 260.621 78.8804 260.621 83.3013Z"
fill="#010507"
/>
<path
d="M335.269 127.977V38.6253H367.38V127.977H335.269ZM351.324 29.318C346.981 29.318 343.258 27.8834 340.156 25.0136C337.054 22.1438 335.502 18.6923 335.502 14.6592C335.502 10.6259 337.054 7.17442 340.156 4.30463C343.258 1.43485 346.981 0 351.324 0C355.707 0 359.429 1.43485 362.493 4.30463C365.596 7.17442 367.147 10.6259 367.147 14.6592C367.147 18.6923 365.596 22.1438 362.493 25.0136C359.429 27.8834 355.707 29.318 351.324 29.318Z"
fill="#010507"
/>
<path
d="M415.851 8.84214V127.977H383.74V8.84214H415.851Z"
fill="#010507"
/>
<path
d="M475.258 129.606C465.563 129.606 457.264 127.686 450.361 123.847C443.458 119.968 438.164 114.578 434.48 107.675C430.796 100.733 428.954 92.6864 428.954 83.5337C428.954 74.3818 430.796 66.3544 434.48 59.4515C438.164 52.5092 443.458 47.1186 450.361 43.2796C457.264 39.4014 465.563 37.4626 475.258 37.4626C484.954 37.4626 493.253 39.4014 500.156 43.2796C507.059 47.1186 512.352 52.5092 516.036 59.4515C519.72 66.3544 521.563 74.3818 521.563 83.5337C521.563 92.6864 519.72 100.733 516.036 107.675C512.352 114.578 507.059 119.968 500.156 123.847C493.253 127.686 484.954 129.606 475.258 129.606ZM475.491 105.872C478.205 105.872 480.552 104.96 482.53 103.138C484.508 101.315 486.039 98.7169 487.125 95.3428C488.211 91.9686 488.754 87.9553 488.754 83.3013C488.754 78.6087 488.211 74.5946 487.125 71.2597C486.039 67.8856 484.508 65.2873 482.53 63.4648C480.552 61.6422 478.205 60.7306 475.491 60.7306C472.621 60.7306 470.158 61.6422 468.103 63.4648C466.048 65.2873 464.477 67.8856 463.391 71.2597C462.305 74.5946 461.763 78.6087 461.763 83.3013C461.763 87.9553 462.305 91.9686 463.391 95.3428C464.477 98.7169 466.048 101.315 468.103 103.138C470.158 104.96 472.621 105.872 475.491 105.872Z"
fill="#010507"
/>
<path
d="M587.877 38.6253V61.8941H529.008V38.6253H587.877ZM540.41 17.2186H572.52V99.2396C572.52 100.481 572.734 101.528 573.16 102.381C573.587 103.196 574.246 103.816 575.138 104.242C576.03 104.63 577.174 104.824 578.57 104.824C579.539 104.824 580.664 104.708 581.944 104.476C583.262 104.242 584.232 104.048 584.852 103.894L589.506 126.464C588.072 126.891 586.016 127.415 583.34 128.035C580.703 128.655 577.561 129.063 573.916 129.256C566.548 129.644 560.363 128.888 555.36 126.987C550.357 125.049 546.595 122.004 544.075 117.854C541.554 113.705 540.332 108.508 540.41 102.265V17.2186Z"
fill="#010507"
/>
<path
d="M602.435 127.977V8.84214H634.778V57.0077H636.406L672.24 8.84214H709.935L669.681 61.8942L710.866 127.977H672.24L645.481 83.3012L634.778 97.2626V127.977H602.435Z"
fill="#010507"
/>
<path
d="M725.597 127.977V38.6253H757.708V127.977H725.597ZM741.653 29.318C737.309 29.318 733.586 27.8834 730.484 25.0136C727.381 22.1438 725.831 18.6923 725.831 14.6592C725.831 10.6259 727.381 7.17442 730.484 4.30463C733.586 1.43485 737.309 0 741.653 0C746.035 0 749.758 1.43485 752.821 4.30463C755.924 7.17442 757.475 10.6259 757.475 14.6592C757.475 18.6923 755.924 22.1438 752.821 25.0136C749.758 27.8834 746.035 29.318 741.653 29.318Z"
fill="#010507"
/>
<path
d="M827.354 38.6253V61.8941H768.484V38.6253H827.354ZM779.886 17.2186H811.994V99.2396C811.994 100.481 812.206 101.528 812.632 102.381C813.066 103.196 813.72 103.816 814.612 104.242C815.504 104.63 816.65 104.824 818.05 104.824C819.015 104.824 820.136 104.708 821.421 104.476C822.739 104.242 823.704 104.048 824.326 103.894L828.983 126.464C827.551 126.891 825.489 127.415 822.812 128.035C820.177 128.655 817.035 129.063 813.393 129.256C806.024 129.644 799.838 128.888 794.836 126.987C789.833 125.049 786.071 122.004 783.55 117.854C781.03 113.705 779.808 108.508 779.886 102.265V17.2186Z"
fill="#010507"
/>
</g>
</g>
<svg
x="859.58"
y="7.1"
width="176.717"
height="186.745"
viewBox="0 0 176.717 186.745"
fill="none"
>
<path
d="M60.2013 59.6493C76.4214 38.4331 89.8836 17.4532 95.0639 0.510877C95.203 0.0498883 95.7431 -0.145948 96.1441 0.120187C114.156 12.0483 146.965 19.8996 175.984 20.0839C176.484 20.0871 176.827 20.5795 176.647 21.045C166.999 45.5233 155.214 89.384 154.756 139.471C154.756 140.215 153.708 140.482 153.34 139.835C136.825 110.934 83.9258 70.3234 60.4713 60.7386C60.0376 60.5602 59.9148 60.0242 60.2013 59.6493Z"
fill="url(#paint0_linear)"
/>
<path
d="M114.926 46.6717C89.5724 54.6988 66.4044 59.1614 60.8722 60.1754C60.5203 60.24 60.4466 60.7269 60.7822 60.8644C84.4167 70.6906 137.054 111.183 153.414 139.967C153.446 140.03 153.528 140.052 153.594 140.024C153.659 139.993 153.692 139.911 153.667 139.841L114.926 46.6717Z"
fill="url(#paint1_linear)"
/>
<path
d="M96.218 0.0677872C117.921 11.9064 143.004 17.2235 176.279 20.0252C176.484 20.043 176.558 20.3231 176.369 20.4204C172.114 22.6076 147.734 35.0132 129.632 41.6575C124.779 43.4376 119.902 45.089 115.098 46.6126C114.991 46.6459 114.877 46.5934 114.836 46.4919L95.7188 0.516173C95.5878 0.206583 95.9234 -0.0927773 96.218 0.0677872Z"
fill="url(#paint2_linear)"
/>
<path
d="M95.5597 0.114978C95.875 -0.0172013 96.2317 0.0959082 96.417 0.367856L96.4849 0.493267L154.721 139.416L154.762 139.554C154.825 139.876 154.657 140.209 154.343 140.341C154.027 140.473 153.671 140.36 153.485 140.088L153.415 139.963L95.1814 1.04014L95.1383 0.902396C95.075 0.580014 95.2449 0.247049 95.5597 0.114978Z"
fill="#513C9F"
/>
<path
d="M175.661 20.1472C176 19.9546 176.432 20.0729 176.625 20.4124C176.818 20.7522 176.697 21.1839 176.357 21.3767V21.3787H176.353C176.351 21.3803 176.346 21.3839 176.341 21.3869C176.33 21.3933 176.312 21.4033 176.29 21.4157C176.246 21.4405 176.18 21.4768 176.094 21.5247C175.921 21.6215 175.662 21.7648 175.323 21.9503C174.646 22.3215 173.645 22.8639 172.351 23.5456C169.761 24.9093 165.995 26.8363 161.283 29.0884C151.862 33.592 138.655 39.4006 123.512 44.625C108.365 49.8495 92.7416 53.9066 80.9093 56.6563C74.9919 58.0314 70.0192 59.0801 66.5261 59.7854C64.7796 60.138 63.4024 60.4044 62.4615 60.5831C61.9916 60.6723 61.6304 60.7395 61.3863 60.7845C61.2644 60.807 61.1711 60.8246 61.1087 60.8359C61.0782 60.8415 61.0547 60.8454 61.0388 60.8483C61.0311 60.8497 61.0244 60.8517 61.0203 60.8524H61.0142L60.8702 60.8647C60.5418 60.8565 60.2523 60.6188 60.1918 60.2829C60.1228 59.8986 60.3791 59.5297 60.7633 59.4605H60.7695C60.7732 59.4599 60.7786 59.4578 60.786 59.4564C60.8013 59.4537 60.8252 59.4497 60.8559 59.4441C60.9171 59.4329 61.0088 59.417 61.1293 59.3947C61.3711 59.3501 61.7305 59.2821 62.1984 59.1933C63.1343 59.0155 64.506 58.7511 66.2465 58.3997C69.7284 57.6967 74.6866 56.6503 80.5886 55.2788C92.3949 52.5352 107.968 48.4914 123.052 43.2887C138.13 38.0862 151.286 32.2987 160.673 27.8117C165.366 25.5684 169.116 23.6497 171.691 22.2936C172.978 21.6156 173.972 21.0783 174.643 20.7105C174.978 20.527 175.233 20.3863 175.404 20.2911C175.489 20.2435 175.554 20.2062 175.597 20.1822C175.618 20.1704 175.634 20.1614 175.644 20.1554C175.649 20.1525 175.654 20.1507 175.656 20.1493L175.658 20.1472H175.661Z"
fill="#513C9F"
/>
<path
d="M2.18131 186.308C1.73888 186.829 0.956885 186.893 0.435837 186.45C-0.0843773 186.008 -0.147949 185.227 0.293978 184.707L2.18131 186.308ZM104.178 17.1327C104.832 17.3295 105.202 18.0203 105.006 18.6746L83.9124 88.8658H133.52L133.768 88.8905C134.333 89.0058 134.757 89.5053 134.757 90.1035C134.757 90.7016 134.333 91.2011 133.768 91.3164L133.52 91.3411H82.8207L2.18131 186.308L1.23765 185.506L0.293978 184.707L81.1369 89.499L102.636 17.9632C102.832 17.3086 103.523 16.9359 104.178 17.1327Z"
fill="#ABABAB"
/>
<path
d="M57.4516 165.866L47.9012 167.209C52.8524 180.303 63.0083 186.023 75.1284 186.023C104.835 186.023 95.7677 152.43 112.978 152.43C125.466 152.43 120.393 179.658 147.26 179.658C163.66 179.658 165.297 163.136 162.498 156.029C162.481 155.985 162.465 155.946 162.44 155.907L158.046 149.177C157.759 148.73 157.064 148.898 157.015 149.43L156.196 157.587C156.139 158.154 156.155 158.72 156.221 159.286C156.892 164.921 157.326 178.597 147.26 178.597C136.645 178.597 134.092 151.722 112.978 151.722C88.2142 151.722 91.3977 184.962 76.1923 184.962C66.1591 184.962 58.5073 173.647 57.4516 165.866Z"
fill="url(#paint3_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="135.295"
y1="10.8932"
x2="107.004"
y2="88.6892"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#6430AB" />
<stop offset="1" stop-color="#AA89D8" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="113.371"
y1="54.7414"
x2="76.9532"
y2="125.111"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#005DBB" />
<stop offset="1" stop-color="#3D92E8" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="129.632"
y1="10.8927"
x2="118.666"
y2="45.1937"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1B70C4" />
<stop offset="1" stop-color="#54A4F2" />
</linearGradient>
<linearGradient
id="paint3_linear"
x1="47.9012"
y1="168.165"
x2="163.603"
y2="168.165"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#4497EA" />
<stop offset="0.254755" stop-color="#1463B2" />
<stop offset="0.498725" stop-color="#0A437D" />
<stop offset="0.666667" stop-color="#2476C8" />
<stop offset="0.972542" stop-color="#0C549A" />
</linearGradient>
</defs>
</svg>
</svg>
</div>
<div class="eyebrow">System map</div>
<h1>The <strong>CopilotKit</strong> stack, end to end</h1>
<p>
From frontend surfaces through agent infrastructure to model
providers, this keeps the whole system readable in a calmer CopilotKit
treatment rather than a dark neon diagram.
</p>
<div class="hero-notes">
<div class="hero-note">product framing</div>
<div class="hero-note">ui + runtime</div>
<div class="hero-note">single-file asset</div>
</div>
</section>
<section class="stack">
<div class="layer">
<div class="layer-label">
<span
class="tag"
style="
background: rgba(61, 146, 232, 0.08);
color: #1663b0;
border: 1px solid rgba(61, 146, 232, 0.2);
"
>Frontend Platform</span
>
<div class="line"></div>
<span class="desc">Where your UI runs</span>
</div>
<div class="subgroups">
<div class="subgroup">
<div class="subgroup-label">Web</div>
<div class="chips">
<div class="chip chip-frontend sm">React</div>
<div class="chip chip-frontend sm">Angular</div>
<div class="chip chip-frontend sm">Svelte</div>
<div class="chip chip-frontend sm">Vue</div>
<div class="chip chip-frontend sm">TanStack</div>
</div>
</div>
<div class="subgroup">
<div class="subgroup-label">Native</div>
<div class="chips">
<div class="chip chip-frontend sm">React Native</div>
<div class="chip chip-frontend sm">SwiftUI</div>
<div class="chip chip-frontend sm">Android</div>
</div>
</div>
<div class="subgroup">
<div class="subgroup-label">Messaging</div>
<div class="chips">
<div class="chip chip-frontend sm">Slack</div>
<div class="chip chip-frontend sm">Teams</div>
<div class="chip chip-frontend sm">WhatsApp</div>
</div>
</div>
</div>
</div>
<div class="connector"><div class="connector-line c-blue"></div></div>
<div class="layer">
<div class="layer-label">
<span
class="tag"
style="
background: rgba(190, 194, 255, 0.16);
color: #4b509d;
border: 1px solid rgba(190, 194, 255, 0.46);
"
>Chat UI</span
>
<div class="line"></div>
<span class="desc">Pre-built to headless</span>
</div>
<div class="spectrum">
<span>Opinionated</span>
<div class="spectrum-line"></div>
<span>Full control</span>
</div>
<div class="layer-content">
<div class="chip chip-genui">CopilotChat</div>
<div class="chip chip-genui">CopilotSidebar</div>
<div class="chip chip-genui">CopilotPopup</div>
<div class="divider"></div>
<div class="chip chip-genui" style="border-style: dashed">
CSS Variables
</div>
<div class="chip chip-genui" style="border-style: dashed">
Slots
</div>
<div class="chip chip-genui" style="border-style: dashed">
Custom Sub-Components
</div>
<div class="divider"></div>
<div
class="chip chip-genui"
style="background: rgba(190, 194, 255, 0.28)"
>
Headless (useAgent)
</div>
</div>
</div>
<div class="connector"><div class="connector-line c-lilac"></div></div>
<div class="layer">
<div class="layer-label">
<span
class="tag"
style="
background: rgba(190, 194, 255, 0.16);
color: #4b509d;
border: 1px solid rgba(190, 194, 255, 0.46);
"
>Generative UI</span
>
<div class="line"></div>
<span class="desc">Controlled to open</span>
</div>
<div class="spectrum">
<span>More control</span>
<div class="spectrum-line"></div>
<span>More freedom</span>
</div>
<div class="subgroups">
<div class="subgroup">
<div class="subgroup-label">Controlled</div>
<div class="chips">
<div class="chip chip-genui sm">Tool-Based</div>
<div class="chip chip-genui sm">Agentic</div>
<div class="chip chip-genui sm">Interrupt-Based</div>
</div>
</div>
<div class="subgroup" style="border-style: dashed">
<div class="subgroup-label">Declarative (BYOC)</div>
<div class="chips">
<div class="chip chip-genui sm">A2UI</div>
<div class="chip chip-genui sm">Hashbrown</div>
<div class="chip chip-genui sm">JSON Render</div>
<div class="chip chip-genui sm">OpenGenUI</div>
<div class="chip chip-genui sm">Tambo</div>
</div>
</div>
<div
class="subgroup"
style="
background: rgba(190, 194, 255, 0.14);
border-color: rgba(190, 194, 255, 0.42);
"
>
<div class="subgroup-label">Open</div>
<div class="chips">
<div class="chip chip-genui sm">Fully Agent-Generated</div>
<div class="chip chip-genui sm">MCP Apps</div>
</div>
</div>
</div>
</div>
<div class="connector"><div class="connector-line c-mint"></div></div>
<div class="layer">
<div class="layer-label">
<span
class="tag"
style="
background: rgba(133, 236, 206, 0.18);
color: #189370;
border: 1px solid rgba(133, 236, 206, 0.42);
"
>Interaction Patterns</span
>
<div class="line"></div>
<span class="desc">How users and agents collaborate</span>
</div>
<div class="layer-content">
<div class="chip chip-interaction">Human in the Loop</div>
<div class="chip chip-interaction">Frontend Tools</div>
<div class="chip chip-interaction">Tool Rendering</div>
<div class="chip chip-interaction">Readables</div>
<div class="chip chip-interaction">Agent Context</div>
<div class="chip chip-interaction">Suggestions</div>
<div class="chip chip-interaction">Voice</div>
<div class="chip chip-interaction">Multi-modal</div>
</div>
</div>
<div class="connector"><div class="connector-line c-orange"></div></div>
<div class="layer">
<div class="layer-label">
<span
class="tag"
style="
background: rgba(255, 172, 77, 0.15);
color: #b7670d;
border: 1px solid rgba(255, 172, 77, 0.32);
"
>State Sync</span
>
<div class="line"></div>
<span class="desc">Shared state between UI and agent</span>
</div>
<div class="layer-content">
<div class="chip chip-state">State Reading</div>
<div class="chip chip-state">State Writing</div>
<div class="chip chip-state">State Streaming</div>
<div class="chip chip-state">I/O Schemas</div>
<div class="chip chip-state">State Rendering</div>
</div>
</div>
<div class="connector"><div class="connector-line c-mint"></div></div>
<div class="central">
<div class="central-node central-cpk">
<h3>CopilotKit</h3>
<p>Runtime, SDK, and UI bindings</p>
</div>
</div>
<div class="connector"><div class="connector-line c-lilac"></div></div>
<div class="central">
<div class="central-node central-agui">
<h3>AG-UI Protocol</h3>
<p>Agent to UI interop standard</p>
</div>
</div>