Langbase

Chai – Vibe Code AI Agents

Chai – Computer Human AI by Langbase lets you vibe code AI agents. Like an on-demand AI engineer, it turns prompts into production ready agents.

Prompt your AI agent idea, and Chai builds a fully functional agent — complete with API and the Agent App that are deployed on Langbase, the most powerful AI serverless platform.

Key features of Chai include:

  • Agent IDE: A powerful code editor for editing, debugging, and observing the agent
  • Agent App: Every agent has a production-ready, shareable app
  • Agent API: Ready-to-use API for your agent, with code snippets
  • Deployments: Scalable, production ready deployments
  • Prompt Modes: Agent and App modes for specific updates
  • Version Control: Track changes and revert to previous versions
  • Fork Agents: Copy other agents and make them your own
  • Share: Live deployed URLs to share your agents with the world
  • Flow: Visualized flows for understanding complex agent logic
  • Memory Agents: Ready-to-use RAG pipeline
  • Agent Readme: Automatically generated documentation for your agent

Quickstart: Vibe code and deploy AI agents with Chai.

In this guide, we will use Chai.new to build an AI Support Agent that will answer user queries relevant to company documentation.

Prerequisites

To follow this guide, you will need a Chai/Langbase Account. Sign up at Chai.new if you haven't already.

Step #1Create Your First Agent with Chai

You can prompt Chai for vibe coding AI agents. Just describe what you want to create in the prompt box. The more specific you are, the better the results.

Enter an initial prompt for your agent idea, and Chai will continue from there. You can keep refining and adjusting your agent as you go.

Let's use the following prompt:

Build an AI Support agent that uses my docs as memory for autonomous AutoRAG

Step #2Vibe code and refine your agent

When you enter a prompt, Chai begins the agent creation process. It lays out the foundational structure of your agent, and starts generating the necessary code to bring it to life. This includes:

  • agent.ts – The main logic of your agent and its workflow
  • app – Agent app directory, which contains the app and frontend code (React components) for your agent

Chai generates the agent code real time in the Agent IDE, where all code generation and editing takes place. You can toggle between files, edit them manually or prompt Chai to make changes.

Step #3Add files to agent memory

Chai intelligently detects when an agent requires access to private or extended data (RAG). In such cases, it automatically creates memory agents — specialized agents equipped with human-like long-term memory.

In this case, Chai has created a Support Docs memory for us. It will store the company documentation and provide it to the Support Agent when needed.

Step 3.1: Download sample file

For this guide, you can download and use this example documentation file.

Download example file about agents architectures →

Next, open the memories tab and click on the Support Docs memory.

Step 3.2: Upload document to memory

Upload the downloaded documentation file to the memory agent. You can add any documents that your agent needs to reference when answering user queries.

Once uploaded, the documents are parsed, chunked, and embedded, making them searchable and retrievable by the agent.

Step #4Deploy the agent

When you're ready, click Deploy in the top-right corner. If your agent uses specific LLMs or tools, you may need to add API keys in the Environment Variables section.

If you are a Langbase user and have LLM keys saved in your profile keyset, they'll be automatically imported here. You can set environment variables per agent to securely store sensitive info like API keys, keeping them out of your code.

You can see Logs for each deployment to help you track progress and troubleshoot any issues. Once deployment is complete, your agent will be ready to use.

Once deployed, you will have access to:

  • Agent App – A prod-ready app to interact, and share the agent
  • Agent API – Ready-to-use scalable serverless endpoint for your agent
  • Agent Flow – A visual, diagrammatic representation of the agent's logic, to understand how it works

You can also edit the agent's code, or download it if you prefer to self-host it.

Step #6Use the agent through Agent App

Alongside the agent, Chai automatically generates a full fledged application for the agent. We call them Agent Apps, and they are:

  • Production ready
  • Auto update when agent changes
  • Fully hosted, instantly shareable
  • Mobile & desktop ready
  • Customizable using the App Prompt Mode

Navigate to the App tab, here you can test and use your agent through UI.

You can test the agent with a prompt like "What is prompt chaining architecture?" and it should respond with an answer based on the documentation you uploaded.

For more observability, agent app has a Console for debugging and observing the agent's behavior. It logs every API call and response made by the agent.

Step #7Use the agent through Agent API

Now that you have deployed your AI support agent on Chai, you can use it in your apps, websites, or literally anywhere you want.

  1. Go to the API tab.
  2. Retrieve your API base URL and API key.
  3. Make sure to never use your API key on client-side code. Always use it on server-side code. Your API key is like a password, keep it safe. If you think it's compromised, you can always regenerate a new one.

You will also find code snippets there for various languages to help you get started quickly. Here's an example snippet of agent API call in Node.js:

Calling the Agent API in Node.js

async function main() {
    const api = `https://api.langbase.com/devlangbase/doc-rag-support-agent-2dfd`;
    const response = await fetch(api, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer YOUR_LANGBASE_API_KEY`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({"input":""})
    });

    if (!response.ok) {
        throw new Error(`Error: ${response.statusText}`);
    }

    const agentResponse = await response.json();
    console.log('Agent response:', agentResponse);
}

Step #8Bonus – Visualize Your Agent's Logic with Agent Flow

But wait, there's more. Chai automatically generates a visual Agent Flow to help you understand how your agent works. Keep an eye on your agent's Flow to ensure it behaves as intended.

Agents can quickly become complex, with multiple decision paths, tools, and branching conditions. The Agent Flow provides a clear view of the agent's logic, including its decision paths, tools used, and branching conditions.

What Will You Build?

Chai gives you the tools to spin up agents that actually do things — no complex setup, no boilerplate.

Here are a few ideas to get your wheels turning:

  • AI Onboarding Agent – Help new hires ramp up without bugging your team.
  • Research Assistant – A lightweight Perplexity-style bot tuned to your workflow.
  • Meeting Summary Agent – Drop in a transcript, get back action items and TL;DRs.
  • Social Media Agent – Generate posts that sound like you (on your best day).
  • AI Email Agent – Triage and respond to emails so you don't have to.
  • Recruitment Agent – Parse resumes, write job descriptions, compare candidates.

Next Steps

You're all set up. Here's what to try next:

  • Build an agent that solves a real problem—and share it with the world.
  • Explore what you can do with Langbase APIs and SDK.
  • Drop by our Discord to get help, give feedback, or show off what you've made.