@genui-a3/create 0.1.0

package/template/app/components/atoms/ChatContainer.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import styled from 'styled-components'
+import { Paper } from '@mui/material'
+
+export const ChatContainer = styled(Paper)`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+`

package/template/app/components/atoms/ChatHeader.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import styled from 'styled-components'
+import type { Theme } from '@mui/material/styles'
+
+export const ChatHeader = styled.div`
+  border-bottom: 1px solid ${({ theme }) => (theme as Theme).palette.divider};
+  background-color: ${({ theme }) => (theme as Theme).palette.background.paper};
+  padding: ${({ theme }) => (theme as Theme).spacing(2, 3)};
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`

package/template/app/components/atoms/MessageBubble.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+import { Paper } from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+
+export const MessageBubble = styled(Paper)<{ $isUser: boolean }>`
+  max-width: 80%;
+  padding: ${({ theme }) => (theme as Theme).spacing(1.5, 2)};
+  border-radius: ${({ theme }) => (theme as Theme).spacing(2.5)};
+  ${({ $isUser, theme }) =>
+    $isUser
+      ? `
+    background-color: ${(theme as Theme).palette.primary.main};
+    color: ${(theme as Theme).palette.primary.contrastText};
+    border-bottom-right-radius: ${(theme as Theme).spacing(0.5)};
+  `
+      : `
+    background-color: ${(theme as Theme).palette.grey[200]};
+    color: ${(theme as Theme).palette.text.primary};
+    border-bottom-left-radius: ${(theme as Theme).spacing(0.5)};
+  `}
+`

package/template/app/components/atoms/index.ts

@@ -0,0 +1,4 @@
+export { AppLogo } from './AppLogo'
+export { MessageBubble } from './MessageBubble'
+export { ChatContainer } from './ChatContainer'
+export { ChatHeader } from './ChatHeader'

package/template/app/components/molecules/ChatInput.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import styled from 'styled-components'
+import { TextField, Button, Box } from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+import SendIcon from '@mui/icons-material/Send'
+
+type Props = {
+  onSubmit: (text: string) => void | Promise<void>
+  disabled?: boolean
+  placeholder?: string
+}
+
+const InputContainer = styled(Box)`
+  border-top: 1px solid ${({ theme }) => (theme as Theme).palette.divider};
+  background-color: ${({ theme }) => (theme as Theme).palette.background.paper};
+  padding: ${({ theme }) => (theme as Theme).spacing(2)};
+  flex-shrink: 0;
+`
+
+const InputForm = styled.form`
+  display: flex;
+  gap: ${({ theme }) => (theme as Theme).spacing(1.5)};
+`
+
+export function ChatInput({ onSubmit, disabled, placeholder = 'Type a message...' }: Props) {
+  const [value, setValue] = useState('')
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+      const trimmed = value.trim()
+      if (!trimmed || disabled) return
+      void onSubmit(trimmed)
+      setValue('')
+    },
+    [value, disabled, onSubmit],
+  )
+
+  return (
+    <InputContainer>
+      <InputForm onSubmit={handleSubmit}>
+        <TextField
+          fullWidth
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled}
+          variant="outlined"
+          size="small"
+          data-testid="chat-input"
+        />
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={disabled || !value.trim()}
+          startIcon={<SendIcon />}
+          data-testid="chat-send"
+        >
+          Send
+        </Button>
+      </InputForm>
+    </InputContainer>
+  )
+}

package/template/app/components/molecules/ChatMessage.tsx

@@ -0,0 +1,41 @@
+import styled, { keyframes } from 'styled-components'
+import { Typography } from '@mui/material'
+import { MessageBubble } from '@atoms'
+import { MESSAGE_SENDER } from '@constants/chat'
+import type { ChatMessage as ChatMessageType } from 'types'
+
+type Props = { message: ChatMessageType }
+
+const MessageRow = styled.div<{ $isUser: boolean }>`
+  display: flex;
+  justify-content: ${({ $isUser }) => ($isUser ? 'flex-end' : 'flex-start')};
+`
+
+const blink = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+`
+
+const StreamingCursor = styled.span`
+  display: inline-block;
+  width: 6px;
+  height: 14px;
+  margin-left: 2px;
+  background-color: currentColor;
+  vertical-align: text-bottom;
+  animation: ${blink} 0.8s step-end infinite;
+`
+
+export function ChatMessage({ message }: Props) {
+  const isUser = message?.source === MESSAGE_SENDER.USER
+  return (
+    <MessageRow $isUser={isUser} data-testid="chat-message">
+      <MessageBubble $isUser={isUser} elevation={0}>
+        <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+          {message.body.trim()}
+          {message.isStreaming && <StreamingCursor />}
+        </Typography>
+      </MessageBubble>
+    </MessageRow>
+  )
+}

package/template/app/components/molecules/index.ts

@@ -0,0 +1,2 @@
+export { ChatMessage } from './ChatMessage'
+export { ChatInput } from './ChatInput'

package/template/app/components/organisms/Chat.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Typography, CircularProgress } from '@mui/material'
+import { ChatMessageList } from './ChatMessageList'
+import { ChatContainer, ChatHeader } from '@atoms'
+import { ChatInput } from '@molecules'
+import type { ChatMessage as ChatMessageType } from 'types'
+
+const SESSION_ID = 'demo-session'
+
+type ChatApiResponse = {
+  response: string
+  activeAgentId: string | null
+  nextAgentId: string | null
+  state: Record<string, unknown>
+  goalAchieved: boolean
+}
+
+export function Chat() {
+  const [messages, setMessages] = useState<ChatMessageType[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleSubmit = useCallback(async (text: string) => {
+    const userMsg: ChatMessageType = {
+      id: crypto.randomUUID(),
+      body: text,
+      source: 'user',
+    }
+    setMessages((prev) => [...prev, userMsg])
+    setIsLoading(true)
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, sessionId: SESSION_ID }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error: ${response.status}`)
+      }
+
+      const data = (await response.json()) as ChatApiResponse
+
+      const assistantMsg: ChatMessageType = {
+        id: crypto.randomUUID(),
+        body: data.response,
+        source: 'assistant',
+      }
+      setMessages((prev) => [...prev, assistantMsg])
+    } catch (error) {
+      console.error('Chat API error:', error)
+      const errorMsg: ChatMessageType = {
+        id: crypto.randomUUID(),
+        body: 'Sorry, something went wrong. Please try again.',
+        source: 'assistant',
+      }
+      setMessages((prev) => [...prev, errorMsg])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  return (
+    <ChatContainer elevation={0}>
+      <ChatHeader>
+        <Typography variant="h6" component="h2">
+          Chat
+        </Typography>
+        {isLoading && <CircularProgress size={16} />}
+      </ChatHeader>
+      <ChatMessageList messages={messages} />
+      <ChatInput onSubmit={handleSubmit} disabled={isLoading} />
+    </ChatContainer>
+  )
+}

package/template/app/components/organisms/ChatMessageList.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useRef, useEffect } from 'react'
+import styled from 'styled-components'
+import { Box } from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+import { ChatMessage } from '@molecules'
+import type { ChatMessage as ChatMessageType } from 'types'
+
+type Props = { messages: ChatMessageType[] }
+
+const MessageListContainer = styled(Box)`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${({ theme }) => (theme as Theme).spacing(2)};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => (theme as Theme).spacing(1.5)};
+`
+
+export function ChatMessageList({ messages }: Props) {
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const lastMessage = messages[messages.length - 1]
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages.length, lastMessage?.body])
+
+  return (
+    <MessageListContainer>
+      {messages.map((m) => (
+        <ChatMessage key={m.id} message={m} />
+      ))}
+      <div ref={bottomRef} />
+    </MessageListContainer>
+  )
+}

package/template/app/components/organisms/PageLayout.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react'
+import { AppLogo } from '@atoms'
+import { Box, Typography, Button } from '@mui/material'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import Link from 'next/link'
+
+interface AppPageLayoutProps {
+  title: string
+  children: ReactNode
+}
+
+export function PageLayout({ title, children }: AppPageLayoutProps) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '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',
+        }}
+      >
+        <AppLogo width={32} height={32} />
+        <Typography variant="h6" fontWeight="bold" sx={{ flexGrow: 1 }}>
+          {title}
+        </Typography>
+        <Button component={Link} href="/" variant="text" startIcon={<ArrowBackIcon />} sx={{ color: 'text.secondary' }}>
+          Back to Home
+        </Button>
+      </Box>
+      <Box sx={{ flex: 1, p: 3, display: 'flex', justifyContent: 'center', overflow: 'hidden' }}>
+        <Box sx={{ width: '100%', maxWidth: 'md', height: '100%', display: 'flex', flexDirection: 'column' }}>
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/template/app/components/organisms/StreamChat.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { useState, useCallback, useRef } from 'react'
+import { Typography } from '@mui/material'
+import { ChatMessageList } from './ChatMessageList'
+import { ChatContainer, ChatHeader } from '@atoms'
+import { ChatInput } from '@molecules'
+import type { ChatMessage as ChatMessageType } from 'types'
+import { EventType } from '@ag-ui/client'
+
+const SESSION_ID = 'demo-stream-session'
+
+type StreamEvent = {
+  type: EventType
+  delta?: string
+  agentId?: string
+  result?: Record<string, unknown>
+  message?: string
+  content?: string
+  name?: string
+  value?: Record<string, unknown>
+}
+
+export function StreamChat() {
+  const [messages, setMessages] = useState<ChatMessageType[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const assistantIdRef = useRef<string>('')
+
+  const handleSubmit = useCallback(async (text: string) => {
+    const userMsg: ChatMessageType = {
+      id: crypto.randomUUID(),
+      body: text,
+      source: 'user',
+    }
+    setMessages((prev) => [...prev, userMsg])
+    setIsLoading(true)
+
+    // Create a placeholder assistant message for streaming into
+    let assistantId = crypto.randomUUID()
+    assistantIdRef.current = assistantId
+
+    const streamingMsg: ChatMessageType = {
+      id: assistantId,
+      body: '',
+      source: 'assistant',
+      isStreaming: true,
+    }
+    setMessages((prev) => [...prev, streamingMsg])
+
+    try {
+      const response = await fetch('/api/stream', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, sessionId: SESSION_ID }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error: ${response.status}`)
+      }
+
+      const reader = response.body?.getReader()
+      if (!reader) throw new Error('No response body')
+
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+
+        // Process complete SSE lines
+        const lines = buffer.split('\n')
+        buffer = lines.pop() ?? ''
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue
+          const data = line.slice(6)
+          if (data === '[DONE]') continue
+
+          try {
+            const event = JSON.parse(data) as StreamEvent
+
+            if (event.type === EventType.TEXT_MESSAGE_CONTENT && event.delta) {
+              setIsTransitioning(false)
+              setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, body: m.body + event.delta } : m)))
+            } else if (event.type === EventType.CUSTOM && event.name === 'AgentTransition') {
+              const prevAssistantId = assistantId
+              assistantId = crypto.randomUUID()
+              assistantIdRef.current = assistantId
+              setIsTransitioning(true)
+              setMessages((prev) => {
+                const updated = prev.map((m) => (m.id === prevAssistantId ? { ...m, isStreaming: false } : m))
+                return [...updated, { id: assistantId, body: '', source: 'assistant', isStreaming: true }]
+              })
+            } else if (event.type === EventType.RUN_FINISHED) {
+              setIsTransitioning(false)
+              setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, isStreaming: false } : m)))
+            } else if (event.type === EventType.RUN_ERROR) {
+              setIsTransitioning(false)
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantId
+                    ? { ...m, body: m.body || 'Sorry, something went wrong.', isStreaming: false }
+                    : m,
+                ),
+              )
+            }
+          } catch {
+            // Skip malformed JSON lines
+          }
+        }
+      }
+
+      // Ensure streaming flag is cleared
+      setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, isStreaming: false } : m)))
+    } catch (error) {
+      console.error('Chat stream error:', error)
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantId
+            ? { ...m, body: m.body || 'Sorry, something went wrong. Please try again.', isStreaming: false }
+            : m,
+        ),
+      )
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  return (
+    <ChatContainer elevation={0}>
+      <ChatHeader>
+        <Typography variant="h6" component="h2">
+          Chat (Streaming)
+        </Typography>
+      </ChatHeader>
+      <ChatMessageList messages={messages} />
+      {isTransitioning && (
+        <Typography variant="caption" color="textSecondary" sx={{ px: 2, pb: 1, fontStyle: 'italic' }}>
+          Agent transition in progress...
+        </Typography>
+      )}
+      <ChatInput onSubmit={handleSubmit} disabled={isLoading} />
+    </ChatContainer>
+  )
+}

package/template/app/components/organisms/index.ts

@@ -0,0 +1,4 @@
+export { Chat } from './Chat'
+export { ChatMessageList } from './ChatMessageList'
+export { StreamChat } from './StreamChat'
+export { PageLayout } from './PageLayout'

package/template/app/constants/chat.ts

@@ -0,0 +1,4 @@
+export const MESSAGE_SENDER = {
+  USER: 'user',
+  ASSISTANT: 'assistant',
+}

package/template/app/icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<defs>
+<style>
+@media (prefers-color-scheme: dark) {
+  .logo-mark { fill: #ffffff; }
+}
+</style>
+</defs>
+<g>
+<path class="logo-mark" d="M 560.50 870.11 C544.60,872.39 493.52,873.54 477.50,871.98 C429.64,867.32 381.89,853.57 340.50,832.53 C316.53,820.34 296.91,807.54 274.00,789.15 C261.51,779.12 236.58,754.18 225.88,741.00 C180.72,685.39 153.06,618.33 146.08,547.58 C144.70,533.59 144.69,497.56 146.06,483.42 C151.82,424.12 172.58,365.85 205.33,317.00 C257.37,239.38 349.03,180.93 442.00,166.07 C464.04,162.55 478.67,161.69 505.88,162.29 C555.48,163.38 594.16,171.21 639.00,189.25 C659.38,197.45 694.34,215.75 702.79,222.64 L 705.07 224.50 L 699.18 234.00 C695.94,239.23 690.48,248.11 687.05,253.75 C683.61,259.39 680.44,264.00 679.99,264.00 C679.54,264.00 674.52,261.04 668.84,257.42 C655.11,248.69 625.53,234.22 610.00,228.66 C583.75,219.25 553.35,212.43 527.00,210.05 C512.11,208.70 478.67,208.71 464.00,210.07 C448.87,211.47 421.38,216.98 407.00,221.49 C359.48,236.39 317.14,262.02 281.44,297.50 C258.31,320.48 241.26,343.77 226.14,373.00 C202.42,418.87 191.69,463.62 191.74,516.50 C191.78,555.23 197.10,585.98 210.10,622.48 C215.21,636.83 229.38,665.53 238.40,679.79 C258.58,711.72 284.51,739.87 314.60,762.50 C358.47,795.49 416.85,818.66 475.00,826.15 C490.90,828.19 536.15,827.93 552.00,825.69 C589.08,820.47 619.66,811.35 651.80,795.94 C758.47,744.79 825.34,642.74 828.69,526.00 C830.16,474.91 818.90,425.90 794.39,376.67 C790.88,369.61 788.00,363.68 788.00,363.49 C788.00,362.88 830.91,349.00 832.81,349.00 C834.20,349.00 836.30,352.42 841.26,362.75 C849.43,379.78 850.04,381.23 856.16,398.49 C887.34,486.35 882.15,583.99 841.89,667.00 C819.83,712.49 793.79,746.96 757.00,779.42 C700.79,829.00 634.78,859.47 560.50,870.11 ZM 335.80 648.00 L 331.50 660.50 L 297.25 660.76 C278.41,660.91 263.00,660.77 263.00,660.45 C263.00,659.86 278.07,617.38 291.17,581.00 C295.04,570.28 308.24,533.38 320.52,499.00 C332.80,464.62 347.87,422.55 354.01,405.50 C360.15,388.45 366.62,370.45 368.39,365.50 L 371.61 356.50 L 409.10 356.24 L 446.59 355.98 L 457.22 385.74 C463.07,402.11 475.32,436.42 484.45,462.00 C493.58,487.58 502.36,512.10 503.97,516.50 C505.58,520.90 515.27,547.90 525.51,576.50 C535.75,605.10 546.52,635.12 549.43,643.22 C552.35,651.31 554.49,658.17 554.20,658.47 C553.91,658.76 537.97,659.00 518.78,659.00 L 483.90 659.00 L 482.58 655.75 C481.85,653.96 477.26,640.69 472.38,626.26 L 463.50 600.02 L 352.45 600.00 L 346.28 617.75 C342.88,627.51 338.17,641.12 335.80,648.00 ZM 687.50 661.35 C660.93,665.46 637.94,663.57 615.06,655.41 C601.27,650.49 591.03,644.01 580.37,633.46 C572.36,625.53 570.61,623.14 566.13,613.96 C560.20,601.81 557.14,589.54 556.76,576.32 L 556.50 567.50 L 616.57 566.97 L 617.62 574.74 C620.91,598.97 640.94,614.52 666.50,612.68 C689.18,611.04 704.64,597.72 707.93,576.97 C709.92,564.44 706.02,552.13 697.07,542.67 C687.39,532.43 676.26,529.04 652.23,529.02 L 636.96 529.00 L 637.23 504.75 L 637.50 480.50 L 654.00 479.93 C674.62,479.21 680.48,477.31 690.26,468.16 C697.55,461.34 700.26,455.37 700.77,445.00 C701.35,433.25 698.88,426.59 691.06,418.89 C682.94,410.89 676.70,408.61 663.00,408.61 C649.61,408.61 643.48,410.81 635.00,418.66 C628.14,425.01 625.48,428.98 622.42,437.42 L 620.22 443.50 L 591.93 443.77 C576.36,443.91 563.30,443.69 562.90,443.27 C561.92,442.23 564.65,426.97 567.16,419.51 C578.07,387.00 606.35,365.08 645.92,358.47 C659.23,356.24 682.31,356.90 695.19,359.88 C714.30,364.30 729.13,372.16 741.60,384.49 C755.80,398.54 761.90,412.81 762.75,434.04 C763.17,444.62 762.92,447.89 761.13,455.04 C756.76,472.50 747.16,486.30 733.31,495.04 C729.72,497.32 727.16,499.52 727.64,499.94 C728.11,500.37 731.08,501.76 734.24,503.03 C747.92,508.57 761.40,522.70 767.11,537.47 C771.91,549.87 773.33,559.36 772.69,574.50 C772.04,589.80 770.30,597.27 764.55,609.50 C751.70,636.85 723.57,655.78 687.50,661.35 ZM 370.99 545.75 C371.00,546.73 379.19,547.00 408.61,547.00 C438.28,547.00 446.12,546.74 445.75,545.75 C445.49,545.06 437.02,519.64 426.93,489.25 C416.83,458.86 408.31,434.00 407.99,434.00 C407.33,434.00 370.98,543.79 370.99,545.75 Z" fill="rgb(4,4,4)"/>
+<path d="M 806.90 322.97 C785.45,328.12 765.24,322.48 749.97,307.09 C737.88,294.91 733.00,282.92 733.00,265.40 C733.00,254.57 734.84,247.01 739.72,237.71 C746.39,225.02 759.41,213.62 772.68,208.85 C780.93,205.88 799.11,205.17 807.92,207.47 C830.44,213.34 847.16,231.12 851.67,253.99 C855.45,273.14 849.31,292.70 835.02,307.04 C826.17,315.92 818.73,320.14 806.90,322.97 Z" fill="rgb(248,175,81)"/>
+</g>
+</svg>

package/template/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from 'next'
+import { ThemeProvider } from './ThemeProvider'
+
+export const metadata: Metadata = {
+  title: 'A3 Core Example',
+  description: 'Example application for @genui-a3/core',
+  icons: [
+    { rel: 'icon', url: '/favicon.ico', type: 'image/x-icon', sizes: '32x32', media: '(prefers-color-scheme: light)' },
+    {
+      rel: 'icon',
+      url: '/favicon-dark.ico',
+      type: 'image/x-icon',
+      sizes: '32x32',
+      media: '(prefers-color-scheme: dark)',
+    },
+    { rel: 'icon', url: '/icon.svg', type: 'image/svg+xml', media: '(prefers-color-scheme: light)' },
+    { rel: 'icon', url: '/icon.svg', type: 'image/svg+xml', media: '(prefers-color-scheme: dark)' },
+    { rel: 'apple-touch-icon', url: '/apple-icon.png', media: '(prefers-color-scheme: light)' },
+    { rel: 'apple-touch-icon', url: '/apple-icon-dark.png', media: '(prefers-color-scheme: dark)' },
+  ],
+  manifest: '/site.webmanifest',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}