Create Component
curl --request POST \
--url https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components \
--header 'Content-Type: application/json' \
--data '
{
"name": "<string>",
"type": "<string>",
"content": "<string>",
"collectionId": "<string>",
"metadata": {
"metadata.tags": [
"<string>"
]
}
}
'import requests
url = "https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components"
payload = {
"name": "<string>",
"type": "<string>",
"content": "<string>",
"collectionId": "<string>",
"metadata": { "metadata.tags": ["<string>"] }
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
name: '<string>',
type: '<string>',
content: '<string>',
collectionId: '<string>',
metadata: {'metadata.tags': ['<string>']}
})
};
fetch('https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'name' => '<string>',
'type' => '<string>',
'content' => '<string>',
'collectionId' => '<string>',
'metadata' => [
'metadata.tags' => [
'<string>'
]
]
]),
CURLOPT_HTTPHEADER => [
"Content-Type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components"
payload := strings.NewReader("{\n \"name\": \"<string>\",\n \"type\": \"<string>\",\n \"content\": \"<string>\",\n \"collectionId\": \"<string>\",\n \"metadata\": {\n \"metadata.tags\": [\n \"<string>\"\n ]\n }\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components")
.header("Content-Type", "application/json")
.body("{\n \"name\": \"<string>\",\n \"type\": \"<string>\",\n \"content\": \"<string>\",\n \"collectionId\": \"<string>\",\n \"metadata\": {\n \"metadata.tags\": [\n \"<string>\"\n ]\n }\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Content-Type"] = 'application/json'
request.body = "{\n \"name\": \"<string>\",\n \"type\": \"<string>\",\n \"content\": \"<string>\",\n \"collectionId\": \"<string>\",\n \"metadata\": {\n \"metadata.tags\": [\n \"<string>\"\n ]\n }\n}"
response = http.request(request)
puts response.read_bodyComponents
Create Component
Create a new component
POST
/
app
/
v1
/
organizations
/
{organizationId}
/
projects
/
{projectId}
/
components
Create Component
curl --request POST \
--url https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components \
--header 'Content-Type: application/json' \
--data '
{
"name": "<string>",
"type": "<string>",
"content": "<string>",
"collectionId": "<string>",
"metadata": {
"metadata.tags": [
"<string>"
]
}
}
'import requests
url = "https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components"
payload = {
"name": "<string>",
"type": "<string>",
"content": "<string>",
"collectionId": "<string>",
"metadata": { "metadata.tags": ["<string>"] }
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.text)const options = {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
name: '<string>',
type: '<string>',
content: '<string>',
collectionId: '<string>',
metadata: {'metadata.tags': ['<string>']}
})
};
fetch('https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));<?php
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'name' => '<string>',
'type' => '<string>',
'content' => '<string>',
'collectionId' => '<string>',
'metadata' => [
'metadata.tags' => [
'<string>'
]
]
]),
CURLOPT_HTTPHEADER => [
"Content-Type: application/json"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}package main
import (
"fmt"
"strings"
"net/http"
"io"
)
func main() {
url := "https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components"
payload := strings.NewReader("{\n \"name\": \"<string>\",\n \"type\": \"<string>\",\n \"content\": \"<string>\",\n \"collectionId\": \"<string>\",\n \"metadata\": {\n \"metadata.tags\": [\n \"<string>\"\n ]\n }\n}")
req, _ := http.NewRequest("POST", url, payload)
req.Header.Add("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
body, _ := io.ReadAll(res.Body)
fmt.Println(string(body))
}HttpResponse<String> response = Unirest.post("https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components")
.header("Content-Type", "application/json")
.body("{\n \"name\": \"<string>\",\n \"type\": \"<string>\",\n \"content\": \"<string>\",\n \"collectionId\": \"<string>\",\n \"metadata\": {\n \"metadata.tags\": [\n \"<string>\"\n ]\n }\n}")
.asString();require 'uri'
require 'net/http'
url = URI("https://api.example.com/app/v1/organizations/{organizationId}/projects/{projectId}/components")
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Content-Type"] = 'application/json'
request.body = "{\n \"name\": \"<string>\",\n \"type\": \"<string>\",\n \"content\": \"<string>\",\n \"collectionId\": \"<string>\",\n \"metadata\": {\n \"metadata.tags\": [\n \"<string>\"\n ]\n }\n}"
response = http.request(request)
puts response.read_bodyRequest Body
Component name (unique within project)
Component type:
view or layoutComponent source code (TypeScript)
Parent collection ID (null for root collection)
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 statusdraft.
{
"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
{
"error": {
"code": "BAD_REQUEST",
"message": "Validation failed",
"details": {
"type": "must be equal to one of the allowed values"
}
}
}
Code Examples
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);"
}'
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();
⌘I