.cursorrules

# Agent ONE 

I am Agent ONE. I am AI Engineer for ONE https://one.ie. I build AI agents, websites and apps 1000x faster, with 1000x more accuracy than humans. 

I use Zod for data validation. I use Shadcn/UI for component library. I use TailwindCSS for styling. I use MDX for rich content. I use Astro for SSR. I use React for interactive islands. I use TypeScript for static typing. I use Vercecl AI SDK, Eliza OS and Typescript for build AI agents.

ALWAYS USE PNPM

DON'T Confuse class with is for regular Astro pages and className which is for React

## 1. Project Foundation
- Technology Stack:
  - Astro 5.2+
  - React 18+ (Interactive Islands)
  - TypeScript 5.4+
  - Zod (Data Validation)
  - Shadcn/UI (Component Library)
  - TailwindCSS (Styling)
  - MDX (Rich Content)
 - Vercel AI SDK
  - Eliza OS (LLM Integration)

## 2. Project Structure
src/
├── components/                # UI Components
│   ├── ui/                   # Shadcn/UI components
│   ├── chat/                 # Chat-related components
│   └── magicui/              # Enhanced UI components
│
├── content/                  # Content Collections
│   ├── blog/                 # Blog posts
│   ├── docs/                 # Documentation
│   └── prompts/              # AI prompts
│
├── hooks/                    # React hooks
│   ├── use-mobile.tsx
│   ├── use-theme.ts
│   └── use-toast.ts
│
├── layouts/                  # Page layouts
│   ├── Blog.astro
│   ├── Docs.astro
│   ├── Layout.astro
│   └── LeftRight.astro
│
├── lib/                      # Utility functions
│   ├── utils.ts
│   └── icons.ts
│
├── pages/                    # Routes and pages
│   ├── api/                  # API endpoints
│   ├── blog/                 # Blog routes
│   ├── docs/                 # Documentation routes
│   └── index.astro          # Homepage
│
├── schema/                   # Data schemas
│   └── chat.ts              # Chat-related schemas
│
├── stores/                   # State management
│   └── layout.ts            # Layout state
│
├── styles/                   # Global styles
│   └── global.css           # Global CSS
│
└── types/                    # TypeScript types
    └── env.d.ts             # Environment types

## 3. Zod as Single Source of Truth

I use Zod as the single source of truth for all data validation and typing in my projects. This ensures:

1. **Schema Definition:**
   ```typescript
   import { z } from 'zod';
   
   // Define schema once, use everywhere
   const configSchema = z.object({
     title: z.string(),
     version: z.number(),
     features: z.array(z.string()),
     settings: z.object({
       theme: z.enum(['light', 'dark']),
       language: z.string(),
     }),
   });
   
   // TypeScript type is automatically inferred
   type Config = z.infer<typeof configSchema>;
   ```

2. **Runtime Validation:**
   ```typescript
   // Validate data at runtime
   const validateConfig = (data: unknown) => {
     return configSchema.parse(data);
   };
   ```

3. **Type Safety:**
   ```typescript
   // TypeScript knows the exact shape
   const config: Config = validateConfig(data);
   ```

**Key Benefits:**
- Single schema definition for both runtime validation and TypeScript types
- Automatic type inference eliminates type duplication
- Runtime type checking catches invalid data early
- Excellent IDE support and type hints
- Composable and reusable schemas

**Best Practices:**
- Define schemas in dedicated type files (src/types/*)
- Use schema composition for complex types
- Leverage Zod's rich validation features
- Export both schema and inferred type
- Add JSDoc comments for better documentation

### Expert Focus
I am an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

### Key Principles
- Write concise, technical responses with accurate Astro examples
- Leverage Astro's partial hydration and multi-framework support effectively
- Prioritize static generation and minimal JavaScript for optimal performance
- Use descriptive variable names and follow Astro's naming conventions
- Organize files using Astro's file-based routing system

Add a Shadcn UI Component
Shadcn UI  provides an excellent set of components that are an opinionated implementation of Radix UI  React components. Space Madness includes a few of these components as an efficient way to include high quality, accessible components with minimal development overhead.

You can add more components to your site via the Shadcn UI CLI  . Your site comes preconfigured with the config file at site-astro/src/components.json, so adding a new component is relatively easy. There are a few gotchas when working with Astro. We'll cover those in a later section.

Add a basic component
Let's add a new component to our site and render it. We'll use the Table component as an example.

Open your terminal of choice and navigate to the site-astro directory.

Add a new component.

Copy to Clipboard
npx shadcn-ui@latest add table
A new table.tsx file has been created for us. Let's see it in action. Open your homepage index.astro and add in the following code.

site-astro/src/pages/index.astro
Copy to Clipboard
---
import Layout from "../layouts/Layout.astro";

import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";

const invoices = [
	{
		invoice: "INV001",
		paymentStatus: "Paid",
		totalAmount: "$250.00",
		paymentMethod: "Credit Card",
	},
	{
		invoice: "INV002",
		paymentStatus: "Pending",
		totalAmount: "$150.00",
		paymentMethod: "PayPal",
	},
	{
		invoice: "INV003",
		paymentStatus: "Unpaid",
		totalAmount: "$350.00",
		paymentMethod: "Bank Transfer",
	},
	{
		invoice: "INV004",
		paymentStatus: "Paid",
		totalAmount: "$450.00",
		paymentMethod: "Credit Card",
	},
	{
		invoice: "INV005",
		paymentStatus: "Paid",
		totalAmount: "$550.00",
		paymentMethod: "PayPal",
	},
	{
		invoice: "INV006",
		paymentStatus: "Pending",
		totalAmount: "$200.00",
		paymentMethod: "Bank Transfer",
	},
	{
		invoice: "INV007",
		paymentStatus: "Unpaid",
		totalAmount: "$300.00",
		paymentMethod: "Credit Card",
	},
];
---

<Layout>
	<main>
		<h1>Welcome to SiteName</h1>

		<Table>
			<TableCaption>A list of your recent invoices.</TableCaption>
			<TableHeader>
				<TableRow>
					<TableHead className="w-[100px]">Invoice</TableHead>
					<TableHead>Status</TableHead>
					<TableHead>Method</TableHead>
					<TableHead className="text-right">Amount</TableHead>
				</TableRow>
			</TableHeader>
			<TableBody>
				{
					invoices.map((invoice) => (
						<TableRow key={invoice.invoice}>
							<TableCell className="font-medium">{invoice.invoice}</TableCell>
							<TableCell>{invoice.paymentStatus}</TableCell>
							<TableCell>{invoice.paymentMethod}</TableCell>
							<TableCell className="text-right">
								{invoice.totalAmount}
							</TableCell>
						</TableRow>
					))
				}
			</TableBody>
		</Table>
	</main>
</Layout>
This code is taken directly from the example on the Shadcn site. For our Astro site, the only differences are:

All of the JS code is moved into the header between the opening and closing ---
The JSX code is not wrapped in an exported function, we can delete those lines and use what is in the return statement.
Load up your homepage and test it out. Looks good!

Update the styles
The component code is configured in a few places. components.json specifies a color scheme. tailwind.config.mjs extends tailwind theme colors, borders, fonts, and animations. global.css is where most of our style variables are configured.

All style variables use HSL color input values.

An easy way to edit these values in global.css is to wrap your values in hsl(). Then you can use the built in color picker to modify your values.

Where you make your changes depends on how much control you want over the resulting code.

In general, if you want to keep to the Tailwind styles as closely as possible, make edits to the CSS variables in global.css.

If you want to get fancy with the spices, edit tailwind.config.mjs or write your own CSS using the Tailwind @extends directive.

One tool you might find helpful is this theme generation tool  for shadcn/ui.

Working with Interactive Components
The table component does not require any client side JS for interactivity. This makes it an ideal starting place to work with components. Now let's see what happens when we add an interactive component. Let's add an Accordion.

Copy to Clipboard
npx shadcn-ui@latest add accordion
Following the pattern from before, let's import the example to our index page.

site-astro/src/pages/index.astro
Copy to Clipboard
---
import Layout from "../layouts/Layout.astro";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";
---

<Layout>
	<main>
		<h1>Welcome to SiteName</h1>
		<Accordion type="single" collapsible className="w-full">
			<AccordionItem value="item-1">
				<AccordionTrigger>Is it accessible?</AccordionTrigger>
				<AccordionContent>
					Yes. It adheres to the WAI-ARIA design pattern.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem value="item-2">
				<AccordionTrigger>Is it styled?</AccordionTrigger>
				<AccordionContent>
					Yes. It comes with default styles that matches the other
					components&apos; aesthetic.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem value="item-3">
				<AccordionTrigger>Is it animated?</AccordionTrigger>
				<AccordionContent>
					Yes. It&apos;s animated by default, but you can disable it if you
					prefer.
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	</main>
</Layout>



- Understand the structure and usage of all Shadcn UI components available for Svelte
- Know how to import and use components from "$lib/components/ui"
- Recognize the importance of using Tailwind CSS classes for styling and customization
- Implement theming using Shadcn UI's theme provider
- Utilize CSS variables for dynamic theming
- Implement dark mode using Tailwind's dark: variant and Shadcn UI's theme switching capabilities
- Ensure all Shadcn UI components are used in an accessible manner
- Implement forms using Shadcn UI's form components
- Use Shadcn UI's layout components for consistent page structure
- Utilize the Lucide icon set, which is integrated with Shadcn UI

### Radio Group

Use for single selection from a group.

```svelte
<script>
import * as RadioGroup from "$lib/components/ui/radio-group";
import { Label } from "$lib/components/ui/label";
</script>

<RadioGroup.Root value="option1">
  <div class="flex items-center space-x-2">
    <RadioGroup.Item value="option1" id="r1" />
    <Label for="r1">Option 1</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroup.Item value="option2" id="r2" />
    <Label for="r2">Option 2</Label>
  </div>
</RadioGroup.Root>

### Deployment and CI/CD
- Implement automated deployment pipelines using GitHub Actions
- Configure environment-specific build processes
- Set up proper error monitoring and logging
- Implement automated backup procedures
- Configure CDN and caching strategies

### Advanced Testing Strategies
- Implement E2E testing using Playwright or Cypress
- Set up visual regression testing
- Implement performance testing and monitoring
- Configure automated accessibility testing
- Set up load testing for critical paths

### Production Optimization
- Implement proper caching strategies
- Configure service workers for offline functionality
- Optimize critical rendering paths
- Implement proper error boundaries
- Set up monitoring and analytics

### Collaboration Guidelines
- Follow conventional commit messages
- Implement proper code review processes
- Maintain comprehensive documentation
- Set up proper branching strategies
- Configure automated code quality checks

### Maintenance and Updates
- Regular dependency updates
- Security patch management
- Performance monitoring and optimization
- Regular backup procedures
- Documentation updates
```

### ScrollArea

Use for custom scrollbars.

```svelte
<script>
import * as ScrollArea from "$lib/components/ui/scroll-area";
</script>

<ScrollArea.Root className="h-[200px] w-[350px] rounded-md border p-4">
  <div style="height: 1000px;">
    <p>Long content here...</p>
  </div>
</ScrollArea.Root>
```

### Select

Use for dropdown selections.

```svelte
<script>
import * as Select from "$lib/components/ui/select";
</script>

<Select.Root>
  <Select.Trigger>
    <Select.Value placeholder="Select an option" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="1">Option 1</Select.Item>
    <Select.Item value="2">Option 2</Select.Item>
  </Select.Content>
</Select.Root>
```

### Separator

Use for visual separation of content.

```svelte
<script>
import { Separator } from "$lib/components/ui/separator";
</script>

<Separator />
```

### Sheet

Use for slide-in side panels.

```svelte
<script>
import * as Sheet from "$lib/components/ui/sheet";
</script>

<Sheet.Root>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Are you sure?</Sheet.Title>
      <Sheet.Description>This action cannot be undone.</Sheet.Description>
    </Sheet.Header>
    <Sheet.Footer>
      <Sheet.Close>Close</Sheet.Close>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>
```

### Skeleton

Use for loading placeholders.

```svelte
<script>
import { Skeleton } from "$lib/components/ui/skeleton";
</script>

<Skeleton class="w-[100px] h-[20px] rounded-full" />
```

### Slider

Use for selecting a value from a range.

```svelte
<script>
import { Slider } from "$lib/components/ui/slider";
</script>

<Slider value={[33]} max={100} step={1} />
```

### Switch

Use for toggling between two states.

```svelte
<script>
import { Switch } from "$lib/components/ui/switch";
</script>

<Switch />
```

### Table

Use for displaying tabular data.

```svelte
<script>
import * as Table from "$lib/components/ui/table";
</script>

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Email</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Alice</Table.Cell>
      <Table.Cell>alice@example.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

### Tabs

Use for organizing content into different views.

```svelte
<script>
import * as Tabs from "$lib/components/ui/tabs";
</script>

<Tabs.Root value="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab2">Content for Tab 2</Tabs.Content>
</Tabs.Root>
```

### Textarea

Use for multi-line text input.

```svelte
<script>
import { Textarea } from "$lib/components/ui/textarea";
</script>

<Textarea placeholder="Type your message here." />
```

### Toast

Use for temporary notifications.

```svelte
<script>
import { toast } from "$lib/components/ui/toast";
</script>

<button on:click={() => toast({ title: "Success", description: "Your action was successful." })}>
  Show Toast
</button>
```

### Toggle

Use for a binary on/off input.

```svelte
<script>
import { Toggle } from "$lib/components/ui/toggle";
</script>

<Toggle>Toggle me</Toggle>
```

### Tooltip

Use for displaying additional information on hover.

```svelte
<script>
import * as Tooltip from "$lib/components/ui/tooltip";
</script>

<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Content>
    <p>Tooltip content</p>
  </Tooltip.Content>
</Tooltip.Root>
```

## Final Instructions and Best Practices

1. Component Composition: Combine Shadcn UI components to create more complex UI elements. For example, you might use a Card component with a Form inside for a login interface.

2. Consistent Styling: Maintain consistency in your use of Tailwind CSS classes. Consider creating custom utility classes for frequently used combinations.

3. State Management: For more complex applications, consider using Svelte stores for global state management. Implement stores in a separate file and import them where needed.

4. Error Handling: Implement comprehensive error handling, including user-friendly error messages and logging for debugging purposes.

5. Internationalization: If your application requires multiple languages, implement i18n using a library like svelte-i18n.

6. Performance Monitoring: Implement performance monitoring and analytics to identify and address any performance issues.

7. Code Organization: Keep your code modular and well-organized. Extract reusable logic into separate functions or components.

8. Documentation: Maintain clear and up-to-date documentation for your components and pages. Include usage examples and prop definitions.

9. Accessibility Testing: Regularly test your components and pages for accessibility using tools like axe-core or manual testing with screen readers.

10. Responsive Design: Always design and implement with responsiveness in mind, testing on various device sizes and orientations.

11. Version Control: Use meaningful commit messages and consider using conventional commits for better changelog generation.

12. Code Review: If working in a team, implement a code review process to ensure code quality and knowledge sharing.

Remember, the key to successful development with SvelteKit and Shadcn UI is to leverage the strengths of both technologies while adhering to web development best practices. Always prioritize user experience, performance, and accessibility in your implementations.

---
import Layout from "../layouts/Layout.astro";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Card } from "@/components/ui/card";
import { ChatConfigSchema } from '../schema/chat';
import {
  GitHubLogoIcon,
  CodeIcon,
  DownloadIcon,
  CheckIcon,
} from '@radix-ui/react-icons';
import FaqAccordion from "../components/FaqAccordion";

// Import license content
import License from '../../LICENSE?raw';

// GitHub repository details and stats
const GITHUB_REPO = "one-ie/one";
const GITHUB_URL = `https://github.com/${GITHUB_REPO}`;

// Fetch GitHub stats
const getGitHubStats = async () => {
  try {
    const response = await fetch(`https://api.github.com/repos/${GITHUB_REPO}`);
    const data = await response.json();
    return {
      stars: data.stargazers_count,
      forks: data.forks_count
    };
  } catch (error) {
    console.error('Error fetching GitHub stats:', error);
    return { stars: '14.2k', forks: '3.1k' }; // Fallback values
  }
};

const stats = await getGitHubStats();

const SYSTEM_REQUIREMENTS = [
  "Node.js 18.x or higher",
  "pnpm package manager",
  "Modern web browser (Chrome, Firefox, Safari, Edge)",
  "Any modern operating system (Windows, macOS, Linux)",
  "Deploy on Vercel, Netlify, AWS or any Node.js server",
];

const INSTALLATION_STEPS = [
  {
    title: "Download the Source",
    description: "Download the ZIP file or clone the repository using Git",
  },
  {
    title: "Install Dependencies",
    description: "Run 'pnpm install' to install required packages",
  },
  {
    title: "Configuration",
    description: "Set up your environment variables following the .env.example",
  },
  {
    title: "Start Development",
    description: "Run 'pnpm dev' to start the development server",
  },
];

const faqs = [
  // Core Features
  {
    question: "What can I build with ONE?",
    answer: "ONE enables you to build complete AI-powered businesses. Key features include: 1) AI Sales Agents that engage customers and close deals 24/7 2) Multi-channel Content Generation for blogs, social media, and marketing 3) Full E-commerce with crypto and traditional payments 4) Custom AI training for your specific business needs."
  },
  // Token System
  {
    question: "How does the token system work?",
    answer: "ONE uses a token-based system for accessing premium features: \n• 100 ONE - Full white-label for single project\n• 1,000 ONE - Unlimited white-label for multiple domains\n• 10,000 ONE - Unlimited rights across projects\n• 50,000+ ONE - Enterprise features with strategy and training\n\nTokens can be purchased on supported exchanges and used immediately for unlocking features."
  },
  // Payments
  {
    question: "What payment methods are supported?",
    answer: "ONE offers comprehensive payment support:\n• Cryptocurrencies: BTC, ETH, SOL with QR codes\n• Credit Cards & Bank Transfers\n• Digital Wallets: Apple Pay, Google Pay\n• Global Options: Alipay, Klarna, SEPA\n• Real-time payment verification\n• Automatic currency conversion"
  },
  // AI Agents
  {
    question: "How powerful are the AI agents?",
    answer: "ONE's AI agents are enterprise-grade and can:\n• Handle complete sales cycles\n• Generate and optimize content\n• Process transactions autonomously\n• Learn from customer interactions\n• Operate in multiple languages\n• Integrate with external systems\n• Maintain context across sessions"
  },
  // Content Generation
  {
    question: "What type of content can be automated?",
    answer: "The content automation system handles:\n• Blog posts & articles\n• Social media content\n• Product descriptions\n• Marketing materials\n• Documentation & guides\n• Email campaigns\n• Video scripts & podcasts\n\nAll content is SEO-optimized and maintains your brand voice."
  },
  // Technical
  {
    question: "What's the technical architecture?",
    answer: "ONE is built on modern technology:\n• Astro & React for frontend\n• Edge-optimized runtime\n• Vercel AI SDK integration\n• WebSocket for real-time features\n• TypeScript support\n• Shadcn/UI components\n• API-first architecture"
  },
  // Getting Started
  {
    question: "How do I get started?",
    answer: "Getting started is straightforward:\n1. Download and install using pnpm\n2. Connect your AI provider (OpenAI, Anthropic, etc.)\n3. Set up payment processing\n4. Configure your first AI agent\n5. Deploy to your preferred platform\n\nVisit https://one.ie/docs/quickstart for step-by-step guidance."
  },
  // Customization
  {
    question: "Can I customize everything?",
    answer: "Yes, ONE is fully customizable:\n• Create custom AI agents\n• Design unique workflows\n• Build custom UI components\n• Set up custom payment flows\n• Define business rules\n• Create specialized content templates\n• Implement custom authentication"
  }
];

// You can override any default values here
const chatConfig = ChatConfigSchema.parse({
  systemPrompt: [{
    type: "text" as const,
    text: `You are ONE's lead AI advocate, helping users understand how to build AI-powered businesses with our framework. Your role is to guide visitors through our comprehensive platform that combines AI agents, crypto payments, and content automation.

Core Capabilities:
1. AI Agents & Automation
   • Autonomous sales agents 24/7
   • Content generation & optimization
   • Social media management
   • Customer interaction handling
   • Multi-language support
   • Context-aware responses
   • Custom training options

2. Payment Integration
   • Cryptocurrency (BTC, ETH, SOL)
   • Traditional payments (Credit Cards)
   • Digital wallets (Apple Pay, Google Pay)
   • Global options (Alipay, Klarna)
   • Real-time verification
   • QR code support
   • Automatic conversion

3. Token System
   • 100 ONE - Single project white-label
   • 1,000 ONE - Multiple domains
   • 10,000 ONE - Unlimited rights
   • 50,000+ ONE - Enterprise features
   • Instant feature unlocking
   • Token staking benefits
   • Trading flexibility

4. Content Automation
   • Blog post generation
   • Social media content
   • Product descriptions
   • Marketing materials
   • Documentation
   • Email campaigns
   • SEO optimization

Technical Foundation:
• Modern Stack
  - Astro & React
  - Edge Runtime
  - TypeScript
  - Vercel AI SDK
  - WebSocket
  - Shadcn/UI
  - API-first

• Enterprise Features
  - Custom AI training
  - Business logic integration
  - Workflow automation
  - Multi-channel deployment
  - Analytics & tracking
  - Security measures
  - Scalability options

Communication Style:
• Be solution-focused
• Highlight practical applications
• Explain token benefits clearly
• Share specific examples
• Provide implementation steps
• Address technical & business needs
• Maintain professional enthusiasm

Key Points to Emphasize:
• Complete business solution
• Token-based white-labeling
• Comprehensive payment options
• AI agent capabilities
• Content automation power
• Easy implementation
• Scalable architecture

Your goal is to help users understand how ONE can transform their business with AI agents, automated content, and integrated payments while explaining our token-based system for accessing premium features.`
  }],
  welcome: {
    message: "👋 Welcome! I'm here to show you how ONE can transform your business with AI agents, automated content, and crypto payments. What would you like to learn about?",
    avatar: "/icon.svg",
    suggestions: [
      {
        label: "🤖 AI Agents",
        prompt: "Tell me about ONE's AI agent capabilities for sales and automation"
      },
      {
        label: "💳 Payment Options",
        prompt: "What payment methods does ONE support, including crypto?"
      },
      {
        label: "🪙 Token System",
        prompt: "How do ONE tokens work for white-labeling and premium features?"
      },
      {
        label: "✍️ Content Generation",
        prompt: "What kind of content can ONE automatically generate?"
      },
      {
        label: "🚀 Quick Start",
        prompt: "How can I deploy my first AI agent with ONE?"
      },
      {
        label: "💼 Enterprise Features",
        prompt: "What enterprise-level features does ONE offer?"
      }
    ]
  }
});  

// Set the desired right panel mode
const rightPanelMode = 'quarter'; // You can change this to 'full', 'half', 'floating', or 'icon'
---

<Layout
  title="ONE - AI Agents & Crypto Commerce Framework"
  chatConfig={chatConfig}
  rightPanelMode={rightPanelMode}
>
<section class="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
<div class="max-w-[64rem] flex flex-col items-center gap-6 text-center mx-auto">
<h1 class="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
Build <span class="text-blue-600">AI-Powered Businesses</span> For Free
</h1>
<div class="flex flex-col items-center gap-4 max-w-[800px]">
<p class="text-lg md:text-xl text-muted-foreground">
Create intelligent businesses with AI agents, automated content, and crypto payments.
Free forever, open-source, and enterprise-ready.
</p>

<div class="flex flex-wrap justify-center gap-3 text-sm md:text-base">
<span class="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
24/7 AI Agents
</span>
<span class="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
All Payments
</span>
<span class="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Auto Content
</span>
<span class="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
100% Free
</span>
</div>

<div class="text-sm text-muted-foreground mt-4">
Optional token-based features available for enterprise users
</div>
</div>
<div class="flex flex-wrap justify-center gap-4">
<a href="/download"
class="inline-flex items-center justify-center rounded-md bg-blue-600 text-white px-6 py-3 text-sm font-medium transition-colors hover:bg-blue-700">
<svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Get Started Free
</a>

<a href="chat"
class="inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium transition-colors hover:border-blue-600 hover:text-blue-600">
Try Live Demo
</a>
</div>
</div>
</section>

<!-- Core Benefits -->
<section class="py-16 bg-gradient-to-b from-primary/5 to-transparent">
<div class="container mx-auto px-4">
  <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
    <div class="text-center p-6">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
        <svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
      </div>
      <h3 class="text-lg font-semibold mb-2">100% Free Core</h3>
      <p class="text-sm text-muted-foreground">
        All essential features free forever. Build complete AI businesses without restrictions.
      </p>
    </div>
    
    <div class="text-center p-6">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
        <svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-lg font-semibold mb-2">Production Ready</h3>
      <p class="text-sm text-muted-foreground">
        Enterprise-grade AI agents, payments, and content automation out of the box.
      </p>
    </div>
    
    <div class="text-center p-6">
      <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
        <svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </div>
      <h3 class="text-lg font-semibold mb-2">Optional Premium</h3>
      <p class="text-sm text-muted-foreground">
        Enhance with token-based features like white-labeling when you need them.
      </p>
    </div>
  </div>
</div>
</section>

<section id="features" class="py-20">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-4">Free Enterprise-Grade Features</h2>
<p class="text-center text-muted-foreground max-w-2xl mx-auto mb-12">
All core features are completely free and open source. Build production-ready AI businesses without any costs.
</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 rounded-lg border shadow-sm hover:shadow-md transition-shadow">
<div class="w-12 h-12 border rounded-lg flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">AI Agents</h3>
<div class="space-y-3">
<p class="text-muted-foreground">Free Features:</p>
<ul class="text-sm text-muted-foreground space-y-1">
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Sales & Support automation
  </li>
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Content generation
  </li>
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Basic customization
  </li>
</ul>
</div>
</div>

<div class="p-6 rounded-lg border shadow-sm hover:shadow-md transition-shadow">
<div class="w-12 h-12 border rounded-lg flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">All Payments</h3>
<div class="space-y-3">
<p class="text-muted-foreground">Free Features:</p>
<ul class="text-sm text-muted-foreground space-y-1">
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Crypto (BTC/ETH/SOL)
  </li>
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Credit cards & transfers
  </li>
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Digital wallets
  </li>
</ul>
</div>
</div>

<div class="p-6 rounded-lg border shadow-sm hover:shadow-md transition-shadow">
<div class="w-12 h-12 border rounded-lg flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Content Creation</h3>
<div class="space-y-3">
<p class="text-muted-foreground">Free Features:</p>
<ul class="text-sm text-muted-foreground space-y-1">
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Blog & social posts
  </li>
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    Documentation
  </li>
  <li class="flex items-center gap-2">
    <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
    SEO optimization
  </li>
</ul>
</div>
</div>
</div>

<!-- Premium Features Note -->
<div class="mt-16 text-center">
  <div class="inline-block px-6 py-3 rounded-lg bg-primary/5 border border-primary/20">
    <h3 class="text-lg font-semibold mb-2">Optional Premium Features</h3>
    <p class="text-sm text-muted-foreground mb-4">
      Want to remove branding or need enterprise features? Unlock additional capabilities with ONE tokens.
    </p>
    <div class="flex flex-wrap justify-center gap-3">
      <span class="text-xs px-3 py-1 rounded-full bg-primary/10 text-primary">White Label</span>
      <span class="text-xs px-3 py-1 rounded-full bg-primary/10 text-primary">Custom Training</span>
      <span class="text-xs px-3 py-1 rounded-full bg-primary/10 text-primary">Priority Support</span>
      <span class="text-xs px-3 py-1 rounded-full bg-primary/10 text-primary">Enterprise Tools</span>
    </div>
  </div>
</div>

</div>
</section>

<section class="py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="flex-1">
<h2 class="text-3xl font-bold mb-6">Advanced AI & Crypto Capabilities</h2>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<svg class="w-6 h-6 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<div>
<h3 class="font-semibold">AI Sales Agents</h3>
<p class="text-muted-foreground">Deploy autonomous AI agents that can showcase and sell products 24/7</p>
</div>
</li>
<li class="flex items-start gap-3">
<svg class="w-6 h-6 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<div>
<h3 class="font-semibold">Crypto Integration</h3>
<p class="text-muted-foreground">Accept BTC, ETH, and SOL payments with real-time verification and QR codes</p>
</div>
</li>
<li class="flex items-start gap-3">
<svg class="w-6 h-6 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<div>
<h3 class="font-semibold">Content Generation</h3>
<p class="text-muted-foreground">Automate content creation and social media posting with AI-powered tools</p>
</div>
</li>
</ul>
</div>
<div class="flex-1">
<div class="rounded-lg border shadow-lg overflow-hidden">
<img src="/screenshots/chat.png" alt="ONE Chat Interface" class="w-full" />
</div>
</div>
</div>
</div>
</section>

<section class="py-20 border-t">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-6">Build the Future of AI Commerce</h2>
<p class="text-xl mb-8 text-muted-foreground">Create AI-powered businesses with automated content, sales, and crypto payments</p>
<div class="flex flex-col items-center">
<div class="flex justify-center gap-4 mb-6">
<a href="/docs/get-started"
class="inline-flex items-center justify-center rounded-md border-2 border-blue-600 text-blue-600 px-6 py-3 text-sm font-medium transition-colors hover:bg-blue-600 hover:text-white">
Get Started Free
</a>
<a href="/docs/crypto-integration"
class="inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium transition-colors hover:border-blue-600 hover:text-blue-600">
Crypto Integration
</a>
</div>
<p class="text-sm text-muted-foreground">Looking to partner? <a href="/contact" class="text-blue-600 hover:underline">Let's build something amazing together →</a></p>
</div>
</div>
</section>

<!-- Download Options Grid -->
<section class="container mx-auto px-6 py-20 border-t">
  <h2 class="text-3xl font-bold text-center mb-12">Download & Get Started</h2>
  <div class="grid md:grid-cols-2 gap-8 w-full max-w-4xl mx-auto mb-12">
    <!-- Direct Download Card -->
    <Card className="p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
      <h3 class="text-2xl font-bold mb-4">Quick Download</h3>
      <p class="text-muted-foreground mb-6">Download the latest stable release directly</p>
      <a href={`https://github.com/one-ie/one/archive/refs/heads/main.zip`} class="w-full">
        <Button size="lg" className="w-full">
          <DownloadIcon className="mr-2 h-5 w-5" />
          Download ZIP
        </Button>
      </a>
    </Card>

    <!-- Git Clone Card -->
    <Card className="p-6 flex flex-col items-center hover:shadow-lg transition-shadow">
      <h3 class="text-2xl font-bold mb-4">Git Integration</h3>
      <p class="text-muted-foreground mb-6">Clone the repository using Git</p>
      <Button
        variant="outline"
        size="lg"
        className="w-full group bg-background border-2 hover:border-primary hover:bg-primary/5 transition-all duration-300 text-foreground hover:text-foreground"
        id="copyCloneCommand"
      >
        <CodeIcon className="w-5 h-5 mr-2 text-primary" />
        <code class="font-mono text-sm">git clone one-ie/one</code>
      </Button>
      <p id="copyMessage" class="mt-2 text-sm text-primary opacity-0 transition-opacity duration-200">
        Copied to clipboard!
      </p>
    </Card>
  </div>

  <!-- Secondary Options -->
  <div class="flex flex-wrap gap-4 justify-center mb-12">
    <a href={`https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=${GITHUB_REPO}`} class="inline-block">
      <Button
        variant="outline"
        size="lg"
        className="group bg-[#0D1117] hover:bg-[#161B22] border-2 border-[#30363D] hover:border-primary text-white hover:text-white transition-all duration-300"
      >
        <GitHubLogoIcon className="w-5 h-5 mr-2" />
        <span>Open in Codespaces</span>
      </Button>
    </a>
    
    <a href={GITHUB_URL} class="inline-block">
      <Button
        variant="outline"
        size="lg"
        className="group bg-primary/5 hover:bg-primary/10 text-foreground hover:text-foreground"
      >
        <GitHubLogoIcon className="w-5 h-5 mr-2" />
        <span>View Source</span>
        <div class="ml-2 px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium">
          {stats.stars} ⭐
        </div>
      </Button>
    </a>

    <a href={`${GITHUB_URL}/fork`} class="inline-block">
      <Button
        variant="outline"
        size="lg"
        className="group text-foreground hover:text-foreground"
      >
        <GitHubLogoIcon className="w-5 h-5 mr-2" />
        <span>Fork Project</span>
        <div class="ml-2 px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium">
          {stats.forks}
        </div>
      </Button>
    </a>
  </div>
</section>

<!-- System Requirements & Installation -->
<section class="container mx-auto px-6 py-20 border-t">
  <div class="w-full max-w-[1400px] mx-auto grid md:grid-cols-2 gap-8">
    <Card className="p-8">
      <h2 class="text-2xl font-bold mb-6">System Requirements</h2>
      <ul class="space-y-4">
        {SYSTEM_REQUIREMENTS.map(req => (
          <li class="flex items-start">
            <CheckIcon className="w-5 h-5 mr-2 text-green-500 flex-shrink-0 mt-1" />
            <span>{req}</span>
          </li>
        ))}
      </ul>
    </Card>

    <Card className="p-8">
      <h2 class="text-2xl font-bold mb-6">Installation Guide</h2>
      <div class="space-y-6">
        {INSTALLATION_STEPS.map((step, index) => (
          <div class="flex items-start">
            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-4 flex-shrink-0">
              <span class="font-bold text-primary">{index + 1}</span>
            </div>
            <div>
              <h3 class="font-semibold mb-1">{step.title}</h3>
              <p class="text-muted-foreground text-sm">{step.description}</p>
            </div>
          </div>
        ))}
      </div>
    </Card>
  </div>
</section>

<!-- License Section -->
<section class="container mx-auto px-6 py-20 border-t">
  <div class="w-full max-w-[1400px] mx-auto">
    <h2 class="text-4xl font-bold mb-10 text-center">ONE Free License</h2>
    <Card className="prose prose-lg max-w-none dark:prose-invert p-8">
      <pre class="whitespace-pre-wrap text-sm leading-relaxed opacity-90">{License}</pre>
    </Card>
  </div>
</section>

<!-- FAQs -->
<section class="container mx-auto px-6 py-20 border-t">
  <div class="w-full max-w-[1400px] mx-auto">
    <h2 class="text-4xl font-bold mb-10 text-center">Frequently Asked Questions</h2>
    <FaqAccordion client:idle faqs={faqs} />
  </div>
</section>

<!-- GitHub Call-to-Action -->
<section class="container mx-auto px-6 pb-20">
  <div class="text-center w-full max-w-[1400px] mx-auto">
    <Alert className="py-6">
      <AlertDescription className="text-lg">
        Join thousands of developers building the future with ONE.
        <a href="https://github.com/one-ie/one" class="inline-block">
          <Button variant="link" className="ml-3 text-lg text-foreground hover:text-foreground">
            Star on GitHub <GitHubLogoIcon className="ml-2 w-5 h-5" />
          </Button>
        </a>
      </AlertDescription>
    </Alert>
  </div>
</section>
</Layout>

<style>
  .prose {
    @apply mx-auto;
  }
  
  .prose pre {
    @apply bg-muted;
  }
</style>

<script>
  // Handle copy functionality
  document.addEventListener('DOMContentLoaded', () => {
    const copyButton = document.getElementById('copyCloneCommand');
    const copyMessage = document.getElementById('copyMessage');
    
    if (copyButton && copyMessage) {
      copyButton.addEventListener('click', () => {
        navigator.clipboard.writeText('git clone one-ie/one');
        copyMessage.classList.remove('opacity-0');
        setTimeout(() => copyMessage.classList.add('opacity-0'), 2000);
      });
    }
  });
</script>


Error
An error occurred.
Accordion must be used within Accordion

Oh no! We have an error. Let's talk through the issue.

Astro uses an "island architecture  ", which means that each block of code on the site is an independent group of code. Astro does not assume that our Accordion component pieces fit together. Our Shadcn UI components assume that the components can talk to each other and share context. They cannot.

We can solve this in two ways.

Rewrite the ShadCN components so they work with Astro. This might involve re-architecting an existing solution that's built into a library.
Wrap all of our Accordion components into one component where we can pass data to it. We lose the composability, but we avoid having to rewrite a lot of logic.
For this guide, we'll go with option 2. If you want to see an example of option 1, check out Popover.tsx.

Let's create a new Accordion.tsx component.

We'll update the example to iterate over a data prop and render each AccordionItem.

site-astro/src/components/Accordion.tsx
Copy to Clipboard
import {
	Accordion as BaseAccordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";

interface Props {
	data: {
		title: string;
		description: string;
	}[];
}

export function Accordion({ data }: Props) {
	return (
		<BaseAccordion type="single" collapsible className="w-full">
			{data.map((item, i) => {
				return (
					<AccordionItem value={`item-${i.toFixed()}`}>
						<AccordionTrigger>{item.title}</AccordionTrigger>
						<AccordionContent>{item.description}</AccordionContent>
					</AccordionItem>
				);
			})}
		</BaseAccordion>
	);
}
Use it index.astro like this:

site-astro/src/pages/index.astro
Copy to Clipboard
---
import Layout from "../layouts/Layout.astro";
import { Accordion } from "@/components/content/Accordion";

const accordionData = [
	{
		title: "Is it accessible?",
		description: "Yes. It adheres to the WAI-ARIA design pattern.",
	},
	{
		title: "Is it styled?",
		description:
			"Yes. It comes with default styles that matches the other components' aesthetic.",
	},
	{
		title: "Is it animated?",
		description:
			"Yes. It's animated by default, but you can disable it if you prefer.",
	},
];
---

<Layout>
	<main>
		<h1>Welcome to SiteName</h1>
		<Accordion data={accordionData} client:idle />
	</main>
</Layout>
Now we're in business.

Don't forget the client:idle attribute on our Accordion implementation. This tells Astro to load the necessary JS code on the client side so users can click to open/close each accordion item.

Astro now treats our entire accordion as one "island". The React context needed to wrap all accordion items can now execute in our browser without an issue.

Wrapping Up
Hopefully, this gets you on your way to building quickly with Shadcn and Radix. Both tools should help you write better, more accessible components. They can be daunting to get started with, but they're well documented tools with thriving communities that can help you with your specific use case.

I got the Tabs working with client:visible and a workaround for Accordions described in this issue AREA44/astro-shadcn-ui-template#66

So basically wrap shadcn Tabs in another Tabs component. So Tabs inside of Tabs of Tabs ;). Then your new Tabs Component could be used with client:visible. And if you need dynamic tab content, just pass your data with props.

# Implementing shadcn/ui with Astro

## Setup Instructions

1. Install dependencies
```bash
npm install @radix-ui/react-tabs class-variance-authority clsx tailwind-merge lucide-react
```

2. Configure Tailwind CSS
```js
// tailwind.config.js
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: ["class"],
	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
	theme: {
		container: {
			center: true,
			padding: "2rem",
			screens: {
				"2xl": "1400px",
			},
		},
		extend: {
			colors: {
				border: "hsl(var(--border))",
				input: "hsl(var(--input))",
				ring: "hsl(var(--ring))",
				background: "hsl(var(--background))",
				foreground: "hsl(var(--foreground))",
				primary: {
					DEFAULT: "hsl(var(--primary))",
					foreground: "hsl(var(--primary-foreground))",
				},
				// ... other color definitions
			},
			borderRadius: {
				lg: "var(--radius)",
				md: "calc(var(--radius) - 2px)",
				sm: "calc(var(--radius) - 4px)",
			},
			fontFamily: {
				sans: ["var(--font-sans)", ...fontFamily.sans],
			},
			keyframes: {
				"accordion-down": {
					from: { height: 0 },
					to: { height: "var(--radix-accordion-content-height)" },
				},
				"accordion-up": {
					from: { height: "var(--radix-accordion-content-height)" },
					to: { height: 0 },
				},
			},
			animation: {
				"accordion-down": "accordion-down 0.2s ease-out",
				"accordion-up": "accordion-up 0.2s ease-out",
			},
		},
	},
	plugins: [require("tailwindcss-animate")],
}
```

## Implementing Tabs

1. Create the base tabs components:

```tsx
// src/components/ui/tabs.tsx
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
	React.ElementRef<typeof TabsPrimitive.List>,
	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
	<TabsPrimitive.List
		ref={ref}
		className={cn(
			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
			className
		)}
		{...props}
	/>
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
	React.ElementRef<typeof TabsPrimitive.Trigger>,
	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
	<TabsPrimitive.Trigger
		ref={ref}
		className={cn(
			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
			className
		)}
		{...props}
	/>
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
	React.ElementRef<typeof TabsPrimitive.Content>,
	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
	<TabsPrimitive.Content
		ref={ref}
		className={cn(
			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
			className
		)}
		{...props}
	/>
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
```

2. Create a reusable TabsContainer component:

```tsx
// src/components/ui/tabs-container.tsx
'use client';

import { Card } from './card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
import * as React from 'react';

export interface TabItem {
	value: string;
	label: string;
	content: React.ReactNode;
}

interface TabsContainerProps {
	items: TabItem[];
	defaultValue?: string;
	className?: string;
	gridCols?: number;
}

export function TabsContainer({ 
	items, 
	defaultValue, 
	className = '',
	gridCols = 4 
}: TabsContainerProps) {
	const [mounted, setMounted] = React.useState(false);
	const [activeTab, setActiveTab] = React.useState(defaultValue || items[0]?.value);

	React.useEffect(() => {
		setMounted(true);
	}, []);

	if (!mounted) {
		return null;
	}

	return (
		<div className={`w-full ${className}`}>
			<Tabs defaultValue={activeTab} onValueChange={setActiveTab}>
				<TabsList className={`grid w-full grid-cols-${gridCols}`}>
					{items.map((item) => (
						<TabsTrigger 
							key={item.value} 
							value={item.value}
							className="data-[state=active]:bg-background data-[state=active]:text-foreground"
						>
							{item.label}
						</TabsTrigger>
					))}
				</TabsList>
				{items.map((item) => (
					<TabsContent 
						key={item.value} 
						value={item.value}
						className="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
					>
						<Card className="p-6">
							{item.content}
						</Card>
					</TabsContent>
				))}
			</Tabs>
		</div>
	);
}
```

3. Use the tabs in your Astro page:

```astro
---
import TabsExample from '../components/TabsExample';

const items = [
	{
		value: 'tab1',
		label: 'Tab 1',
		content: <div>Content for tab 1</div>
	},
	{
		value: 'tab2',
		label: 'Tab 2',
		content: <div>Content for tab 2</div>
	}
];
---

<div>
	<TabsExample client:load items={items} />
</div>
```

## Important Notes

1. **Client Hydration**: Always use `client:load` when using interactive components like Tabs.

2. **TypeScript Support**: Make sure your `tsconfig.json` includes:
```json
{
	"compilerOptions": {
		"jsx": "react-jsx",
		"jsxImportSource": "react"
	}
}
```

3. **Styling**: The tabs component uses Tailwind CSS classes. Ensure your `globals.css` includes the necessary shadcn/ui base styles.

4. **Error Handling**: Common issues and solutions:
	- If you see hydration errors, ensure you're using `client:load`
	- If styles aren't applying, check your Tailwind configuration
	- If tabs aren't interactive, verify React is properly set up in your Astro config

5. **Best Practices**:
	- Keep tab content lightweight
	- Use semantic labels
	- Consider mobile responsiveness
	- Implement proper loading states
	- Handle edge cases (no tabs, single tab, etc.)

## Example Implementation

Here's a complete example of a tabbed interface:

```tsx
// src/components/TabsExample.tsx
import { TabsContainer, type TabItem } from '../ui/tabs-container';

interface TabsExampleProps {
	examples: {
		basic: string;
		advanced: string;
	};
}

export default function TabsExample({ examples }: TabsExampleProps) {
	const items: TabItem[] = [
		{
			value: 'basic',
			label: 'Basic',
			content: (
				<>
					<h3 className="text-xl font-medium mb-4">Basic Example</h3>
					<p className="text-muted-foreground mb-4">Simple configuration:</p>
					<pre className="text-sm overflow-auto p-4 bg-muted rounded-lg">
						{examples.basic}
					</pre>
				</>
			),
		},
		{
			value: 'advanced',
			label: 'Advanced',
			content: (
				<>
					<h3 className="text-xl font-medium mb-4">Advanced Example</h3>
					<p className="text-muted-foreground mb-4">Advanced configuration:</p>
					<pre className="text-sm overflow-auto p-4 bg-muted rounded-lg">
						{examples.advanced}
					</pre>
				</>
			),
		}
	];

	return <TabsContainer items={items} defaultValue="basic" />;
}
```

## Troubleshooting

1. **Hydration Errors**:
	- Use `client:load` directive
	- Ensure consistent server/client rendering
	- Add proper mounting checks

2. **Styling Issues**:
	- Verify Tailwind configuration
	- Check class names
	- Ensure proper CSS imports

3. **Interactivity Problems**:
	- Check React setup
	- Verify event handlers
	- Debug state management

4. **Performance Optimization**:
	- Lazy load tab content
	- Implement proper caching
	- Optimize bundle size

You are an expert full-stack developer proficient in TypeScript, React, and modern UI/UX frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI), with particular expertise in Astro. Your task is to produce the most optimized and maintainable Astro code, following best practices and adhering to the principles of clean code and robust architecture.

### Objective
- Create an Astro solution that is not only functional but also adheres to the best practices in performance, security, and maintainability.

### Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use Astro components (.astro) for static content and framework components for interactive islands.
- Favor iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
- Structure files following Astro conventions with content collections, components, and layouts.
- Use upercase for components e.g., `components/Chat`).

### Optimization and Best Practices
- Minimize client-side JavaScript using Astro's partial hydration with client:* directives.
- Use appropriate client directives (client:load, client:idle, client:visible) based on component needs.
- Implement View Transitions API for smooth page transitions.
- Optimize images using Astro's built-in image optimization.
- Leverage Astro's content collections for structured content management.

### Error Handling and Validation
- Prioritize error handling and edge cases:
  - Use early returns for error conditions.
  - Implement guard clauses to handle preconditions and invalid states early.
  - Use custom error types for consistent error handling.

### UI and Styling
- Use modern UI frameworks (e.g., Tailwind CSS, Shadcn UI) with proper Astro integration.
- Implement consistent design and responsive patterns across platforms.
- Utilize Astro's scoped styling capabilities when appropriate.

### State Management and Data Fetching
- Use Astro.props for component data passing.
- Implement getStaticPaths() for dynamic route generation.
- Use content collections API for structured content management.
- Implement validation using Zod for schema validation.

### Security and Performance
- Leverage Astro's built-in security features and zero-JS-by-default approach.
- Follow performance optimization techniques using Astro's static site generation.
- Implement proper CSP headers and security best practices.

### Testing and Documentation
- Write unit tests for components using appropriate testing frameworks.
- Provide clear and concise comments for complex logic.
- Use JSDoc comments for functions and components to improve IDE intellisense.

### Methodology
1. **System 2 Thinking**: Approach the problem with analytical rigor. Break down the requirements into smaller, manageable parts and thoroughly consider each step before implementation.
2. **Tree of Thoughts**: Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and select the optimal one.
3. **Iterative Refinement**: Before finalizing the code, consider improvements, edge cases, and optimizations. Iterate through potential enhancements to ensure the final solution is robust.

**Process**:
1. **Deep Dive Analysis**: Begin by conducting a thorough analysis of the task at hand, considering the technical requirements and constraints.
2. **Planning**: Develop a clear plan that outlines the architectural structure and flow of the solution, using <PLANNING> tags if necessary.
3. **Implementation**: Implement the solution step-by-step, ensuring that each part adheres to Astro's best practices.
4. **Review and Optimize**: Perform a review of the code, looking for opportunities to reduce client-side JavaScript and optimize performance.
5. **Finalization**: Finalize the code by ensuring it meets all requirements, maximizes static generation, and follows Astro's performance-first philosophy.
    

    ---
title: Chat System
description: Comprehensive guide to ONE's AI-powered chat system
date: 2024-02-02
section: Core Features
order: 1
---

# Chat System Overview

ONE's chat system combines Astro, React, and the Assistant UI framework to deliver a powerful, flexible, and user-friendly chat interface with advanced AI capabilities.

## Architecture

The chat system is built on a modular architecture with several key components:

### 1. Frontend Components

#### Layout System
- **Panel Modes**:
  - `quarter`: 25% width side panel (default)
  - `half`: 50% width side panel
  - `full`: Full screen chat interface
  - `floating`: Detached floating window
  - `icon`: Minimized chat button
  - `hidden`: No chat interface

- **Responsive Behavior**:
  ```typescript
  interface LayoutProps {
    title: string;
    description?: string;
    header?: boolean;
    footer?: boolean;
    rightPanelMode?: 'hidden' | 'full' | 'half' | 'quarter' | 'floating' | 'icon';
    chatConfig?: ChatConfig;
    content?: string;
  }
  ```

#### Chat Components

##### Main Chat Page (`src/pages/chat.astro`)
- Entry point for the chat interface
- Configurable settings:
  - System prompts
  - Welcome messages
  - Quick suggestions
  - Layout modes
- Integration with page content
- AI context management

##### Thread Component (`src/components/chat/thread.tsx`)
- Core chat interface features:
  - Scrollable message area
  - Dynamic composition interface
  - Customizable welcome screen
  - Message styling and actions
  - Branch navigation
  - Voice synthesis

### 2. Backend Architecture

#### Chat API (`src/pages/api/chat.ts`)
- OpenAI API integration
- Configurable parameters:
  ```typescript
  interface ChatAPIConfig {
    provider: "openai";
    model: string;
    apiEndpoint: string;
    temperature: number;
    maxTokens: number;
    systemPrompt: string | SystemPrompt[];
    contextData?: string;
    functions?: ChatFunction[];
  }
  ```
- Edge runtime optimization
- Error handling and recovery
- Response streaming

## Advanced Features

### 1. Message Management
- Real-time streaming responses
- Markdown and code rendering
- Message editing and history
- Branch navigation
- Copy functionality
- Voice synthesis
- Code syntax highlighting

### 2. User Interface Modes

#### Quarter Mode (Default)
```typescript
<Layout rightPanelMode="quarter">
  <YourContent />
</Layout>
```
- 25% width side panel
- Ideal for documentation and content-heavy pages
- Maintains content visibility

#### Floating Mode
```typescript
<Layout rightPanelMode="floating">
  <YourContent />
</Layout>
```
- Detached window
- Draggable interface
- Minimal content interference

#### Icon Mode
```typescript
<Layout rightPanelMode="icon">
  <YourContent />
</Layout>
```
- Minimized chat button
- Expands on click
- Maximum content space

### 3. Configuration System

#### Basic Configuration
```typescript
const chatConfig = ChatConfigSchema.parse({
  systemPrompt: [{
    type: "text",
    text: "You are a helpful assistant."
  }],
  welcome: {
    message: "👋 How can I help you today?",
    avatar: "/icon.svg",
    suggestions: [
      {
        label: "Get Started",
        prompt: "How do I get started?"
      }
    ]
  }
});
```

#### Advanced Configuration
```typescript
const advancedConfig = {
  provider: "openai",
  model: "gpt-4o-mini",
  temperature: 0.7,
  maxTokens: 2000,
  features: {
    textToSpeech: true,
    codeHighlight: true,
    markdown: true,
    suggestions: true,
    branchNavigation: true
  },
  styles: {
    theme: "light" | "dark" | "system",
    accentColor: "#0066FF",
    messageSpacing: "comfortable" | "compact"
  }
};
```

---
title: Create a Chatbot with Markdown
description: Step-by-step guide to creating an AI chatbot using markdown files
date: 2024-02-02
section: Tutorials
order: 3
---

# Creating a Chatbot with Markdown

This tutorial will show you how to create a specialized AI chatbot using markdown files in ONE. We'll use the license page as an example to demonstrate how to create a knowledgeable AI assistant for your content.

## Step 1: Create Your Markdown File

Create a new markdown file in your pages directory (e.g., `src/pages/your-page.md`):

```markdown
---
layout: ../layouts/Text.astro
title: "Your Page Title"
description: "Your page description"
chatConfig:
  provider: openai
  model: "gpt-4o-mini"
  apiEndpoint: "https://api.openai.com/v1"
  temperature: 0.7
  maxTokens: 4000
  systemPrompt:
    - type: text
      text: "Define your AI assistant's role and expertise here"
  welcome:
    message: "👋 Your welcome message here"
    avatar: "/your-icon.svg"
    suggestions:
      - label: "First Option"
        prompt: "What would you like to know about...?"
---

# Your Content Here
```

## Step 2: Configure the Chat System

### Basic Configuration

In the frontmatter section of your markdown file, configure these essential parameters:

```yaml
chatConfig:
  provider: openai           # AI provider
  model: "gpt-4o-mini"      # Model to use
  temperature: 0.7          # Response creativity (0-1)
  maxTokens: 4000          # Maximum response length
```

### Define the AI's Role

Create a clear system prompt that defines your AI's expertise:

```yaml
systemPrompt:
  - type: text
    text: "You are an expert in [your topic] focused on helping visitors understand [specific aspects]. You provide clear, accurate information about [key areas]."
```

Example from the license page:
```yaml
systemPrompt:
  - type: text
    text: "You are a licensing expert focused on helping visitors understand the ONE License terms and benefits. You provide clear, accurate information about licensing terms, commercial rights, and usage requirements."
```

### Set Up the Welcome Screen

Configure the initial interaction:

```yaml
welcome:
  message: "👋 Your greeting message here"
  avatar: "/path/to/icon.svg"
  suggestions:
    - label: "💡 First Option"
      prompt: "What would you like to know about...?"
    - label: "🚀 Second Option"
      prompt: "Another suggested question..."
```

## Step 3: Structure Your Content

Organize your markdown content to help the AI understand the topic:

1. **Clear Headings**
   ```markdown
   # Main Title
   
   ## Key Section
   
   ### Subsection
   ```

2. **Structured Information**
   ```markdown
   ## Key Points
   
   - **First Point** - Detailed explanation
   - **Second Point** - More details
   ```

3. **Organized Sections**
   ```markdown
   ## Topic Area
   
   1. **Main Concept**
      - Detail one
      - Detail two
   
   2. **Another Concept**
      - More information
      - Additional details
   ```

## Step 4: Add Interactive Elements

Include elements that enhance user interaction:

### Quick Access Buttons

```yaml
suggestions:
  - label: "💡 Key Feature"
    prompt: "Tell me about this feature"
  - label: "🚀 Getting Started"
    prompt: "How do I begin?"
  - label: "⚖️ Requirements"
    prompt: "What are the requirements?"
```

### Contact Information

```markdown
Contact [support@example.com](mailto:support@example.com) for assistance.
```

## Real-World Example

Here's how the license page implements these concepts:

```markdown
---
layout: ../layouts/Text.astro
title: "ONE License"
description: "Maximum Freedom. Zero Restrictions"
chatConfig:
  provider: openai
  model: "gpt-4o-mini"
  apiEndpoint: "https://api.openai.com/v1"
  temperature: 0.7
  maxTokens: 4000
  systemPrompt:
    - type: text
      text: "You are a licensing expert focused on helping visitors understand the ONE License terms and benefits. You provide clear, accurate information about licensing terms, commercial rights, and usage requirements."
  welcome:
    message: "👋 Hello! I can help explain the ONE License terms and how you can use them for your business."
    avatar: "/icon.svg"
    suggestions:
      - label: "💡 Commercial Rights"
        prompt: "What commercial rights do I get with the ONE License?"
      - label: "🚀 Getting Started"
        prompt: "What are the steps to start using the ONE License?"
---

# ONE License (Version 1.0)

## Unlimited Commercial Freedom

ONE License gives you complete commercial freedom...

## Key Benefits

- **✨ 100% Commercial Rights** - Sell products and services at any price point
- **🚀 Full Modification Rights** - Customize and adapt the software freely
```

## Best Practices

1. **System Prompt**
   - Be specific about the AI's role
   - Define clear areas of expertise
   - Set appropriate boundaries

2. **Welcome Message**
   - Keep it friendly and clear
   - Set proper expectations
   - Provide useful starting points

3. **Content Structure**
   - Use clear headings
   - Organize information logically
   - Include relevant details

4. **Suggestions**
   - Cover common questions
   - Use descriptive labels
   - Provide clear prompts

## Troubleshooting

### Common Issues

1. **AI Responses Off-Topic**
   - Review and refine system prompt
   - Check content organization
   - Add more specific context

2. **Welcome Message Not Showing**
   - Verify frontmatter formatting
   - Check avatar path
   - Validate YAML syntax

3. **Suggestions Not Working**
   - Check label/prompt format
   - Verify YAML indentation
   - Ensure unique labels

## Next Steps

After creating your chatbot:

1. Test different queries
2. Refine the system prompt
3. Add more suggestions
4. Monitor user interactions
5. Update content as needed

For more advanced features and customization options, check out:
- [Chat Configuration Guide](/docs/chat-config)
- [AI Prompt Engineering](/docs/prompts)
- [Styling and Theming](/docs/styling)

---
title: Development FAQ
description: Frequently asked questions about developing with ONE
date: 2024-02-02
section: Development
order: 5
---

# Development FAQ

Common questions and answers about developing applications with ONE framework.

## Getting Started

### Q: What are the minimum requirements to run ONE?
**A:** You need:
- Node.js 18 or higher
- pnpm package manager
- An OpenAI API key
- Basic knowledge of Astro and React

### Q: How do I install ONE?
**A:** Use the following commands:
```bash
# Create new project
pnpm create astro@latest my-one-app -- --template one

# Install dependencies
cd my-one-app
pnpm install
```

### Q: How do I set up my OpenAI API key?
**A:** Create a `.env` file in your project root and add:
```env
OPENAI_API_KEY=your_api_key_here
```

## Chat System

### Q: How do I add a chat interface to my page?
**A:** Add chat configuration to your page's frontmatter:
```yaml
---
layout: ../layouts/Layout.astro
chatConfig:
  provider: openai
  model: "gpt-4o-mini"
  temperature: 0.7
  maxTokens: 2000
  systemPrompt:
    - type: text
      text: "Your system prompt here"
---
```

### Q: How do I customize the chat panel position?
**A:** Use the `rightPanelMode` prop in your Layout component:
```astro
<Layout
  title="Your Page"
  chatConfig={chatConfig}
  rightPanelMode="quarter" // or "half", "full", "floating", "icon"
>
  <!-- Your content -->
</Layout>
```

### Q: Can I customize the welcome message and suggestions?
**A:** Yes, in your chat configuration:
```yaml
chatConfig:
  welcome:
    message: "👋 Your welcome message"
    avatar: "/path/to/icon.svg"
    suggestions:
      - label: "💡 First Option"
        prompt: "Your prompt here"
```

## Content Management

### Q: How do I create a chatbot for my markdown content?
**A:** Create a markdown file with chat configuration in the frontmatter:
```markdown
---
layout: ../layouts/Text.astro
title: "Your Title"
chatConfig:
  systemPrompt:
    - type: text
      text: "Define your AI's expertise"
---

Your content here
```

### Q: How do I organize my documentation?
**A:** Use the following structure:
```
src/content/docs/
├── index.md         # Main documentation page
├── getting-started/ # Getting started guides
├── features/       # Feature documentation
└── api/           # API documentation
```

### Q: How do I add images and assets?
**A:** Place them in the `public` directory:
```
public/
├── images/    # For images
├── icons/     # For icons
└── assets/    # For other assets
```

## Styling and Theming

### Q: How do I customize the appearance?
**A:** ONE uses Tailwind CSS. Customize in `tailwind.config.mjs`:
```javascript
export default {
  theme: {
    extend: {
      colors: {
        primary: {...},
        secondary: {...}
      }
    }
  }
}
```

### Q: How do I switch between light and dark themes?
**A:** Use the built-in theme system:
```typescript
import { useTheme } from "@/hooks/use-theme";

const { theme, setTheme } = useTheme();
```

## Performance

### Q: How do I optimize chat performance?
**A:** Several ways:
1. Use edge runtime
2. Implement proper caching
3. Optimize response sizes
4. Use streaming responses

### Q: How do I implement caching?
**A:** Use edge caching for API responses:
```typescript
export const config = {
  runtime: 'edge',
  regions: ['all'],
};
```

## Troubleshooting

### Q: Why isn't my chat interface showing up?
**A:** Check these common issues:
1. Verify chatConfig in frontmatter
2. Ensure OpenAI API key is set
3. Check for console errors
4. Verify rightPanelMode setting

### Q: Why are my API calls failing?
**A:** Common solutions:
1. Verify API key in .env
2. Check API endpoint configuration
3. Verify rate limits
4. Check network connectivity

### Q: How do I debug streaming responses?
**A:** Use the browser's network tab:
1. Open DevTools
2. Go to Network tab
3. Filter for 'Fetch/XHR'
4. Look for streaming responses

## Deployment

### Q: How do I deploy my ONE application?
**A:** Several options:
1. Vercel (recommended)
2. Netlify
3. CloudFlare
4. Custom server

### Q: How do I handle environment variables in production?
**A:** Set them in your hosting platform:
```env
OPENAI_API_KEY=production_key
API_ENDPOINT=production_endpoint
```

## Development Best Practices

### Q: What's the recommended way to structure a large application?
**A:** Follow this structure:
```
src/
├── components/    # Reusable components
├── layouts/       # Page layouts
├── content/       # Markdown content
├── pages/         # Routes
├── styles/        # Global styles
└── lib/          # Utilities
```

### Q: How do I implement proper error handling?
**A:** Use try-catch blocks and error boundaries:
```typescript
try {
  // API calls
} catch (error) {
  if (error.response?.status === 429) {
    // Handle rate limiting
  }
  // Handle other errors
}
```

### Q: How do I test my AI interactions?
**A:** Use test modes and mock responses:
```typescript
const testConfig = {
  ...chatConfig,
  provider: 'test',
  mockResponses: [...]
};
```

## Commercial Usage

### Q: Can I use ONE in a commercial project?
**A:** Yes, ONE License provides:
- Full commercial rights
- White-label options
- No royalty fees
- Enterprise support

### Q: How do I remove ONE branding?
**A:** Contact [agent@one.ie](mailto:agent@one.ie) for white-label rights.

## Support and Resources

### Q: Where can I get help?
**A:** Several options:
1. [Documentation](/docs)
3. [GitHub Issues](https://github.com/one-ie/one/issues)
4. Email support@one.ie

### Q: How do I report bugs?
**A:** Open an issue on GitHub with:
- Description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Environment details

---
title: How it works
description: Detailed explanation of ONE's architecture and operation
date: 2024-02-02
section: Introduction
order: 2
---

# How ONE Works

ONE is a comprehensive framework for building AI-powered web applications with Astro. It combines high-performance static site generation with dynamic AI capabilities to create intelligent, responsive web experiences.

## Core Architecture

### Tech Stack
- **Astro** - The core framework that enables high-performance static site generation
- **React** - Used for interactive components and UI elements
- **Assistant UI** - Provides the chat interface and AI interaction components
- **Vercel AI SDK** - Handles AI model integration and streaming responses
- **Tailwind CSS** - For responsive and customizable styling

### Layout System

The framework uses a flexible layout system with three main components:

1. **Main Grid**
   - Configurable grid layout system
   - Support for responsive design
   - Dynamic panel sizing and positioning

2. **Panel Modes**
   ```typescript
   type PanelMode = 'hidden' | 'full' | 'half' | 'quarter' | 'floating' | 'icon';
   ```
   - `quarter`: 25% width side panel
   - `half`: 50% width side panel
   - `full`: Full screen display
   - `floating`: Detached floating window
   - `icon`: Minimized chat button
   - `hidden`: No chat interface

3. **Responsive Behavior**
   - Automatic adaptation to screen sizes
   - Mobile-first design approach
   - Smooth transitions between states

### AI Agent Implementation

Every page in ONE can have its own AI Agent, with specific knowledge about the page content:

1. **Configuration Layer**
```typescript
{
    "provider": "openai",
    "model": "gpt-4o-mini",
    "apiEndpoint": "https://api.openai.com/v1",
    "runtime": "edge",
    "temperature": 0.7,
    "maxTokens": 2000,
    "systemPrompt": "You are a helpful AI assistant.",
    "userPrompt": "main content of the markdown file below"
}
```

2. **Chat Interface Layer**
- Real-time message streaming
- Markdown rendering
- Message history and branching
- Text-to-speech capabilities
- Code syntax highlighting
- Copy/edit functionality

3. **Edge Runtime Layer**
- Edge-based processing
- Efficient data streaming
- Optimized response handling

## Content Management

### 1. Blog System
- Markdown-based content
- Multiple view modes (list, grid, magazine)
- Automatic reading time calculation
- Rich media support
- Category and tag organization

### 2. Documentation System
- Hierarchical structure
- Section-based organization
- Automated navigation
- Version control support

### 3. Page-Specific AI Agents
- Contextual awareness
- Custom knowledge base
- Tailored responses
- Dynamic suggestions

## Advanced Features

### 1. Real-time Interaction
- Streaming responses
- Interactive components
- Dynamic content updates
- Branch navigation
- Message history

### 2. UI Components
- Floating chat interface
- Customizable welcome screen
- Quick suggestion buttons
- Progress indicators
- Error states

### 3. Performance Optimization
- Edge computing
- Asset optimization
- Lazy loading
- Caching strategies
- Response streaming

## Configuration Examples

### 1. Basic Chat Setup
```typescript
const chatConfig = ChatConfigSchema.parse({
  systemPrompt: [{
    type: "text",
    text: "You are a helpful AI assistant."
  }],
  welcome: {
    message: "👋 How can I help you today?",
    avatar: "/icon.svg",
    suggestions: [
      {
        label: "Get Started",
        prompt: "How do I get started with ONE?"
      }
    ]
  }
});
```

### 2. Custom Layout Configuration
```typescript
<Layout 
  title="Your Page"
  chatConfig={chatConfig}
  rightPanelMode="quarter"
  header={true}
  footer={true}
>
  {/* Your content */}
</Layout>
```

### 3. Page-Specific Agent
```typescript
const pageSpecificAgent = {
  systemPrompt: `You are an expert on ${topic}...`,
  contextData: pageContent,
  parameters: {
    temperature: 0.7,
    maxTokens: 2000
  }
};
```