);
}
```
{% endcode %}
***
## 📋 Requirements Summary
### Minimum Required
```
addons/my-addon/
└── dashboard/
├── config.js # Must export { pages, navItems, apiRoutes }
└── pages/
└── index.jsx # At least one page component
```
### config.js Template
```javascript
module.exports = {
pages: [], // Required (can be empty)
navItems: [], // Required (can be empty)
apiRoutes: [] // Required (can be empty)
};
```
### Page Component Template
```jsx
import React from 'react';
export default function MyPage() {
return (
My Page
);
}
```
***
## 🔄 Integration with Event API
Combine dashboard with event handlers:
**`addons/my-addon/my-addon.js`**
{% code expandable="true" %}
```javascript
module.exports = {
name: 'MyAddon',
version: '1.0.0',
// Event handlers
events: {
'discord:messageCreate': async (eventData, context) => {
// Handle Discord events
}
},
// Initialization
run: async (client, eventManager) => {
console.log('[MyAddon] Loaded with dashboard support!');
}
};
```
{% endcode %}
The dashboard config is automatically loaded from `dashboard/config.js` when the addon initializes.
***
## 💡 Tips & Best Practices
{% stepper %}
{% step %}
Use meaningful addon names — The addon name becomes part of the API URL
{% endstep %}
{% step %}
Handle loading states — Always show loading indicators
{% endstep %}
{% step %}
Error handling — Catch and display errors gracefully
{% endstep %}
{% step %}
API validation — Always validate request data on the backend
{% endstep %}
{% step %}
Permission checks — Use permissions for sensitive features
{% endstep %}
{% endstepper %}
***
## Troubleshooting
Page not loading
* Check browser console for errors
* Verify file exists in `dashboard/pages/`
* Ensure component has `export default`
API returns 404
* Check addon name is lowercase in URL
* Verify route is registered in config.js
* Check server logs for registration messages
Styles not applying
* Use existing Tailwind classes
* Check class names are correct
* Verify you're using the right CSS variable names
Authentication issues
* Ensure you're logged into the dashboard
* Check if route requires specific permissions
* Verify session is active
***
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.drakodevelopment.net/addon-system/api-integration/dashboard-api.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.