React Best Practices Agent

The free and opensource React Best Practices Agent built on 10+ years of real-world experience distilled in Skills powered by Bluebag

Official Tweet · Running locally

Agent Skills via Bluebag

To load and use Skills in the ai-sdk agent, this repo uses Bluebag for managing the entire Skills lifecycle, and Vercel's ai-sdk for the actual agent plumbing.

Getting started

1. Clone the repo

git clone https://github.com/ohansFavour/chat-to-agent
cd chat-to-agent

2. Install dependencies

pnpm install

3. Set environment variables

Copy the example env file and fill in your keys:

cp .env.example .env.local

Required variables:

AUTH_SECRET=<generate with: openssl rand -base64 32>
POSTGRES_URL=<your PostgreSQL connection string>
BLUEBAG_API_KEY=bb_xxx

How to get your Bluebag API key

1. Go to bluebag.ai and sign up or log in
2. Navigate to the API Keys section in your dashboard
3. Click Create API Key and give it a name (e.g., chat-to-agent)
4. Copy the key immediately — you won't see it again
5. Add it to your .env.local as BLUEBAG_API_KEY=bb_xxx

⚠️ Keep your API key server-side only. Never expose it in client-side code.

For more details, see the Bluebag documentation.

Optional (for full functionality):

AI_GATEWAY_API_KEY=<from https://vercel.com/ai-gateway>
BLOB_READ_WRITE_TOKEN=<from Vercel Blob>
REDIS_URL=<your Redis connection string>

4. Run database migrations

pnpm db:migrate

5. Run the app

pnpm dev

Open http://localhost:3000 and start chatting.

Bluebag

This project uses Bluebag for using Agent Skills in ai-sdk agents

Bluebag Documentation

Bluebag Dashboard

Bluebag GitHub

---

License

MIT