ai-props 0.1.0 → 0.1.2

package/README.md

@@ -1,5 +1,8 @@
 # ai-props
 
+[![npm version](https://badge.fury.io/js/ai-props.svg)](https://www.npmjs.com/package/ai-props)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 A React component package that provides an AI component for generating and spreading AI-generated props to child components.
 
 ## Installation
@@ -8,30 +11,125 @@ A React component package that provides an AI component for generating and sprea
 npm install ai-props
 ```
 
-## Dependencies
+## Usage
 
-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)
+The `AI` component mirrors the `generateObject` function from the `ai` package and spreads the generated object's properties to its children.
 
-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)
+### Model Configuration
 
-Make sure to install these dependencies if they're not already in your project:
+The AI component supports both string-based OpenAI models and provider-specific model objects:
 
-```bash
-npm install ai @ai-sdk/openai clsx tailwind-merge zod
+```tsx
+// Simple string-based OpenAI model (recommended for OpenAI)
+<AI
+  model='gpt-4'
+  schema={schema}
+  prompt='Generate content'
+/>
+
+// Provider-specific model object (required for other providers)
+import { anthropic } from '@ai-sdk/anthropic'
+
+const model = anthropic('claude-2')
+<AI
+  model={model}
+  schema={schema}
+  prompt='Generate content'
+/>
+
+### Streaming Support
+
+The AI component supports real-time streaming of generated content, providing a more interactive user experience:
+
+```tsx
+<AI
+  model='gpt-4'
+  stream={true}
+  schema={{
+    title: 'string',
+    content: 'string'
+  }}
+  prompt='Generate an article about React'
+>
+  {(props, { isStreaming }) => (
+    <article className={isStreaming ? 'animate-pulse' : ''}>
+      <h1>{props.title}</h1>
+      <div>{props.content}</div>
+      {isStreaming && (
+        <div className='text-gray-500'>Generating content...</div>
+      )}
+    </article>
+  )}
+</AI>
 ```
 
-## Usage
+When using streaming:
+- Set `stream={true}` to enable real-time updates
+- Access streaming status via `isStreaming` in render prop
+- UI updates automatically as content arrives
+- Maintain type safety with your schema
+- Reduced time to first content display
+
+### API Proxy Integration
 
-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.
+For enhanced security and control, you can route requests through your own API endpoint:
+
+```tsx
+<AI
+  model='gpt-4'
+  apiEndpoint='/api/generate'
+  headers={{
+    'Authorization': 'Bearer ${process.env.API_KEY}',
+    'X-Custom-Header': 'value'
+  }}
+  schema={schema}
+  prompt='Generate content'
+/>
+```
+
+Your API endpoint should:
+- Accept the same parameters as the AI provider
+- Return compatible streaming or non-streaming responses
+- Handle authentication and rate limiting
+- Implement proper error handling
+
+Benefits of using an API proxy:
+- Keep API keys secure on your server
+- Add custom request validation
+- Implement usage tracking
+- Control model access and costs
+- Add custom error handling
+
+Example API endpoint implementation:
+```typescript
+// pages/api/generate.ts
+import { OpenAIStream } from 'ai'
+
+export async function POST(req: Request) {
+  const { prompt, schema, stream } = await req.json()
+
+  const response = await fetch('https://api.openai.com/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      model: 'gpt-4',
+      messages: [{ role: 'user', content: prompt }],
+      stream: stream,
+    }),
+  })
+
+  if (stream) {
+    const stream = OpenAIStream(response)
+    return new Response(stream)
+  }
+
+  const json = await response.json()
+  return Response.json(json)
+}
+```
 
 ### Simplified Schema Interface
 
@@ -52,7 +150,7 @@ function MyComponent() {
         description: 'website meta description',
         tags: ['SEO-optimized meta tags']
       }}
-      prompt="Generate product details"
+      prompt='Generate product details'
     >
       {(props) => (
         <article>
@@ -98,7 +196,7 @@ function MyComponent() {
   return (
     <AI
       schema={schema}
-      prompt="Generate a title and description for a blog post about React"
+      prompt='Generate a title and description for a blog post about React'
     >
       {(props) => (
         <article>
@@ -144,17 +242,17 @@ The `AI` component accepts all props from the `generateObject` function:
 
 ### 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:
+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"
+  prompt='Generate 6 blog post previews'
+  output='array'
   cols={3}
-  gap="2rem"
-  className="grid-container"
-  itemClassName="grid-item"
+  gap='2rem'
+  className='grid-container'
+  itemClassName='grid-item'
 >
   {(props) => (
     <article>{/* Item content */}</article>
@@ -174,8 +272,8 @@ The `AI` component integrates with `clsx` and `tailwind-merge` for flexible styl
 
 ```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"
+  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>
@@ -211,24 +309,24 @@ 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"
+      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">
+        <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">
+          <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">
+          <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>
+                <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>
               ))}
@@ -239,7 +337,6 @@ export function HeroSection() {
     </AI>
   )
 }
-```
 
 #### Blog List Example
 
@@ -266,24 +363,24 @@ export function BlogList() {
   return (
     <AI<typeof blogSchema>
       schema={blogSchema}
-      prompt="Generate 6 blog post previews about AI and machine learning"
-      output="array"
+      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"
+      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">
+        <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">
+          <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">
+              <span key={index} className='bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm'>
                 {tag}
               </span>
             ))}
@@ -293,7 +390,6 @@ export function BlogList() {
     </AI>
   )
 }
-```
 
 ## Development
 
@@ -302,6 +398,27 @@ This package uses:
 - Vitest for testing
 - React Cosmos for component development and testing
 
+## 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
+```
+
 ## License
 
 MIT

package/dist/AI.d.ts

@@ -1,33 +1,27 @@
-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>;
+import { type SchemaObject } from './utils/schema';
+type ModelType = string | {
+    provider: string;
+    model: string;
 };
-type AIProps<T> = {
-    children: (props: T) => ReactNode;
-    prompt: string;
+interface AIProps<T extends Record<string, unknown>, O extends 'object' | 'array' = 'object'> {
     schema: z.ZodSchema<T> | SchemaObject;
-    model?: typeof defaultModel;
-    output?: 'object' | 'array';
+    prompt: string;
+    model?: ModelType;
+    output?: O;
     count?: number;
     cols?: number;
-    gap?: string;
+    mode?: 'json';
+    stream?: boolean;
+    apiEndpoint?: string;
+    headers?: Record<string, string>;
+    experimental_telemetry?: boolean;
+    experimental_providerMetadata?: boolean;
     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;
+    gap?: string;
+    children: (props: O extends 'array' ? T[] : T) => React.ReactNode;
+}
+export declare function AI<T extends Record<string, unknown>, O extends 'object' | 'array' = 'object'>({ children, prompt, schema: rawSchema, model, output, count, cols, mode, stream, apiEndpoint, headers, experimental_telemetry, experimental_providerMetadata, className, itemClassName, gap, }: AIProps<T, O>): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};
 //# sourceMappingURL=AI.d.ts.map

package/dist/AI.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"AI.d.ts","sourceRoot":"","sources":["../src/AI.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAGvB,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAEvF,KAAK,SAAS,GAAG,MAAM,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE7D,UAAU,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,OAAO,GAAG,QAAQ;IAC1F,MAAM,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,YAAY,CAAA;IACrC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,CAAC,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,OAAO,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;CAClE;AAMD,wBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,QAAQ,GAAG,OAAO,GAAG,QAAQ,EAAE,EAC7F,QAAQ,EACR,MAAM,EACN,MAAM,EAAE,SAAS,EACjB,KAAe,EACf,MAAsB,EACtB,KAAK,EACL,IAAI,EACJ,IAAa,EACb,MAAc,EACd,WAAW,EACX,OAAO,EACP,sBAAsB,EACtB,6BAA6B,EAC7B,SAAS,EACT,aAAa,EACb,GAAY,GACb,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,gIAoGf"}