feat: add weather example

Closes #17

examples/weather-ollama/.env.example

@@ -0,0 +1 @@
+OPENWEATHER_API_KEY=

examples/weather-ollama/.eslintrc.json

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

examples/weather-ollama/.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

examples/weather-ollama/README.md

@@ -0,0 +1,18 @@
+# Weather Ollama
+
+## Usage
+
+1. Create .env file with the following content (and more settings, depending on the providers you want to use):
+    ```sh
+    OPENWEATHER_API_KEY="OPENWEATHER_API_KEY"
+    ```
+
+2. Run the following commands from the root directory of the repo:
+    ```sh
+    pnpm install
+    pnpm build
+    ```
+3. Run the project:
+    ```sh
+   pnpm run dev
+    ```

examples/weather-ollama/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true
+  },
+  "aliases": {
+    "utils": "@/lib/utils",
+    "components": "@/components"
+  }
+}

examples/weather-ollama/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'openweathermap.org'
+      }
+    ]
+  }
+};
+
+export default nextConfig;
+

examples/weather-ollama/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "weather-ollama",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "latest",
+    "@ai-sdk/ui-utils": "latest",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "ai": "latest",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.424.0",
+    "next": "14.2.5",
+    "ollama-ai-provider": "workspace:*",
+    "openweather-api-node": "^3.1.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-spinners": "^0.14.1",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8.4.40",
+    "sass": "^1.77.8",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.5.4"
+  }
+}

examples/weather-ollama/postcss.config.mjs

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

examples/weather-ollama/src/app/actions.tsx

@@ -0,0 +1,33 @@
+'use server'
+
+import { CoreMessage, generateId } from 'ai'
+import { createAI } from 'ai/rsc'
+import { ReactNode } from 'react'
+
+import { submitUserMessage } from '@/lib/ai/submit-user-message'
+
+export type Message = CoreMessage & {
+  id: string
+}
+
+export type AIState = {
+  chatId: string
+  messages: Message[]
+}
+
+export type UIState = {
+  display: ReactNode
+  id: string
+}[]
+
+export type UIActions = {
+  submitUserMessage: typeof submitUserMessage
+}
+
+export const AI = createAI<AIState, UIState, UIActions>({
+  actions: {
+    submitUserMessage,
+  },
+  initialAIState: { chatId: generateId(), messages: [] },
+  initialUIState: [],
+})

examples/weather-ollama/src/app/globals.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/weather-ollama/src/app/layout.tsx

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

examples/weather-ollama/src/app/page.tsx

@@ -0,0 +1,9 @@
+import { Chat } from '@/components/chat'
+
+export default function Home() {
+  return (
+    <>
+      <Chat />
+    </>
+  )
+}

examples/weather-ollama/src/components/chat.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useUIState } from 'ai/rsc'
+import { Bot } from 'lucide-react'
+import { useState } from 'react'
+
+import { AI } from '@/app/actions'
+import { ListMessages } from '@/components/chat/list-messages'
+import { Prompt } from '@/components/chat/prompt'
+import { Avatar } from '@/components/ui/avatar'
+
+export function Chat() {
+  const [messages] = useUIState<typeof AI>()
+  const [input, setInput] = useState('')
+
+  return (
+    <div className="flex flex-col h-screen">
+      <header className="bg-primary text-primary-foreground py-4 px-6 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Avatar className="w-8 h-8">
+            <Bot width={32} height={32} />
+          </Avatar>
+          <h1 className="text-lg font-medium">Chatbot</h1>
+        </div>
+      </header>
+      <ListMessages messages={messages} />
+      <Prompt input={input} setInput={setInput} />
+    </div>
+  )
+}

examples/weather-ollama/src/components/chat/bot-message.tsx

@@ -0,0 +1,15 @@
+import { Bot } from 'lucide-react'
+import { ReactNode } from 'react'
+
+import { Avatar } from '@/components/ui/avatar'
+
+export function BotMessage({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex items-start gap-4">
+      <Avatar className="w-8 h-8">
+        <Bot width={32} height={32} />
+      </Avatar>
+      <div className="bg-muted rounded-lg p-3 max-w-[75%]">{children}</div>
+    </div>
+  )
+}

examples/weather-ollama/src/components/chat/bot-stream-message.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { StreamableValue } from 'ai/rsc'
+import { Bot } from 'lucide-react'
+
+import { Avatar } from '@/components/ui/avatar'
+import { useStreamableText } from '@/lib/hooks/use-streamable-text'
+
+export function BotStreamMessage({
+  content,
+}: {
+  content: string | StreamableValue<string>
+}) {
+  const text = useStreamableText(content)
+
+  return (
+    <div className="flex items-start gap-4">
+      <Avatar className="w-8 h-8">
+        <Bot width={32} height={32} />
+      </Avatar>
+      <div className="bg-muted rounded-lg rounded-tl-none p-3 max-w-[75%]">
+        {text}
+      </div>
+    </div>
+  )
+}

examples/weather-ollama/src/components/chat/list-messages.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react'
+
+import { UIState } from '@/app/actions'
+
+export function ListMessages({
+  messages,
+}: {
+  messages?: UIState
+}): ReactElement {
+  const reversedMessages = messages?.reverse() ?? []
+
+  return (
+    <main className="flex-1 overflow-auto p-4">
+      <div className="max-w-2xl mx-auto space-y-4">
+        {reversedMessages.map((message) => (
+          <div key={message.id}>{message.display}</div>
+        ))}
+      </div>
+    </main>
+  )
+}