We gave our AI assistant access to our React Components and MCP Server (tambo.co)

Tambo’s team connected their AI chat assistant directly to the app’s real React components and backend docs, so it can render interactive UI and perform actions instead of giving text-only instructions. They wrapped existing components with Zod schemas to define prop contracts, registered those components with the assistant, and exposed backend endpoints as "tools" (example: generateProjectApiKey) with typed schemas. They also plugged an Inkeep MCP docs server into the pipeline so the assistant has product documentation and code snippets to draw from. The result: ask the assistant to manage API keys or configure features and it will show the actual component UI, call your APIs, and explain what it did — all inside the chat. Technically the flow is straightforward: React components → Zod prop schemas → registered tools (API clients) → MCP server for docs → TamboProvider → chat assistant. Example code shows an APIKeyList props schema, component registration, a generateProjectApiKey tool schema and registration via useTambo, and wiring through TamboProvider. This approach preserves existing UI, enforces typed contracts for safety and correctness, improves UX by making the assistant a UI layer rather than a text guide, and speeds adoption. The repo and MCP server are public, making it replicable for teams wanting doc-aware, interactive assistants.