Como hospedar um aplicativo criado pela sua IA: seu próprio URL e dados salvos

Claude pode escrever um aplicativo funcional diretamente em um chat. Feche o chat e ele desaparece: sem URL, sem dados salvos, nada para abrir amanhã. É assim que você transforma esse aplicativo descartável em um hospedado, com sua própria URL e um banco de dados por trás. O exemplo é uma lista de leitura, disponível em charm.ing/avi/reading-list.

A coisa que faz a hospedagem é Charming. Claude escreve o código, Charming o executa. Você continua usando Claude, ou qualquer outro agente pelo qual você já paga. Charming é apenas onde o aplicativo vive uma vez que a conversa termina.

O guia canônico tem o passo a passo completo e capturas de tela. Esta versão é para desenvolvedores: como o conector se conecta, como o módulo publicado se parece e como outros agentes o acessam depois.

Conecte Charming ao Claude

Charming se conecta ao Claude como um conector MCP personalizado. Configuração única:

1. Abra claude.ai/customize/connectors.
2. Escolha Adicionar conector personalizado, nomeie-o como Charming e cole a URL do conector: https://charm.ing/mcp.
3. Aprovação para que Claude possa chamar as ferramentas do Charming.

Capturas de tela e solução de problemas: usecharming.com/setup/claude.

Peça ao Claude para construir, e então publique

Em um chat normal do Claude:

Construa-me um aplicativo de lista de leitura. Quero adicionar livros com um título e autor, mover cada um entre a ler, lendo e lido, e dar estrelas para os livros finalizados.

Claude escreve e visualiza inline. Até agora é como qualquer outro aplicativo em chat. Então:

Crie isso no Charming para que tenha sua própria URL e salve meus dados.

Claude chama o conector e devolve uma URL ao vivo. Esse é o seu aplicativo hospedado, com armazenamento por trás e uma API que outros agentes podem chamar mais tarde.

O que Claude realmente publica

Sob o conector, Claude cria e envia um módulo ES com duas exportações nomeadas:

export const manifest = {
  id: 'reading-list',
  version: '0.0.1',
  displayName: 'Lista de leitura',
  capabilities: {
    imports: ['buildy:storage/kv@1.0'], // fornece o env.storage para os manipuladores
    exports: [],
  },
};

export const routes = [
  {
    op: 'list',
    method: 'GET',
    handler: async (_input, { env }) => (await env.storage.get('books')) ?? [],
  },
  {
    op: 'add',
    method: 'POST',
    handler: async (input, { env }) => {
      const books = (await env.storage.get('books')) ?? [];
      books.push({ ...input, status: 'to-read' });
      await env.storage.put('books', books);
      return books;
    },
  },
];

Sem servidor para configurar, sem banco de dados para provisionar. env.storage é um armazenamento chave/valor por aplicativo que sobrevive a cada atualização posterior, e cada rota declarada se torna uma operação descobrível em /app/<id>/api/*.

Mesmo aplicativo, acessível de duas maneiras

Uma vez publicado, você não está preso ao chat que o construiu. Duas maneiras de acessar:

• Pelo MCP: aponte qualquer agente compatível com MCP para https://charm.ing/mcp e ele pode ler ou escrever os dados do mesmo aplicativo.
• Pelo HTTP: POST https://charm.ing/api/pair/start emparelha um agente à sua conta. A partir daí, POST /app cria um aplicativo e PUT /app/<id> atualiza um, e cada rota declarada pode ser chamada em /app/<id>/api/<op>.

Um armazenamento de dados, mais de um agente. Em um chat novo, pedi ao Claude para adicionar a série Harry Potter à mesma lista. Ele leu o aplicativo existente pelo conector e enfileirou todos os sete como