Blocks — bext/ui

AI Chat

AI

Site Assistant Claude Sonnet 5

Add a pricing section to my landing page.

Read the landing page

Hero, features, footer — no pricing yet.

Planned a three-tier layout

Delegated the build to sub-agents

Delegated to 3 sub-agents

Done — I added a three-tier pricing section and wired the CTAs:

Starter, Pro, and Business tiers
Buttons link to /signup
Styling reuses your existing card tokens

tsx

<Pricing tiers={3} cta="/signup" />

src/app/page.tsx+42−5

src/components/Pricing.tsx+88

Sources1SaaS pricing patterns 2shadcn/ui — Card

tsx

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<div class="flex h-[560px] flex-col rounded-xl border bg-background">
  <div class="flex items-center gap-2 border-b px-4 py-3">
    {icon("sparkles", "h-4 w-4 text-primary")}
    <span class="font-semibold">Site Assistant</span>
    <Badge variant="secondary">Claude Sonnet 5</Badge>
  </div>

  <Conversation class="flex-1">
    <Message from="user">
      <MessageAvatar from="user" />
      <MessageContent from="user">Add a pricing section to my landing page.</MessageContent>
    </Message>

    <Message from="assistant" class="group">
      <MessageAvatar from="assistant" />
      <div class="flex min-w-0 flex-col items-start gap-1.5">
        <MessageContent>
          <ChainOfThought>
            <ChainOfThoughtStep status="complete" label="Read the landing page">
              Hero, features, footer — no pricing yet.
            </ChainOfThoughtStep>
            <ChainOfThoughtStep status="complete" label="Planned a three-tier layout" />
            <ChainOfThoughtStep status="complete" label="Delegated the build to sub-agents" />
          </ChainOfThought>

          <Agents label="Delegated to 3 sub-agents">
            <Agent name="researcher" role="gathers pricing patterns" state="complete">
              Referenced 5 SaaS layouts + Stripe Checkout.
            </Agent>
            <Agent name="builder" role="writes the component" state="complete">
              <FileDiff file="src/components/Pricing.tsx" added={88} kind="create" />
            </Agent>
            <Agent name="reviewer" role="checks a11y + responsive" state="running" />
          </Agents>

          <Response>{reply}</Response>

          <Tool name="update_site_content" state="complete">
            <FileDiff file="src/app/page.tsx" added={42} removed={5} kind="edit" />
            <FileDiff file="src/components/Pricing.tsx" added={88} kind="create" />
          </Tool>

          <Sources label="Sources">
            <Source index={1} href="#">SaaS pricing patterns</Source>
            <Source index={2} href="#">shadcn/ui — Card</Source>
          </Sources>
        </MessageContent>

        <Actions>
          <Action label="Copy" icon="copy" copy={reply} />
          <Action label="Regenerate" icon="refresh-cw" />
          <Action label="Good response" icon="thumbs-up" toggle />
          <Action label="Bad response" icon="thumbs-down" toggle />
        </Actions>
      </div>
    </Message>
  </Conversation>

  <div class="border-t p-3">
  <PromptInput action="/api/chat">
    <PromptInputTextarea placeholder="Describe a change to your site…" />
    <PromptInputToolbar>
      <PromptInputTools>
        <PromptInputButton label="Attach a file">{icon("paperclip")}</PromptInputButton>
        <PromptInputModelSelect models={MODELS} />
      </PromptInputTools>
      <PromptInputHint>⏎ to send</PromptInputHint>
      <PromptInputSubmit state="ready" />
    </PromptInputToolbar>
  </PromptInput>
  </div>
</div>

AI Assistant

AI

Landing page pricingClaude Sonnet 5

Add a pricing section to my landing page.

Read the landing page

Hero, features, footer — no pricing yet.

Planned a three-tier layout

Delegated the build to sub-agents

Delegated to 3 sub-agents

Done — I added a three-tier pricing section and wired the CTAs:

Starter, Pro, and Business tiers
Buttons link to /signup
Styling reuses your existing card tokens

tsx

<Pricing tiers={3} cta="/signup" />

src/app/page.tsx+42−5

src/components/Pricing.tsx+88

Sources1SaaS pricing patterns 2shadcn/ui — Card

tsx

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<div class="flex h-[600px] overflow-hidden rounded-xl border">
  <ConversationSidebar>
    <ConversationSidebarHeader>
      <ConversationNewButton />
      <ConversationSearch />
    </ConversationSidebarHeader>

    <ConversationList>
      <ConversationGroup label="Today">
        <ConversationItem active>Landing page pricing</ConversationItem>
        <ConversationItem>Blog post ideas</ConversationItem>
      </ConversationGroup>
      <ConversationGroup label="Yesterday">
        <ConversationItem>SEO title rewrite</ConversationItem>
        <ConversationItem>Contact form fields</ConversationItem>
      </ConversationGroup>
    </ConversationList>

    <ConversationSidebarFooter>
      <Avatar fallback="BX" class="h-7 w-7" />
      <span class="truncate">ben@webdesign29</span>
    </ConversationSidebarFooter>
  </ConversationSidebar>

  <div class="flex min-w-0 flex-1 flex-col bg-background">
    <div class="flex items-center gap-2 border-b px-4 py-3">
      <span class="font-semibold">Landing page pricing</span>
      <Badge variant="secondary" class="ml-auto">Claude Sonnet 5</Badge>
    </div>

    <Conversation class="flex-1">
    <Message from="user">
      <MessageAvatar from="user" />
      <MessageContent from="user">Add a pricing section to my landing page.</MessageContent>
    </Message>

    <Message from="assistant" class="group">
      <MessageAvatar from="assistant" />
      <div class="flex min-w-0 flex-col items-start gap-1.5">
        <MessageContent>
          <ChainOfThought>
            <ChainOfThoughtStep status="complete" label="Read the landing page">
              Hero, features, footer — no pricing yet.
            </ChainOfThoughtStep>
            <ChainOfThoughtStep status="complete" label="Planned a three-tier layout" />
            <ChainOfThoughtStep status="complete" label="Delegated the build to sub-agents" />
          </ChainOfThought>

          <Agents label="Delegated to 3 sub-agents">
            <Agent name="researcher" role="gathers pricing patterns" state="complete">
              Referenced 5 SaaS layouts + Stripe Checkout.
            </Agent>
            <Agent name="builder" role="writes the component" state="complete">
              <FileDiff file="src/components/Pricing.tsx" added={88} kind="create" />
            </Agent>
            <Agent name="reviewer" role="checks a11y + responsive" state="running" />
          </Agents>

          <Response>{reply}</Response>

          <Tool name="update_site_content" state="complete">
            <FileDiff file="src/app/page.tsx" added={42} removed={5} kind="edit" />
            <FileDiff file="src/components/Pricing.tsx" added={88} kind="create" />
          </Tool>

          <Sources label="Sources">
            <Source index={1} href="#">SaaS pricing patterns</Source>
            <Source index={2} href="#">shadcn/ui — Card</Source>
          </Sources>
        </MessageContent>

        <Actions>
          <Action label="Copy" icon="copy" copy={reply} />
          <Action label="Regenerate" icon="refresh-cw" />
          <Action label="Good response" icon="thumbs-up" toggle />
          <Action label="Bad response" icon="thumbs-down" toggle />
        </Actions>
      </div>
    </Message>
    </Conversation>

    <div class="border-t p-3">
  <PromptInput action="/api/chat">
    <PromptInputTextarea placeholder="Describe a change to your site…" />
    <PromptInputToolbar>
      <PromptInputTools>
        <PromptInputButton label="Attach a file">{icon("paperclip")}</PromptInputButton>
        <PromptInputModelSelect models={MODELS} />
      </PromptInputTools>
      <PromptInputHint>⏎ to send</PromptInputHint>
      <PromptInputSubmit state="ready" />
    </PromptInputToolbar>
  </PromptInput>
    </div>
  </div>
</div>

AI Agent

AI

Add a pricing section to my landing page.

Read the current landing page

Research pricing patterns

Build the Pricing component

Wire CTAs + verify responsive

Chose a three-tier layout

Starter / Pro / Business, reusing your card tokens.

Delegating to specialised sub-agents

Delegated to 3 sub-agents

AI Prompt

AI

What should we build?

Describe a change and I'll apply it to your site — or start from one of these.

Dashboard

Application

BX

Revenue

$45,231.89

+20.1%

Subscriptions

+2350

+180%

Sales

12,234

+19%

Active

573

+201

Overview

Login

Authentication

Login

Enter your email below to login to your account.

Email

PasswordForgot your password?

Don't have an account? Sign up

Sign up (split)

Authentication

Create an account

Enter your details to get started.

First name

Last name

Email

Password

Stats

Marketing

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

Sales

+12,234

+19% from last month

Active Now

+573

+201 since last hour

Building Blocks for the Web

AI Chat

AI Assistant

AI Agent

AI Prompt

Dashboard

Login

Sign up (split)

Stats