Tool Annotations

Tools62 available
list_pages
update_section
create_page
publish
About this piece

Tool Annotations

An agent's tools listed with what each one touches, the reads and writes annotating themselves in turn and the withheld one striking through last.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Tools62 available
list_pages
update_section
create_page
publish
Usage
import { Code17 } from "@/components/beste/component/code17";

<Code17
  countLabel="62 available"
  tools={[{"name":"list_pages","access":"read"},{"name":"update_section","access":"write"},{"name":"create_page","access":"write"},{"name":"publish","access":"withheld"}]}
/>

Usage

The import and the props worth knowing about, in one place.

import { Code17 } from "@/components/beste/piece/code17";

<Code17
  surface="card"
  bordered={true}
  inverted={false}
  title="Tools"
  countLabel="62 available"
  tools={[
    {
      "name": "list_pages",
      "access": "read"
    },
    {
      "name": "update_section",
      "access": "write"
    },
    {
      "name": "create_page",
      "access": "write"
    },
    {
      "name": "publish",
      "access": "withheld"
    }
  ]}
  readLabel="reads"
  writeLabel="writes draft"
  withheldLabel="not exposed"
  stepMs={460}
/>

More Code pieces

View all Code
const user = await fetchUser("42");

Tokenized Line

Single-line snippet with keywords, strings, and function names colored by semantic token kind.

const greeting = "Hello, Beste!";ts

Code Line

One-line code snippet with a monospace pill and a tiny language tag on the right.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
console.log(greet("Beste"));

Code Snippet Card

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.

members.ts
import { Sirius } from '@sirius/sdk'
 
const client = new Sirius(apiKey)
await client.members.create({ name })

SDK Snippet Card

A code card with a filename header and copy affordance over syntax-toned, line-numbered source.

pricing.ts0 added, 0 removed
import { coupon } from "./coupon"
 
export function total(cart: Cart) {
  const sum = cart.lines.reduce(add, 0)
  return sum
  const sum = cart.lines.reduce(add, 0)
  const discount = coupon(cart, sum)
  return sum - discount
}

Diff Reveal

Code diff whose removed and added lines slide into place one after another on mount, with the header tallying added and removed counts as they land.

Open command palette
⌘K

Keyboard Shortcut

Action label paired with a row of monospace key caps joined by plus separators.