building-with-tambo

To add AI generative UI to your existing React application, integrate Tambo by installing the required dependencies, wiring the TamboProvider with your API authentication, and registering your interactive components using Zod schema validation.

Yes, you can integrate AI chat into a Next.js or Vite project without changing your existing layout. The integration detects your tech stack and adds the message-thread component as a collapsible panel, side panel, or full-screen chat to preserve your conventions.

You register React components for AI-generated UI using Zod by creating a component registry in your project, defining a propsSchema with Zod for each component, and providing descriptions so the AI can accurately generate and render the interactive UI elements.

Yes, AI chat integration works in React monorepos with existing styling and validation conventions. The setup process detects your monorepo structure, TypeScript configuration, and package manager to ensure the integration matches your project's specific patterns.

AI chat input can interfere with global keyboard shortcuts in React because both listen for keyboard events. The integration includes specific keyboard-event isolation for the message-thread component to prevent conflicts with your app's existing global shortcut handlers.

To set up Tambo generative UI in a Vite app, you need to configure specific environment variables for your API key and user key. These credentials are required when wiring the TamboProvider to authenticate your application's AI-driven chat and rendering capabilities.