devhub (dev.databricks.com) is the platform for developers to get all they need to build and deploy data apps and AI agents to Databricks. It provides opinonated guides, tools, and best practices for the Databricks developer stack.
Review the Contributing guide for more information on how to contribute to DevHub.
For every change to DevHub, do the following:
- run
npm run devto start the development server (both Docusaurus and the API functions) - use the
building-componentsskill to understand how to write React components - make your changes
- run
npm run fmtto format the code - run
npm run typecheckto verify types are correct - run
npm run verify:imagesto verify example/resource images (16:9, ≥1600x900) when you've added or changed anything understatic/img/examples/ - use agent-browser to verify the changes
- use the
seo-auditskill to verify all changes are SEO-friendly - use the
frontend-designskill to verify all changes adhere to the design principles - run
npm run buildto verify build is successful - run
npm run testto run smoke tests (builds, serves, verifies sitemap.xml, robots.txt, and llms.txt)
The pre-commit hook (husky) runs prettier -c ., npm run typecheck, npm run verify:images, and npm run build, so failing any of these locally will also block the commit.
This repository uses npm exclusively. Do not use bun, yarn, or pnpm. All scripts, CI, and documentation assume npm/npx.
- Strictly follow the Functional Core, Imperative Shell pattern: separate application logic into two parts: a functional core with pure, side-effect-free functions for business rules and data transformation, and an imperative shell that handles impure actions like database I/O, network requests, or user input, making the core logic easily testable and modular
- Everything is a library: Organize features and domains as self-contained folders in
src/lib/(e.g.,chat,ai,db). Co-locate schema, queries, types, and utilities together. Components go incomponents/<feature>/. - Use the web platform: Prefer native APIs and standards. Avoid abstractions that hide what the code actually does.
- Avoid
export defaultin favor ofexportwhenever possible. - Only create an abstraction if it's actually needed
- Prefer clear function/variable names over inline comments
- Avoid helper functions when a simple inline expression would suffice
- Don't use emojis
- No barrel index files - just export from the source files instead
- No type.ts files, just inline types or co-locate them with their related code
- Don't unnecessarily add
try/catch - Don't cast to
any
- Avoid massive JSX blocks and compose smaller components
- Colocate code that changes together
- Avoid
useEffectunless absolutely needed
- Always use Tailwind over CSS Modules
- Avoid
@applyin favor of inline Tailwind classes - Use brand colors and avoid raw color values
- Always use shadcn/ui components as the foundation for all UI
Use agent-browser for web automation. Run agent-browser --help for all commands.
Core workflow:
agent-browser open <url>- Navigate to pageagent-browser snapshot -i- Get interactive elements with refs (@e1, @e2)agent-browser click @e1/fill @e2 "text"- Interact using refs- Re-snapshot after page changes