78 lines
2.1 KiB
Plaintext
78 lines
2.1 KiB
Plaintext
---
|
|
title: Block
|
|
---
|
|
|
|
After using the [CLI](./cli) to create your new block. The `index.ts` file contains the block definition. It should look like:
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/contribute/block-name-logo-match.png"
|
|
alt="Block name and logo match"
|
|
/>
|
|
</Frame>
|
|
|
|
## Props
|
|
|
|
<ResponseField name="id" type="string" required>
|
|
The block ID. It should be unique all the other blocks.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="name" type="string" required>
|
|
A concise name for the block. Should be short enough to fit into a small block
|
|
card.
|
|
</ResponseField>
|
|
|
|
<ResponseField
|
|
name="LightLogo"
|
|
type="(props: React.SVGProps<SVGSVGElement>) => React.JSX.Element"
|
|
required
|
|
/>
|
|
|
|
<ResponseField
|
|
name="DarkLogo"
|
|
type="(props: React.SVGProps<SVGSVGElement>) => React.JSX.Element"
|
|
>
|
|
Logo used on the dark mode.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="fullName" type="string">
|
|
The full name that will be displayed as a tooltip when the mouse hovers the
|
|
block card.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="tags" type="string[]">
|
|
List of strings describing the block. Used for block searching.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="auth" type="Auth">
|
|
See <a href="./auth">Auth</a> for more information.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="actions" type="Action[]">
|
|
A list of all the possible actions that this block provides. See{' '}
|
|
<a href="./action">Action</a> for more information
|
|
</ResponseField>
|
|
|
|
<ResponseField name="docsUrl" type="string">
|
|
The dedicated documentation URL. (i.e.
|
|
`https://docs.typebot.io/editor/blocks/integrations/openai`)
|
|
</ResponseField>
|
|
|
|
<ResponseField name="options" type="z.ZodObject<any>">
|
|
Provide it if all the block actions share the same properties. See{' '}
|
|
<a href="./options">Options</a> for more information. In the block settings it
|
|
will then be displayed between the auth and the actions:
|
|
|
|
{' '}
|
|
|
|
<Frame style={{ maxWidth: '600px' }}>
|
|
<img src="/images/contribute/base-options.png" alt="Block options" />
|
|
</Frame>
|
|
|
|
</ResponseField>
|
|
|
|
<ResponseField name="fetchers" type="Fetcher[]">
|
|
A list of fetchers used in the provided <code>options</code>. See{' '}
|
|
<a href="./fetcher">Fetcher</a> for more information.
|
|
</ResponseField>
|