# aiarabicdev: complete directory > The curated directory of open source tools for people who build with AI. Generated from the same content as the HTML pages. 47 entries, 8 categories. ======================================================================== CATEGORY: Landing page templates ======================================================================== Open source hero sections, pricing blocks and complete marketing pages. Everything here is code you paste into your own project, not a hosted page builder you rent. ------------------------------------------------------------------------ # Watermelon UI > Technical, animated landing templates installed through the shadcn CLI Category: Landing page templates (https://aiarabicdev.com/landing-pages) Canonical page: https://aiarabicdev.com/landing-pages/watermelon-ui Tags: shadcn, motion, template, dark, react Watermelon UI publishes complete landing page templates and animated components as shadcn registry items, so a whole page arrives as files in your repository rather than a dependency. The house style is dark, monospaced and heavy on crosshairs and hairline rules. This site runs on its landing-01 template. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://ui.watermelon.sh - Source: https://github.com/WatermelonCorp/watermelon-platform ## What you get Templates are distributed as shadcn registry blocks. Running the CLI writes real component files into your project, which means you edit them directly and never wait for an upstream release to change a paragraph. The animation work is the reason to look. Section entrances are staggered with Motion, counters run on a viewport trigger, and the decorative SVG visuals animate their path lengths rather than fading a static image in. It is a deliberate style rather than a neutral base. ## How it fits a Next.js project The templates are authored against Vite, so two edits are needed per file after install. Interactive sections need a use client directive at the top, and router links import from react-router-dom rather than next/link. Both are mechanical changes an agent can make in one pass. Nothing else about the components is framework specific. ## Reach for it when - you want a finished page, not a box of parts - the product is technical and the audience reads monospace without flinching - you would rather own the files than track a dependency ## Watch out for - some registry blocks import demo components that are not published with them, so a card or two arrives empty and needs filling - hero and template sections reference images on the project's own CDN, which you should replace with your own assets rather than hotlink - the style is strongly opinionated, so a warm consumer brand will fight it ## Get started Add a landing template: ```sh pnpm dlx shadcn@latest add @watermelon/landing-01 ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Magic UI > A large catalogue of animated marketing components for React Category: Landing page templates (https://aiarabicdev.com/landing-pages) Canonical page: https://aiarabicdev.com/landing-pages/magic-ui Tags: animation, shadcn, motion, marketing, react Magic UI is a collection of animated components aimed squarely at marketing pages: marquees, beams, orbiting circles, text reveals and number tickers. It installs through the shadcn CLI and is built on Tailwind and Motion, so it drops into most React projects without a new styling layer. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://magicui.design - Source: https://github.com/magicuidesign/magicui ## What you get The catalogue is broad and skewed towards effects rather than structure. You will find the animated pieces that make a hero feel alive, and fewer of the plain layout blocks that hold a page together. Because installation copies source into your repository, each component becomes yours to trim. That matters with effect components, which often ship more configuration than any single page needs. ## How to use it well Treat it as a garnish shelf rather than a page framework. One or two of these effects in a hero reads as craft, and six on the same screen reads as a demo reel. It pairs naturally with shadcn/ui, which handles the buttons, inputs and dialogs Magic UI deliberately leaves alone. ## Reach for it when - you have a plain page and need three moments of motion in it - you already use Tailwind and shadcn/ui - you want the effect without writing the Motion choreography yourself ## Watch out for - the finished page templates are a paid product, the individual components are the free part - heavy effect components can cost real frame time on mid range phones, so measure before shipping several - it is a component shelf, not a design system, so the coherence of the page is still your job ## Get started Add a component: ```sh pnpm dlx shadcn@latest add https://magicui.design/r/marquee.json ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Aceternity UI > Big, cinematic hero effects with the code shown in full Category: Landing page templates (https://aiarabicdev.com/landing-pages) Canonical page: https://aiarabicdev.com/landing-pages/aceternity-ui Tags: animation, hero, motion, copy-paste, react Aceternity UI is a catalogue of ambitious visual effects for React: 3D card tilts, spotlight cursors, sticky scroll reveals, infinite moving cards. Each component is documented with its full source on the page, so you copy it in rather than install a package. ## Facts - Licence: Free to use, per the project's own terms - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://ui.aceternity.com ## What you get The components here are larger and louder than most libraries attempt. Several are the kind of set piece that carries an entire above the fold on its own. Everything is Tailwind and Motion, presented as copy and paste source. There is no version to upgrade and no package boundary to argue with, which is the point. ## How to use it well Pick one hero effect and build the rest of the page quietly around it. These components are designed to be the loudest element on the screen, and two of them on one page cancel each other out. Read each snippet before pasting. Some carry inline colours and fixed sizes that need mapping onto your own tokens if you want the page to stay coherent. ## Reach for it when - the hero needs to do something people remember - you are comfortable owning pasted source and adapting it - you want the effect explained rather than hidden behind an import ## Watch out for - components arrive with hardcoded colours and sizes more often than not, so budget time for token mapping - the paid templates and pro components are a separate offer from the free component pages - several effects depend on cursor position and have no meaningful touch equivalent, so design the mobile view separately --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Motion Primitives > Small, composable animation building blocks rather than finished effects Category: Landing page templates (https://aiarabicdev.com/landing-pages) Canonical page: https://aiarabicdev.com/landing-pages/motion-primitives Tags: animation, motion, primitives, react Motion Primitives is a set of low level animated components for React: text effects, animated groups, transitions and disclosure patterns. It sits one layer below the effect catalogues, giving you the primitives to compose your own motion rather than a finished set piece. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://motion-primitives.com - Source: https://github.com/ibelick/motion-primitives ## What you get The pieces are deliberately small. An animated group that staggers its children, a text effect that reveals per character, a transition panel. You assemble the moment rather than install it. Because each primitive does one thing, they compose cleanly with each other and with your own components, which is rarely true of larger effect libraries. ## How to use it well This is the right shelf when you know what the motion should feel like and want the mechanics handled. It is the wrong shelf when you want to be shown an idea. Establish one easing curve and one duration scale for the whole page first, then pass those into every primitive. Motion coherence comes from shared timing, not shared components. ## Reach for it when - you have a clear idea of the motion and want the plumbing done - you are building a design system and need motion primitives inside it - you want animation that does not announce which library you used ## Watch out for - it will not give you a finished hero, that is not what it is for - some of the larger blocks sit behind a pro tier - composing your own motion means you own the taste calls, which is more work than pasting an effect --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Cult UI > Textured, tactile components with a distinct visual point of view Category: Landing page templates (https://aiarabicdev.com/landing-pages) Canonical page: https://aiarabicdev.com/landing-pages/cult-ui Tags: shadcn, texture, motion, react Cult UI is a shadcn compatible collection with a warmer and more tactile look than most: layered surfaces, soft dynamic islands, expandable cards and texture heavy panels. It is a style choice more than a neutral toolkit. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://cult-ui.com - Source: https://github.com/nolly-studio/cult-ui ## What you get The components lean on depth and texture where most Tailwind libraries lean on flat surfaces and borders. That gives a page built from them an immediate identity. It installs the shadcn way, writing files into your project, and expects Tailwind and Motion to already be present. ## How to use it well Commit to it or leave it. Mixing two or three of these components into an otherwise flat page makes both halves look unfinished. The tactile surfaces need room. Give them more padding and more whitespace than the demos suggest and they hold up much better on a real page. ## Reach for it when - you want a page that does not look like every other Tailwind site - the product is consumer facing and can carry warmth - you already run Tailwind and Motion ## Watch out for - the look is specific, and half adopting it reads worse than not adopting it - layered surfaces and textures cost more paint time than flat panels - the catalogue is smaller than the big libraries, so expect to write the gaps yourself ## Get started Add a component: ```sh pnpm dlx shadcn@latest add https://cult-ui.com/r/texture-card.json ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Flowbite > Hundreds of plain Tailwind blocks that work without React Category: Landing page templates (https://aiarabicdev.com/landing-pages) Canonical page: https://aiarabicdev.com/landing-pages/flowbite Tags: tailwind, html, blocks, no-framework Flowbite is a large Tailwind component and block library available as plain HTML as well as React, Vue and Svelte packages. It is the least fashionable option on this shelf and often the most practical one, because it does not assume a JavaScript framework. ## Facts - Licence: MIT - Language: JavaScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://flowbite.com - Source: https://github.com/themesberg/flowbite ## What you get Breadth. Navigation bars, pricing tables, footers, forms, modals and dashboards, documented as markup you can paste into any template language. The framework packages wrap the same markup in components, but the HTML remains the source of truth, which is why it survives a stack change better than most libraries. ## How to use it well Use it for the structural furniture of a site and spend your own effort on the two or three sections that carry the argument. Flowbite is very good at the parts nobody compliments and nobody should notice. Retint it immediately. The default palette is recognisable, and a page shipped on the defaults looks like a Flowbite page rather than yours. ## Reach for it when - the project is server rendered templates rather than a React app - you need a lot of ordinary blocks quickly - the team is more comfortable in HTML than in a component API ## Watch out for - the free blocks are a subset, the large block library is the paid product - the default look is widely recognised, so retinting is not optional - interactive components need the Flowbite JavaScript, which is another script on the page ## Get started Install: ```sh pnpm add flowbite ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: UI component libraries ======================================================================== Component libraries and primitive sets for React and the wider web. Split by the decision that actually matters: do you want components you own, or a dependency you upgrade. ------------------------------------------------------------------------ # shadcn/ui > Components you copy into your repository and then own outright Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/shadcn-ui Tags: react, tailwind, registry, accessible, copy-paste shadcn/ui is a set of accessible React components distributed as source rather than as a package. The CLI writes the component into your project, where it becomes ordinary code you can edit. It also defines the registry format that most of the newer libraries in this directory publish through. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://ui.shadcn.com - Source: https://github.com/shadcn-ui/ui - Docs: https://ui.shadcn.com/docs ## Why the distribution model matters Every component library eventually asks you to fight its API to get the markup you want. shadcn/ui removes the fight by removing the boundary: the component is a file in your repository, so changing it is an edit rather than a feature request. The cost is real and worth stating. You do not get upgrades. If an accessibility fix lands upstream, you have to notice and port it. Teams that treat these files as generated code and never revisit them slowly drift away from the source. ## The registry is the bigger story The registry format shadcn defines is now how a large part of the React ecosystem ships UI. A registry item is a JSON file listing files, dependencies and where each file lands, which is why the same CLI can install from any project that publishes one. That is what makes third party registries work. Point the CLI at a URL and the files arrive in your repository under your conventions. ## Reach for it when - you want full control of the markup and the classes - the project already runs Tailwind - you are building your own design system and need a credible starting point ## Watch out for - there are no upgrades, so upstream fixes only reach you if you go and get them - it assumes Tailwind, and retrofitting it into a CSS-in-JS codebase is not worth the effort - the defaults are widely recognised, so a project that ships them untouched looks like every other one ## Get started Initialise: ```sh pnpm dlx shadcn@latest init ``` Add a component: ```sh pnpm dlx shadcn@latest add button dialog ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # 21st.dev > A searchable marketplace of community components with a prompt for each one Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/21st-dev Tags: react, tailwind, directory, prompts, agents 21st.dev is a directory of React and Tailwind components published by the community. Each component has a live preview, its source, and a copyable prompt written to hand to a coding agent. It is the fastest way to answer the question of what a section could look like before you build it. ## Facts - Licence: Varies by component, most are MIT - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: no - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://21st.dev ## What it is actually for The value is browsing, not installing. When a page needs a testimonial block or a feature grid and you have no picture in your head yet, scrolling a few hundred real examples resolves that faster than any amount of staring at your own file. Once something looks right, the per component prompt is the honest shortcut. It describes the component in enough detail that an agent can rebuild it against your own tokens instead of pasting in someone else's colours. ## The quality is uneven, on purpose This is a community catalogue rather than a curated library. Some entries are excellent and some are a single div with a gradient. Popularity sorting helps but does not replace reading the source. Check keyboard behaviour and focus states specifically. Community components look right in a screenshot far more often than they behave right under a keyboard. ## Reach for it when - you need to see twenty versions of a section before deciding - you work with a coding agent and want a precise description to hand it - you are looking for one specific block rather than adopting a library ## Watch out for - quality varies a lot between authors, so read the source before trusting it - accessibility is inconsistent, and keyboard behaviour is the usual casualty - licensing is per component rather than per site, so check before shipping commercially --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Radix Primitives > Unstyled, accessible behaviour for the components that are hard to get right Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/radix-primitives Tags: react, accessibility, primitives, unstyled, headless Radix Primitives implements the interaction and accessibility layer for dialogs, menus, popovers, tooltips, selects and the rest of the genuinely difficult components, with no styling at all. It is the layer most polished React libraries, including shadcn/ui, are built on. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://www.radix-ui.com/primitives - Source: https://github.com/radix-ui/primitives ## What you are buying Focus management, keyboard navigation, screen reader semantics, portal and layering behaviour, and the dozens of edge cases in each. These are the parts that take weeks to discover and are almost never finished in a hand rolled component. Everything ships unstyled, which is the point. You keep every visual decision and give up only the decisions you should not be making. ## Where the friction is The composition style is verbose. A dialog is five or six nested components before you have written any of your own markup, which is correct and still feels heavy the first several times. Because it owns behaviour and not appearance, an unstyled Radix app looks broken until you style it. Budget for that in an evaluation rather than judging the first render. ## Reach for it when - you have your own visual language and need the behaviour underneath it - accessibility is a requirement rather than an aspiration - you are building a component library other teams will use ## Watch out for - the composition API is verbose, and that never stops being true - nothing is styled, so evaluating it means doing the styling work first - React only, with no story for other frameworks ## Get started Install: ```sh pnpm add radix-ui ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Base UI > Headless primitives from the people behind MUI and Radix Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/base-ui Tags: react, headless, accessibility, primitives Base UI is an unstyled React component library built by contributors from MUI, Radix and Floating UI. It covers the same ground as Radix Primitives with a newer API, a smaller surface and a shared team behind the anchoring and positioning logic. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://base-ui.com - Source: https://github.com/mui/base-ui ## How it differs from Radix The API is flatter. Fewer nested parts are required to assemble a working component, and the positioning story is unified because the same people maintain Floating UI. It is also younger. Fewer components have shipped and fewer projects depend on it, which cuts both ways: less accumulated cruft and fewer answered questions when something behaves oddly. ## Choosing between them For a new project where you want headless components and you like the API better, Base UI is a reasonable default. For a project that already depends on the Radix ecosystem, including anything installed through shadcn/ui, switching gains you very little. Do not run both. Two portal and focus management systems on one page produces layering bugs that are genuinely unpleasant to debug. ## Reach for it when - a new project that wants headless components with a modern API - you already use Floating UI and want the same positioning model - you find the Radix composition style too verbose ## Watch out for - younger than the alternatives, so expect fewer components and fewer answered questions - the API has moved between releases, so pin versions and read changelogs - mixing it with Radix in one app causes portal and focus conflicts ## Get started Install: ```sh pnpm add @base-ui-components/react ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # React Aria > Adobe's accessibility and interaction layer, hooks first Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/react-aria Tags: react, accessibility, i18n, rtl, hooks React Aria is Adobe's library of hooks and components implementing the behaviour and accessibility of a wide component set, including internationalisation, right to left layouts, date and number formatting, and touch and pointer handling that most libraries treat as an afterthought. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://react-spectrum.adobe.com/react-aria - Source: https://github.com/adobe/react-spectrum ## The internationalisation story is the differentiator React Aria handles locale aware dates, numbers, collation and right to left layout as a first class concern rather than a plugin. If your interface has to work in Arabic as well as English, this is the library that has already thought about it. The hooks give you behaviour with no markup at all, which means you control every element. The component layer sits on top for when you do not need that much control. ## The cost of that depth It is the largest and most abstract option on this shelf. Reading the documentation is a real investment, and the hooks API asks you to understand its model before you can build a button. That investment pays off on a long lived product with accessibility and localisation requirements, and is hard to justify for a marketing site. ## Reach for it when - the interface must work in right to left languages and multiple locales - accessibility is audited rather than assumed - you want hooks, not markup, so you control every element ## Watch out for - the learning curve is the steepest on this shelf - the abstraction is heavy for a simple project - bundle size needs attention if you pull in large parts of the collection ## Get started Install: ```sh pnpm add react-aria-components ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Ark UI > The same headless components across React, Vue, Svelte and Solid Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/ark-ui Tags: react, vue, svelte, solid, headless, state-machines Ark UI implements its component logic as framework agnostic state machines and then ships thin bindings for React, Vue, Svelte and Solid. If you maintain interfaces in more than one framework, it is the only way to get identical behaviour in all of them. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://ark-ui.com - Source: https://github.com/chakra-ui/ark ## One behaviour, several frameworks Because the logic lives in state machines rather than in framework code, a dialog behaves the same in a Vue app as in a React app. For a design system serving several teams on different stacks, that is the whole argument. The state machine model also makes the behaviour inspectable. Component state is explicit rather than scattered across effects, which makes unusual bugs much easier to reason about. ## Where it costs you The machine abstraction is another layer to learn, and the terminology does not match the rest of the React ecosystem. Developers who only ever ship React will find a React specific library more direct. The catalogue is large but the community is smaller than Radix's, so unusual problems have fewer existing answers. ## Reach for it when - you ship the same design system to more than one framework - you want component state to be explicit and inspectable - you are building a component library rather than an application ## Watch out for - the state machine model is an extra concept to learn - a React only team gains little over a React only library - smaller community than the incumbents, so fewer existing answers ## Get started Install for React: ```sh pnpm add @ark-ui/react ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # HeroUI > Styled, finished components for when you do not want to design them Category: UI component libraries (https://aiarabicdev.com/ui-components) Canonical page: https://aiarabicdev.com/ui-components/hero-ui Tags: react, tailwind, styled, react-aria, theming HeroUI, previously NextUI, is a styled React component library built on Tailwind and React Aria. Unlike the headless options on this shelf it arrives already designed, with a coherent look, a theming layer and dark mode handled. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://www.heroui.com - Source: https://github.com/heroui-inc/heroui ## The trade it makes You get a finished interface on day one and you inherit somebody else's visual decisions. For an internal tool, a dashboard or an early product where the interface is not the differentiator, that is usually the right trade. The theming layer is genuine rather than decorative, so colours, radii and spacing can be moved a long way from the defaults without forking components. ## When to choose something else If the interface is the product, a styled library becomes a ceiling. Pushing HeroUI into a truly distinctive visual language costs more than starting from Radix or Base UI with your own styles. Because it builds on React Aria, the accessibility floor is higher than most styled libraries, which is the main reason it is on this shelf rather than left off it. ## Reach for it when - an internal tool or dashboard where the interface is not the differentiator - a small team with no designer - you want a real theming layer rather than utility class overrides ## Watch out for - a styled library is a ceiling on how distinctive the interface can get - it is a package dependency, so upgrades can move your visuals - the rename from NextUI means older tutorials reference the old package names ## Get started Install: ```sh pnpm add @heroui/react ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: AI agents you can run ======================================================================== Agents you install and use: a personal assistant that lives on your machine, and coding agents that work in your terminal. These are applications rather than libraries, so the question is which one to run, not which one to write against. ------------------------------------------------------------------------ # OpenClaw > A personal agent that lives on your machine and answers in your chat apps Category: AI agents you can run (https://aiarabicdev.com/ai-agents) Canonical page: https://aiarabicdev.com/ai-agents/openclaw Tags: agents, assistant, self-hosted, automation, messaging OpenClaw runs a local gateway between a model and the things on your own computer: files, the browser, and messaging apps like WhatsApp, Telegram, Slack and iMessage. You talk to it where you already talk to people, and it does the work on your machine rather than in someone's cloud. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://openclaw.ai - Source: https://github.com/openclaw/openclaw ## What makes it different from a chat window The interesting part is not the model, it is the placement. The agent sits on the machine that holds your files and your logged in browser sessions, so a request like sorting a folder or pulling something out of a page is an action rather than a set of instructions handed back to you. It also writes its own skills. When it hits a task it cannot do, it can produce the code for a new capability and keep it, which is why it accumulates usefulness over weeks rather than resetting every conversation. ## What running it actually means You bring your own model access, so the software is free and the tokens are not. A local agent that is always on and proactive consumes considerably more than the same model used through a chat window, and the community figures for heavy automation are not small. It is also the broadest attack surface of anything in this directory. An always on process with your files, your browser sessions and your messaging apps is exactly what you would least like to be prompt injected, and content it reads from a web page or an incoming message is untrusted input. Scope its permissions deliberately rather than accepting the defaults. ## Reach for it when - you want an assistant that can touch your actual files and apps - you would rather message an agent than open another web interface - you are comfortable administering something that runs continuously ## Watch out for - an always on agent with file, browser and messaging access is a serious security surface, and anything it reads is untrusted input - model usage is billed to you, and continuous proactive automation costs far more than chat use - the licence is MIT with third party notices recorded separately, so read those if you are redistributing --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Hermes Agent > Drives a chat subscription you already pay for instead of a metered API Category: AI agents you can run (https://aiarabicdev.com/ai-agents) Canonical page: https://aiarabicdev.com/ai-agents/hermes Tags: agents, subscription, self-hosted, proxy Hermes Agent is an open source agent from Nous Research that can sign in with a consumer subscription, ChatGPT, Claude Max or SuperGrok among them, and use its included quota rather than a per token API bill. It also exposes that session as a local OpenAI compatible endpoint other tools can point at. ## Facts - Licence: MIT - Language: Python - Cost: Free and open source - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://hermes-agent.nousresearch.com - Source: https://github.com/NousResearch/hermes-agent ## The cost argument Agentic work is token hungry. A single long task can consume more API credit than a month of chat, which is why so many agent experiments end at the billing dashboard rather than at a result. Driving a subscription instead turns that into a fixed monthly number you have already decided to pay. The proxy mode is the underrated half. Running it exposes your subscription session as a local endpoint, so other tools that expect an API key can be pointed at it without one. That makes the saving apply to your whole toolchain rather than to this one agent. ## The constraints you inherit A consumer subscription is not an API. Rate limits and quotas are shaped around a person typing, so throughput is lower and less predictable, and long unattended runs are not what this arrangement is good at. Using a subscription through anything other than the vendor's own client also sits in territory the provider's terms may address, and the terms differ per provider. Read the ones for the subscription you actually hold, and treat this as a personal tool rather than something a business depends on. ## Reach for it when - an unpredictable API bill is the thing actually stopping you - you already pay for a chat subscription and want more out of it - you want one local endpoint your other tools can share ## Watch out for - subscription rate limits make throughput lower and less predictable than an API - driving a consumer subscription from outside the vendor's own client may run against its terms, which differ per provider, so check yours - not suited to long unattended runs or anything a business depends on --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # OpenCode > A terminal coding agent that is not tied to one model vendor Category: AI agents you can run (https://aiarabicdev.com/ai-agents) Canonical page: https://aiarabicdev.com/ai-agents/opencode Tags: agents, coding, terminal, multi-provider OpenCode is an open source coding agent built for the terminal, with a client and server split so the agent can run on your machine while you drive it from elsewhere. It works against Anthropic, OpenAI, Google or a local model, which is the main thing separating it from the vendor tools it resembles. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://opencode.ai - Source: https://github.com/anomalyco/opencode ## Provider independence is the point Every vendor coding agent is a bet on that vendor's model, pricing and roadmap. OpenCode keeps the harness and lets you change the engine, which matters when a cheaper model becomes good enough for a class of task, or when the one you rely on gets more expensive. Two built in modes carry most of the day to day value. A build mode that edits, and a read only plan mode for exploring a codebase, which is the safer default when you are still working out what a change should be. ## Terminal first, and genuinely so The client and server split means the terminal interface is one client among several, so the same running agent can be driven from a phone or another machine. That is unusual and useful on longer tasks you want to check on rather than sit in front of. It is also written by people who live in a terminal, which shows in both directions. The interface is fast and keyboard complete, and it assumes a comfort level with the terminal that a graphical editor user will notice immediately. ## Reach for it when - you want to change models without changing agent - you work in a terminal and want the agent to live there too - you want to start a task on one machine and check it from another ## Watch out for - model usage is billed by whichever provider you point it at, so the agent being free is only half the cost - the repository has moved organisation more than once, so older install instructions and links go stale - results vary a lot by model, so judge the harness and the model separately when it disappoints ## Get started Install: ```sh curl -fsSL https://opencode.ai/install | bash ``` Or with npm: ```sh npm install -g opencode-ai ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Pi > A coding agent and the parts to build your own, in one repository Category: AI agents you can run (https://aiarabicdev.com/ai-agents) Canonical page: https://aiarabicdev.com/ai-agents/pi-agent Tags: agents, coding, toolkit, terminal, typescript Pi is an agent toolkit from Mario Zechner: a coding agent CLI you can use directly, plus the pieces underneath it as separate packages. A unified multi provider model API, an agent loop with tool calling and state, and terminal and web interface libraries. It is the closest thing to a build your own agent starter kit. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Source: https://github.com/earendil-works/pi ## Useful as a tool, more useful as a reference The CLI gives the model four tools, read, write, edit and bash, and extends from there through skills, prompt templates and packages. That deliberate smallness makes it easy to reason about what the agent can actually do to your repository. The packages are the real draw for anyone building their own harness. Having the model API, the agent loop and the interface layers published separately means you can take the loop and leave the rest, which most agent projects do not let you do. ## What the small surface costs There is far less around it than around a vendor agent. Fewer integrations, fewer defaults chosen for you, and a smaller body of existing answers when something behaves oddly, so expect to read source rather than search. It is also a monorepo of related packages rather than one product, which is exactly right if you are assembling something and slightly confusing if you only wanted a coding agent to install. ## Reach for it when - you want to build your own agent and would rather not write the loop - you want an agent whose tool surface is small enough to audit - you need a provider agnostic model API as a separate piece ## Watch out for - a monorepo of packages rather than one finished product, which takes a moment to navigate - much smaller community than the vendor agents, so unusual problems mean reading source - the project has moved organisation, so older links point at the previous location --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: Self hosted AI workspaces ======================================================================== Open source applications that replace a paid AI subscription with something you host: chat front ends, document assistants and image and video studios. You still pay for model usage, but the interface, the history and the data stay yours. ------------------------------------------------------------------------ # Open Generative AI > One self hosted studio for image, video and lip sync models Category: Self hosted AI workspaces (https://aiarabicdev.com/ai-workspaces) Canonical page: https://aiarabicdev.com/ai-workspaces/open-generative-ai Tags: images, video, self-hosted, workspace, generative Open Generative AI is a self hosted studio that puts a large catalogue of image and video models behind one interface: text to image, image to video, and audio driven lip sync. It replaces the habit of keeping six generation tabs open, and it is MIT licensed. ## Facts - Licence: MIT - Language: JavaScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://muapi.ai/open-generative-ai - Source: https://github.com/Anil-matcha/Open-Generative-AI ## Why one workspace helps Generation work is comparative. You want the same prompt through several models to see which one understands it, and that is tedious when each model lives behind a different interface with its own idea of what a seed or an aspect ratio means. Keeping the outputs and their settings in one place also means the work accumulates. A prompt that worked last month is findable rather than lost somewhere in a chat history. ## Read the model routing before you commit The interface is genuinely open source and yours to run. The models are not: generation is routed through a commercial model API, so you need an account there and you pay per generation. The marketing language about no vendor lock in describes the code, not the model supply. That is a reasonable trade for the convenience, and it is worth knowing before you build a workflow on it. If the point of self hosting for you was removing a third party from the loop, this arrangement does not do that. ## Reach for it when - you compare the same prompt across several models regularly - you want prompts and outputs kept in one place you control - you would rather run an interface than pay for another subscription ## Watch out for - generation is routed through a commercial model API you pay per use, so the free part is the interface - that routing is a third party dependency, which undercuts the usual reason for self hosting - model coverage moves quickly, so check the current list rather than trusting a screenshot or a README count --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Open WebUI > The most complete self hosted chat front end, with a licence to read Category: Self hosted AI workspaces (https://aiarabicdev.com/ai-workspaces) Canonical page: https://aiarabicdev.com/ai-workspaces/open-webui Tags: chat, self-hosted, ollama, rag, workspace Open WebUI is a self hosted chat interface that works against local models through Ollama and against any OpenAI compatible API. It covers the things a paid chat subscription gives you: conversation history, documents, multiple users, model switching and a plugin layer. ## Facts - Licence: Modified BSD-3, with branding conditions - Language: Python - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://openwebui.com - Source: https://github.com/open-webui/open-webui ## The most finished option on this shelf It is the closest open source equivalent to a commercial chat product. User accounts and permissions, retrieval over your own documents, web search, image generation and a pipeline system for custom processing all ship in the box rather than as a plan. That completeness is why it is the usual answer for a team that wants one internal chat interface over whichever models they have access to, local or hosted. ## The licence changed, and it matters This is no longer a plain permissive project. The licence adds conditions around removing or altering the project's branding, which means the common plan of white labelling it for a client or an internal product is exactly the case it restricts, unless you qualify for an exemption or buy a licence. For personal use and ordinary internal deployment this changes nothing. If you intend to ship it under your own brand, read the licence file first rather than assuming the permissive terms it used to carry. ## Reach for it when - you want one internal chat interface over several model providers - you need conversation history and documents kept on your own infrastructure - you are running local models and want a real interface for them ## Watch out for - the licence restricts removing the project's branding, so white labelling it needs a licence or an exemption - it is a substantial application to host, not a single binary, and the feature surface grows quickly - retrieval over your documents needs tuning before it is genuinely useful ## Get started Run with Docker: ```sh docker run -d -p 3000:8080 -v open-webui:/app/backend/data ghcr.io/open-webui/open-webui:main ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # LibreChat > A genuinely MIT chat front end that speaks to every provider Category: Self hosted AI workspaces (https://aiarabicdev.com/ai-workspaces) Canonical page: https://aiarabicdev.com/ai-workspaces/librechat Tags: chat, self-hosted, multi-provider, workspace, mit LibreChat is a self hosted chat interface supporting many providers at once, with conversation branching, agents, code execution, file handling and multi user authentication. It is the option to reach for when a clean MIT licence matters as much as the feature list. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://librechat.ai - Source: https://github.com/danny-avila/LibreChat ## Where it wins on this shelf The licence. LibreChat is plainly MIT, which makes it the safe choice if you intend to fork it, brand it, or put it in front of customers. That is a real differentiator now that the alternatives have added conditions. The feature set holds up regardless. Provider switching mid conversation, conversation forking, an agent layer with tools, and proper multi user auth cover most of what a team actually asks for. ## What running it involves It expects a database and a handful of services, so the deployment is a small stack rather than a container you forget about. The provided compose files make the first run straightforward and the maintenance is still yours. Configuration is broad and text based. That is powerful once you know the file and slow the first time, because the answer to most questions is a key you have not read about yet. ## Reach for it when - you need a permissive licence because you will brand or resell it - you switch between providers and want it in one interface - you need real multi user authentication rather than a single seat ## Watch out for - it is a stack with a database and services, so budget for actual maintenance - configuration is broad and file based, which is slow to learn - you still pay every provider you connect, so the hosting saving is not the whole picture ## Get started Clone and run: ```sh git clone https://github.com/danny-avila/LibreChat && docker compose up -d ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # ComfyUI > Node graphs for image and video generation, with nothing hidden Category: Self hosted AI workspaces (https://aiarabicdev.com/ai-workspaces) Canonical page: https://aiarabicdev.com/ai-workspaces/comfyui Tags: images, video, diffusion, self-hosted, node-graph ComfyUI is a node based interface for diffusion models where every step of the pipeline is a node you wire up yourself. It is the tool serious image and video work converges on, because it exposes the whole process rather than a prompt box. ## Facts - Licence: GPL-3.0 - Language: Python - Cost: Free and open source - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://www.comfy.org - Source: https://github.com/Comfy-Org/ComfyUI ## Why a graph beats a prompt box Once you want reproducibility, the graph is the only honest interface. Every sampler, model, mask and conditioning step is visible and adjustable, which means a result you liked can be reproduced exactly and modified in one place rather than re-prompted and hoped for. Workflows are shareable as files, so the community distributes entire pipelines rather than prompts. That is where most of the value is, and it is why the learning curve is worth climbing if generation is your actual work. ## Nothing about this is gentle The first hour is genuinely unpleasant. A blank graph and a list of nodes is a hostile starting point, and the answer is always to load someone else's workflow and take it apart rather than to build one from nothing. It also runs models locally, which means real hardware. A capable GPU with plenty of memory is the difference between a working tool and one that fails on the interesting models. ## Reach for it when - generation is your actual work and reproducibility matters - you want the whole pipeline visible rather than a prompt box - you have the GPU to run models locally ## Watch out for - the learning curve is steep, and starting from a blank graph is the wrong way in - it needs real local hardware, so a laptop without a capable GPU will disappoint - GPL-3.0 is copyleft, which constrains how you can build a product on top of it --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # AnythingLLM > Point it at your documents and get a private assistant over them Category: Self hosted AI workspaces (https://aiarabicdev.com/ai-workspaces) Canonical page: https://aiarabicdev.com/ai-workspaces/anything-llm Tags: rag, documents, self-hosted, workspace, chat AnythingLLM is a self hosted application built around retrieval over your own material: drop in documents, and it handles the chunking, the embeddings and the vector store, then answers over them. It runs as a desktop app or a server with workspaces and users. ## Facts - Licence: MIT - Language: JavaScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://anythingllm.com - Source: https://github.com/Mintplex-Labs/anything-llm ## It hides the parts nobody enjoys Retrieval sounds simple and is mostly plumbing: chunk sizes, embedding models, a vector database, and the glue between them. AnythingLLM makes reasonable choices for all of it so you can find out whether retrieval helps your case before spending a week assembling one. Workspaces are the useful organising idea. Each has its own documents and its own thread, so a set of contracts and a set of technical docs stay separate rather than blending into one confused context. ## Where the ceiling is Convenient defaults are still defaults. When answers are poor, the levers you want are the chunking strategy and the retrieval logic, and those are less exposed here than in a pipeline you assembled yourself. The desktop application is the fastest way to evaluate it. Treat that as the trial and the server deployment as the real thing, because they are not equally suited to more than one person. ## Reach for it when - you want to know whether retrieval helps before building one - the documents must stay on infrastructure you control - you need separate contexts for separate bodies of material ## Watch out for - the retrieval internals are less exposed than a pipeline you built, which limits how far you can tune it - a hosted cloud offering is sold alongside the open source project - answer quality depends on the embedding and chat models you configure, so judge those separately --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Lobe Chat > The best looking self hosted chat interface, and it knows it Category: Self hosted AI workspaces (https://aiarabicdev.com/ai-workspaces) Canonical page: https://aiarabicdev.com/ai-workspaces/lobe-chat Tags: chat, self-hosted, design, plugins, workspace Lobe Chat is a self hosted chat front end with an unusually polished interface, a plugin system, an assistant marketplace and support for many providers. Where the other options on this shelf lead on features or licence, this one leads on design. ## Facts - Licence: Apache-2.0, with additional conditions - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-24 - Last checked: 2026-08-24 ## Links - Website: https://lobehub.com - Source: https://github.com/lobehub/lobehub ## Design as the differentiator Most self hosted tools look self hosted. This one does not, which matters more than it sounds if the interface is going in front of colleagues who are comparing it against a commercial product they already like. The plugin and assistant layers are genuinely used rather than decorative, so a specific job like a writing assistant or a translation helper can be set up once and reached from a menu instead of rebuilt in a prompt each time. ## Check the licence for your case It is not a plain permissive licence. There are additional conditions around commercial use and branding, so a client deployment or a rebranded product needs the licence file read properly rather than skimmed. For personal use this is a non issue and the polish is free. For anything commercial, LibreChat's plain MIT is the less complicated path. ## Reach for it when - the interface will be seen by people comparing it to a paid product - you want per task assistants set up once and reused - personal or internal use where the licence conditions do not bite ## Watch out for - additional licence conditions around commercial use and branding, so read the file before a client deployment - a hosted paid version is sold alongside the open source project - the feature surface is large, and more of it than you need is switched on by default --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: MCP servers ======================================================================== Model Context Protocol servers that let an agent drive a browser, query a database, read a repository or fetch live documentation. Each entry says what the server can touch and what it cannot. ------------------------------------------------------------------------ # Chrome DevTools MCP > Let the agent open the page and read what actually rendered Category: MCP servers (https://aiarabicdev.com/mcp-servers) Canonical page: https://aiarabicdev.com/mcp-servers/chrome-devtools-mcp Tags: mcp, browser, chrome, debugging, frontend Chrome DevTools MCP gives an agent a real Chrome instance: navigate, screenshot, click, evaluate scripts, read the console and inspect network requests. It closes the loop between writing frontend code and knowing whether it worked. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/ChromeDevTools/chrome-devtools-mcp ## Why this is the highest value server for frontend work Without a browser, an agent writing UI is guessing. It cannot see that a heading wrapped, that a request returned 500, or that a component threw during hydration. With a browser it reads the console, takes a screenshot and fixes the actual problem. Performance traces and Lighthouse audits are also exposed, which turns vague instructions about making a page fast into a measurement the agent can act on. ## How to use it without wasting tokens Screenshots are expensive in context. Ask for one at a decision point, not after every edit, and prefer reading the console or a specific element's computed style when that answers the question. It drives a real browser, so it can log into things and submit forms. Point it at local development, and be deliberate before pointing it at anything authenticated or public. ## Reach for it when - the agent writes frontend code and needs to see the result - debugging a hydration or console error you cannot reproduce by reading - measuring performance rather than guessing at it ## Watch out for - screenshots consume a lot of context, so ask for them at decision points only - it drives a real browser that can log in and submit forms, so scope what it may reach - a visible Chrome window competes with your own browsing session ## Get started Add to Claude Code: ```sh claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Playwright MCP > Browser automation through the accessibility tree instead of pixels Category: MCP servers (https://aiarabicdev.com/mcp-servers) Canonical page: https://aiarabicdev.com/mcp-servers/playwright-mcp Tags: mcp, browser, playwright, testing, automation Playwright MCP exposes browser automation to an agent using Playwright's accessibility snapshot rather than screenshots. The agent reads a structured description of the page, which is dramatically cheaper in context than an image and often more precise to act on. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/microsoft/playwright-mcp ## The snapshot model Instead of looking at a picture, the agent receives the accessibility tree: roles, labels and references it can click by name. That is both cheaper and less ambiguous than asking a model to find a button in an image. It also means the agent is exercising the same tree a screen reader uses, so automation failures frequently surface genuine accessibility problems as a side effect. ## Choosing between this and DevTools Use Playwright MCP for flows: sign in, fill this form, click through the checkout, then assert what happened. Use Chrome DevTools MCP when the question is visual or diagnostic, such as how the page looks or why a request failed. Running both is reasonable and common. They answer different questions and neither replaces the other. ## Reach for it when - the agent needs to walk a multi step flow and assert the outcome - you want browser automation that does not burn context on screenshots - generating end to end tests from a described journey ## Watch out for - the accessibility tree is useless on a canvas heavy or badly labelled page - browser binaries need installing, which is a slow first run - it can act on any site it can reach, so scope its access deliberately ## Get started Add to Claude Code: ```sh claude mcp add playwright -- npx -y @playwright/mcp@latest ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Context7 > Current library documentation, fetched instead of remembered Category: MCP servers (https://aiarabicdev.com/mcp-servers) Canonical page: https://aiarabicdev.com/mcp-servers/context7-mcp Tags: mcp, documentation, context, versions Context7 serves up to date documentation and code examples for a large set of libraries through MCP. It exists to solve one specific failure: a model confidently writing an API that was correct two versions ago. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://context7.com - Source: https://github.com/upstash/context7 ## The problem it solves Training data has a cutoff and fast moving libraries do not respect it. The result is code that looks right, imports a function that no longer exists, and costs you twenty minutes to diagnose. Fetching the current documentation for the exact version in your project removes the guess. This matters most in the frameworks that change fastest, which is exactly where agents are used most. ## How to get value from it It works best when you name the library and the version explicitly. A vague question returns a lot of documentation and fills your context with material the task did not need. Coverage is per library and not universal. For something obscure or internal, reading the actual source in node_modules remains the reliable move. ## Reach for it when - working with a library that has changed since the model's cutoff - you keep getting APIs that were correct one major version ago - you want documentation in context without pasting it yourself ## Watch out for - coverage varies by library, and obscure packages are often missing - broad questions pull in far more documentation than the task needs - the hosted service has usage limits, and self hosting is the way around them ## Get started Add to Claude Code: ```sh claude mcp add context7 -- npx -y @upstash/context7-mcp ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # GitHub MCP Server > Issues, pull requests and code search without leaving the agent Category: MCP servers (https://aiarabicdev.com/mcp-servers) Canonical page: https://aiarabicdev.com/mcp-servers/github-mcp-server Tags: mcp, github, code-search, pull-requests GitHub's official MCP server gives an agent typed access to repositories, issues, pull requests, actions and code search. It replaces a pile of gh CLI calls with a defined tool surface and a scoped token. ## Facts - Licence: MIT - Language: Go - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/github/github-mcp-server ## What it changes Reviewing a pull request, triaging issues or searching across an organisation becomes something the agent does directly rather than something you paste into it. Code search across repositories is the underrated part, because it answers questions a single checkout cannot. Because access is a scoped token rather than your whole shell, you can give an agent read access to an organisation without giving it the ability to push. ## Scoping it properly Start read only. An agent that can open pull requests and edit issues is useful and also writes to a place other people are watching, so earn that permission deliberately. Large repositories can return very large responses. Ask for specific files and specific pull requests rather than whole listings, or the context fills with material nobody reads. ## Reach for it when - triaging issues or reviewing pull requests with an agent - searching code across many repositories at once - giving an agent scoped repository access instead of your shell ## Watch out for - write access means the agent can post where colleagues will see it, so start read only - listings on large repositories return a lot of data, so ask narrowly - the token you issue is the real security boundary, so scope it rather than trusting prompts ## Get started Add to Claude Code: ```sh claude mcp add --transport http github https://api.githubcopilot.com/mcp/ ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Supabase MCP > Let the agent read your schema instead of imagining it Category: MCP servers (https://aiarabicdev.com/mcp-servers) Canonical page: https://aiarabicdev.com/mcp-servers/supabase-mcp Tags: mcp, database, postgres, supabase, schema Supabase's MCP server exposes project management, schema inspection, SQL execution and log access. The single biggest win is that an agent writing queries can read the actual tables, columns and policies rather than inferring them from your code. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://supabase.com/docs/guides/getting-started/mcp - Source: https://github.com/supabase-community/supabase-mcp ## Schema awareness is the point An agent that cannot see the database guesses at column names and writes queries that fail on the first run. One that can read the schema writes correct SQL immediately, and notices the foreign key you forgot to mention. Log access matters almost as much. A failing insert usually has a specific policy violation behind it, and reading that error is faster than reasoning about what row level security might be doing. ## Use read only mode The server supports a read only flag and a project scope. Use both. An agent with unrestricted SQL execution against a database holding real data is a risk with no upside during ordinary development work. For migrations, keep the human in the loop: have the agent write the SQL file and apply it yourself. That is slower by one minute and removes an entire class of accident. ## Reach for it when - the agent writes queries against a schema it should not have to guess - debugging a row level security policy from the actual error - keeping types and tables in step without pasting the schema in ## Watch out for - run it read only unless you have a specific reason not to - a project access token is a real credential, so scope it to one project - apply migrations yourself rather than letting an agent run them unattended ## Get started Add read only: ```sh claude mcp add supabase -- npx -y @supabase/mcp-server-supabase@latest --read-only ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Reference MCP Servers > The canonical implementations to read before writing your own Category: MCP servers (https://aiarabicdev.com/mcp-servers) Canonical page: https://aiarabicdev.com/mcp-servers/reference-mcp-servers Tags: mcp, reference, filesystem, git, fetch The Model Context Protocol organisation maintains a set of reference servers covering filesystem, fetch, git, memory and sequential thinking. They are useful as tools and more useful as the clearest available specification of how a server should behave. ## Facts - Licence: MIT - Language: TypeScript and Python - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/modelcontextprotocol/servers ## Read these before you build one Every question about how to shape a tool, name an argument, describe a resource or report an error is answered somewhere in this repository. Reading the filesystem server end to end is a faster education than any amount of protocol documentation. The filesystem server in particular shows how to constrain a server to specific directories, which is the pattern every server touching a real machine should copy. ## As tools in their own right The fetch server gives an agent web access with a defined boundary. The git server exposes repository history in a structured form. Both are small enough to audit before you trust them, which is not true of most servers you will install. Note that some servers here are explicitly reference material rather than production software. Read the repository's own guidance on which are archived before depending on one. ## Reach for it when - you are writing your own MCP server and want a correct model to copy - you want a small server you can actually audit before trusting it - you need filesystem access scoped to specific directories ## Watch out for - some entries are reference material rather than maintained products, so check before depending on one - a filesystem server is only as safe as the directories you scope it to - the fetch server can reach any URL, which is worth thinking about before enabling it ## Get started Filesystem, scoped to one directory: ```sh claude mcp add fs -- npx -y @modelcontextprotocol/server-filesystem /path/to/project ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: Agent skills and instruction sets ======================================================================== Skills, command packs and instruction files that turn a general model into something that follows a specific process. The newest and least settled shelf in the directory. ------------------------------------------------------------------------ # Anthropic Skills > The reference implementation of what a skill should look like Category: Agent skills and instruction sets (https://aiarabicdev.com/skills) Canonical page: https://aiarabicdev.com/skills/anthropic-skills Tags: skills, claude, documents, reference Anthropic publishes a set of agent skills covering document formats, spreadsheets, presentations and internal workflows. Beyond being useful, the repository is the clearest available answer to what belongs in a skill and what does not. ## Facts - Licence: No licence file in the repository - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/anthropics/skills ## The shape is the lesson A skill is a folder with instructions and optional scripts, loaded when its description matches the task. The interesting constraint is the description: it decides whether the skill is ever found, so it is written for retrieval rather than for a human reader. Reading several of these makes the pattern obvious. Instructions are procedural, not explanatory. They tell the model what to do in what order, and push reference material into separate files loaded only when needed. ## Using them directly The document skills are immediately practical. Producing a real spreadsheet or a formatted document is exactly the kind of task where a model without instructions produces something almost right. Fork rather than copy. These are written for general use, and a skill tuned to your own conventions outperforms a general one every time. ## Reach for it when - you are writing your first skill and want a correct model - you need documents and spreadsheets produced properly - you want to see how progressive disclosure is meant to work ## Watch out for - general purpose skills are always beaten by ones tuned to your conventions - a skill is only loaded if its description matches the task, so a vague description makes it invisible - there is no licence file in the repository, so check with the publisher before redistributing anything from it - the format is young and still moving --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Superpowers > A process framework that makes an agent plan before it builds Category: Agent skills and instruction sets (https://aiarabicdev.com/skills) Canonical page: https://aiarabicdev.com/skills/superpowers Tags: skills, process, planning, claude-code Superpowers is a large plugin of skills that impose a development process on an agent: brainstorm the design, get it approved, write a spec, plan the implementation, then build. It exists to stop the failure where an agent writes two thousand lines of the wrong thing very quickly. ## Facts - Licence: MIT - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/obra/superpowers ## What it actually changes The core move is a hard gate before implementation. The agent has to state what it intends to build and get a human yes before touching code, which converts the expensive failure mode into a cheap conversation. It also classifies work by size, so a one line fix does not get a design document and a new subsystem does not get started on a hunch. ## Whether the overhead is worth it On a substantial change, unquestionably. Being asked clarifying questions before any code exists routinely surfaces a requirement that would have cost a rewrite. On a genuinely small task the ceremony is friction, which is why the classification step matters. If you find yourself fighting it on trivial work, the classification is what to correct, not the framework. ## Reach for it when - an agent keeps building the wrong thing very efficiently - the work is large enough that a wrong direction is expensive - you want design decisions written down rather than implied by code ## Watch out for - the process is real overhead on small tasks - it is opinionated, and disagreeing with the opinion means editing the skills - a large skill set consumes context before your task starts --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # AGENTS.md > One instruction file that every coding agent agrees to read Category: Agent skills and instruction sets (https://aiarabicdev.com/skills) Canonical page: https://aiarabicdev.com/skills/agents-md Tags: skills, conventions, instructions, agents AGENTS.md is a convention rather than a tool: a single markdown file at the root of a repository holding the instructions a coding agent needs. A growing number of agents read it, which means one file instead of one per vendor. ## Facts - Licence: Open convention, no license required - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://agents.md ## Why a convention beats a feature Every coding tool invented its own instruction file, so a repository accumulated several copies of the same rules that then drifted apart. A shared filename fixes that with no code at all. The practical benefit is that the rules stay true. One file gets updated when a convention changes; four files get updated once and then quietly rot. ## What belongs in it Commands, the architecture in one paragraph per area, and the rules that are not discoverable from the code. Which command verifies a change is the single most valuable line in the file. What does not belong is anything the agent can read for itself. Describing the folder structure wastes context that the file listing already provides. ## Reach for it when - more than one coding agent touches the repository - there are conventions an agent cannot infer from the code - you are tired of maintaining several instruction files ## Watch out for - adoption is a convention, not a guarantee, so check what your tool reads - a long file eats the context your task needs - instructions that contradict the code get followed, which is worse than no instructions --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Awesome Claude Code > A community index of commands, hooks and configurations Category: Agent skills and instruction sets (https://aiarabicdev.com/skills) Canonical page: https://aiarabicdev.com/skills/awesome-claude-code Tags: skills, claude-code, hooks, commands, awesome-list A curated list of Claude Code slash commands, hooks, CLAUDE.md examples and workflow configurations contributed by the community. The value is seeing how other people actually set the tool up, which is not something documentation can show you. ## Facts - Licence: CC0-1.0 - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/hesreallyhim/awesome-claude-code ## What to take from it Hooks are the part worth studying. Running a formatter after every edit or blocking a commit that fails a check are small automations that change the experience considerably, and they are easy to miss in the documentation. The instruction file examples are also instructive, mostly for what experienced users leave out. The good ones are much shorter than a first attempt tends to be. ## The usual caveat about awesome lists It is an index, not a review. Entries are contributed rather than tested, and the ratio of maintained to abandoned drifts the way it does on every list of this kind. Treat it as a source of ideas to reimplement rather than configuration to paste. Anything that runs on your machine after every edit deserves a read first. ## Reach for it when - you want to see how other people configure the tool - you are looking for hook ideas rather than documentation - you want examples of instruction files that experienced users actually ship ## Watch out for - entries are contributed rather than reviewed, so quality varies - hooks run commands on your machine, so read before installing - links to abandoned projects accumulate on every list like this --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Awesome CursorRules > Hundreds of stack specific instruction files to read and adapt Category: Agent skills and instruction sets (https://aiarabicdev.com/skills) Canonical page: https://aiarabicdev.com/skills/awesome-cursorrules Tags: skills, cursor, rules, conventions, awesome-list A large collection of rules files for Cursor, organised by stack: Next.js, React Native, Django, Go and many more. Although written for one editor, the files are plain instructions and port to any agent that reads a project instruction file. ## Facts - Licence: CC0-1.0 - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/PatrickJS/awesome-cursorrules ## Why it is worth reading across tools The content is stack conventions, not editor configuration. A good Next.js rules file says the same things whichever tool is going to read it, so these transfer to AGENTS.md or CLAUDE.md with light editing. The volume is the value. Reading five files for the same stack shows you which rules everyone converges on, and those are usually the ones worth keeping. ## How to adapt one properly Delete aggressively. Most of these files are two or three times longer than they need to be, and every unnecessary line is context your actual task does not get. Keep the rules that are not discoverable from the code and drop everything the agent could learn by reading a file. That test alone usually removes half the document. ## Reach for it when - you want a starting point for your stack rather than a blank file - you want to see which conventions everyone agrees on - you are moving from one agent tool to another and want to port your rules ## Watch out for - most files are far longer than they need to be, so cut hard - written for one editor, so some directives will not apply to your tool - stack specific advice ages, and framework versions move underneath it --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # llms.txt > A file that tells an agent what your site is and where to read it Category: Agent skills and instruction sets (https://aiarabicdev.com/skills) Canonical page: https://aiarabicdev.com/skills/llms-txt Tags: skills, seo, agents, conventions, documentation llms.txt is a proposed convention: a markdown file at the root of a site summarising what it offers and linking to clean text versions of its pages. It is robots.txt for comprehension rather than for crawling, and it is cheap enough to be worth doing regardless of adoption. ## Facts - Licence: Open proposal, no license required - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://llmstxt.org ## What it is for An agent arriving at a site has to infer what it is from navigation and markup, which is expensive and often wrong. A short file stating the purpose, the structure and where the plain text lives removes the guesswork. The companion pattern is a markdown twin for each page, so an agent can read content without parsing a layout. This site serves one for every page, at the same URL with a .md suffix. ## Honest status This is a convention with real momentum among documentation sites and no guarantee that any particular crawler honours it. Nobody should rebuild a site around it. It also costs almost nothing: a generated file from content you already have. That asymmetry is the whole argument for shipping one. ## Reach for it when - your site is documentation or reference material agents should read - you want answer engines to describe your product accurately - you can generate the file from content you already maintain ## Watch out for - adoption by crawlers is not guaranteed, so treat it as cheap upside - a hand maintained file goes stale, so generate it - it is not a ranking mechanism and will not behave like one --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: Full stack starter kits ======================================================================== Starters that hand you a working application on day one: routing, sessions, a database and often payments. The trade you are making is speed now against someone else's decisions later. ------------------------------------------------------------------------ # create-t3-app > A typesafe Next.js starter that adds nothing you did not ask for Category: Full stack starter kits (https://aiarabicdev.com/boilerplates) Canonical page: https://aiarabicdev.com/boilerplates/create-t3-app Tags: nextjs, typescript, trpc, prisma, starter create-t3-app scaffolds a Next.js project with TypeScript, Tailwind, tRPC, Prisma or Drizzle and NextAuth, choosing each piece through prompts. Its stated principle is to include only what it can justify, which makes it the least opinionated starter on this shelf. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://create.t3.gg - Source: https://github.com/t3-oss/create-t3-app ## Typesafety end to end The argument for the stack is a single type flowing from the database schema through the API layer into the component. Rename a column and the failure appears in your editor rather than in production. Because everything is chosen through prompts, you can take the parts you want. A project that needs typed data access but not tRPC comes out clean rather than carrying a layer it ignores. ## What it deliberately leaves out No billing, no email, no admin panel, no landing page. That is a feature: those are the parts most likely to be wrong for your product, and the parts most expensive to unpick from a heavier starter. The consequence is that a real product needs more work after scaffolding than a batteries included kit would. You are trading day one speed for month three freedom. ## Reach for it when - you want typesafety from the database to the component - you would rather add features than remove them - the team already knows Next.js and wants the wiring done ## Watch out for - no billing, email or admin, so a real product needs more work after scaffolding - tRPC is a commitment that shapes how your whole API is written - the stack assumes a comfort level with TypeScript that a beginner will feel ## Get started Scaffold: ```sh pnpm create t3-app@latest ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Next.js SaaS Starter > Auth, teams and Stripe subscriptions, maintained by Vercel Category: Full stack starter kits (https://aiarabicdev.com/boilerplates) Canonical page: https://aiarabicdev.com/boilerplates/nextjs-saas-starter Tags: nextjs, stripe, postgres, drizzle, saas A reference SaaS starter using the Next.js App Router, Postgres with Drizzle, cookie based auth and Stripe Checkout with a customer portal. It covers the parts of a subscription product that are tedious rather than interesting: teams, roles, invitations and an activity log. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/nextjs/saas-starter ## The parts worth having Team membership with roles and invitations is more work than it looks, and getting it wrong is a security problem rather than a bug. Having a correct implementation to read is worth more than the time it saves. The Stripe integration covers Checkout and the customer portal, which between them handle the payment flows a subscription product actually needs, including the plan changes people forget to build. ## Read it as a reference It is a demonstration of current Next.js patterns as much as a product starter. Server actions, middleware and data access are written the way the framework team intends, which makes it a useful thing to read even if you do not adopt it. Stripe is the only payment path, and that is the constraint to check first. If your customers are in a market Stripe does not serve well, the billing layer is the part you will be rewriting. ## Reach for it when - the product bills teams rather than individuals - you want current Next.js patterns written correctly - Stripe is a fit for the markets you sell into ## Watch out for - Stripe only, which is a real constraint in markets it does not serve well - the marketing pages are placeholders, so the front of the site is still yours to build - it is a reference implementation, so operational concerns like email deliverability are left to you ## Get started Clone: ```sh git clone https://github.com/nextjs/saas-starter ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Open SaaS > A complete, genuinely free SaaS template with an admin dashboard Category: Full stack starter kits (https://aiarabicdev.com/boilerplates) Canonical page: https://aiarabicdev.com/boilerplates/open-saas Tags: wasp, react, stripe, admin, saas Open SaaS is a full featured SaaS template built on Wasp, covering auth, Stripe or Lemon Squeezy payments, an admin dashboard, a blog, email and analytics. It is the most complete free option here, and the trade is that it is built on a framework rather than on plain React. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://opensaas.sh - Source: https://github.com/wasp-lang/open-saas ## What complete actually means here The admin dashboard and analytics are the parts nobody builds until they urgently need them. Having them present, working and readable on day one is a genuine head start. Two payment providers rather than one also matters. Lemon Squeezy acts as a merchant of record, which handles sales tax in places where doing it yourself is a serious undertaking. ## The framework question Wasp is a full stack framework with its own configuration language that compiles to React and Node. That buys a lot of generated plumbing and it means learning something that is not transferable to your next project. Judge it on that alone. If you are happy inside a framework, this is the most complete free kit available. If you want plain React and Node, pick something else rather than fighting the abstraction. ## Reach for it when - you want an admin dashboard and analytics without building them - you need a merchant of record option for sales tax - you are comfortable working inside a framework ## Watch out for - Wasp is another framework to learn, with its own configuration language - the abstraction is helpful until you need something it did not anticipate - a smaller ecosystem than plain Next.js, so fewer existing answers ## Get started Scaffold: ```sh wasp new -t saas ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Supabase Next.js Starter > The minimum correct setup for Supabase auth in the App Router Category: Full stack starter kits (https://aiarabicdev.com/boilerplates) Canonical page: https://aiarabicdev.com/boilerplates/supabase-nextjs-starter Tags: nextjs, supabase, auth, postgres, starter Supabase's official Next.js starter is small on purpose. It gets cookie based server side auth right across middleware, server components and route handlers, which is the part everyone implements incorrectly the first time, and stops there. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://supabase.com/docs/guides/getting-started/quickstarts/nextjs - Source: https://github.com/supabase/supabase/tree/master/examples/auth/nextjs ## Why the small scope is the point Server side auth in the App Router has a narrow correct answer. The session has to be refreshed in middleware, the cookie handling has to be consistent between the browser and server clients, and getting either wrong produces bugs that only appear on a slow connection. This starter is the working version of that. Reading it once is worth more than several attempts at assembling it from documentation. ## What you add yourself Everything else. No billing, no teams, no admin. It is a correct foundation rather than a product, which is the right shape when you want Supabase specifically and intend to make your own decisions above it. Row level security is the piece to take seriously next. A Supabase project without considered policies is a public database, and no starter can decide those rules for you. ## Reach for it when - you have already chosen Supabase and want the auth wiring correct - you want a foundation rather than a finished product - you intend to make your own decisions above the database ## Watch out for - no billing, teams or admin, this is auth and nothing more - row level security is your responsibility and is where the real risk lives - the hosted service has a free tier that pauses inactive projects ## Get started Scaffold: ```sh pnpm create next-app -e with-supabase ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Refine > Generate the admin panel instead of designing it Category: Full stack starter kits (https://aiarabicdev.com/boilerplates) Canonical page: https://aiarabicdev.com/boilerplates/shipfast-alternatives-refine Tags: react, admin, crud, internal-tools, headless Refine is a React framework for data heavy interfaces: admin panels, dashboards and internal tools. It handles routing, data fetching, forms, tables, filtering and auth against a wide set of backends, and lets you pick the component library it renders with. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free core, paid tiers exist - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://refine.dev - Source: https://github.com/refinedev/refine ## The right tool for the wrong looking screens Internal tools are mostly the same twelve screens: a list with filters, a detail view, a create form, an edit form. Refine treats those as generated from a data provider rather than built by hand, which is the correct instinct. It is headless about presentation, so the same application can render through Material UI, Ant Design, Chakra or your own components. That keeps the generated part separate from the designed part. ## Where it stops fitting It is built for resource shaped data. An interface that is genuinely custom, a canvas, an editor, a graph view, fights the abstraction rather than benefiting from it. Use it for the admin side and build the customer facing product separately. Trying to make one framework serve both is where projects like this usually go wrong. ## Reach for it when - you need an admin panel and do not want to design one - the data is resource shaped, with lists and detail views - you want to keep your choice of component library ## Watch out for - genuinely custom interfaces fight the abstraction - a large framework surface to learn for a small tool - an enterprise edition is sold alongside the open source core ## Get started Scaffold: ```sh pnpm create refine-app@latest ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Yalla Kit > An Arabic first Next.js starter with right to left handled throughout Category: Full stack starter kits (https://aiarabicdev.com/boilerplates) Canonical page: https://aiarabicdev.com/boilerplates/yalla-kit Tags: nextjs, supabase, rtl, arabic, i18n, paid Yalla Kit is a Next.js and Supabase starter built around bilingual Arabic and English from the first commit: locale routing, right to left layout, translated message files and a lint rule that rejects direction breaking CSS classes. It is a paid product, and it is made by the person who maintains this directory. ## Facts - Licence: Proprietary - Language: TypeScript - Cost: Paid - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://withfouad.com - Source: https://github.com/fixyboy/yalla-kit ## Disclosure first This entry is here because right to left starters are genuinely scarce, and leaving it out to look neutral would be its own kind of dishonest. It is listed on the same terms as everything else, with the same caveats section, and it is the only paid entry in this category. If you want the same capability for nothing, the honest answer is next-intl plus Tailwind's logical properties plus a few days of work. That path is documented and it costs time instead of money. The repository linked below is the product page and issue tracker, and holds documentation rather than code. The source is private and ships to licence holders, which is worth knowing before you click through expecting to read it. ## What the right to left work actually involves Retrofitting right to left support is unpleasant because the problem is not translation, it is direction. Every margin, padding, border and icon that assumed left now assumes wrong, and the failures are visual rather than thrown, so they hide until someone looks. The approach that works is mechanical enforcement: logical properties everywhere, a lint rule that fails the build on a physical direction class, and a test that fails when a message key exists in one language and not the other. Those three rules are worth copying whether or not you buy anything. ## Reach for it when - the product ships in Arabic and English from the start - you have been bitten by retrofitting right to left support before - you want the direction rules enforced by tooling rather than by review ## Watch out for - it is a paid product, and it is made by the maintainer of this directory - everything it does can be assembled from next-intl and logical properties with a few days of work - it commits you to Next.js and Supabase, so the stack choice is made for you --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ======================================================================== CATEGORY: Design systems and tokens ======================================================================== Published design systems, token sets and the documentation behind them. Read these when you need a defensible reason for a spacing scale rather than another component to install. ------------------------------------------------------------------------ # Awesome Design Systems > The published design systems of dozens of real companies, in one list Category: Design systems and tokens (https://aiarabicdev.com/design-systems) Canonical page: https://aiarabicdev.com/design-systems/awesome-design-systems Tags: design-systems, tokens, documentation, awesome-list A curated index of publicly documented design systems, from Apple and Google down to smaller product teams. The reason to keep it bookmarked is that reading how several serious teams solved the same problem is faster than reasoning about it alone. ## Facts - Licence: CC0-1.0 - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Source: https://github.com/klaufel/awesome-design-systems ## How to actually use a list like this Do not browse it. Arrive with a question, such as how many spacing steps are enough, or where a team draws the line between a badge and a tag, then read three systems on that one question. The convergence between them is your answer. The systems that document their reasoning are worth more than the ones that only publish components. A rationale transfers to your product; a component library rarely does. ## What not to take from it Scale. These systems serve dozens of teams and years of legacy, which is why they have forty components and eleven type sizes. Copying that structure into a product with one team produces process for its own sake. Take the decisions and the vocabulary, and leave the governance behind. A three person team that adopts a component review board has copied the cost of a large design system without any of the reason it exists. ## Reach for it when - you need a defensible reason for a spacing or type decision - you are naming components and want the vocabulary everyone else uses - you want to see how a token layer is documented at scale ## Watch out for - these systems are built for a scale you probably do not have - some linked systems are abandoned or have moved, as on every list of this kind - reading design systems is a very comfortable way to avoid designing anything --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Primer > GitHub's design system, documented for developers rather than designers Category: Design systems and tokens (https://aiarabicdev.com/design-systems) Canonical page: https://aiarabicdev.com/design-systems/primer Tags: design-systems, github, tokens, react, accessibility Primer is the design system behind GitHub: tokens, React and Rails components, guidelines and accessibility documentation. It is unusually useful to read because it is written for the people implementing it, so the guidance is concrete rather than aspirational. ## Facts - Licence: MIT - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://primer.style - Source: https://github.com/primer/react ## Why it reads better than most The documentation answers implementation questions. When to use which button variant, what a specific token is for, how a component behaves at a small viewport. Those are the questions that actually arise, and most published systems answer none of them. The accessibility documentation is a genuine reference in its own right, particularly the guidance on focus management and live regions. ## Borrow the structure, not the look Primer looks like GitHub, which is correct and is not what you want. What transfers is the token architecture: functional names layered over primitives, so a colour means a purpose rather than a hue. Getting that layering right early is the difference between a theme you can change in an afternoon and one you cannot change at all. ## Reach for it when - you want token architecture documented by people who maintain it - you need concrete accessibility guidance rather than a checklist - the audience is developers, so GitHub's conventions are already familiar ## Watch out for - adopting the components means adopting GitHub's visual identity - it is scaled for a very large product, so much of it is not your problem - the React and Rails implementations do not move in lockstep --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Carbon Design System > IBM's system, built for dense data and long lived enterprise software Category: Design systems and tokens (https://aiarabicdev.com/design-systems) Canonical page: https://aiarabicdev.com/design-systems/carbon-design-system Tags: design-systems, ibm, enterprise, data, tokens Carbon is IBM's open source design system, covering tokens, components, layout, motion and data visualisation across React, Web Components, Angular and Vue. It is built for information dense interfaces that people use all day, which makes it a specialist rather than a general reference. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://carbondesignsystem.com - Source: https://github.com/carbon-design-system/carbon ## Where it is genuinely better Data density. Carbon's tables, filters and grids assume thousands of rows and a user who lives in the interface, which is a different problem from the spacious marketing influenced layouts most systems document. The motion documentation is also more rigorous than most, defining productive and expressive easing sets rather than leaving duration to taste. ## Where it will fight you It looks like enterprise software, deliberately. Sharp, restrained and serious, which is right for its purpose and wrong for a consumer product. It is also large. Adopting Carbon is a commitment to its grid, its type scale and its component vocabulary, and pulling one table out of it is more work than it sounds. ## Reach for it when - the interface is dense data that people work in all day - you need the same system across several frontend frameworks - you want motion documented as rules rather than as taste ## Watch out for - the enterprise look is intentional and hard to soften - adopting it means adopting its grid and type scale, not just components - extracting one component from it is harder than it looks --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Open Props > A ready made set of CSS custom properties, no framework attached Category: Design systems and tokens (https://aiarabicdev.com/design-systems) Canonical page: https://aiarabicdev.com/design-systems/open-props Tags: design-systems, css, tokens, custom-properties Open Props is a library of CSS custom properties covering colour, spacing, type, shadows, easings and animations. It is a token layer and nothing else, usable in plain CSS with no build step, no components and no opinion about your markup. ## Facts - Licence: MIT - Language: CSS - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://open-props.style - Source: https://github.com/argyleink/open-props ## Why a token only library is useful Most projects need a considered scale far more than they need components. Open Props gives you a complete set of scales, already balanced against each other, which removes the tedious part of starting a design system without importing anyone's aesthetic. The easing and animation properties are the standouts. Well chosen curves are hard to invent and immediately improve every transition in a project. ## How it sits alongside Tailwind They overlap and can coexist. Tailwind's theme layer is itself custom properties now, so Open Props values can be mapped straight into it when you want its scales without leaving Tailwind. For projects not using a utility framework at all, this is the shortest path to a coherent set of variables. ## Reach for it when - you want a considered scale without adopting a framework - the project is plain CSS with no build pipeline - you need good easing curves and do not want to invent them ## Watch out for - tokens only, so components and layout remain entirely yours - importing the whole set adds a lot of unused custom properties, so take the subsets you need - it overlaps with Tailwind's theme, so decide which one owns a value ## Get started Install: ```sh pnpm add open-props ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Material Web > Material Design as standard web components Category: Design systems and tokens (https://aiarabicdev.com/design-systems) Canonical page: https://aiarabicdev.com/design-systems/material-web Tags: design-systems, material, web-components, color Material Web implements Material Design 3 as framework agnostic web components, with the dynamic colour system that generates a full palette from a single source colour. It is the most rigorously specified system on this shelf. ## Facts - Licence: Apache-2.0 - Language: TypeScript - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://m3.material.io - Source: https://github.com/material-components/material-web ## The colour system is the interesting part Material 3 generates tonal palettes algorithmically from one seed colour, producing surfaces, containers and text colours with contrast relationships already guaranteed. Reading how that works is valuable whether or not you use the components. It solves the problem most hand built palettes get wrong, which is that a colour picked for a button rarely has a usable set of tints and shades behind it. ## The recognisability problem Material is the most identifiable design language in software. A product built on it reads as an Android application, which is exactly right sometimes and a liability otherwise. Check the current status of the project before committing. Its scope and roadmap have shifted more than once, and web components integrate into React with more friction than a React library. ## Reach for it when - the product should feel native on Android - you want a colour system with contrast guarantees built in - framework agnostic web components suit your stack ## Watch out for - Material is instantly recognisable, which is a strong branding decision - the project's scope and roadmap have changed more than once, so check its current status - web components in React need wrappers and event handling care --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence ------------------------------------------------------------------------ # Radix Colors > Twelve step palettes where every step has a defined job Category: Design systems and tokens (https://aiarabicdev.com/design-systems) Canonical page: https://aiarabicdev.com/design-systems/radix-colors Tags: design-systems, color, accessibility, tokens, dark-mode Radix Colors is a palette system of twelve step scales, designed so each step has a specific purpose: this step is a subtle background, this one is a border, this one is accessible text. Light and dark scales are matched, and it is only colour. ## Facts - Licence: MIT - Language: CSS - Cost: Free and open source - Self hostable: yes - Added: 2026-08-23 - Last checked: 2026-08-23 ## Links - Website: https://www.radix-ui.com/colors - Source: https://github.com/radix-ui/colors ## Why numbered steps with jobs work Most palettes give you nine shades and no guidance, so choosing between 600 and 700 becomes a taste decision repeated hundreds of times inconsistently. Radix assigns a role to each step, which turns those decisions into lookups. The result is that a component built on step three for its background and step eleven for its text is accessible by construction, in both light and dark mode, without checking. ## The limits It is colour only. No spacing, no type, no components. That focus is why it composes with anything, including Tailwind, whose theme can be pointed at these scales directly. The scales are also carefully balanced against each other, so dropping one arbitrary brand colour into the middle of a Radix palette breaks the guarantees. Generate a custom scale properly instead. ## Reach for it when - you want colour decisions to be lookups rather than judgements - light and dark mode must both be accessible without manual checking - you need a palette that composes with any component library ## Watch out for - colour only, so the rest of the system is still yours - dropping an unscaled brand colour into it breaks the contrast guarantees - twelve steps per scale is a lot of tokens to name and maintain ## Get started Install: ```sh pnpm add @radix-ui/colors ``` --- aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements. New entries are announced at https://t.me/arabic_Intelligence