Portaljs
AI-native framework for building data portals. Scaffold a full portal from a brief and load datasets in minutes with agentic skills — any backend (CKAN, GitHub, Frictionless).
Install
npx tiged datopian/portaljs/examples/portaljs-catalog my-portalclaude mcp add portaljs -- npx tiged datopian/portaljs/examples/portaljs-catalog my-portal{
"mcpServers": {
"portaljs": {
"command": "npx",
"args": [
"tiged",
"datopian/portaljs/examples/portaljs-catalog",
"my-portal"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →PortalJS
<b>The AI-native framework for building data portals.</b>
Describe the portal you want — your agent helps you choose an architecture, scaffolds it, and loads your data.
Docs
·
Discussions
·
Report a bug
Quickstart
Create a portal — one command, nothing to install beyond Node 22+:
npm create portaljs@latest my-portal
cd my-portal
npm run dev # → http://localhost:3000
You get the three surfaces — Home, a Catalog (/search), and a dataset Showcase
(/@<namespace>/<slug>) — over sample data. Plain, editable Next.js, no lock-in. Add your
own CSV/JSON to datasets.json and it renders automatically.
Build it with your AI assistant — PortalJS ships Claude Code
skills that do the assembly. Install them once (into ~/.claude/commands):
curl -fsSL https://raw.githubusercontent.com/datopian/portaljs/main/scripts/install-portaljs-skills.sh | bash
Then, in a Claude Code session from any directory:
/portaljs-architect not sure what stack you need? start here
/portaljs-new-portal "Auckland Council open data portal"
/portaljs-add-dataset ./data/air-quality.csv
/portaljs-new-portal scaffolds the three surfaces; /portaljs-add-dataset (or /portaljs-add-resource) loads data;
/portaljs-connect-ckan points it at a CKAN backend; /portaljs-deploy ships it. (All skills + install →)
Prefer the bare template — plain Next.js, no AI, no lock-in:
npx tiged datopian/portaljs/examples/portaljs-catalog my-portal
cd my-portal && npm install && npm run dev # → http://localhost:3000
You get Home, a Catalog (/search), and a dataset Showcase (/@<namespace>/<slug>) over
sample data. Add your own CSV/JSON to datasets.json and it renders automatically.
⭐ If it's useful, a star helps others find it.
Why PortalJS
Building a data portal has always meant more than a website. You have to decide where the data lives, how it's versioned, how people search it, how it's served, and how it's governed — and then wire a frontend on top. Teams either over-build on a heavy data warehouse they don't need, or under-build on a pile of scripts that doesn't scale.
PortalJS is an open-source, agentic skills framework that helps data teams build, develop, and ship data portals — and the data infrastructure underneath them. It isn't only a frontend. The skills do two jobs:
- Advise — given what you're building, what your data is, and what it's for, they recommend an architecture: storage, compute, catalog, access, hosting, metadata.
- Build — they scaffold that stack as plain, editable Next.js code with no lock-in.
It is opinionated but open: the recommended modern path is git + object storage (Cloudflare R2) + Parquet, queried with DuckDB — an open lakehouse instead of a classic warehouse. For living, incremental tables you can layer on DuckLake, and a traditional datastore (CKAN, a warehouse) stays a first-class option when you need it. You always own plain code.
Built and maintained in the open by Datopian and the PortalJS community.
Architecture at a glance
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…