First commit

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals"
+  
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile.txt

@@ -0,0 +1,69 @@
+# syntax=docker/dockerfile:1.4
+
+# Adapted from https://github.com/vercel/next.js/blob/e60a1e747c3f521fc24dfd9ee2989e13afeb0a9b/examples/with-docker/Dockerfile
+# For more information, see https://nextjs.org/docs/pages/building-your-application/deploying#docker-image
+
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY --link package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY --link  . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# If using yarn comment out above and use below instead
+# RUN yarn build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+  addgroup --system --gid 1001 nodejs; \
+  adduser --system --uid 1001 nextjs
+
+COPY --from=builder --link /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --link --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --link --chown=1001:1001 /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME 0.0.0.0
+
+# Allow the running process to write model files to the cache folder.
+# NOTE: In practice, you would probably want to pre-download the model files to avoid having to download them on-the-fly.
+RUN mkdir -p /app/node_modules/@xenova/.cache/
+RUN chmod 777 -R /app/node_modules/@xenova/
+
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,36 @@
----
-title: Gen Ui
-emoji: 👁
-colorFrom: indigo
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/actions/conversations.tsx

@@ -0,0 +1,74 @@
+'use server';
+
+import { generateText, streamObject } from 'ai';
+import { openai } from '@ai-sdk/openai';
+import { createStreamableUI } from 'ai/rsc';
+import { ReactNode } from 'react';
+import { z } from 'zod';
+import { Product } from '../components/product';
+
+export interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+  display?: ReactNode; // [!code highlight]
+}
+
+export async function Conversations(history: Message[]) {
+  const stream = createStreamableUI(<div>Loadiing..</div>);
+
+  const { text, toolResults } = await generateText({
+    model: openai('gpt-4o'),
+    system: 'You are a friendly weather assistant!',
+    messages: history,
+    tools: {
+      showWeather: {
+        description: 'Show the weather for a given location.',
+        parameters: z.object({
+          city: z.string().describe('The city to show the weather for.'),
+          unit: z
+            .enum(['C', 'F'])
+            .describe('The unit to display the temperature in'),
+        }),
+        execute: async ({ city, unit }) => {
+          stream.done(
+            <div>
+              {city}-{unit}{' '}
+            </div>
+          );
+          return `Here's the weather for ${city}!`;
+        },
+      },
+      showCategory: {
+        description: 'Show the product details for a category.',
+        parameters: z.object({
+          value: z.string().describe('The value.'),
+        }),
+        execute: async ({ value }) => {
+          const response = await fetch(
+            `https://fakestoreapi.com/products/category/${value}`
+          ).then((res) => res.json());
+
+          stream.done(
+            <div>
+              <Product productlist={response} />
+            </div>
+          );
+          return `Here's the category details! ${value}`;
+        },
+      },
+    },
+  });
+
+  console.log('history', history);
+  return {
+    messages: [
+      ...history,
+      {
+        role: 'assistant' as const,
+        content:
+          text || toolResults.map((toolResult) => toolResult.result).join(),
+        display: stream.value,
+      },
+    ],
+  };
+}

app/actions/mixedstate.tsx

@@ -0,0 +1,40 @@
+import { createAI, getAIState,createStreamableUI, streamUI  } from 'ai/rsc';
+import { ReactNode } from 'react';
+import { openai } from '@ai-sdk/openai';
+import { generateText } from 'ai';
+export type AIState = Array<{
+  role: 'user' | 'assistant';
+  content: string;
+}>;
+
+export type UIState = Array<{
+  id: string;
+  role: 'user' | 'assistant';
+  display: ReactNode;
+}>;
+
+async function sendMessage(message: string) {
+  'use server';
+
+  const stream = createStreamableUI(<div>Loading..</div>);
+ 
+  const history:any = getAIState();
+  const response = await generateText({
+    model: openai('gpt-4o'),
+    messages: [...history, { role: 'user', content: message }],
+  });
+
+ 
+  stream.done(<div style={{fontSize: "14px"}}>{response.text}</div>);
+  
+
+  return { text: response.text, display: stream.value};
+}
+
+export const AI = createAI({
+  initialAIState: [] as AIState,
+  initialUIState: [] as UIState,
+  actions: {
+    sendMessage,
+  },
+});

app/actions/mixeduistate.tsx

@@ -0,0 +1,151 @@
+'use server';
+
+import {
+  createAI,
+  getMutableAIState,
+  streamUI,
+  createStreamableUI,
+} from 'ai/rsc';
+import { openai } from '@ai-sdk/openai';
+import { ReactNode } from 'react';
+import { z } from 'zod';
+import { nanoid } from 'nanoid';
+import { streamObject } from 'ai';
+import { NotificationSchema } from './notificationobject';
+import { Partial } from '../components/partial';
+import { Product } from '../components/product';
+
+export interface ServerMessage {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export interface ClientMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  display: ReactNode;
+}
+
+export async function sendMessage1(input: string): Promise<ClientMessage> {
+  'use server';
+
+  //const partialComponent = createStreamableUI(<div>Loading...</div>);
+  const history: any = getMutableAIState();
+  const result = await streamUI({
+    model: openai('gpt-4o'),
+    messages: [...history.get(), { role: 'user', content: input }],
+    text: ({ content, done }) => {
+      if (done) {
+        console.log('done', content);
+        history.done((messages: ServerMessage[]) => [
+          ...messages,
+          { role: 'assistant', content },
+        ]);
+      }
+
+      return <div>{content}-22</div>;
+    },
+
+    tools: {
+      showCategory: {
+        description: 'Show the product details for a category.',
+        parameters: z.object({
+          value: z.string().describe('The value.'),
+        }),
+        generate: async ({ value }) => {
+          console.log('value', value);
+          const response = await fetch(
+            `https://fakestoreapi.com/products/category/${value}`
+          ).then((res) => res.json());
+
+          return (
+            <div>
+              {response.length > 0 ? (
+                <Product productlist={response} />
+              ) : (
+                `No products found for ${value}`
+              )}
+            </div>
+          );
+         
+        },
+      },
+      showWeather: {
+        description: 'Show the weather for a given location.',
+        parameters: z.object({
+          city: z.string().describe('The city to show the weather for.'),
+          unit: z
+            .enum(['C', 'F'])
+            .describe("The unit to display the temperature in"),
+        }),
+        generate: async ({ city, unit }) => {
+          return <div>Heres the weather</div>;
+        },
+      },
+      chart: {
+        description:
+          'You generate specified output for specified duration and show graph type e.g. line,bar',
+        parameters: z.object({
+          charttype: z
+            .string()
+            .describe('The type of the chart, example: line, bar, pie, etc.'),
+        }),
+        generate: async function* ({ charttype }) {
+          yield (
+            <div style={{ color: 'yellow', fontSize: '16px' }}>
+              Preparing for {charttype}...
+            </div>
+          ); // [!code highlight:5]
+          await new Promise((resolve) => setTimeout(resolve, 1200));
+          yield (
+            <div style={{ color: 'yellow', fontSize: '16px' }}>
+              Getting data for {charttype}...
+            </div>
+          );
+          await new Promise((resolve) => setTimeout(resolve, 1200));
+
+          const { partialObjectStream } = await streamObject({
+            model: openai('gpt-4o'),
+            system:
+              'You generate specified output for specified months in India.',
+            prompt: input,
+            schema: NotificationSchema,
+          });
+          //const arr =[]
+          let data;
+          for await (const partialObject of partialObjectStream) {
+            yield (
+              <div className="w-full xs:w-4/5 sm:w-4/5 lg:w-2/5">
+                <Partial partialObject={partialObject} charttype={charttype} />
+              </div>
+            );
+            data = partialObject;
+            //arr.push(partialObject);
+          }
+          //partialComponent.done();
+          return (
+            <div className="w-full xs:w-4/5 sm:w-4/5 lg:w-2/5 ">
+              <Partial partialObject={data} charttype={charttype} />
+            </div>
+          );
+
+          //return <div style={{color: "green", width: "50%"}}>{repositoryName} deployed! <Partial partialObject={arr[arr.length-1]} /></div>;
+        },
+      },
+    },
+  });
+
+  return {
+    id: nanoid(),
+    role: 'assistant',
+    display: result.value,
+  };
+}
+
+export const AI1: any = createAI<ServerMessage[], ClientMessage[]>({
+  actions: {
+    sendMessage1,
+  },
+  initialAIState: [],
+  initialUIState: [],
+});

app/actions/notificationobject.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+import { DeepPartial } from 'ai';
+export const NotificationSchema = z.object({
+    notifications: 
+      z.object({       
+        label: z.string(),
+        months: z.array(z.string()),
+        rates:  z.array(z.number()),
+      })
+    
+  })
+
+  export type PartialNotification = DeepPartial<typeof NotificationSchema>;

app/actions/notifications.tsx

@@ -0,0 +1,37 @@
+'use server';
+
+import { streamObject } from 'ai';
+import { openai } from '@ai-sdk/openai';
+import { createStreamableValue, createStreamableUI } from 'ai/rsc';
+import { z } from 'zod';
+import { NotificationSchema } from './notificationobject';
+import { Partial } from '../components/partial';
+
+export async function Notifications(input: string) {
+  'use server';
+
+  const stream = createStreamableValue();
+  const partialComponent = createStreamableUI(<div>Loading...</div>);
+
+  (async () => {
+    const { partialObjectStream } = await streamObject({
+      model: openai('gpt-4o'),
+      system: 'You generate specified output for specified months in India.',
+      prompt: input,
+      schema: NotificationSchema,
+    });
+
+    //let messages = [{ role: 'user', content: "user1" }, { role: 'assistant', content: "assistant1..." },{ role: 'user', content: "user2" }, { role: 'assistant', content: "" }];
+
+    for await (const partialObject of partialObjectStream) {
+      partialComponent.update(<Partial partialObject={partialObject} charttype='line' />);      
+      //messages = [...messages, { role: 'assistant', content: partialObject.notifications }];
+      stream.update(partialObject);
+    }
+    //console.log(JSON.stringify(messages));
+    partialComponent.done();
+    stream.done();
+  })();
+
+  return { object: stream.value,  notificationComponent: partialComponent.value, };
+}

app/components/chart/linechart.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import {useState} from 'react';
+import { Line, Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement
+);
+
+export const LineChart = ( {lineChartData, charttype}) => {
+  //const   [tempData, setTempdata] = useState(lineChartData);
+  const data = {
+    labels: lineChartData.labels,
+    datasets: [
+      {
+        label: lineChartData.label ??'Gold Price (INR per 10 gm)',
+        data:lineChartData.data,
+        borderColor: 'rgba(75,192,192,1)',
+        backgroundColor: 'rgba(75,192,192,1)',
+        fill: true,
+      },
+    ],
+  };
+
+  const options:any = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: lineChartData.label ?? 'Gold Price (INR per 10 gm) from July to December 2023',
+      },
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: 'yellow', // Change x-axis label color
+        },
+      },
+      y: {
+        beginAtZero: false,
+        ticks: {
+          color: 'yellow', // Change x-axis label color
+        },
+      },
+    },
+  };
+
+  return charttype == "line" ? <Line data={data} options={options} /> : <Bar data={data} options={options} />;
+};
+
+

app/components/mixedcomponent.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useActions, useAIState } from 'ai/rsc';
+import { AI } from '../actions/mixedstate';
+
+export default function MixedComponent() {
+  const { sendMessage } = useActions<typeof AI>();
+  const [messages, setMessages] = useAIState<typeof AI>();
+
+  const handleSubmit = async event => {
+    event.preventDefault();
+    
+    setMessages([
+      ...messages,
+      {  role: 'user', content: event.target.message.value },
+    ]);   
+    const {text, display} = await sendMessage(event.target.message.value);   
+    console.log(display);
+    setMessages((messages) => [...messages, { role: 'assistant', content: text }])
+  };
+  
+  return (
+    <>
+      <ul>
+        {messages.map((message,index) => (
+          <li key={index}>{message.role}:{message.content}
+          <br></br>
+          
+          </li>
+        ))}
+      </ul>
+      <form onSubmit={handleSubmit}>
+        <input type="text" name="message" />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}

app/components/mixeduicomponent.tsx

@@ -0,0 +1,81 @@
+'use client';
+//MixedUIComponent
+
+import { useState } from 'react';
+import { ClientMessage } from '../actions/mixeduistate';
+import { useActions, useUIState } from 'ai/rsc';
+import { nanoid } from 'nanoid';
+
+export default function Home() {
+  const [input, setInput] = useState<string>('Gold price in India from Jan to Jun 2023');
+  const [conversation, setConversation] = useUIState();
+  const { sendMessage1 } = useActions();
+  const [selectedValue, setSelectedValue] = useState('');
+  const handleChange =async  (event) => {
+    if(event.target.value === ''){
+      return;
+    }
+    setSelectedValue(event.target.value);
+   
+    setConversation((currentConversation: ClientMessage[]) => [
+      ...currentConversation,
+      { id: nanoid(), role: 'user', display: event.target.value },
+    ]);
+
+    const message = await sendMessage1(event.target.value);
+
+    setConversation((currentConversation: ClientMessage[]) => [
+      ...currentConversation,
+      message,
+    ]);
+  };
+  return (
+    <div className="h-screen bg-gray-900 text-white  flex-col items-center">
+      <div className="bg-gray-800 w-7/8 max-w-8xl   h-5/6 overflow-y-auto ">
+        {conversation.map(
+          (message: ClientMessage) => (
+            console.log('message', typeof message.display),
+            (
+              <div
+                key={message.id}
+                className={`inline-block px-3 py-2  text-sm           
+          ${
+            message.role === 'user' ? 'bg-blue-600' : 'bg-black-600'
+          } w-full max-w-8xl `}
+              >
+              <pre>  {message.display}</pre>
+              </div>
+            )
+          )
+        )}
+      </div>
+
+      <div>
+        <div className="w-full max-w-xs  my-2 ">
+          
+          <select
+            id="select"
+            value={selectedValue}
+            onChange={handleChange}
+            className=" bg-gray-700 border-none text-white text-xs px-4 py-2 
+             w-full  border border-gray-400 hover:border-gray-500"
+          >
+            <option value="" disabled>
+              Select an option
+            </option>
+            <option value="Longest 5 rivers in world">Longest 5 rivers in world</option>            
+            <option value="Gold price in India from Jan to Jun 2023 draw line chart">Gold price in India from Jan to Jun 2023 draw line chart</option>
+            <option value="Get products for electronics">Get products for electronics</option>
+            <option value="Show me products for jewelery">Show me products for jewelery</option>
+            <option value="Recipe of Pizza">Recipe of Pizza</option>
+            <option value="List out products for men\'s clothing">List out products for mens clothing</option>
+            <option value="For women\'s clothing list all products">For womens clothing list all products</option>
+            <option value="Population in India from Year 2010 to 2023 draw bar chart">Population in India from Year 2010 to 2023 draw bar chart</option>
+            
+          </select>
+       
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/notificationapp.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+import { Notifications } from '../actions/notifications';
+import { readStreamableValue } from 'ai/rsc';
+
+export function Notificationapp() {
+  const [generation, setGeneration] = useState<string>('');
+  const [notify, setNotify] = useState<any>(null);
+  const [text, setText] = useState("Gold Price in India per 10 gm duration Jan 2022 to Dec 2022");
+const onTextChange = (e) => {
+    setText(e.target.value);
+}
+
+  return (
+    <div>
+      <input type="text" value={text} style={{width: "500px"}} onChange={onTextChange}  />
+      <button
+        onClick={async () => {
+          const { object, notificationComponent } = await Notifications(text);
+          setNotify(notificationComponent)
+          for await (const partialObject of readStreamableValue(object)) {
+            if (partialObject) {
+                
+              setGeneration(
+                JSON.stringify(partialObject.notifications, null, 2),
+              );
+            }
+          }
+        }}
+      >
+        Show
+      </button>
+
+      <div className="flex flex-row">
+        <div className="basis-1/2 border-dotted border-2 border-slate-600 rounded-md">
+          <div className='w-3/4 text-sm'>
+        <pre>{generation}</pre>
+        </div>
+        </div>
+        <div className="basis-1/2 border-dotted border-2 border-indigo-600 rounded-md text-sm">
+        {notify} 
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/partial.tsx

@@ -0,0 +1,36 @@
+
+
+import { PartialNotification } from '../actions/notificationobject';
+import { LineChart } from './chart/linechart';
+
+export function Partial({
+  partialObject,
+  charttype,
+}: {
+  partialObject?: PartialNotification,
+  charttype: string,
+}) {
+  
+  let lineData = {
+    label: "",
+    labels: [],
+    data: [],
+  }
+  if(!partialObject.notifications){
+    lineData.labels = [];
+lineData.data = [];
+  }
+  else{
+    lineData.label = partialObject.notifications?.label;
+lineData.labels = partialObject.notifications?.months;
+lineData.data = partialObject.notifications?.rates;
+  }
+  return (
+    <div>
+        
+                    
+              {lineData.labels && lineData.labels.length > 0 && <LineChart lineChartData={lineData} charttype={charttype} />}
+
+    </div>
+  );
+}

app/components/product.tsx

@@ -0,0 +1,23 @@
+
+export function Product({productlist}){
+    return (
+        <div>
+            <table className="table-fixed border-collapse border border-slate-400 p-4">
+            <th className="text-left p-1 pl-4">Category</th>
+            <th className="text-left p-1 pl-4">Title</th>
+            <th className="text-left p-1 pl-4">Price</th>
+            <th className="text-left p-1 pl-4 "></th>
+           
+                {productlist.map((product, index) => (
+                    <tr key={index} className="text-left p-1">
+                        <td className="text-left p-1 pl-4">{product.category}</td>
+                        <td className="text-left p-1 pl-4">{product.title}</td>
+                        <td className="text-left p-1 pl-4">{product.price}</td>
+                        <td className="text-left p-1 pl-4"><button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-1 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Remove</button></td>
+                    </tr>
+                ))}
+            </table>
+        </div>
+    )
+
+}

app/components/weatherconversations.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'react';
+import { Message, Conversations } from '../actions/conversations';
+
+export default function WeatherConversations() {
+  const [conversation, setConversation] = useState<Message[]>([]);
+  const [input, setInput] = useState<string>('get products for electronics');
+
+  const textChange = async (event) => {
+    setInput(event.target.value);
+  };
+
+  const sendMessage = async () => {
+    const { messages } = await Conversations([
+        ...conversation.map(({ role, content }) => ({ role, content })),
+        { role: 'user', content: input }
+    ]);
+    setConversation(messages);
+  };
+
+  return (
+    <div >
+      <div>
+        {conversation.map((message, index) => (
+          <div key={index} className='grid grid-cols-1'>
+            {message.role}: {message.content}
+            {message.display}
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <input
+          type="text"
+          value={input}
+          onChange={textChange}
+          className='bg-white dark:bg-slate-800'
+        />
+        <button  onClick= {sendMessage}>
+            Send Message
+        </button>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,29 @@
+import dynamic from 'next/dynamic';
+import { Notificationapp } from './components/notificationapp';
+import WeatherConversations from './components/weatherconversations';
+import { AI } from './actions/mixedstate';
+import { AI1 } from './actions/mixeduistate';
+import MixedComponent from './components/mixedcomponent';
+import MixedUIComponent from './components/mixeduicomponent';
+import Image from 'next/image';
+const LineChart = dynamic((): any => import('./components/chart/linechart'), {
+  ssr: false,
+});
+
+export default function Home() {
+  return (
+    <main className="min-h-screen flex-col items-center justify-between  bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
+      <header className="bg-gray-800 w-full py-1 border-b border-white">
+        <span className="text-left text-yellow-500 text-2xl font-bold-100 pl-2 inline w-full">
+          Generative UI Demo with AI
+        </span>
+        <sup className="text-white ml-3 italic"> By Sanket Terdal</sup>
+      </header>
+      <div className="flex-1">
+        <AI1>
+          <MixedUIComponent />
+        </AI1>
+      </div>
+    </main>
+  );
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images: {
+        domains: ['storybook7.blob.core.windows.net'],
+      },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "genui-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 next dev",
+    "build": "next build",
+    "start": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/openai": "^0.0.17",
+    "ai": "^3.1.18",
+    "chart.js": "^4.4.3",
+    "cross-env": "^7.0.3",
+    "nanoid": "^5.0.7",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: 'selector',
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}