@genui-a3/create 0.1.0

package/template/app/page.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import { AppLogo } from '@atoms'
+import Link from 'next/link'
+import { Box, Typography, Card, CardActionArea, Container, Stack } from '@mui/material'
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline'
+import StreamIcon from '@mui/icons-material/Stream'
+import ExtensionIcon from '@mui/icons-material/Extension'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+
+export default function Home() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', bgcolor: 'background.default' }}>
+      <Box
+        component="header"
+        sx={{
+          p: 2,
+          px: 3,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 2,
+          borderBottom: 1,
+          borderColor: 'divider',
+          bgcolor: 'background.paper',
+          zIndex: 10,
+        }}
+      >
+        <AppLogo width={32} height={32} />
+        <Typography variant="h6" fontWeight="bold">
+          A3 Example
+        </Typography>
+      </Box>
+
+      <Box sx={{ flex: 1, p: 3, overflowY: 'auto' }}>
+        <Container maxWidth="lg" sx={{ mt: 5, mb: 10 }}>
+          <Stack spacing={3} alignItems="center" mb={10} textAlign="center">
+            <Typography variant="h3" fontWeight={800} color="text.primary">
+              Welcome to A3 Core
+            </Typography>
+            <Typography variant="h6" color="text.secondary" maxWidth="md">
+              Explore the different communication protocols and frontend implementations available in the A3
+              architecture.
+            </Typography>
+          </Stack>
+
+          <Stack direction={{ xs: 'column', md: 'row' }} spacing={4}>
+            {/* Blocking Chat Card */}
+            <Card
+              elevation={0}
+              sx={{
+                flex: 1,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 4,
+                transition: '0.2s',
+                '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)', boxShadow: 4 },
+              }}
+            >
+              <CardActionArea
+                component={Link}
+                href="/chat"
+                sx={{
+                  p: 4,
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: 2,
+                }}
+              >
+                <Box sx={{ p: 2, bgcolor: 'rgba(37, 99, 235, 0.1)', color: 'primary.main', borderRadius: 2 }}>
+                  <ChatBubbleOutlineIcon fontSize="large" />
+                </Box>
+                <Typography variant="h5" fontWeight="bold">
+                  Blocking Chat
+                </Typography>
+                <Typography variant="body1" color="text.secondary" sx={{ flexGrow: 1 }}>
+                  A synchronous (unary) chat implementation. The client waits for the agent to finish processing
+                  completely before rendering.
+                </Typography>
+                <Stack direction="row" alignItems="center" gap={1} color="primary.main" fontWeight="bold" mt={2}>
+                  Try it out <ArrowForwardIcon fontSize="small" />
+                </Stack>
+              </CardActionArea>
+            </Card>
+
+            {/* Streaming Chat Card */}
+            <Card
+              elevation={0}
+              sx={{
+                flex: 1,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 4,
+                transition: '0.2s',
+                '&:hover': { borderColor: '#9c27b0', transform: 'translateY(-4px)', boxShadow: 4 },
+              }}
+            >
+              <CardActionArea
+                component={Link}
+                href="/stream"
+                sx={{
+                  p: 4,
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: 2,
+                }}
+              >
+                <Box sx={{ p: 2, bgcolor: 'rgba(156, 39, 176, 0.1)', color: '#9c27b0', borderRadius: 2 }}>
+                  <StreamIcon fontSize="large" />
+                </Box>
+                <Typography variant="h5" fontWeight="bold">
+                  Streaming Chat
+                </Typography>
+                <Typography variant="body1" color="text.secondary" sx={{ flexGrow: 1 }}>
+                  A streaming response implementation using Server-Sent Events (SSE). The client renders the agent's
+                  response incrementally as it's being generated.
+                </Typography>
+                <Stack direction="row" alignItems="center" gap={1} color="#9c27b0" fontWeight="bold" mt={2}>
+                  Try it out <ArrowForwardIcon fontSize="small" />
+                </Stack>
+              </CardActionArea>
+            </Card>
+
+            {/* AG-UI Protocol Card */}
+            <Card
+              elevation={0}
+              sx={{
+                flex: 1,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 4,
+                transition: '0.2s',
+                '&:hover': { borderColor: '#2e7d32', transform: 'translateY(-4px)', boxShadow: 4 },
+              }}
+            >
+              <CardActionArea
+                component={Link}
+                href="/agui"
+                sx={{
+                  p: 4,
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: 2,
+                }}
+              >
+                <Box sx={{ p: 2, bgcolor: 'rgba(46, 125, 50, 0.1)', color: '#2e7d32', borderRadius: 2 }}>
+                  <ExtensionIcon fontSize="large" />
+                </Box>
+                <Typography variant="h5" fontWeight="bold">
+                  AG-UI Protocol
+                </Typography>
+                <Typography variant="body1" color="text.secondary" sx={{ flexGrow: 1 }}>
+                  Agentic UI implementation. The agent returns structured semantic UI components alongside its state and
+                  logic, driving the client dynamic interface.
+                </Typography>
+                <Stack direction="row" alignItems="center" gap={1} color="#2e7d32" fontWeight="bold" mt={2}>
+                  Try it out <ArrowForwardIcon fontSize="small" />
+                </Stack>
+              </CardActionArea>
+            </Card>
+          </Stack>
+        </Container>
+      </Box>
+    </Box>
+  )
+}

package/template/app/styled.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components'
+import type { Theme } from '@mui/material/styles'
+
+declare module 'styled-components' {
+  export type DefaultTheme = Theme
+}

package/template/app/theme.ts

@@ -0,0 +1,22 @@
+import { createTheme } from '@mui/material/styles'
+
+export const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#2563eb',
+    },
+    background: {
+      default: '#f9fafb',
+      paper: '#ffffff',
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        html: { maxWidth: '100vw', overflowX: 'hidden' },
+        body: { maxWidth: '100vw', overflowX: 'hidden' },
+        a: { color: 'inherit', textDecoration: 'none' },
+      },
+    },
+  },
+})

package/template/app/types/index.ts

@@ -0,0 +1,8 @@
+import { MESSAGE_SENDER } from '@constants/chat'
+
+export type ChatMessage = {
+  id: string
+  body: string
+  source: (typeof MESSAGE_SENDER)[keyof typeof MESSAGE_SENDER]
+  isStreaming?: boolean
+}

package/template/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+export default nextConfig

package/template/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@genui-a3/example",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ag-ui/client": "0.0.45",
+    "@ag-ui/encoder": "0.0.45",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@genui-a3/core": "^0.1.3",
+    "@mui/icons-material": "7.3.7",
+    "@mui/material": "7.3.7",
+    "next": "16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "styled-components": "6.3.8",
+    "zod": "4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "20.19.0",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3"
+  }
+}

package/template/public/site.webmanifest

@@ -0,0 +1,11 @@
+{
+  "name": "A3 Core Example",
+  "short_name": "A3 Example",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/template/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "baseUrl": ".",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@atoms": ["./app/components/atoms"],
+      "@atoms/*": ["./app/components/atoms/*"],
+      "@components": ["./app/components"],
+      "@components/*": ["./app/components/*"],
+      "@constants": ["./app/constants"],
+      "@constants/*": ["./app/constants/*"],
+      "@molecules": ["./app/components/molecules"],
+      "@molecules/*": ["./app/components/molecules/*"],
+      "@organisms": ["./app/components/organisms"],
+      "@organisms/*": ["./app/components/organisms/*"],
+      "types": ["./app/types"],
+      "types/*": ["./app/types/*"],
+      "@utils": ["./app/utils"],
+      "@utils/*": ["./app/utils/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+  "exclude": ["node_modules", "npm_modules"]
+}