Agent Starter React: AI Agent Development Made Easy

Agent Starter React is a comprehensive starter template designed specifically for building AI agent applications using React and TypeScript. It provides a solid foundation with modern tooling, best practices, and pre-configured AI integrations.

🚀 Key Features

Modern React Stack

React 18+: Latest React features with concurrent rendering
TypeScript: Full type safety and enhanced developer experience
Vite: Lightning-fast build tool and development server
Tailwind CSS: Utility-first CSS framework for rapid styling

AI Agent Integration

OpenAI API: Pre-configured OpenAI integration
Agent Framework: Built-in agent conversation management
Streaming Responses: Real-time AI response streaming
Context Management: Persistent conversation context

Developer Experience

Hot Reload: Instant feedback during development
ESLint & Prettier: Code quality and formatting tools
Testing Setup: Jest and React Testing Library configured
CI/CD Ready: GitHub Actions workflows included

💡 Perfect For

AI Application Developers

Chatbot Interfaces: Build conversational AI applications
AI Assistants: Create intelligent virtual assistants
Content Generators: Develop AI-powered content tools
Decision Support: Build AI-driven decision making tools

Startup Teams

Rapid Prototyping: Quick MVP development for AI products
Proof of Concepts: Validate AI application ideas fast
Client Demos: Professional-looking AI demonstrations
Product Development: Foundation for production AI apps

🛠 Quick Start

Installation

# Clone the template
git clone https://github.com/agent-starter/agent-starter-react.git my-ai-app
cd my-ai-app

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Add your OpenAI API key to .env.local

# Start development server
npm run dev

Basic Usage

import { useAgent } from '@/hooks/useAgent';
import { ChatInterface } from '@/components/ChatInterface';

function App() {
  const { messages, sendMessage, isLoading } = useAgent({
    apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    model: 'gpt-4',
    systemPrompt: 'You are a helpful AI assistant.'
  });

  return (
    <div className="min-h-screen bg-gray-50">
      <ChatInterface
        messages={messages}
        onSendMessage={sendMessage}
        isLoading={isLoading}
      />
    </div>
  );
}

🌟 Built-in Components

Chat Interface

Message Bubbles: Styled conversation display
Input Field: Rich text input with send button
Typing Indicators: Visual feedback during AI processing
Message History: Persistent conversation storage

Agent Controls

Model Selection: Switch between different AI models
Temperature Control: Adjust AI response creativity
System Prompts: Configure agent behavior
Context Reset: Clear conversation history

UI Components

Loading States: Elegant loading animations
Error Handling: User-friendly error messages
Responsive Design: Mobile-first responsive layout
Dark Mode: Built-in theme switching

📊 Architecture Overview

Project Structure

agent-starter-react/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── ChatInterface/   # Chat-related components
│   │   ├── AgentControls/   # Agent configuration
│   │   └── ui/              # Base UI components
│   ├── hooks/               # Custom React hooks
│   │   ├── useAgent.ts      # Main agent hook
│   │   ├── useChat.ts       # Chat management
│   │   └── useLocalStorage.ts
│   ├── lib/                 # Utility functions
│   │   ├── openai.ts        # OpenAI API client
│   │   ├── storage.ts       # Local storage helpers
│   │   └── utils.ts         # General utilities
│   ├── types/               # TypeScript definitions
│   └── styles/              # Global styles
├── public/                  # Static assets
├── tests/                   # Test files
└── docs/                    # Documentation

State Management

// Agent state management
interface AgentState {
  messages: Message[];
  isLoading: boolean;
  error: string | null;
  config: AgentConfig;
}

// Custom hook for agent management
export function useAgent(initialConfig: AgentConfig) {
  const [state, setState] = useState<AgentState>({
    messages: [],
    isLoading: false,
    error: null,
    config: initialConfig
  });

  const sendMessage = async (content: string) => {
    setState(prev => ({ ...prev, isLoading: true }));
    
    try {
      const response = await openai.chat.completions.create({
        model: state.config.model,
        messages: [...state.messages, { role: 'user', content }],
        stream: true
      });

      // Handle streaming response
      for await (const chunk of response) {
        // Update UI with streaming content
      }
    } catch (error) {
      setState(prev => ({ ...prev, error: error.message }));
    } finally {
      setState(prev => ({ ...prev, isLoading: false }));
    }
  };

  return { ...state, sendMessage };
}

🔧 Customization

Adding New AI Providers

// lib/providers/anthropic.ts
export class AnthropicProvider implements AIProvider {
  async sendMessage(messages: Message[]): Promise<string> {
    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': this.apiKey
      },
      body: JSON.stringify({
        model: 'claude-3-sonnet-20240229',
        messages: messages
      })
    });
    
    return response.json();
  }
}

Custom Agent Behaviors

// Define specialized agent types
export const agentPresets = {
  codeReviewer: {
    systemPrompt: 'You are an expert code reviewer...',
    model: 'gpt-4',
    temperature: 0.2
  },
  creativeWriter: {
    systemPrompt: 'You are a creative writing assistant...',
    model: 'gpt-4',
    temperature: 0.8
  },
  dataAnalyst: {
    systemPrompt: 'You are a data analysis expert...',
    model: 'gpt-4',
    temperature: 0.1
  }
};

🧪 Testing

Component Testing

import { render, screen, fireEvent } from '@testing-library/react';
import { ChatInterface } from '@/components/ChatInterface';

describe('ChatInterface', () => {
  it('sends message when form is submitted', async () => {
    const mockSendMessage = jest.fn();
    
    render(
      <ChatInterface
        messages={[]}
        onSendMessage={mockSendMessage}
        isLoading={false}
      />
    );

    const input = screen.getByPlaceholderText('Type your message...');
    const button = screen.getByRole('button', { name: /send/i });

    fireEvent.change(input, { target: { value: 'Hello AI' } });
    fireEvent.click(button);

    expect(mockSendMessage).toHaveBeenCalledWith('Hello AI');
  });
});

📈 Deployment

Vercel Deployment

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel --prod

# Set environment variables
vercel env add REACT_APP_OPENAI_API_KEY

Docker Deployment

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

We welcome contributions to improve Agent Starter React!

Development Guidelines

Follow TypeScript best practices
Write tests for new components
Update documentation for new features
Follow the existing code style

Getting Started

# Fork and clone the repository
git clone https://github.com/yourusername/agent-starter-react.git
cd agent-starter-react

# Install dependencies
npm install

# Run tests
npm test

# Start development server
npm run dev

📚 Documentation

Getting Started Guide: Step-by-step setup instructions
Component API: Detailed component documentation
Customization Guide: How to extend and modify the template
Deployment Guide: Production deployment strategies
Best Practices: Recommended patterns and practices

Agent Starter React accelerates AI agent development by providing a solid foundation with modern tooling and best practices. Build production-ready AI applications faster than ever.

Ready to build your AI agent? Get started with Agent Starter React today!

Agent Starter React