> ## 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 (null 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', 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}
{
  "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": "BAD_REQUEST",
    "message": "Validation failed",
    "details": {
      "type": "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 component = await response.json();
  ```
</CodeGroup>