Skip to main content
POST
/
v1
/
organizations
/
{organizationId}
/
projects
/
{projectId}
/
components
Create Component
curl --request POST \
  --url https://api.example.com/v1/organizations/{organizationId}/projects/{projectId}/components \
  --header 'Content-Type: application/json' \
  --data '
{
  "name": "<string>",
  "type": "<string>",
  "content": "<string>",
  "collectionId": "<string>",
  "metadata": {
    "metadata.tags": [
      "<string>"
    ]
  }
}
'

​
Request Body

​
name
string
required
Component name (unique within project)
​
type
string
required
Component type: view or layout
​
content
string
required
Component source code (TypeScript)
​
collectionId
string
Parent collection ID (null for root collection)
​
metadata
object

​
Example Request

{
  "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"]
  }
}
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.

​
Response

Returns the created Component object with status draft. 
{
  "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

​
Name Already Exists

{
  "error": {
    "code": "COMPONENT_NAME_EXISTS",
    "message": "A component with name 'ProductCard' already exists",
    "details": {
      "name": "ProductCard"
    }
  }
}

​
Compilation Error

{
  "error": {
    "code": "COMPILATION_ERROR",
    "message": "Failed to compile component",
    "details": {
      "line": 15,
      "column": 10,
      "error": "Unexpected token"
    }
  }
}

​
Invalid Type

{
  "error": {
    "code": "VALIDATION_FAILED",
    "message": "Invalid component type",
    "details": {
      "type": "Must be 'view' or 'layout'"
    }
  }
}

​
Code Examples

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