ai-props 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 AI Primitives
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,307 @@
+# ai-props
+
+A React component package that provides an AI component for generating and spreading AI-generated props to child components.
+
+## Installation
+
+```bash
+npm install ai-props
+```
+
+## Dependencies
+
+This package requires the following peer dependencies:
+- `react` (^18.2.0)
+- `react-dom` (^18.2.0)
+- `@types/react` (^18.2.0)
+- `@types/react-dom` (^18.2.0)
+
+And the following runtime dependencies:
+- `ai` (^4.0.18)
+- `@ai-sdk/openai` (^1.0.8)
+- `clsx` (^2.1.1)
+- `tailwind-merge` (^2.5.5)
+- `zod` (^3.22.4)
+
+Make sure to install these dependencies if they're not already in your project:
+
+```bash
+npm install ai @ai-sdk/openai clsx tailwind-merge zod
+```
+
+## Usage
+
+The `AI` component mirrors the `generateObject` function from the `ai` package, with a default model configuration. It spreads the generated object's properties to its children.
+
+### Simplified Schema Interface
+
+You can define your schema using a simple object structure without importing Zod:
+
+```tsx
+import { AI } from 'ai-props'
+
+function MyComponent() {
+  return (
+    <AI
+      schema={{
+        productType: 'App | API | Marketplace | Platform | Packaged Service | Professional Service | Website',
+        profile: {
+          customer: 'ideal customer profile in 3-5 words',
+          solution: 'describe the offer in 4-10 words'
+        },
+        description: 'website meta description',
+        tags: ['SEO-optimized meta tags']
+      }}
+      prompt="Generate product details"
+    >
+      {(props) => (
+        <article>
+          <h1>{props.productType}</h1>
+          <div>
+            <p>Customer: {props.profile.customer}</p>
+            <p>Solution: {props.profile.solution}</p>
+          </div>
+          <p>{props.description}</p>
+          <ul>
+            {props.tags.map((tag, i) => (
+              <li key={i}>{tag}</li>
+            ))}
+          </ul>
+        </article>
+      )}
+    </AI>
+  )
+}
+```
+
+The simplified schema interface supports:
+- Pipe-separated strings (`'Option1 | Option2 | Option3'`) which are automatically converted to enums
+- Nested objects with type descriptions
+- Array types with description hints
+
+### Direct Zod Schema Usage
+
+You can also use Zod schemas directly for more complex validation:
+
+```tsx
+import { AI } from 'ai-props'
+import { z } from 'zod'
+
+// Define your schema
+const schema = z.object({
+  title: z.string(),
+  description: z.string()
+})
+
+// Use the AI component
+function MyComponent() {
+  return (
+    <AI
+      schema={schema}
+      prompt="Generate a title and description for a blog post about React"
+    >
+      {(props) => (
+        <article>
+          <h1>{props.title}</h1>
+          <p>{props.description}</p>
+        </article>
+      )}
+    </AI>
+  )
+}
+```
+
+## Default Model Configuration
+
+The AI component uses a default model configuration:
+
+```typescript
+import { openai } from '@ai-sdk/openai'
+const model = openai('gpt-4o')
+```
+
+You can override this by providing your own model configuration through props.
+
+## Props
+
+The `AI` component accepts all props from the `generateObject` function:
+
+### Required Props
+- `schema`: A Zod schema or Schema object defining the structure of the generated object. Supports:
+  - Direct Zod schemas for complex validation
+  - Simplified object syntax without Zod imports
+  - Pipe-separated strings for automatic enum conversion (e.g., `'Option1 | Option2'`)
+- `prompt`: The prompt to send to the language model
+
+### Optional Props
+- `output`: Type of output ('object' | 'array' | 'enum' | 'no-schema')
+- `schemaName`: Optional name for the output schema
+- `schemaDescription`: Optional description for the output schema
+- `mode`: Generation mode ('auto' | 'json' | 'tool'), defaults to 'auto'
+- `model`: Override the default model
+- `experimental_telemetry`: Optional telemetry configuration
+- `experimental_providerMetadata`: Additional provider-specific metadata
+
+### Array Output Mode
+
+The `AI` component supports generating and rendering arrays of items using the `output="array"` prop. When using array output mode, you can also enable CSS Grid layout with the `cols` prop:
+
+```tsx
+<AI
+  schema={blogSchema}
+  prompt="Generate 6 blog post previews"
+  output="array"
+  cols={3}
+  gap="2rem"
+  className="grid-container"
+  itemClassName="grid-item"
+>
+  {(props) => (
+    <article>{/* Item content */}</article>
+  )}
+</AI>
+```
+
+#### Grid Support Props
+- `cols`: Number of columns in the grid (default: 3)
+- `gap`: Gap between grid items (CSS gap value)
+- `className`: Class applied to the grid container
+- `itemClassName`: Class applied to each grid item
+
+### Styling Support
+
+The `AI` component integrates with `clsx` and `tailwind-merge` for flexible styling:
+
+```tsx
+<AI
+  className="max-w-7xl mx-auto px-4 py-16 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+  itemClassName="bg-white p-6 rounded-lg shadow-md h-full flex flex-col"
+>
+  {/* Component content */}
+</AI>
+```
+
+Class names are merged using the `cn` utility, which combines `clsx` and `tailwind-merge` for conflict-free class composition.
+
+### Examples
+
+#### Hero Section Example
+
+A waitlist landing page hero section for an AI-powered SaaS product:
+
+```tsx
+import { AI } from 'ai-props'
+
+const heroSchema = {
+  productType: 'App | API | Marketplace | Platform',
+  profile: {
+    customer: 'ideal customer profile in 3-5 words',
+    solution: 'describe the offer in 4-10 words'
+  },
+  description: 'website meta description',
+  tags: ['SEO-optimized meta tags'],
+  headline: 'compelling headline for AI SaaS product',
+  subheadline: 'engaging subheadline explaining value proposition',
+  ctaText: 'action-oriented button text',
+  benefits: ['3-5 key benefits'],
+  targetAudience: 'specific target audience description'
+}
+
+export function HeroSection() {
+  return (
+    <AI<typeof heroSchema>
+      schema={heroSchema}
+      prompt="Generate a hero section for an AI-powered SaaS product waitlist landing page"
+      className="bg-gradient-to-br from-blue-50 to-indigo-50"
+    >
+      {(props) => (
+        <div className="max-w-6xl mx-auto px-4 py-16">
+          <h1 className="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
+            {props.headline}
+          </h1>
+          <p className="text-xl text-gray-600 mb-8">{props.subheadline}</p>
+          <button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-blue-700 transition-colors">
+            {props.ctaText}
+          </button>
+          <div className="mt-12">
+            <h2 className="text-2xl font-semibold mb-4">Perfect for {props.targetAudience}</h2>
+            <ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {props.benefits.map((benefit, index) => (
+                <li key={index} className="flex items-start bg-white p-4 rounded-lg shadow-sm">
+                  <span className="text-blue-500 mr-2">✓</span>
+                  {benefit}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </AI>
+  )
+}
+```
+
+#### Blog List Example
+
+A grid of blog post previews using array output mode:
+
+```tsx
+import { AI } from 'ai-props'
+
+const blogSchema = {
+  productType: 'App | API | Marketplace | Platform',
+  profile: {
+    customer: 'ideal customer profile in 3-5 words',
+    solution: 'describe the offer in 4-10 words'
+  },
+  description: 'website meta description',
+  tags: ['relevant topic tags'],
+  title: 'engaging blog post title',
+  excerpt: 'compelling 2-3 sentence excerpt',
+  readTime: 'estimated read time',
+  category: 'Blog | Tutorial | Case Study | News'
+}
+
+export function BlogList() {
+  return (
+    <AI<typeof blogSchema>
+      schema={blogSchema}
+      prompt="Generate 6 blog post previews about AI and machine learning"
+      output="array"
+      cols={3}
+      gap="2rem"
+      className="max-w-7xl mx-auto px-4 py-16 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      itemClassName="h-full"
+    >
+      {(props) => (
+        <article className="bg-white p-6 rounded-lg shadow-md h-full flex flex-col">
+          <div className="text-sm text-gray-500 mb-2 flex items-center justify-between">
+            <span>{props.category}</span>
+            <span>{props.readTime}</span>
+          </div>
+          <h2 className="text-xl font-semibold mb-3">{props.title}</h2>
+          <p className="text-gray-600 mb-4 flex-grow">{props.excerpt}</p>
+          <div className="flex flex-wrap gap-2 mt-auto">
+            {props.tags.map((tag, index) => (
+              <span key={index} className="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm">
+                {tag}
+              </span>
+            ))}
+          </div>
+        </article>
+      )}
+    </AI>
+  )
+}
+```
+
+## Development
+
+This package uses:
+- Vite for building
+- Vitest for testing
+- React Cosmos for component development and testing
+
+## License
+
+MIT

package/dist/AI.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { z } from 'zod';
+import type { LanguageModelV1ProviderMetadata } from '@ai-sdk/provider';
+import type { AttributeValue } from '@opentelemetry/api';
+import type { SchemaObject } from './utils/schema';
+declare const defaultModel: LanguageModelV1;
+type TelemetrySettings = {
+    isEnabled?: boolean;
+    recordInputs?: boolean;
+    recordOutputs?: boolean;
+    functionId?: string;
+    metadata?: Record<string, AttributeValue>;
+};
+type AIProps<T> = {
+    children: (props: T) => ReactNode;
+    prompt: string;
+    schema: z.ZodSchema<T> | SchemaObject;
+    model?: typeof defaultModel;
+    output?: 'object' | 'array';
+    count?: number;
+    cols?: number;
+    gap?: string;
+    className?: string;
+    itemClassName?: string;
+    schemaName?: string;
+    schemaDescription?: string;
+    mode?: 'json';
+    experimental_telemetry?: TelemetrySettings;
+    experimental_providerMetadata?: LanguageModelV1ProviderMetadata;
+};
+export declare function AI<T>({ children, prompt, schema: rawSchema, model, output, count, cols, gap, className, itemClassName, schemaName, schemaDescription, mode, experimental_telemetry, experimental_providerMetadata, }: AIProps<T>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=AI.d.ts.map

package/dist/AI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AI.d.ts","sourceRoot":"","sources":["../src/AI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AACvB,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAExD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAIlD,QAAA,MAAM,YAAY,iBAAmB,CAAA;AAErC,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;CAC1C,CAAA;AAED,KAAK,OAAO,CAAC,CAAC,IAAI;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAA;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,YAAY,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,YAAY,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB,CAAC,EAAE,iBAAiB,CAAA;IAC1C,6BAA6B,CAAC,EAAE,+BAA+B,CAAA;CAChE,CAAA;AAED,wBAAgB,EAAE,CAAC,CAAC,EAAE,EACpB,QAAQ,EACR,MAAM,EACN,MAAM,EAAE,SAAS,EACjB,KAAoB,EACpB,MAAiB,EACjB,KAAK,EACL,IAAI,EACJ,GAAY,EACZ,SAAS,EACT,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,IAAa,EACb,sBAAsB,EACtB,6BAA6B,GAC9B,EAAE,OAAO,CAAC,CAAC,CAAC,gHA6DZ"}

package/dist/AI.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AI.test.d.ts.map

package/dist/AI.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AI.test.d.ts","sourceRoot":"","sources":["../src/AI.test.tsx"],"names":[],"mappings":""}