DEV Community: Chaoming Li

I Built a Claude Code Plugin That Ships a Production-Ready SaaS Product

Chaoming Li — Tue, 14 Apr 2026 12:51:28 +0000

Every SaaS I've built starts the same way.

Set up a marketing site. Wire up authentication. Integrate Stripe. Add team management. Handle permissions. Make it multilingual. Deploy it.

None of that is your product. It's infrastructure. And it takes weeks before you write a single line of code that actually matters.

So I packaged all of it into an open-source Claude Code plugin called Build SaaS.

saasroo / build-saas

Open-source playbook and Claude Code plugin for building SaaS products — marketing sites with Saasify + web apps with Fireact

Build SaaS

An open-source playbook and Claude Code plugin for building SaaS products from scratch.

Build a complete SaaS with two open-source tools:

Saasify — Hugo theme for marketing websites (landing pages, pricing, blog, docs)
Fireact — Framework for web apps (auth, billing, teams — Firebase + React + Stripe)

See It in Action

This plugin was used to build EquiRound — a production SaaS for cap table management, ESOP tracking, and funding round dilution simulation. From zero to a live product with a marketing site and a full web app:

Marketing site — Hugo + Saasify theme with homepage, solutions pages, pricing, company page, blog, and 9 languages
Web app — React 19 + Firebase + Fireact with Google OAuth, Stripe billing, team permissions, and 57 components for cap table, ESOP, simulation, and investor portal

Two Ways to Use This

Use the Claude Code plugin if you want an…

View on GitHub

What It Does

You install the plugin, tell Claude what your SaaS does, and it builds two things with you:

1. A Marketing Site (Hugo + Saasify)

A complete, production-ready marketing website:

Homepage with hero section, feature showcase, testimonials, and CTA
Pricing page with plan comparison and FAQ
About page with team bios, company values, and stats
Feature pages for each product capability
Blog with categories, tags, and sidebar
Documentation hub with sidebar navigation
Careers page with job listings
SEO-optimized, responsive, 90+ Lighthouse scores
21 built-in shortcodes for rapid page building
Multilingual support (i18n) out of the box

Built on Saasify, an open-source Hugo theme purpose-built for SaaS sites.

2. A Web App (React + Firebase + Fireact)

A full SaaS application with everything wired up:

Authentication (email/password, Google OAuth, GitHub OAuth)
Subscription billing with Stripe (free + paid plans)
Team management with email invitations
Role-based access control (access, editor, admin)
Firebase backend (Firestore, Cloud Functions)
TailwindCSS responsive UI
Local development with Firebase emulators
CI/CD deployment to Firebase Hosting

Built on Fireact, an open-source SaaS framework.

How It Works

Install the plugin:

claude plugin add github:saasroo/build-saas

Then just tell Claude what you want:

Build me a SaaS for project management with pricing at $0/$29/$99

The plugin includes three skills:

build-saas — Orchestrator that asks what you need and guides the full build
build-marketing-site — Builds the marketing site step by step
build-web-app — Scaffolds and configures the web app

Each skill gathers your requirements (product name, features, pricing, brand colors, auth providers), then generates everything — config files, pages, components, the works.

If you build both, the orchestrator links them together: CTA buttons point to your app's signup, pricing stays in sync with Stripe plans, branding is consistent across both.

Don't Use Claude Code? No Problem

The repo also includes a written playbook — the same workflows, written as step-by-step tutorials:

You can follow these guides in any development environment. No AI required.

We Used It Ourselves

We built EquiRound — a cap table management, ESOP tracking, and funding round dilution simulation platform — using the skills in this plugin.

Marketing site: Hugo + Saasify with homepage, solutions pages, pricing, company page, blog, and 9 languages
Web app: React 19 + Firebase + Fireact with Google OAuth, Stripe billing, team permissions, and 57 components across cap table, ESOP, simulation, and investor portal modules

From zero to a production SaaS.

The Tech Stack

Here's what you end up with after a full build:

Layer	Marketing Site	Web App
Framework	Hugo Extended	React 19 + TypeScript
Styling	TailwindCSS	TailwindCSS
Build	PostCSS + Hugo	Vite
Auth	—	Firebase Auth (email, Google, GitHub)
Database	—	Firestore
Backend	—	Firebase Cloud Functions
Payments	—	Stripe
Hosting	Any static host	Firebase Hosting
i18n	Hugo i18n	i18next

Everything is open source. The plugin, the theme, the framework. MIT licensed.

Project Structure

build-saas/
├── docs/                          # Readable playbook guides
│   ├── marketing-site.md          # Marketing site tutorial
│   └── web-app.md                 # Web app tutorial
├── skills/                        # Claude Code skills
│   ├── build-saas/                # Orchestrator skill
│   ├── build-marketing-site/      # Skill + 7 reference files
│   └── build-web-app/             # Skill + 7 reference files
└── templates/                     # Starter configuration files
    ├── marketing-site/            # hugo.toml, tailwind.config.js
    └── web-app/                   # firebase.json, .env.example

The skills include detailed reference files — installation guides, config templates, shortcode references, architecture docs, troubleshooting guides — so Claude has everything it needs without hitting external docs.

Why I Built This

I run a portfolio of SaaS products. Every time I started a new one, I spent the first few weeks on the same foundation work. Marketing site. Auth. Billing. Teams. It's necessary but it's not differentiated.

I'd already open-sourced the two tools I use for this — Saasify for marketing sites and Fireact for web apps. But using them still required reading docs, copying config templates, and wiring things together manually.

A Claude Code plugin was the natural next step. Package the knowledge into skills that Claude can execute interactively, and suddenly "start a new SaaS" goes from weeks to a conversation.

Get Started

claude plugin add github:saasroo/build-saas

Or read the playbook: github.com/saasroo/build-saas

I'd love to hear what you think — what's missing, what would make it more useful, what you'd build with it. Open an issue or drop a comment below.

How to Add an AI Agent to Your React App in 10 Minutes

Chaoming Li — Fri, 16 Jan 2026 17:29:00 +0000

This tutorial shows you how to add an AI agent to your React application.

Not a chatbot that answers questions. An agent that understands your app's state and can take action—create records, update data, trigger workflows.

By the end, you'll know how to:

Install the component
Add it to your app with a display mode
Give the agent context about your app's state
Define tools the agent can call

You can apply these patterns to any React app—whether you're building a dashboard, a CRM, an admin panel, or something else entirely.

Step 1: Install

npm install @inappai/react

Step 2: Add the Component

Drop <InAppAI> into your app. It handles the chat interface and communication with your agent.

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';

function App() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <div>
      {/* Your existing app UI */}

      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        displayMode="popup"
      />
    </div>
  );
}

Display Modes

Choose how the agent appears in your app:

Mode	Description
`popup`	Floating button that opens a chat window
`sidebar`	Fixed panel on the side of your app
`inline`	Embedded directly in your layout
`fullscreen`	Takes over the entire viewport
`modal`	Centered overlay
`hidden`	No UI—control programmatically

<InAppAI displayMode="sidebar" />

Pick the one that fits your UX. Most apps start with popup or sidebar.

Step 3: Provide Context

Context tells the agent what's happening in your app right now. Without it, the agent is blind.

<InAppAI
  agentId="your-agent-id"
  messages={messages}
  onMessagesChange={setMessages}
  context={() => ({
    currentUser: { name: 'Alice', role: 'admin' },
    currentPage: 'dashboard',
    selectedItems: selectedItems,
  })}
  displayMode="popup"
/>

Why a function? The agent needs fresh data after each action. By passing a function, InAppAI calls it again after every tool execution to get the latest state.

What to include in context

Include whatever helps the agent understand your app:

Current user — name, role, permissions
Current view — which page, what filters are active
Selected items — what the user has focused on
Relevant data — records, counts, status

Keep it concise. Only include what the agent needs to help the user.

Step 4: Define Tools

A tool is a function the agent can call. This is how the agent takes action in your app.

Every tool has four parts:

{
  name: 'toolName',              // What the agent calls it
  description: '...',            // When to use it
  parameters: { ... },           // What inputs it needs
  handler: async () => { ... }   // What it actually does
}

Here's a simple example—a tool that searches for something:

const tools = [
  {
    name: 'search',
    description: 'Search for items by keyword',
    parameters: {
      type: 'object',
      properties: {
        query: { type: 'string', description: 'Search term' },
      },
      required: ['query'],
    },
    handler: async ({ query }) => {
      const results = items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      );
      return { results, count: results.length };
    },
  },
];

Pass your tools to the component:

<InAppAI
  agentId="your-agent-id"
  messages={messages}
  onMessagesChange={setMessages}
  tools={tools}
  context={() => ({ items })}
  displayMode="popup"
/>

How tool execution works

When a user says "Search for budget reports":

Agent reads the description → decides search is the right tool
Agent extracts parameters → { query: "budget reports" }
Handler runs → filters your data
Agent sees the result → responds "Found 3 items matching 'budget reports'."

Tools can modify state

Tools aren't just for reading data. They can create, update, and delete:

{
  name: 'createItem',
  description: 'Create a new item',
  parameters: {
    type: 'object',
    properties: {
      name: { type: 'string', description: 'Item name' },
      category: { type: 'string', enum: ['A', 'B', 'C'] },
    },
    required: ['name'],
  },
  handler: async ({ name, category = 'A' }) => {
    const newItem = { id: crypto.randomUUID(), name, category };
    setItems(prev => [...prev, newItem]);
    return { success: true, item: newItem };
  },
}

After the handler runs and updates state, InAppAI calls your context() function again. The agent sees the updated data and can respond accordingly.

Putting It Together: A Task Manager Example

Let's see how these pieces combine in a real application. Here's a task manager where the AI agent can create, list, complete, and delete tasks.

Try it live: react-demo.inappai.com

import { useState } from 'react';
import { InAppAI, Tool, Message } from '@inappai/react';

interface Task {
  id: string;
  text: string;
  priority: 'low' | 'medium' | 'high';
  completed: boolean;
}

export function TaskManager() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [messages, setMessages] = useState<Message[]>([]);

  const tools: Tool[] = [
    {
      name: 'createTask',
      description: 'Create a new task when the user wants to add something to their list',
      parameters: {
        type: 'object',
        properties: {
          text: { type: 'string', description: 'The task description' },
          priority: {
            type: 'string',
            enum: ['low', 'medium', 'high'],
            description: 'Priority level. Default to medium if not specified.',
          },
        },
        required: ['text'],
      },
      handler: async ({ text, priority = 'medium' }) => {
        const newTask: Task = { id: crypto.randomUUID(), text, priority, completed: false };
        setTasks(prev => [...prev, newTask]);
        return { success: true, task: newTask };
      },
    },
    {
      name: 'listTasks',
      description: 'Get tasks, optionally filtered by status or priority',
      parameters: {
        type: 'object',
        properties: {
          status: { type: 'string', enum: ['all', 'active', 'completed'] },
          priority: { type: 'string', enum: ['low', 'medium', 'high'] },
        },
      },
      handler: async ({ status = 'all', priority }) => {
        let filtered = tasks;
        if (status === 'active') filtered = tasks.filter(t => !t.completed);
        if (status === 'completed') filtered = tasks.filter(t => t.completed);
        if (priority) filtered = filtered.filter(t => t.priority === priority);
        return { tasks: filtered, count: filtered.length };
      },
    },
    {
      name: 'completeTask',
      description: 'Mark a task as completed by ID or matching text',
      parameters: {
        type: 'object',
        properties: {
          identifier: { type: 'string', description: 'Task ID or keyword from task text' },
        },
        required: ['identifier'],
      },
      handler: async ({ identifier }) => {
        const task = tasks.find(
          t => t.id === identifier || t.text.toLowerCase().includes(identifier.toLowerCase())
        );
        if (!task) return { success: false, error: 'Task not found' };
        setTasks(prev => prev.map(t => t.id === task.id ? { ...t, completed: true } : t));
        return { success: true, completed: task.text };
      },
    },
    {
      name: 'deleteTask',
      description: 'Remove a task permanently',
      parameters: {
        type: 'object',
        properties: {
          identifier: { type: 'string', description: 'Task ID or keyword from task text' },
        },
        required: ['identifier'],
      },
      handler: async ({ identifier }) => {
        const task = tasks.find(
          t => t.id === identifier || t.text.toLowerCase().includes(identifier.toLowerCase())
        );
        if (!task) return { success: false, error: 'Task not found' };
        setTasks(prev => prev.filter(t => t.id !== task.id));
        return { success: true, deleted: task.text };
      },
    },
  ];

  return (
    <div style={{ padding: 20 }}>
      <h1>My Tasks</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id} style={{ opacity: task.completed ? 0.5 : 1 }}>
            [{task.priority}] {task.text} {task.completed && '✓'}
          </li>
        ))}
      </ul>
      {tasks.length === 0 && <p>No tasks yet. Ask the agent to add one.</p>}

      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        tools={tools}
        context={() => ({
          tasks: tasks.map(({ id, text, priority, completed }) => ({ id, text, priority, completed })),
          stats: { total: tasks.length, active: tasks.filter(t => !t.completed).length },
        })}
        displayMode="popup"
        theme="light"
      />
    </div>
  );
}

What you can say to the agent

You say	Agent does
"Add a task to review the Q1 budget"	Calls `createTask`
"Add a high-priority task to call John"	Calls `createTask` with `priority: "high"`
"What tasks do I have?"	Calls `listTasks`
"Show me high-priority items"	Calls `listTasks` with priority filter
"Mark the budget task as done"	Calls `completeTask`
"Delete the completed tasks"	Calls `deleteTask`

The agent understands natural language, extracts the right parameters, and executes your tools.

Beyond Client-Side: Knowledge Base and Backend

Everything so far runs in the browser. But production apps often need more:

Knowledge Base (RAG)

Want the agent to answer questions from your documentation, help articles, or product guides? InAppAI supports Retrieval Augmented Generation out of the box.

Add URLs to your knowledge base through the dashboard at app.inappai.com. The system crawls your content, splits it into searchable chunks, and includes relevant sections when the agent responds.

Supported sources:

Documentation sites (GitBook, ReadTheDocs, Docusaurus)
Blog posts and help articles
GitHub READMEs and markdown files

When a user asks a question, the agent searches your knowledge base using semantic similarity—not just keyword matching—and weaves the relevant information into its response.

Backend Configuration

The agentId prop connects your component to InAppAI's managed backend, which handles:

AI provider routing — OpenAI, Anthropic, or Google, configurable per agent
Rate limiting — protect against abuse
Usage tracking — monitor requests and costs
CORS — restrict which domains can call your agent

For user-specific features, pass an authToken:

<InAppAI
  agentId="your-agent-id"
  authToken={userJwtToken}
  // ... other props
/>

This enables per-user rate limits and lets you identify users in your analytics.

All backend settings are configured through the dashboard—no infrastructure to manage.

Apply This to Your App

The task manager is just one example. You can use these same patterns for:

CRM: Create contacts, log activities, update deal stages
Admin dashboard: Filter data, export reports, manage users
E-commerce: Search products, update inventory, process orders
Project management: Create tickets, assign tasks, update status
Support portal: Search knowledge base, create tickets, escalate issues

The key is to think about what actions users commonly take in your app, then expose those as tools.

What's Next

You now have the building blocks to add an AI agent to any React app:

Display modes — control how the agent appears
Context — keep the agent aware of your app's state
Tools — let the agent take action

From here, you can:

Add more tools — any function can become a tool
Expand context — include user info, filters, current view
Customize the UI — 7 themes, custom styling options

Check out the docs for advanced features like knowledge base RAG and multi-provider failover.

Resources

Questions? Drop a comment below.

InAppAI: Open-Source AI Agents for React Apps

Chaoming Li — Thu, 15 Jan 2026 10:32:49 +0000

2026 is the year AI stops explaining what to do and starts doing it.

Users don't want walkthroughs. They want outcomes.

"Add a high-priority task to review the Q1 budget."
"Mark all completed tasks as archived."
"Cancel my subscription."

Not a help article. Just... done.

Today we're open-sourcing InAppAI: React components for building AI agents that actually operate your application.

npm install @inappai/react

This post breaks down the three core concepts that make it work: Agents, Context, and Tools.

The Three Core Concepts

InAppAI is built around a simple mental model:

Concept	What it does
Agent	The AI assistant configured for your app
Context	Real-time app state the agent can see
Tools	Actions the agent can execute

Here's how they fit together:

User: "Add a task to buy groceries"
          ↓
    ┌─────────────┐
    │    AGENT    │  ← Understands intent
    └─────────────┘
          ↓
    ┌─────────────┐
    │   CONTEXT   │  ← Sees current todos: [{id: 1, text: "Call mom"}]
    └─────────────┘
          ↓
    ┌─────────────┐
    │    TOOLS    │  ← Calls addTodo({ text: "Buy groceries" })
    └─────────────┘
          ↓
    UI updates with new todo

Let's look at each one.

1. Agents

An Agent is a server-side AI configuration identified by an agentId. Each agent has its own:

AI provider (OpenAI, Anthropic, or Google)
Model settings (temperature, max tokens)
Knowledge base configuration
Rate limits and caching rules

Your React component connects to an agent like this:

import { InAppAI } from '@inappai/react';

function App() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <InAppAI
      agentId="your-agent-id"
      messages={messages}
      onMessagesChange={setMessages}
    />
  );
}

The agentId is the only required prop. Everything else—provider selection, failover logic, rate limiting—is handled server-side. You can switch from GPT-4 to Claude without changing your frontend code.

Why server-side?

API keys never touch the client
Change models without redeploying
Add rate limits per user/tenant
Enable knowledge base RAG without client complexity

2. Context

Context is the bridge between your UI state and the agent's understanding. Without context, the agent is blind to what's happening in your app.

Pass context as an object or a function that returns fresh state:

<InAppAI
  agentId="your-agent-id"
  messages={messages}
  onMessagesChange={setMessages}

  // Static context
  context={{ userId: "123", plan: "pro" }}

  // Or dynamic context (recommended)
  context={() => ({
    todos: todos.map(t => ({
      id: t.id,
      text: t.text,
      completed: t.completed,
      priority: t.priority,
    })),
    stats: {
      total: todos.length,
      active: todos.filter(t => !t.completed).length,
      completed: todos.filter(t => t.completed).length,
    },
  })}
/>

Why use a function?

When the agent executes a tool (like adding a todo), the component automatically calls your context function again to get fresh state. This lets the agent see the results of its actions:

1. User: "Add a task to buy milk"
2. Agent calls addTodo tool
3. Tool handler: setTodos([...todos, newTodo])
4. Component calls context() again  ← Fresh state
5. Agent sees updated todo list
6. Agent responds: "Done! I've added 'Buy milk' to your list."

Without fresh context, the agent would still see the old state and couldn't confirm what changed.

What to include in context

Include anything the agent needs to make decisions:

context={() => ({
  // Current page/view
  currentView: 'dashboard',

  // User info
  user: {
    name: user.name,
    role: user.role,
    permissions: user.permissions,
  },

  // Relevant data
  selectedItems: selectedIds,
  filters: activeFilters,

  // Application state
  isLoading: false,
  lastError: null,
})}

Keep it lean. Don't dump your entire Redux store—just what's relevant for the agent's decisions.

3. Tools

Tools are functions the agent can call to take action in your app. Each tool has:

name: Identifier the agent uses to call it
description: Helps the agent decide when to use it
parameters: JSON Schema defining expected inputs
handler: The function that actually runs (client-side)

Here's a complete example:

import { Tool } from '@inappai/react';

const todoTools: Tool[] = [
  {
    name: 'addTodo',
    description: 'Create a new todo item when the user wants to add a task',
    parameters: {
      type: 'object',
      properties: {
        text: {
          type: 'string',
          description: 'The task description',
        },
        priority: {
          type: 'string',
          enum: ['low', 'medium', 'high'],
          description: 'Task priority level. Default to medium if not specified.',
        },
      },
      required: ['text'],
    },
    handler: async ({ text, priority = 'medium' }) => {
      const newTodo = {
        id: crypto.randomUUID(),
        text,
        completed: false,
        priority,
      };
      setTodos(prev => [...prev, newTodo]);
      return { success: true, todo: newTodo };
    },
  },

  {
    name: 'completeTodo',
    description: 'Mark a todo as completed by its ID or by matching text',
    parameters: {
      type: 'object',
      properties: {
        identifier: {
          type: 'string',
          description: 'The todo ID or a keyword from the task text',
        },
      },
      required: ['identifier'],
    },
    handler: async ({ identifier }) => {
      const todo = todos.find(
        t => t.id === identifier ||
             t.text.toLowerCase().includes(identifier.toLowerCase())
      );

      if (!todo) {
        return { success: false, error: 'Todo not found' };
      }

      setTodos(prev =>
        prev.map(t => t.id === todo.id ? { ...t, completed: true } : t)
      );

      return { success: true, completed: todo.text };
    },
  },

  {
    name: 'deleteTodo',
    description: 'Remove a todo from the list permanently',
    parameters: {
      type: 'object',
      properties: {
        id: {
          type: 'string',
          description: 'The todo ID to delete',
        },
      },
      required: ['id'],
    },
    handler: async ({ id }) => {
      const todo = todos.find(t => t.id === id);
      if (!todo) {
        return { success: false, error: 'Todo not found' };
      }

      setTodos(prev => prev.filter(t => t.id !== id));
      return { success: true, deleted: todo.text };
    },
  },
];

How tool execution works

User sends message → "Add a high-priority task to review the budget"
Agent analyzes intent → Decides to call addTodo
Backend returns tool call → { name: "addTodo", arguments: { text: "Review the budget", priority: "high" } }
Handler executes → Your React state updates
Results sent back → Agent sees { success: true, todo: {...} }
Agent responds → "I've added 'Review the budget' as a high-priority task."

The handler runs in your React component, so it has full access to state setters, hooks, and any other client-side logic.

Tool design tips

Be specific with descriptions. The agent uses descriptions to decide which tool to call:

// ❌ Vague
description: 'Handles todos'

// ✅ Specific
description: 'Create a new todo item when the user wants to add a task, reminder, or action item to their list'

Return useful information. The agent uses return values to formulate its response:

// ❌ Minimal
return { success: true };

// ✅ Informative
return {
  success: true,
  todo: newTodo,
  message: `Created "${newTodo.text}" with ${newTodo.priority} priority`
};

Handle errors gracefully. Return error info instead of throwing:

handler: async ({ id }) => {
  const item = items.find(i => i.id === id);
  if (!item) {
    return { success: false, error: `Item with ID ${id} not found` };
  }
  // ... proceed
}

Putting It All Together

Here's a complete example combining all three concepts:

import { useState } from 'react';
import { InAppAI, Tool, Message } from '@inappai/react';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
}

export function TodoApp() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [messages, setMessages] = useState<Message[]>([]);

  // Define tools with access to state
  const tools: Tool[] = [
    {
      name: 'addTodo',
      description: 'Create a new todo item',
      parameters: {
        type: 'object',
        properties: {
          text: { type: 'string', description: 'Task description' },
          priority: {
            type: 'string',
            enum: ['low', 'medium', 'high'],
            description: 'Priority level'
          },
        },
        required: ['text'],
      },
      handler: async ({ text, priority = 'medium' }) => {
        const newTodo: Todo = {
          id: crypto.randomUUID(),
          text,
          completed: false,
          priority,
        };
        setTodos(prev => [...prev, newTodo]);
        return { success: true, todo: newTodo };
      },
    },
    {
      name: 'listTodos',
      description: 'Get all todos, optionally filtered by status',
      parameters: {
        type: 'object',
        properties: {
          filter: {
            type: 'string',
            enum: ['all', 'active', 'completed'],
            description: 'Filter by completion status',
          },
        },
      },
      handler: async ({ filter = 'all' }) => {
        let filtered = todos;
        if (filter === 'active') filtered = todos.filter(t => !t.completed);
        if (filter === 'completed') filtered = todos.filter(t => t.completed);
        return { todos: filtered, count: filtered.length };
      },
    },
    // ... more tools
  ];

  return (
    <div className="app">
      {/* Your existing UI */}
      <TodoList todos={todos} />

      {/* AI Agent */}
      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        tools={tools}
        context={() => ({
          todos: todos.map(({ id, text, completed, priority }) => ({
            id, text, completed, priority,
          })),
          stats: {
            total: todos.length,
            active: todos.filter(t => !t.completed).length,
            completed: todos.filter(t => t.completed).length,
          },
        })}
        displayMode="popup"
        theme="light"
      />
    </div>
  );
}

Now users can say:

"Add three tasks: buy milk, call dentist, and finish report"
"What tasks do I have left?"
"Mark the dentist task as done"
"Delete all completed tasks"

The agent understands intent, sees your current state, and executes the right tools.

What's Next

This is just the foundation. InAppAI also supports:

Knowledge Base RAG — Ground responses in your docs
Multiple display modes — Popup, sidebar, inline, fullscreen
Theme customization — 7 built-in themes or bring your own
Tool Registry — Manage tools across components with namespaces

We'll cover these in future posts.

Get Started

Try the demo: react-demo.inappai.com

Read the docs: inappai.com/docs

Star on GitHub: github.com/inappai/react

InAppAI is MIT-licensed. Inspect the code, fork it, extend it, or contribute back.

Questions? Drop a comment below or open an issue on GitHub.

Open source Hugo Theme for building SaaS websites: Saasify

Chaoming Li — Fri, 06 Dec 2024 23:36:41 +0000

What is Hugo CMS?

Hugo is an open-source static site generator that's built for speed and simplicity. It’s a great choice if you want a fast, secure, and customizable website without dealing with the complexities of traditional CMS platforms. Whether you're a developer or just starting out, Hugo can make managing your site straightforward.

Saasify: A Theme for SaaS Websites

If you’re looking for Hugo themes, there are plenty of open-source options for blogs and personal sites. However, finding something designed specifically for SaaS can be a bit tricky. That’s where Saasify comes in — it’s a theme built with SaaS websites in mind.

What Saasify Offers

Saasify has a clean, modern design and is straightforward to set up. It’s a good starting point if you’re creating a website for a SaaS product and want something simple to build on.

Here’s how it looks:

Visit the live demo site to experience it firsthand here:
Live Demo

You can check out the theme here:
Saasify Theme on GitHub

Getting Started

If you want to use Saasify, here’s what you can do:

Create a Hugo site.
Add the Saasify theme as a Git submodule.
Use the example configurations and pages from the demo site to set up your project: Demo Site GitHub Repository

That’s it! If you’re already using Hugo or planning to try it, Saasify might be worth exploring for SaaS projects.

🌟Open-source SaaS Starter: React + Firebase + Stripe + i18n

Chaoming Li — Tue, 26 Nov 2024 12:40:58 +0000

After several years of building SaaS businesses, I recognized a recurring challenge: nearly every SaaS application requires implementing a set of common features such as authentication, subscription management, team collaboration, billing, and more. To address this, I developed fireact.dev—an open-source project that consolidates the essential components I've built over the years. fireact.dev leverages React, Firebase, Stripe, and i18n to help developers expedite their SaaS projects, allowing them to focus on their unique business logic rather than starting from scratch.

🔍 Core Features

Robust Single Sign-On (SSO): Integrate Firebase authentication with providers like Google, Facebook, Microsoft, and other popular sign-in options to ensure a smooth user experience.
Seamless Stripe Integration: Manage subscriptions and process payments with our built-in Stripe support, simplifying your billing operations.
Multiple Subscription Management: Enable users to handle multiple subscription accounts within a single platform, providing flexibility and scalability for building B2B SaaS.
Advanced User Permissions: Enhance security and collaboration by managing user access and permissions within different subscription accounts.
Customizable Permission Framework: Tailor your SaaS functionalities with our flexible permission system, allowing for extensive customization to meet your specific needs.
Multilingual Support (i18n): Cater to a global audience by offering a multilingual interface, ensuring your application is accessible to users worldwide.

🚀 Why Choose fireact.dev

Component-Based Architecture: fireact.dev is built with React components that are easy to integrate. If customization is needed, you can simply replace components with your own designs and functionalities.
Modern Tech Stack: Utilizing TypeScript and Tailwind CSS, fireact.dev ensures a contemporary and efficient development environment, aligning with current industry standards.
Easy Package Management: Install components as npm packages. There's no need to fork or maintain the source code yourself—simply update the packages to access new features and improvements as they become available.

🌐 Live Demonstration

See fireact.dev in action by visiting our demo site. You can create new projects using the test credit card number 4242 4242 4242 4242 with any future expiration date and CVC to explore the platform's capabilities firsthand.

🛠️ Start Building Your SaaS Today

Eager to kickstart building your SaaS application? Visit our website to access comprehensive documentation that will guide you through the setup and customization process, helping you get your project off the ground swiftly and efficiently.

🤝 Join the fireact.dev Community

If fireact.dev resonates with your development needs, I encourage you to contribute to the project. Whether it's through coding, improving documentation, or spreading the word, your support is invaluable. fireact.dev is dedicated to remaining a free and open-source resource, empowering developers everywhere to bring their SaaS visions to life.

🔗 GitHub Repository: https://github.com/fireact-dev/main

Implement Unrecognized Device Login Alerts in React

Chaoming Li — Wed, 13 Nov 2024 20:00:37 +0000

A few years ago, my PayPal account was hacked. I received an email notifying me that an unrecognized device from another country had accessed my account. Thanks to that timely alert, I was able to change my password quickly and prevent any financial loss. This experience underscored the importance of alerting users when their accounts are accessed from unfamiliar devices—a simple yet effective way to combat phishing attacks and unauthorized access.

As a React developer and technical entrepreneur, I searched for an easy-to-implement API that could enable my React web app to send unrecognized device alerts to users. Surprisingly, I found that this feature was either missing from popular authentication solutions like Firebase or only available through costly enterprise services. So, I decided to create a solution myself and share it with the community.

Introducing AuthAlert

AuthAlert is an API designed to help you integrate unrecognized device sign-in alerts into your React applications effortlessly. It allows you to notify users when their accounts are accessed from new devices, enhancing security and user trust.

How Do Unrecognized Device Sign-in Alerts Work?

To implement this feature, your application needs to keep track of known devices for each user. When a user logs in from a new device, the system can flag it as unrecognized and trigger an alert. This process requires storing device information in a server-side database—something React alone cannot handle.

AuthAlert provides an API that simplifies this process. It securely manages the storage of known devices and sends alerts to users via email, including critical information like device model, operating system, and location. These details help users quickly assess potential risks and take necessary actions to secure their accounts.

Live Demo

Curious to see how AuthAlert works in action? Try our live demo and experience it yourself in just one minute. Visit AuthAlert Live Demo and follow the instructions to get a firsthand look at how unrecognized device alerts can enhance your application's security.

How to Implement Unrecognized Device Alerts in Your React App

Installation

First, install the authalert npm package in your React project:

npm install authalert

Setup

Sign Up on AuthAlert: Go to AuthAlert and create a free account.
Create a Project: After signing up, create a new project to obtain your unique Project ID.
Authorize Your App: Include your React app's domain name in the project settings to authorize API calls.
Configure Email Templates: Set up your Mailgun templates for alert emails to customize the notifications your users will receive.

Calling the API

In your React app, import the authalert package and call the API right after user authentication:

import AuthAlertAPI from 'authalert';

const projectId = 'your_project_ID';

const result = await AuthAlertAPI(projectId, {
  user_id: user.id,
  email: user.email,
  first_name: user.first_name,
  last_name: user.last_name,
});

console.log(result);

Replace 'projectId' with the Project ID from AuthAlert, and ensure you pass the correct user details to the API.

Note: AuthAlert does not store personal information like the user's email, first name, or last name. This data is only passed to your Mailgun account for sending alert emails.

Testing the Implementation

To test, log in to your React app from one device, and then log in from a different device using the same account. You should receive an alert email immediately upon the second login.

Enhancing User Experience

If your application uses multi-factor authentication (MFA), AuthAlert can improve the user experience by providing flags about new devices. You can use these flags to trigger MFA only when users sign in from unrecognized devices, making the login process smoother and less intrusive for regular users.

Backend Integration

AuthAlert also supports webhook requests to your backend, allowing you to integrate alerts with other systems. For example, you could automatically flag high-risk users in your CRM based on unrecognized device logins.

Your Feedback

Integrating unrecognized device login alerts into your React application is a proactive step toward enhancing account security. AuthAlert simplifies this process with an easy-to-use API and straightforward implementation.

It's free to get started, so give it a try and let me know your feedback. Together, we can make the web a safer place for everyone.

Adding Location and Device Type Features in Flutter Apps with VisitorAPI

Chaoming Li — Sat, 16 Mar 2024 23:03:48 +0000

If you're a Flutter developer looking to make your apps smarter by incorporating user location and device type without diving deep into native code, VisitorAPI is a straightforward solution. This service gives you access to important user data with just a simple API call. This guide is focused on how you can use VisitorAPI in your Flutter projects to fetch and use user data for a more customized app experience.

Understanding VisitorAPI

VisitorAPI provides detailed information about your app users, like where they're located and what device they're using. This can be pretty useful for tailoring app content, improving security, or even just understanding your user base better.

How to Use VisitorAPI in Flutter

Let's walk through how to integrate VisitorAPI into a Flutter app. We'll start by adding a package, fetching data from VisitorAPI, and then using this data in our app.
Step 1: Add the HTTP Package

First, you'll need to make HTTP requests. Add the http package to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Don’t forget to run flutter pub get to install it.

Step 2: Fetch Data from VisitorAPI

Next, you'll want to fetch data from VisitorAPI. Import the http package and JSON decoder in your Dart file:

import 'package:http/http.dart' as http;
import 'dart:convert'; // For JSON

Then, make a function to fetch the data. Remember to replace 'my-key' with your actual VisitorAPI project ID:

Future<void> fetchVisitorInfo() async {
  String url = 'https://api.visitorapi.com/api/?pid=my-key';
  final response = await http.get(Uri.parse(url));
  final String responseString = response.body;
  Map<String, dynamic> data = jsonDecode(responseString)["data"];
  // 'data' now has the user's location and device info
}

Step 3: Show the Data in Your App

Now, use the fetched data to customize your app’s UI. Here’s a basic example to display user info:

class VisitorInfoScreen extends StatefulWidget {
  @override
  _VisitorInfoScreenState createState() => _VisitorInfoScreenState();
}

class _VisitorInfoScreenState extends State<VisitorInfoScreen> {
  Map<String, dynamic> userInfo = {};

  @override
  void initState() {
    super.initState();
    fetchVisitorInfo().then((data) {
      setState(() {
        userInfo = data;
      });
    }).catchError((error) {
      print("Error fetching visitor data: $error");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Info')),
      body: Center(
        child: userInfo.isNotEmpty
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Location: ${userInfo["location"]["city"]}, ${userInfo["location"]["country"]}'),
                  Text('Device: ${userInfo["device"]["type"]}'),
                ],
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

Wrapping Up

VisitorAPI offers a simple way to get valuable user data for your Flutter apps, helping you create a more personalized and engaging user experience without needing to deal with complex platform-specific code. By following these steps, you'll be able to start incorporating real-world user data into your apps in no time. Happy coding!

Fireactjs: my open-source NPM packages for building SaaS using React, Firebase, and Stripe

Chaoming Li — Fri, 14 Apr 2023 09:59:57 +0000

Why Fireactjs

SaaS products typically require essential functionalities such as user authentication, subscription payments, and user permission management. Developing these features from scratch can be time-consuming, often taking several days, and the core requirements are generally consistent across various SaaS products.

To alleviate this, I have developed NPM packages that can enable tech founders and developers to quickly set up a SaaS framework within an hour, allowing them to concentrate on building the distinctive and valuable features of their SaaS product. The framework is based on Reactjs, Firebase and Stripe, so I called it Fireactjs.

The Fireactjs packages

The framework has been developed with a focus on flexibility and scalability. As of now, the framework comprises of three packages, each of which is accompanied by a set of components that can be tailored to suit your specific requirements. Additionally, the framework allows for the development of your own components that can be used to replace existing ones, should the need arise. This ensures that the framework can be easily customised and extended to meet the evolving needs of your SaaS product.

There are three distinct packages included in the framework, namely:

@fireactjs/core: This is the core package that comprises of essential components such as sign-up, sign-in, and user profile management, which includes the ability to modify passwords, usernames, and other related details.
@fireactjs/saas: This package is dedicated to subscription management, Stripe payment integration, and user permission management.
@fireactjs/saas-cloud-functions: This package comprises of server-side functions that are specifically tailored for Firebase, including a webhook integration for Stripe.

Live demo

You can get a firsthand experience of the framework by visiting the live demo, which can be accessed via https://saas-demo.fireactjs.com/.

The live demo provides you with the opportunity to create both free and paid subscriptions, as well as invite other users to your subscription accounts. If you wish to test out the paid subscription feature, you can make use of Stripe testing credit card 4242 4242 4242 4242, along with any future expiry month and a random 3-digit CVV.

How to build your SaaS

To begin, you will first need to create a standard React web application. Following this, you can proceed with the installation instructions outlined in the @fireactjs/core installation guide in order to configure the web app for user authentication. This will enable your users to register, sign in, and manage their user profiles.

Next, you can follow the installation guide for @fireactjs/saas to set up the SaaS package and cloud functions. Additionally, you will need to establish a connection between your React SaaS application and your Stripe account.

Once you have completed these steps, your React web app will be equipped to support user registration, sign-in, subscription account creation via Stripe payment plans, and the ability to invite other users to subscription accounts. The only remaining part would be to develop your SaaS features.

You can create a component for your feature as in the example below. The example simply reads the user information and display it. But you can develop the SaaS feature that your users would use and pay for following the same coding approach.

import React from "react";
import { AuthContext } from "@fireactjs/core";
import { Box, Link, Paper } from "@mui/material";

export const MyComponent = () => {

    return (
        <AuthContext.Consumer>
            {context => (
                <Paper>
                    <Box p={2}>
                        <h1>Example Component</h1>
                        <p>Fireactjs is a framework to build SaaS web application. Replace this component with your SaaS feature components.</p>
                        <p><strong>
                            This is an example component to demostrate how to retrieve the user information.
                            For details, see <Link href="https://fireactjs.com/docs/core-package/development/" target="_blank">the documentation</Link>.
                        </strong></p>
                        <p>User ID: {context.authUser.user.uid}</p>
                        <p>Name: {context.authUser.user.displayName}</p>
                        <p>Email: {context.authUser.user.email}</p>
                        <p>Verified: {context.authUser.user.emailVerified?"Yes":"No"}</p>
                        <p>Avatar URL: {context.authUser.user.photoURL}</p>
                    </Box>
                </Paper>
            )}
        </AuthContext.Consumer>
    )
}

And then simply embed your component to the App.js in the routes with the permission control defined.

<Route path={pathnames.Subscription} element={<SubscriptionProvider loader={<Loader size="large" />} />} >
    <Route element={<AppTemplate logo={<Logo size="large" />} toolBarMenu={<UserMenu />} drawerMenu={<SubscriptionMenu />} />}>
        <Route element={<PermissionRouter permissions={["access"]} />} >
            <Route exact path={pathnames.Subscription+"/"} element={<MyComponent />} />
        </Route>
        <Route element={<PermissionRouter permissions={["admin"]} />} >
            ...
        </Route>
    </Route>
</Route>

Join the project

If you have any problems during the installation process or while building your SaaS, feel free to reach out to me through the Fireactjs GitHub. You can also contribute to the open-source framework by submitting pull requests and suggestions for improvement. I hope that this framework will help you to build your SaaS product more efficiently and effectively.

Upvote on Product Hunt

Please help me promote the project to tech founders and developers by upvoting it on Product Hunt.

React + Firebase + Stripe = Fireactjs, the new open-source framework for building SaaS fast

Chaoming Li — Tue, 07 Feb 2023 12:00:50 +0000

About two years ago, I created an open-source project called Fireact to build SaaS web applications with React + Firebase + Stripe. Today, I am excited to share my new project Fireactjs.

What is Fireactjs

Fireactjs is a framework based on React + Firebase + Stripe for building SaaS web applications. It contains a few npm packages including @fireactjs/core package, @fireactjs/saas package and @fireactjs/saas-cloud-functions package.

The packages come with the components to help you setup your SaaS web application in an hour with the following built-in features:

User authentication and user profile management features
Single-sign-on supporting Google, Facebook, Microsoft and a wild range of sign-in methods.
Built-in Stripe integration to create free and paid subscription accounts
Invoice and billing method management features
Template base design for easy customization
Component base architecture that supports full customization
Easy to extend additional features

Why Fireactjs

For tech founders and developers who want to build SaaS web applications, developing user authentication and subscription integration with Stripe takes quite some time and effort. That takes away the time and energy to build the core features of the SaaS. That was the reason I started the Fireact project a couple of years ago. I spent a few months rewriting the project into npm packages so that you can install them to your React application. I hope the new framework will not only save you time in setting up your SaaS application but will also provide a good code base to start customization and further develop your SaaS core features.

Live Demo

You can experience the live demo of Fireactjs here: https://saas-demo.fireactjs.com

You can setup free and paid subscription accounts. To create paid subscription projects, use credit card 4242 4242 4242 4242 with any future expiry month and random 3-digit CVV.

Installation

To install the packages and setup your SaaS web application framework. You will need to create a React application and install the @fireactjs/core package first. See the Fireactjs core package installation documentation for more details.

Then you will need to install the @fireactjs/saas and @fireactjs/saas-cloud-functions packages following the Fireactjs SaaS package installation documentation here.

Resources

Conclusion

As a SaaS tech founder myself, I hope the Fireactjs framework will help you to realize your founder dream too.

If you build your SaaS with Fireactjs, let the world know about it by showing your project on the showcase page via Github https://github.com/fireactjs/website/blob/main/content/en/Showcases/_index.html

Any feedback is welcomed. Please comment below.

Thank you!

Firebase + Reactjs = Fireactjs, the open source framework for building user portals

Chaoming Li — Sat, 19 Nov 2022 10:32:50 +0000

Most web applications require user authentication to access their features. As a web developer and a technical founder, I just wished that there was a package allowing me to skip all the development work to set up the user sign-up, sign-in, change password and other basic user functions in minutes. So I created an open source project called Fireactjs to do that.

Why Fireactjs

Setup in minutes The project allows you to setup a Reactjs application with user authentication features in just a few minutes. It fast-tracks your development process by days to weeks. You don’t need to worry about the authentication features like sign-up and sign-in anymore.
Extensible and customizable framework The framework is component-based so you can easily extend the application by adding new components to it, or replacing the out-of-the-box components (e.g. template components) to customize the application.
Support single sign-on without coding With a simple JSON object as configuration, you can switch on and off the single sign-on methods including Google, Microsoft, Facebook, Twitter, Github and Apple without any coding work.
Out-of-the-box features
- User sign-up
- User sign-in (email and password)
- Single sign-on (Google, Microsoft, Facebook, Twitter, Github and Apple)
- Reset password
- User profile info
- Change name
- Change password
- Change email
- Verify email address
- Delete account

Resources

Website: https://fireactjs.com/
npm package: https://www.npmjs.com/package/@fireactjs/core
Github: https://github.com/fireactjs/core
Demo: https://demo.fireactjs.com/
Get started - learn how to set up your Fireactjs in just minutes: https://fireactjs.com/docs/core-package/installation/
Development - learn how to read the user info and create your own feature component: https://fireactjs.com/docs/core-package/development/

Roadmap

I am planning to add another package to extend the project to integrate with Stripe for SaaS subscription payments in the next few months. Follow me and stay tuned.

Contribution

Please help me with this project. You don’t have to contribute code to help, simply using it and giving feedback will help too. If you like it, please share it with your friends who are also working in web development.

React country and state fields that detect users' geolocation

Chaoming Li — Mon, 24 Oct 2022 10:40:02 +0000

Many React applications require users to select their countries and states during the setup process. It can be very annoying for the users to select a country out of hundreds of countries in a long list. It will be ideal if the country and state fields are able to detect the users’ countries and states and pre-fill them.

There are two possible ways to achieve this goal: Geolocation API or IP geolocation detection. Geolocation API shows a popup that is annoying and scary at the same time, and a lot of users would simply block it.

The challenge for the IP geolocation solution is that JavaScript in browsers isn’t able to access the users’ IP addresses. However, with the help of a server-side API, this can be resolved. This article will cover how to use a React country and state field package that comes with IP geolocation detection without going into the weeds.

Installation

The package we use is called react-country-state-fields and to install it, simply run:

npm i react-country-state-fields

The package uses Material UI but if you don’t use Material UI, it will still function without issues.

Usage of the components

There are three components in the package:

VisitorAPIComponents - this is a invisible component that calls the server-side API to detect the user’s IP geolocation and set the default values of the country and state fields based on the geolocation.
CountryField - this is the country field component that is able to take the geolocation data and set the country automatically. It’s also a user-friendly country field that allows users to pick or type in their countries.
StateField - this is the state field component similar to the country field component, but for the state level. If the country’s states are listed in the package’s JSON file countries.json, the field will have a list of the states for users to pick, otherwise, it will just be an open text field that users can input their states.

It is very simple to put the components into action as in the example code below.

import { CountryField, StateField, VisitorAPIComponents } from 'react-country-state-fields';
import React, { useState } from 'react';

export const MyForm = () => {
  const [country, setCountry] = useState({code: "", label: ""}); // the selected country
  const [state, setState] = useState({code: "", label: ""}); // the selected state
  const visitorApiPrjectId = ""; // assign your project ID here

  return(
    <VisitorAPIComponents projectId={visitorApiPrjectId} handleCountryChange={(countryObj) => setCountry(countryObj)} handleStateChange={(stateObj) => setState(stateObj)}>
      <CountryField label="Country/Territory"></CountryField>
      <StateField label="State/Province"></StateField>
    </VisitorAPIComponents>
  );
}

The country and state React states will contain two properties called code and label when API detects the user’s geolocation or the user change the field values. The code is the ISO code of the country or state, such as “US” for the United States in the country state and “NY” for New York in the state state. This is a screenshot when I load the fields in my testing React application.

You can use them as the following code example:

import { CountryField, StateField, VisitorAPIComponents } from 'react-country-state-fields';
import React, { useState } from 'react';

export const MyForm = () => {
  const [country, setCountry] = useState({code: "", label: ""}); // the selected country
  const [state, setState] = useState({code: "", label: ""}); // the selected state
  const visitorApiPrjectId = ""; // assign your project ID here

  return(
    <div>
      <VisitorAPIComponents projectId={visitorApiPrjectId} handleCountryChange={(countryObj) => setCountry(countryObj)} handleStateChange={(stateObj) => setState(stateObj)}>
        <CountryField label="Country/Territory"></CountryField>
        <StateField label="State/Province"></StateField>
      </VisitorAPIComponents>
      Your country is {country !== null && country.label} and your state is {state !== null && state.label}.
    </div>
  );
}

Enable the geolocation detection

The package uses a server-side API from VisitorAPI. There is a prop named projectId which you need to assign with a valid project ID from VisitorAPI to enable the geolocation detection.

To get a valid project ID, create a free plan or a paid plan depending on your volume of monthly API calls. Once you created a plan, you can see your VisitorAPI project ID in the project dashboard and your API usage. Simply copy and place your VisitorAPI project ID and reload your React application, the fields will be set with your current country and state when they are loaded.

Because VisitorAPI is designed to be used in the frontend so it doesn’t need an API key to authorise the API calls, as any key would be exposed to the Internet and that defeats the purpose of having a key anyway. The API uses the origin of the API requests to authorise the calls and you must put your domain (e.g. yourname.com) into the authorised domain list in the project settings UI of your VisitorAPI project, or it will deny your API calls.

Resources

The component GitHub repo: https://github.com/visitorapi/react-country-state-fields

The example GitHub repo that demonstrates how the components are used: https://github.com/visitorapi/react-country-state-fields-example

Question: Is it possible to separate a Reactjs project with git submodules?

Chaoming Li — Tue, 21 Jun 2022 08:08:33 +0000

The Background

I am working on a new structure of my open source project Fireact which handles the user authentication and subscription payments for SaaS. But the real features of SaaS projects will need to be built on top of Fireact. So I have been thinking is it possible to separate them so SaaS developers can build their features as another Git repo and import it into their Fireact repo as a Git submodule.

The Question

However, there is big challenge I can’t figure out. As submodule repos will need have a bunch of dependencies, it will need some way to modify the package.json in the Fireact repo root folder. How could that be achieved?