Decentralize Orbiton AI Agent

A modern React application built with the latest stable versions of Vite, React, TypeScript, Tailwind CSS, and shadcn/ui.

Tech Stack

• Vite v7.2.4 - Next Generation Frontend Tooling
• React v19.0.0 - Latest stable React with concurrent features
• TypeScript v5.6.2 - Type-safe development
• Tailwind CSS v3.4.17 - Utility-first CSS framework
• shadcn/ui v3.5.0 - Beautiful, accessible components
• Mastra - Agent framework for AI workflows
• OpenRouter - Unified API for multiple AI models
• Node.js v22.12.0 - JavaScript runtime

Features

• ⚡️ Lightning fast HMR with Vite
• 🎨 Tailwind CSS for styling
• 🧩 shadcn/ui components pre-configured
• 📝 TypeScript for type safety
• 🎯 Path aliases configured (@/ for src/)
• 🌗 Dark mode support built-in
• 📦 Optimized production builds
• 🤖 AI Agent powered by Mastra & OpenRouter
• 💬 Chat interface for testing AI agents
• 🔌 Extensible agent architecture

Getting Started

Prerequisites

• Node.js 20.19+ or 22.12+
• npm or yarn

Installation

Dependencies are already installed. If you need to reinstall:

```bash npm install ```

Environment Setup

1. Copy the example environment file:

```bash cp .env.example .env ```

2. Get your OpenRouter API key from https://openrouter.ai/keys

3. Add your API key to the .env file:

``` VITE_OPENROUTER_API_KEY=your_actual_api_key_here ```

Development

Start the development server:

```bash npm run dev ```

The app will be available at http://localhost:5173/

Build

Build for production:

```bash npm run build ```

Preview the production build:

```bash npm run preview ```

Project Structure

``` . ├── public/ # Static assets ├── src/ │ ├── agents/ # AI agent configuration │ │ ├── config.ts # Mastra & OpenRouter setup │ │ └── testAgent.ts # Test agent implementation │ ├── components/ # React components │ │ ├── ui/ # shadcn/ui components │ │ └── AgentChat.tsx # AI chat interface │ ├── lib/ # Utility functions │ ├── App.tsx # Main app component │ ├── main.tsx # Entry point │ └── index.css # Global styles ├── specs/ # Project specifications └── index.html # HTML template ```

AI Agent

The application includes a test AI agent powered by Mastra and OpenRouter.

Features

• Chat Interface: Interactive UI to communicate with the AI agent
• OpenRouter Integration: Access to multiple AI models through a single API
• Extensible Architecture: Easy to add new agents and tools
• Type-Safe: Full TypeScript support for agent configuration

Current Model

The test agent uses meta-llama/llama-3.1-8b-instruct:free from OpenRouter, which is free to use.

Adding Custom Agents

1. Create a new agent file in src/agents/
2. Configure the agent with your desired model and instructions
3. Export a chat function similar to chatWithAgent
4. Use the agent in your components

Available Models

OpenRouter provides access to many models. Some popular options:

• meta-llama/llama-3.1-8b-instruct:free (Free)
• openai/gpt-4-turbo
• anthropic/claude-3.5-sonnet
• google/gemini-pro

See OpenRouter Models for the full list.

Adding shadcn/ui Components

Note: The shadcn CLI has compatibility issues with Node.js v22. Components must be added manually.

To add a new component:

1. Visit shadcn/ui components
2. Copy the component code
3. Create a new file in src/components/ui/
4. Import and use in your app

The Button component is already included as an example.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Configuration

• Vite config: vite.config.ts
• TypeScript config: tsconfig.json, tsconfig.node.json
• Tailwind config: tailwind.config.js
• PostCSS config: postcss.config.js
• shadcn/ui config: components.json

Path Aliases

The project uses @/ as an alias for the src/ directory:

```typescript import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' ```

License

MIT