Is Glass AI Composer free to use?

Yes. Glass AI Composer is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Glass AI Composer?

One command: npx shadcn@latest add https://aicanvas.me/r/glass-ai-compose.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass AI Composer for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Glass AI Composer built with?

Glass AI Composer is built with React and TypeScript, using Motion and Tailwind CSS.

Where would I use Glass AI Composer?

Common uses include AI product, SaaS, and Editor. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glass AI Composer with AI?

Yes. Glass AI Composer ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Glass AI ComposerGlassmorphism AI chat input with image upload, web search toggle, and model switcher.

Inputs & ControlsGlassAI productSaaSEditor

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/glass-ai-compose

Free account required. Signed out, this installs a placeholder file instead of the component.

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

About Glass AI Composer

Glass AI Composer is an AI chat input with everything modern conversation interfaces tend to bolt on: an image-upload slot, a web-search toggle that visibly engages, and a segmented pill switcher for picking between fast and frontier models. The whole thing sits inside a glassmorphism surface with Motion-driven focus and toggle states, so the composer feels like part of the product rather than a third-party widget. Drop it into AI products, SaaS support consoles, editor command surfaces, and any chat-style entry point.

Built with

MotionTailwind CSS

Frequently asked questions

Is Glass AI Composer free to use?: Yes. Glass AI Composer is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install Glass AI Composer?: One command: npx shadcn@latest add https://aicanvas.me/r/glass-ai-compose.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass AI Composer for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is Glass AI Composer built with?: Glass AI Composer is built with React and TypeScript, using Motion and Tailwind CSS.
Where would I use Glass AI Composer?: Common uses include AI product, SaaS, and Editor. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Glass AI Composer with AI?: Yes. Glass AI Composer ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.