> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Create Component

> Create a new component

## Request Body

<ParamField body="name" type="string" required>
  Component name (unique within project)
</ParamField>

<ParamField body="type" type="string" required>
  Component type: `view` or `layout`
</ParamField>

<ParamField body="content" type="string" required>
  Component source code (TypeScript)
</ParamField>

<ParamField body="collectionId" type="string">
  Parent collection ID (omit for root collection)
</ParamField>

<ParamField body="metadata" type="object">
  <Expandable title="properties">
    <ParamField body="metadata.tags" type="string[]">
      Component tags for categorization
    </ParamField>
  </Expandable>
</ParamField>

### Example Request

```json theme={null}
{
  "name": "ProductCard",
  "type": "view",
  "collectionId": "coll123",
  "content": "const metadata = () => ({\n  title: 'Product Card',\n  description: 'Displays product information'\n});\n\nconst properties = () => ({\n  title: PropertyString({ title: 'Title', required: true }),\n  price: PropertyNumber({ title: 'Price', validation: { min: 0 } })\n});\n\nconst body = (props: ComponentProps) => {\n  return VStack({ spacing: 12 }, [\n    Text(props.title).font('headline'),\n    Text(`$${props.price}`)\n  ]);\n};",
  "metadata": {
    "tags": ["product", "card"]
  }
}
```

<Note>
  The `title` and `description` fields are automatically extracted from the component's `metadata()` function. The TypeScript code in `content` is automatically compiled to JavaScript and stored in the read-only `compiled` field.
</Note>

## Response

Returns the created Component object with status `draft`.

```json theme={null}
{
  "data": {
    "id": "c123",
    "name": "ProductCard",
    "title": "Product Card",
    "description": "Displays product information",
    "type": "view",
    "status": "draft",
    "version": null,
    "lastPublishedVersion": null,
    "content": "const metadata = () => ({...});...",
    "compiled": "const metadata = () => ({...});...",
    "schema": {
      "type": "object",
      "properties": {
        "title": { "type": "string" },
        "price": { "type": "number", "minimum": 0 }
      },
      "required": ["title"]
    },
    "collectionId": "coll123",
    "metadata": {
      "author": "user123",
      "tags": ["product", "card"]
    },
    "createdAt": "2024-03-20T10:00:00Z",
    "updatedAt": "2024-03-20T10:00:00Z"
  }
}
```

## Error Responses

### Validation Failed

```json theme={null}
{
  "error": {
    "code": "VALIDATION_FAILED",
    "message": "Validation failed",
    "details": [
      {
        "instancePath": "/type",
        "schemaPath": "#/properties/type/enum",
        "keyword": "enum",
        "params": { "allowedValues": ["layout", "view", "data"] },
        "message": "must be equal to one of the allowed values"
      }
    ]
  }
}
```

## Code Examples

<CodeGroup>
  ```bash cURL theme={null}
  curl -X POST "https://api.metabind.ai/app/v1/organizations/org123/projects/proj456/components" \
    -H "Authorization: Bearer YOUR_JWT" \
    -H "Content-Type: application/json" \
    -d '{
      "name": "ProductCard",
      "type": "view",
      "content": "const metadata = () => ({ title: \"Product Card\" });\nconst body = (props) => Text(props.title);"
    }'
  ```

  ```javascript JavaScript theme={null}
  const response = await fetch(
    'https://api.metabind.ai/app/v1/organizations/org123/projects/proj456/components',
    {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_JWT',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: 'ProductCard',
        type: 'view',
        content: `
          const metadata = () => ({ title: 'Product Card' });
          const properties = () => ({
            title: PropertyString({ title: 'Title', required: true })
          });
          const body = (props) => Text(props.title);
        `
      })
    }
  );

  const { data: component } = await response.json();
  ```
</CodeGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.