Can I place and customize AI Chat inside my editor?

Yes. The plugin provides a chat panel you can place in your editor layout and lets you customize its built-in UI components, suggestions, inputs, messages, and language.

Can I use my own AI models and provider credentials?

Yes. Configure provider credentials in AI Settings and select your workspace models for chat, code generation, or image generation. Calls to those models are billed by your provider; agents using Studio defaults and other Studio-powered features may use Studio AI credits.

Can AI use my product data or call my own functions?

Yes. Add client-side tools for editor or browser actions, or server-side tools for your application services and data. Your backend can also shape the assistant's instructions and response flow.

When do I need a custom AI backend?

Use Studio's hosted Chat Platform API for the standard setup. A custom backend is available for deployed apps on the Business plan; you can develop against a local custom endpoint before upgrading.

Does Studio SDK store conversations or deliver emails?

The chat plugin exposes message loading and update callbacks so your app can persist conversation history. Studio SDK provides the editor and AI interface; your product controls user access, project storage, export, and email delivery.

Embed an AI visual editor in your product

Give your users an AI assistant inside your visual editor. Customize the chat UI, choose models and prompts, and connect AI to your product's tools and data.

Embed the Editor Compare Plans

Your App

Publish

AI Assistant

Create a landing page following our company’s brand design system.

Code

Your next page starts here.Built around your brand.

Your brand

ProductWhy usStories

Get started

YOUR NEXT CHAPTER

A better way
to build together.

Turn your boldest ideas into something extraordinary. One place to get started.

Get startedFree to start. Room to grow.

Your creative space

Good things ahead.

OverviewProjectsTeam

Brand refresh

The next big idea

A little more space to create.

A little less chaos.
A lot more possibility.DesignMarketingProductEngineering

Good work starts with a little space.Thoughtfully simple. Beautifully useful.

Make it yours

A flexible space for your ideas.

Work together

Bring your people closer.

Grow your vision

Build something that matters.

Make room for your
next big idea.

Your best work is still ahead.

Let’s get started

Styles

Properties

Layout

Size

Space

Position

Typography

Font×

Arial

Color×

#f3eaf8

Size

16 px

Weight

Normal

Line height

normal

Spacing

normal

Align

left

Vertical align

Baseline

Transform

None

Direction

LTR

Breaking

Normal

Decoration

None

Background

Borders

Effects

POWERING SOLUTIONS FOR

Add AI editing.
Keep control of the experience.

Start with a visual editor and an AI assistant ready to adapt. Give users a head start on pages and emails, then let them refine every detail visually inside your product.

Built-in AI assistant

AI that works inside your workflow.

Let users create and edit content through conversation, then refine it visually. Customize the chat UI, instructions, and tools to connect AI to your product.

Explore AI integration

Custom chat UI

Make the assistant feel like part of your product.

Place AI Chat in your editor layout, adapt its labels and suggested prompts, and shape the input and message components around your users.

Explore chat customization

Models & prompts

Choose the right model for each task.

Configure workspace models for chat, code, and images. Bring your provider credentials through AI Settings and tailor the instructions while Studio handles the hosted backend.

Configure models and prompts

Custom tools

Let AI work with your product's data and actions.

Connect server-side functions and client-side tools through a custom backend. Give the assistant access to your domain data and actions that work with the editor.

Build custom AI tools

Custom backend

Run the AI workflow on your infrastructure.

Connect your own streaming endpoint, choose providers, and extend the assistant's tools and instructions. Use your application's authentication and services around the editor.

Explore custom backends

Choose how your AI runs.

Use Studio's hosted AI, bring your own models to the same backend, or operate a custom endpoint when you need more control.

Hosted AI Chat

Use the Chat Platform API and Studio's default models with rechargeable AI credits. Connect your token route and let Studio handle AI responses.

Connect hosted AI

Your own models

Keep the hosted backend and configure provider credentials in AI Settings. Calls to your selected models are billed by your provider.

Bring your models

Your own backend

Develop a custom endpoint on localhost, then deploy it with a Business plan. Choose your providers, tools, and response flow.

Build your backend

Fits the stack you already use.

Use the React integration or the JavaScript SDK with your framework of choice. Connect the editor to your application through configuration, events, and APIs.

Explore integration examples

An open-source core. A product-ready SDK.

Studio SDK builds on the open-source GrapesJS framework, adding a polished editor UI, Studio plugins, and support from the team behind the core.

Explore GrapesJS on GitHub

Questions about AI in Studio SDK

Understand the integration options, where your application stays in control, and which plan fits your deployment.

Bring AI into your editor.
Make it yours.

Give users an AI assistant inside your product. Connect the models, tools, and workflows your team needs.

Embed the Editor Read the AI Docs