Troubleshooting

Solutions for common issues with the DeDevs UI Design Registry for AI chatbot interfaces.

AI Conversation Component Issues

My chatbot messages aren't displaying properly

Make sure your project is configured correctly for the Design Registry components:

Check that your globals.css file imports Tailwind and includes the shadcn/ui base styles
Verify you've installed the correct message handler components (AIMessage, AIMessageContent, etc.)
Ensure your conversation state is properly structured with message types (user, assistant, system)
Confirm that message formatting utilities are properly imported and configured

Message streaming animation doesn't work-

The AI response streaming animation requires:

Properly formatted stream data with partial content chunks
The useAIStreamResponse hook configured correctly with the proper streaming options
No conflicting CSS animations in your project that might override typing indicators
Correct implementation of the streaming protocol from your AI provider

AI response markdown rendering issues

If your AI-generated markdown content doesn't render properly:

Make sure you've installed the markdown renderer component
Check that you're processing the markdown content with the right utilities
Verify custom element renderers are properly registered for specialized content types
Ensure you haven't disabled any required markdown extensions

Installation Issues

I ran npx dedevs-ui add but nothing was added to my project

Double-check that:

Your current working directory is the root of your project (where package.json lives)
Your components.json file (if using shadcn-style config) is set up correctly
You're using the latest version of the DeDevs UI CLI:

npx dedevs-ui@latest

AI component dependencies are missing

Some AI components require additional dependencies:

For code highlighting: shiki, rehype-pretty-code, or similar
For markdown: remark, rehype, and related plugins
For visualizations: data visualization libraries

Check the specific component documentation for required dependencies.

Ensure your app is using the same data-theme system that shadcn/ui and the Design Registry expect. The default implementation toggles a data-theme attribute on the <html> element. Make sure your tailwind.config.js is using class or data- selectors accordingly.

Code blocks in AI responses look broken

Make sure you have:

Installed the code syntax highlighting dependencies
Added the proper language detection utilities
Included the syntax highlighting CSS in your project
Configured the theme properly for both light and dark modes
Set up proper escaping for code content with special characters

AI reasoning visualization styling issues

If your reasoning visualizations look incorrect:

Check for CSS conflicts with your application styles
Ensure the visualization container has sufficient width/height
Verify that your reasoning data structure follows the expected format
Check browser console for any styling errors

Import & Configuration Issues

The AI component imports fail with "module not found"

Check the file exists. If it does, make sure your tsconfig.json has a proper paths alias for @/ i.e.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

AI reasoning visualization doesn't render properly

Ensure your reasoning data follows the correct schema format
Check that all sub-components are properly imported
Verify no CSS conflicts with other visualization libraries
Make sure your reasoning steps are properly formatted with valid JSON structure
Confirm that your visualization container has sufficient dimensions

AI Integration Problems

My AI model integration isn't working with the Design Registry

Make sure you've implemented the correct message format adapters
Check your API keys and endpoints are properly configured
Verify the model output format matches what the components expect
Use the browser console to check for API errors
Ensure your rate limits haven't been exceeded with the AI provider
Check that your AI service is properly handling streaming if you're using streaming components