Build an MCP Server in Minutes

export default defineDataSource({
  metadata: {
    title: "Product Search",
    description: "Search the product catalog by keyword or category"
  },
  properties: {
    searchTerm: { type: "string", description: "Term to search for" },
    category: { type: "string", description: "Filter by category" },
    limit: {
      type: "number",
      validation: { min: 1, max: 50 },
      defaultValue: 10
    }
  },
  output: {
    products: PropertyArray({
      valueType: PropertyGroup({
        properties: {
          id: PropertyString({}),
          name: PropertyString({}),
          price: PropertyNumber({}),
          inStock: PropertyBoolean({})
        }
      })
    }),
    total: PropertyNumber({})
  },
  handler: async (props, env) => {
    const res = await fetch(
      `https://api.example.com/products?q=${props.searchTerm}`,
      { headers: { "Authorization": `Bearer ${env.secrets.API_KEY}` } }
    );
    if (!res.ok) throw new Error(`API returned ${res.status}`);
    return res.json();
  }
});

const properties = {
  title: { type: "string" },
  price: { type: "string" },
  description: { type: "string", inspector: { control: "multiline" } }
} satisfies ComponentProperties;

const body = (props: InferProps<typeof properties>): Component => {
  return VStack({ spacing: 16, alignment: "leading" }, [
    Text(props.title).font("title2").fontWeight("bold"),
    Text(props.price).foregroundStyle(Color("#7A7A7A")),
    Text(props.description).font("body")
  ])
    .padding(24)
    .background(Color("white"))
    .cornerRadius(12);
};

export default defineComponent({
  metadata: {
    title: "Product Detail",
    description: "Render a product detail card. Use when the user wants to view one product."
  },
  properties,
  body
});