### Install syntux and AI SDK dependencies

Source: https://docs.getsyntux.com/llms-full.txt

Commands to initialize the syntux library in your project root and install the necessary Vercel AI SDK packages for LLM integration.

```bash
npx getsyntux@latest
npm i ai
npm i @ai-sdk/anthropic
```

--------------------------------

### Example Input for Skeletonization

Source: https://docs.getsyntux.com/advanced

This snippet provides an example of the input structure when using the 'skeletonize' prop. It shows a basic JSON object with a 'user' property, demonstrating how the skeletonization process might represent the data structure.

```json
{
  "user": { 
  }
}
```

--------------------------------

### useSyntux() Hook Example

Source: https://docs.getsyntux.com/api

This JavaScript code example illustrates the usage of the useSyntux() hook. It shows how to destructure the 'value' and 'setValue' properties returned by the hook, demonstrating how to access and update the hook's state.

```javascript
const { value, setValue } = useSyntux()
```

--------------------------------

### React Interface Schema (RIS) Example

Source: https://docs.getsyntux.com/advanced

Demonstrates the JSON-DSL format used by syntux to define UI structures without hardcoding values, supporting data binding and iteration.

```json
{"id":"loop_1", "parentId":"root", "type":"__ForEach__", "props":{"source":"authors"}}
{"id":"card_1", "parentId":"loop_1", "type":"div", "props":{"className":"card"}, "content": {"$bind": "$item.name"}}
```

--------------------------------

### React Interface Schema (RIS) Example

Source: https://docs.getsyntux.com/advanced

A JSON-DSL representation of a UI component structure. This schema demonstrates how Syntux binds to data properties rather than hardcoding values, enabling efficient rendering and reuse.

```json
{
  "id": "loop_1"
}
```

--------------------------------

### Define React Interface Schema (RIS)

Source: https://docs.getsyntux.com/llms-full.txt

An example of the JSON-DSL representation used by syntux to define UI structures without hardcoding values, utilizing built-in iterators.

```json
{
  "id": "loop_1",
  "parentId": "root",
  "type": "__ForEach__",
  "props": { "source": "authors" }
}
{
  "id": "card_1",
  "parentId": "loop_1",
  "type": "div",
  "props": { "className": "card" },
  "content": { "$bind": "$item.name" }
}
```

--------------------------------

### Skeletonize Object Properties for LLMs

Source: https://docs.getsyntux.com/advanced

The 'skeletonize' prop is used to simplify objects for LLM processing by retaining only type information. This reduces the amount of data sent to the LLM, allowing it to focus on property structure rather than specific values. The example shows an empty object as a skeleton.

```javascript
{
}
```

--------------------------------

### Initialize GeneratedUI component with syntux

Source: https://docs.getsyntux.com/llms-full.txt

Demonstrates how to implement the GeneratedUI component by passing a data object and an AI model reference. This component uses the provided hint to render a UI tailored to the structure of the input data.

```jsx
const valueToDisplay = {
    "username": "John",
    "email": "john@gmail.com",
    "age": 22
}

<GeneratedUI
    model={anthropic('claude-sonnet-4-5')}
    value={valueToDisplay}
    hint="UI should look like..."   
/>
```

--------------------------------

### Define server actions with defineTool

Source: https://docs.getsyntux.com/llms-full.txt

Attach server-side actions to UI events using defineTool, providing context and parameter definitions for the LLM.

```jsx
import { defineTool } from "getsyntux";

<GeneratedUI
  actions={{
    "delete": defineTool(
      async (id: string) => { "use server"; /* logic */ }, 
      "id: string", 
      "deletes post with id"
    )
  }}
/>
```

--------------------------------

### Manage State and Logging with Syntux

Source: https://docs.getsyntux.com/api

Demonstrates basic state management and logging patterns using the Syntux library. It includes logging a value and updating state using a spread operator.

```javascript
useSyntux();

console.log(value); // current value
setValue({ ... }); // change value
```

--------------------------------

### Implement skeletonize property for token optimization

Source: https://docs.getsyntux.com/llms-full.txt

Demonstrates how to use the skeletonize prop in the GeneratedUI component to strip property values from large arrays, reducing input token usage.

```jsx
const myArrayToDisplay = [ ... 1000 items ... ];
<GeneratedUI value={myArrayToDisplay} skeletonize={true} model={ ... } />
```

--------------------------------

### Next.js App Initialization Script

Source: https://docs.getsyntux.com/advanced

This JavaScript snippet initializes the Next.js application by pushing configuration data to a global array `__next_f`. It specifies various chunks, providers, and rendering boundaries necessary for the application's client-side execution. This is a common pattern in Next.js for bootstrapping the application.

```javascript
self.__next_f = self.__next_f || [];
self.__next_f.push([0]);
self.__next_f.push([1, "1:\"$Sreact.fragment\"\n2:I[17751,[\"//_next/static/chunks/f27389c0e0b952b3.js\"],\"RootProvider\"]\n3:I[339756,[\"//_next/static/chunks/d96012bcfc98706a.js\",\"//_next/static/chunks/73e3194f06db260e.js\"]},\"default\"]\n4:I[837457,[\"//_next/static/chunks/d96012bcfc98706a.js\",\"//_next/static/chunks/73e3194f06db260e.js\"]},\"default\"]\n7:I[897367,[\"//_next/static/chunks/d96012bcfc98706a.js\",\"//_next/static/chunks/73e3194f06db260e.js\"]},\"OutletBoundary\"]\n8:\"$Sreact.suspense\"\na:I[897367,[\"//_next/static/chunks/d96012bcfc98706a.js\",\"//_next/static/chunks/73e3194f06db260e.js\"]},\"ViewportBoundary\"]\nc:I[897367,[\"//_next/static/chunks/d96012bcfc98706a.js\",\"//_next/static/chunks/73e3194f06db260e.js\"]},\"MetadataBoundary\"]\ne:I[168027,[],\"default\"]\n:HL[\"//_next/static/chunks/2f447be35fbdbfb6.css\",\"style\"]\n:HL[\"//_next/static/media/83afe278b6a6bb3c-s.p.3a6ba036.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])
self.__next_f.push([1, "0:{\"P\":null,\"b\":\"gopELGpJqAoKGq-5KjGLk\",\"c\":[\"\",\"advanced\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(home)\",{\"children\":[[ \"slug\", \"advanced\", \"oc\"],{\"children\":[\"\__PAGE\__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"//_next/static/chunks/2f447be35fbdbfb6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[ \"$\", \"script\", \"script-0\", {\"src\": \"//_next/static/chunks/f27389c0e0b952b3.js\", \"async\": true, \"nonce\": \"$undefined\"}]]},{\"children\":[\"$\",\"body\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[\"$\",\"$L2\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[ \"$\", \"style\", null, { \"dangerouslySetInnerHTML\": { \"\__html\": \"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\" } } }], [ \"$\", \"h1\", null, { \"className\": \"next-error-h1\", \"style\": { \"display\": \"inline-block\", \"margin\": \"0 20px 0 0\", \"padding\": \"0 23px 0 0\", \"fontSize\": 24, \"fontWeight\": 500, \"verticalAlign\": \"top\", \"lineHeight\": \"49px\" }, \"children\": 404 } ], [ \"$\", \"div\", null, { \"style\": { \"display\": \"inline-block\" }, \"children\": [ \"$\", \"h2\", null, { \"style\": { \"fontSize\": 14, \"fontWeight\": 400, \"lineHeight\": \"49px\", \"margin\": 0 }, \"children\": \"This page could not be found.\" } ] } ] ] } ] } ]], \"$\", \"$L3\", null, { \"parallelRouterKey\": \"children\", \"error\": \"$undefined\", \"errorStyles\": \"$undefined\", \"errorScripts\": \"$undefined\", \"template\": [ \"$\", \"$L4\", null, {} ], \"templateStyles\": \"$undefined\", \"templateScripts\": \"$undefined\", \"notFound\": [ [], [] ] } ] ] } ] } ] ] } ] } ], [ \"$\", \"$1\", \"c\", { \"children\": [ [ [ \"$\", \"script\", \"script-0\", { \"src\": \"//_next/static/chunks/6cd8dbc2a9a0fbcc.js\", \"async\": true, \"nonce\": \"$undefined\" } ], [ \"$\", \"script\", \"script-1\", { \"src\": \"//_next/static/chunks/941c42f7d313634f.js\", \"async\": true, \"nonce\": \"$undefined\" } ], [ \"$\", \"script\", \"script-2\", { \"src\": \"//_next/static/chunks/1f5e73ac7dc28f39.js\", \"async\": true, \"nonce\": \"$undefined\" } ] ], \"$L5\" ] }, { \"children\": [ [ \"$\", \"$1\", \"c\", { \"children\": [ null, [ \"$\", \"$L3\", null, { \"parallelRouterKey\": \"children\", \"error\": \"$undefined\", \"errorStyles\": \"$undefined\", \"errorScripts\": \"$undefined\", \"template\": [ \"$\", \"$L4\", null, {} ], \"templateStyles\": \"$undefined\", \"templateScripts\": \"$undefined\" } ] ] } ] ] } ] } ] } ] )
```

--------------------------------

### Cache generated UI schemas

Source: https://docs.getsyntux.com/llms-full.txt

Demonstrates how to cache generated UI results using a Map to improve performance and reduce redundant LLM calls for specific users.

```jsx
const cache = new Map();

export default function Home() {
  const userID = 10;
  return (
    <GeneratedUI
      cached={cache.get(userID)}
      onGenerate={(result) => cache.set(userID, result)}
      model={anthropic("claude-sonnet-4-5")}
      value={valueToDisplay}
    />
  );
}
```

--------------------------------

### Implement GeneratedUI component

Source: https://docs.getsyntux.com/llms-full.txt

Basic implementation of the GeneratedUI component to render AI-generated interfaces based on provided data and hints.

```jsx
import { GeneratedUI } from "@/lib/getsyntux/GeneratedUI";
import { createAnthropic } from "@/api-sdk/anthropic";

const anthropic = createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

export default function Home(){
    const valueToDisplay = { /* data */ };
    return <GeneratedUI model={anthropic("claude-sonnet-4-5")} value={valueToDisplay} hint="UI should look like..." />
}
```

--------------------------------

### generate-defs CLI for Component Definition Generation (Bash)

Source: https://docs.getsyntux.com/llms-full.txt

The generate-defs CLI command automates the creation of component definitions, which can be directly used in the 'components' property of GeneratedUI. It parses a specified component file and outputs its definition.

```bash
npx getsyntux generate-defs ./path/to/component.tsx
```

```bash
npx getsyntux generate-defs .lib\Button.tsx
getsyntux: parsing file...
getsyntux: found 1 component(s) with prop definitions [Button]
getsyntux: component #1: Button
√ What does this component do? (optional) ... displays an interactive button

getsyntux: generated definitions (safe to copy & paste directly):
{ name: "Button", props: "{ text: string, disabled: boolean }", component: Button, context: "displays an interactive button" },
```

--------------------------------

### Define LLM Tool with 'placeholder' (JavaScript)

Source: https://docs.getsyntux.com/api

This snippet shows how to define a placeholder element within an LLM tool's configuration. It uses HTML-like syntax to create a 'div' element that displays 'Awaiting stream...' as a placeholder for dynamic content.

```javascript
placeholder = <div>Awaiting stream...</div>

```

--------------------------------

### Display Array Data in JavaScript

Source: https://docs.getsyntux.com/advanced

This JavaScript code snippet demonstrates how to display an array of data. It utilizes a 'shiki' theme for syntax highlighting and includes a placeholder for an icon. The code defines a constant 'myArrayToDisplay' and prepares it for rendering.

```javascript
const myArrayToDisplay = [
  // ... array elements ...
];
```

--------------------------------

### Define a Server-Side Tool with getsyntux

Source: https://docs.getsyntux.com/api

This snippet illustrates the import of 'defineTool' and the structure of an asynchronous function marked with 'use server'. It serves as a template for creating tools that interact with the getsyntux framework.

```typescript
import { defineTool } from 'getsyntux';

const myFunction = async (id: string) => { "use server"; /* ... */ };
```

--------------------------------

### Generate Component Definitions with getsyntux

Source: https://docs.getsyntux.com/api

This command-line interface (CLI) tool automatically generates definitions for UI components. It takes a path to a component file (e.g., `.tsx`) as input and outputs a structured definition that includes the component's name, its props, and a user-provided description. This is useful for integrating components into a system that requires such definitions.

```bash
npx getsyntux generate-defs ./path/to/component.tsx
```

```bash
npx getsyntux generate-defs .\lib\Button.tsx
getsyntux: parsing file...
getsyntux: found 1 component(s) with prop definitions [Button]
getsyntux: component #1: Button
√ What does this component do? (optional) ... displays an interactive button

getsyntux: generated definitions (safe to copy & paste directly):
{ name: "Button", props: "{ text: string, disabled: boolean }", component: Button, context: "displays an interactive button" }
```

--------------------------------

### Define LLM Tool with 'components' (JavaScript)

Source: https://docs.getsyntux.com/api

This code illustrates how to define components for an LLM tool. It shows a structure where components can be represented as an array, potentially including dynamic elements indicated by '...'.

```javascript
components = [
  // ...
]

```

--------------------------------

### Generate component definitions using getsyntux

Source: https://docs.getsyntux.com/api

Executes the getsyntux CLI to parse a specific component file or directory and output its property definitions. The command provides feedback on the parsing process and the number of components found.

```bash
npx getsyntux generate-defs ./path/to/component.tsx
```

```bash
npx getsyntux generate-defs ./lib/Button.tsx
getsyntux: parsing file...
getsyntux: found 1 component(s) with prop definitions [Button]
```

--------------------------------

### Next.js Static Chunk Loading Configuration

Source: https://docs.getsyntux.com/api

This snippet details the configuration for loading static JavaScript chunks in a Next.js application. It specifies the paths to various JavaScript files that are part of the application's build, enabling efficient code splitting and loading.

```javascript
self.__next_f.push([
  1,
  "46:I[647873,[\"/_next/static/chunks/f27389c0e0b952b3.js\",\"/_next/static/chunks/6cd8dbc2a9a0fbcc.js\",\"/_next/static/chunks/941c42f7d313634f.js\",\"/_next/static/chunks/1f5e73ac7dc28f39.js\",\"/_next/static/chunks/e99bdb4eeaa3099e.js\",\"/_next/static/chunks/f77fc22a1d2bf74d.js\"],\"default\"
])
```

--------------------------------

### LLM Generation Configuration

Source: https://docs.getsyntux.com/api

Defines the core configuration parameters for initializing the LLM generation process.

```APIDOC
## Configuration Parameters

### Description
These parameters are used to configure the generation request, specifying the model, instructions, and UI integration hooks.

### Parameters
- **model** (LanguageModel) - Required - The model to use for generation. Supports any model from the supported list, including custom ones.
- **hint** (string) - Optional - A specific design instruction for personalizing the generated result.
- **actions** (object) - Optional - A dictionary of callbacks attached to relevant generation events.
- **components** (object[]) - Optional - A list of allowed custom React components to be used in the output.
- **placeholder** (JSX.Element) - Optional - An element displayed while connecting to the model (before generation starts).

### Request Example
{
  "model": "gpt-4",
  "hint": "Use a modern dashboard layout",
  "components": ["Card", "Button"]
}
```

--------------------------------

### Generation Lifecycle & Error Handling

Source: https://docs.getsyntux.com/api

Advanced configuration for managing generation state, caching, and error recovery.

```APIDOC
## Lifecycle & Error Handling

### Description
Configure how the system handles caching, completion callbacks, and error states during the generation process.

### Parameters
- **cached** (string) - Optional - A cached schema from a previous generation to skip regeneration.
- **onGenerated** (function) - Optional - Callback triggered when the schema generation is complete.
- **skeletonize** (boolean) - Optional - Compresses values for large or untrusted inputs.
- **onError** (function) - Optional - Server-action callback triggered on server-side errors.
- **errorFallback** (JSX.Element) - Optional - UI element to display if an error occurs.

### Response
#### Success Response (200)
- **schema** (object) - The generated UI schema.

#### Error Handling
- **onError** will be invoked with the error object if the generation fails on the server.
```

--------------------------------

### Next.js Static Chunk Loading Configuration

Source: https://docs.getsyntux.com/advanced

This snippet illustrates the configuration for loading static JavaScript chunks in a Next.js application. It specifies the paths to various chunk files that are essential for the application's functionality and potentially for features like internationalization (i18n).

```javascript
self.__next_f.push([
  1,
  "5d:I[7549,[\"/_next/static/chunks/f27389c0e0b952b3.js\",\"/_next/static/chunks/6cd8dbc2a9a0fbcc.js\",\"/_next/static/chunks/941c42f7d313634f.js\",\"/_next/static/chunks/1f5e73ac7dc28f39.js\",\"/_next/static/chunks/e99bdb4eeaa3099e.js\",\"/_next/static/chunks/f77fc22a1d2bf74d.js\"],\"PageFooter\"
]
5e:I[309864,[\"/_next/static/chunks/f27389c0e0b952b3.js\",\"/_next/static/chunks/6cd8dbc2a9a0fbcc.js\",\"/_next/static/chunks/941c42f7d313634f.js\",\"/_next/static/chunks/1f5e73ac7dc28f39.js\",\"/_next/static/chunks/e99bdb4eeaa3099e.js\",\"/_next/static/chunks/f77fc22a1d2bf74d.js\"],\"I18nLabel\"
]
```

--------------------------------

### Next.js Metadata Configuration

Source: https://docs.getsyntux.com/api

This snippet shows the metadata configuration for a Next.js page, including title, description, and Open Graph (OG) tags for social media sharing. It also includes Twitter card meta tags and a favicon link, crucial for SEO and presentation.

```javascript
self.__next_f.push([
  1,
  "d:[[\"$\",\"title\",\"0\",{\"children\":\"API • syntux docs\"}],\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Properties, methods, CLI.\"}],\"$\",\"meta\",\"2\",{\"property\":\"og:title\",\"content\":\"API • syntux docs\"}],\"$\",\"meta\",\"3\",{\"property\":\"og:description\",\"content\":\"Properties, methods, CLI.\"}],\"$\",\"meta\",\"4\",{\"property\":\"og:image\",\"content\":\"https://docs.getsyntux.com/og/docs/api/image.webp\"}],\"$\",\"meta\",\"5\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],\"$\",\"meta\",\"6\",{\"name\":\"twitter:title\",\"content\":\"API • syntux docs\"}],\"$\",\"meta\",\"7\",{\"name\":\"twitter:description\",\"content\":\"Properties, methods, CLI.\"}],\"$\",\"meta\",\"8\",{\"name\":\"twitter:image\",\"content\":\"https://docs.getsyntux.com/og/docs/api/image.webp\"}],\"$\",\"link\",\"9\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.5aa76056.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],\"$\",\"$L47\",\"10\",{}]]\n"
])
```

--------------------------------

### Define LLM Tool with 'delete' action (JavaScript)

Source: https://docs.getsyntux.com/api

This snippet demonstrates how to define a tool for an LLM, specifically including a 'delete' action. It utilizes an asynchronous function and the 'defineTool' utility. The 'use server' directive indicates server-side execution.

```javascript
actions = {
  delete: async () => {
    "use server";
  }
}

```

--------------------------------

### String Formatting for LLM Output

Source: https://docs.getsyntux.com/api

This snippet shows how to format strings for LLM output, potentially for caching or display. It uses a specific syntax with spans and styles to represent different parts of the string, such as variable names, operators, and literal values. This formatting is likely used by a syntax highlighter or a similar tool to render LLM-generated code or text.

```json
["$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"("},"$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"str"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" ) ="},"$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"=>"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" { cacheStr "},"$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" str }}"},"$","span",null,{"style":{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},"children":"/* optional */"}]
```

--------------------------------

### defineTool Method for LLM Function Integration

Source: https://docs.getsyntux.com/api

The defineTool method enhances a server action function by attaching metadata and context, enabling Large Language Models (LLMs) to understand and utilize it. It accepts the function, optional parameter types, and an optional descriptive context.

```javascript
import { defineTool } from 'getsyntux';

const myFunction = async (id: string) => { "use server"; /* ... */ };
const myFunctionWithContext = defineTool(myFunction, "id: string", "what does this function do?")
```

--------------------------------

### Integrate custom React components

Source: https://docs.getsyntux.com/llms-full.txt

Register custom React components with syntux to allow the LLM to utilize your existing UI library components within generated interfaces.

```jsx
import { CustomOne } from "@/my_components";

<GeneratedUI
  components={[{
      name: "Button",
      props: "{ color: string, text: string }",
      component: CustomOne
  }]}
  model={model}
  value={valueToDisplay}
/>
```

--------------------------------

### JavaScript: Render Syntax Highlighted Code for LLM Output

Source: https://docs.getsyntux.com/advanced

This JavaScript snippet is part of a system for rendering syntax-highlighted code, likely as part of an LLM's output. It includes logic for defining styles and structure for code blocks, using CSS variables for theming. This enhances the readability of code presented by the LLM.

```javascript
self.__next_f.push([
  1,
  "30:[\"$\",\"$L16\",null,{\"className\":\"shiki shiki-themes github-light github-dark\",\"style\":{\"--shiki-light\":\"#24292e\",\"--shiki-dark\":\"#e1e4e8\",\"--shiki-light-bg\":\"#fff\",\"--shiki-dark-bg\":\"#24292e\"},\"tabIndex\":\"0\",\"icon\":\"<svg viewBox=\"0 0 24 24\">...</svg>\",\"children\":[\"$\",\"code\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{\"}]}]}]}]])
```

--------------------------------

### Configure LLM Settings

Source: https://docs.getsyntux.com/advanced

Defines the configuration structure for the LLM, including theme settings and data handling properties like number and string tags.

```json
{
  "number": "number",
  "tags": "string",
  "settings": {
    "theme": "$L58"
  }
}
```

--------------------------------

### defineTool Function for LLM Action Integration (TypeScript/JavaScript)

Source: https://docs.getsyntux.com/llms-full.txt

The defineTool function enhances a server action by attaching metadata and context, enabling LLMs to understand and utilize it. It takes the function itself, optional parameter types, and an optional description of its purpose.

```ts
defineTool(fn: Function, params?: string, context?: string)
```

```js
import { defineTool } from 'getsyntux';

const myFunction = async (id: string) => { "use server"; /* ... */ };
const myFunctionWithContext = defineTool(myFunction, "id: string", "what does this function do?")
```

--------------------------------

### Getsyntux Generated Definitions

Source: https://docs.getsyntux.com/api

Explains the purpose and usage of generated definitions within the Getsyntux framework. This section details what these definitions represent and how they are utilized.

```text
getsyntux: component #1: Button
√ What does this component do? (optional) ... displays an interactive button

getsyntux generated definitions (safe "}
```

--------------------------------

### Data skeletonization transformation

Source: https://docs.getsyntux.com/llms-full.txt

Shows the transformation of a data object into its skeletonized form, where values are replaced by type descriptors.

```json
{
  "user": { "id": 123, "name": "Grant", "verified": true },
  "posts": [
    { "title": "Generative UI", "likes": 45, "tags": ["js", "web"] },
    { "title": "Is Awesome!", "likes": 6, "tags": ["ai"] }
  ],
  "settings": {
    "theme": "dark",
    "notifications": { "email": true, "sms": false }
  }
}

// After skeletonization:
{
  "user": { "id": "number", "name": "string", "verified": "boolean" },
  "posts": [
    { "title": "string", "likes": "number", "tags": ["string"] }
  ],
  "settings": {
    "theme": "string",
    "notifications": { "email": "boolean", "sms": "boolean" }
  }
}
```

--------------------------------

### Next.js HTML Document Structure

Source: https://docs.getsyntux.com/api

This snippet defines the basic HTML document structure for a Next.js application, including character set and viewport meta tags. This is a fundamental part of any web page, ensuring proper rendering and compatibility across devices.

```html
self.__next_f.push([
  1,
  "b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"
])
```

--------------------------------

### JSON Structure for UI Elements

Source: https://docs.getsyntux.com/api

This snippet illustrates a JSON structure used to define UI elements, including their styling and content. It appears to be part of a system that dynamically renders interfaces based on this data, potentially for a web application or a documentation generator.

```json
{
  "43": [
    "$",
    "span",
    null,
    {
      "className": "line",
      "children": [
        ["$", "span", null, {"style": {"--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8"}, "children": "{ "}"],
        ["$", "span", null, {"style": {"--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0"}, "children": "name:"}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " \"Button\""}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " props:"}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " \\\"{ text: string, disabled: boolean }\\\""}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " component:"}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " Button,"}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " context:"}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " \\"displays an interactive button\\\""}],
        ["$", "span", null, {"style": {"--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF"}, "children": " },"}]
      ]
    }
  ]
}
```

--------------------------------

### Getsyntux Button Component Description

Source: https://docs.getsyntux.com/api

Describes the functionality of the Getsyntux button component. It displays an interactive button and can optionally take a cache string.

```text
>} 
/* optional */
 cached="{cacheStr}" /* optional */
 onGenerate
```

--------------------------------

### Define Tool for useSyntux Hook

Source: https://docs.getsyntux.com/api

This snippet demonstrates how to define a tool for the Syntux hook. It uses JavaScript and the defineTool function to associate a function with a specific identifier and description, enabling context-aware operations.

```javascript
const myFunctionWithContext = defineTool(myFunction, "id: string", "what does this function do?")
```

--------------------------------

### Skeletonize Function for LLM Output

Source: https://docs.getsyntux.com/api

This snippet defines a 'skeletonize' function, likely used to create a placeholder or simplified structure for LLM output. It sets a default value to false, indicating that the skeletonization is optional. This is useful for controlling the verbosity or complexity of LLM responses.

```json
["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" skeletonize"},"$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"{"},"$","span",null,{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"false"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"}"},"$","span",null,{"style":{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},"children":"/* optional */"}]}
```

--------------------------------

### Define tool metadata with defineTool

Source: https://docs.getsyntux.com/api

The defineTool function attaches metadata and context to a function, allowing an LLM to understand how to use it. It accepts the function, optional parameters, and context strings as arguments.

```typescript
defineTool(fn: Function, params?: string, context?: string)
```

--------------------------------

### Manage state with useSyntux hook

Source: https://docs.getsyntux.com/llms-full.txt

Use the useSyntux hook within custom components to retrieve and update the shared application state.

```jsx
"use client";
import { useSyntux } from "getsyntux";

export default function CustomComponent() {
  const { value, setValue } = useSyntux();
  return <button onClick={() => setValue([...value, newItem])}>Add value</button>;
}
```

--------------------------------

### Python: Generate JSON Output for LLM Data

Source: https://docs.getsyntux.com/advanced

This Python code snippet demonstrates how to format and generate JSON output, likely for use with LLM data. It involves creating nested dictionaries and lists that conform to a JSON structure. This is useful for structuring data before feeding it into an LLM or processing LLM responses.

```python
def generate_llm_json(data):
    # Example of structuring data for JSON output
    output = {
        "user": {
            "id": "number",
            "name": "string",
            "verified": "boolean"
        },
        "posts": [
            {
                "title": "string",
                "likes": "integer"
            }
        ]
    }
    return json.dumps(output, indent=2)

# Sample usage:
# sample_data = {...}
# print(generate_llm_json(sample_data))
```

--------------------------------

### LLM Text Value Explanation (Markdown)

Source: https://docs.getsyntux.com/api

This section explains the 'value' parameter used in LLM text processing. It clarifies that 'value' can accept any data type, including objects, arrays, or primitives, representing the information to be displayed.

```markdown
Explanation:
* `value` (any): the information you would like to display. This can be anything! An object, array or primitive.

```

--------------------------------

### GeneratedUI Component for LLM Content Display (React/JSX)

Source: https://docs.getsyntux.com/llms-full.txt

The GeneratedUI component renders dynamic content, typically from an LLM. It accepts various props for customization, including the value to display, the AI model to use, hints for generation, actions, allowed components, placeholders, caching, and error handling.

```jsx
<GeneratedUI 
    value={valueToDisplay}
    model={anthropic("claude-sonnet-4-5")}
    hint="UI should look like..." /* optional */

    actions={{ "delete": defineTool(async () => { "use server"; }) }} /* optional */
    components={[...]} /* optional */
    placeholder={<div>Awaiting stream...</div>} /* optional */
    cached={cacheStr} /* optional */
    onGenerate={(str) => { cacheStr = str }} /* optional */
    skeletonize={false} /* optional */

    onError={() => { console.log("An error occurred") }} /* optional */
    errorFallback={<div>An error occurred.</div>} /* optional */
/>
```

--------------------------------

### Error Handling for LLM Output

Source: https://docs.getsyntux.com/api

This snippet demonstrates an 'onError' function for handling errors in LLM output. It logs a generic error message to the console and provides an optional 'errorFallback' UI element. This is crucial for gracefully managing unexpected LLM behaviors or failures.

```json
["$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" onError"},"$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"{() =>"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" {"},"$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":"console."},"$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":"log"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"("},"$","span",null,{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\"An error occurred\""},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":") }}"},"$","span",null,{"style":{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},"children":"/* optional */"}]},"$","span",null,{"className":"line","children":["$","span",null,{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" errorFallback"},"$","span",null,{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":"{"}"},"$","span",null,{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"children":"div"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" >An error occurred."},"$","span",null,{"style":{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"},"children":"/div"},"$","span",null,{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" }"},"$","span",null,{"style":{"--shiki-light":"#6A737D","--shiki-dark":"#6A737D"},"children":"/* optional */"}]}
```

--------------------------------

### useSyntux Hook for Value Management (JavaScript)

Source: https://docs.getsyntux.com/llms-full.txt

The useSyntux hook provides access to and control over the 'value' state within your application. It returns the current value and a function to update it.

```js
const { value, setValue } = useSyntux();

console.log(value); // current value 
setValue({ ... }); // change value
```

--------------------------------

### JavaScript: Format Data for LLM JSON Output

Source: https://docs.getsyntux.com/advanced

This JavaScript code snippet illustrates formatting data into a JSON structure suitable for LLM processing. It defines an object with nested properties and arrays, mirroring common data formats used in LLM applications. This is useful for preparing input data or parsing LLM responses.

```javascript
function formatLLMData(data) {
  // Example of formatting data for JSON output
  const formattedData = {
    user: {
      id: 'number',
      name: 'string',
      verified: 'boolean'
    },
    posts: [
      {
        title: 'string',
        likes: 'integer'
      }
    ]
  };
  return JSON.stringify(formattedData, null, 2);
}

// Sample usage:
// const sampleData = {};
// console.log(formatLLMData(sampleData));
```

--------------------------------

### Theme Toggle Implementation

Source: https://docs.getsyntux.com/advanced

A self-invoking function that manages theme state (light/dark) by manipulating document classes or attributes and syncing with system preferences.

```javascript
((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)
```