# Zoo (KCL)
URL: /docs/kernels/zoo



import { Building, Rocket } from 'lucide-react';

## Setup

Set the `KITTYCAD_API_TOKEN` environment variable for Zoo API access.

## Usage

1. Load/create a file ending with `.kcl` **or** set the build asset language to `zoo`.
2. The CAD machine will automatically choose the Zoo kernel and spin up the `zoo.worker`.
3. All viewer features work including mesh display, STL export, and STEP export.

## Example

```ts
send({
  type: 'initializeModel',
  code: `
const width = 10
const height = 10
const depth = 10

const cube = startSketchOn('XY')
  |> startProfileAt([0, 0], %)
  |> line([width, 0], %)
  |> line([0, height], %)
  |> line([-width, 0], %)
  |> close(%)
  |> extrude(depth, %)
  `,
  parameters: {},
  kernelType: 'zoo',
});
```

## KCL Syntax

KCL uses a functional, pipe-based syntax:

```javascript
const part = startSketchOn('XY')
  |> startProfileAt([0, 0], %)
  |> line([10, 0], %)
  |> line([0, 10], %)
  |> line([-10, 0], %)
  |> close(%)
  |> extrude(5, %)
```

<br />

```tsx
// highlight a line
<div>Hello World</div> // [!code highlight]
// highlight a word
// [!code word:Fumadocs]
<div>Fumadocs</div>
// diff styles
console.log('hewwo'); // [!code --]
console.log('hello'); // [!code ++]
// focus
return new ResizeObserver(() => {})
```

<Callout title="Title">
  Hello World
</Callout>

```js title="My Title" icon={<Building />}
console.log('Hello World');
```

<CodeBlockTabs defaultValue="Tab 1">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="Tab 1">
      Tab 1
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Tab 2">
      Tab 2
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="Tab 1">
    ```ts
    console.log('A');
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Tab 2">
    ```ts
    console.log('B');
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```ts twoslash lineNumbers
const a = 'Hello World';
//    ^?
console.log(a);
```

<CodeBlockTabs defaultValue="<Building /> Tab 1">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="<Building /> Tab 1">
      <Building /> Tab 1
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="<Rocket /> Tab 2">
      <Rocket /> Tab 2
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="<Building /> Tab 1">
    ```ts
    console.log('A');
    ```
  </CodeBlockTab>

  <CodeBlockTab value="<Rocket /> Tab 2">
    ```ts
    console.log('B');
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```js lineNumbers=4
function main() {
  console.log('starts from 4');
  return 0;
}
```