> For the complete documentation index, see [llms.txt](https://docs.skyone.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.skyone.cloud/espanol/skyone-studio/inteligencia-artificial/vibe-coding/chat.md).

# Chat

Después del prompt inicial de creación de su app, la plataforma es automáticamente redirigida a la pestaña **Chat** en la cual es posible visualizar y editar las apps.

<figure><img src="https://3969362974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsZB1uWLMGztphXAzIZJ1%2Fuploads%2FINVNPhdDK0YlBCWNAkTs%2FChat-geral-espanhol.gif?alt=media&amp;token=12a65a02-0764-409d-8084-6a83be2fd391" alt=""><figcaption></figcaption></figure>

Siga, a continuación, los recursos disponibles:

#### Renombrar Chat

Para cambiar el nombre del chat, siga estos pasos:

1. Haga clic en el ícono de tres puntos junto al nombre del chat.
2. Seleccione la opción **Renombrar Chat**.
3. En el modal, escriba el nuevo nombre.
4. Haga clic en **Guardar**.

#### Eliminar Chat&#x20;

Para cambiar el nombre de la app, siga estos pasos:

1. Haga clic en el ícono de tres puntos junto al nombre de la aplicación.
2. Seleccione la opción **Eliminar Chat.**
3. En el modal, confirme la eliminación haciendo clic en **Eliminar Chat**.

#### Agregar archivos y contextos al Prompt

1. En el panel de chat, haga clic en el botón + para abrir la lista de opciones de archivo adjunto y alcance.
2. Es posible elegir las siguientes opciones:
   1. **Contexto del código:** Agrega el contexto completo del repositorio de código actual a la conversación.
   2. **Adjuntar archivos**:&#x20;
      1. **Adjuntar archivo como contexto del chat**: Inserta un archivo para actuar específicamente como historial o instrucción de soporte en el chat.
      2. **Enviar archivo a la base de código:** Envía el archivo directamente al árbol de directorios del proyecto.
   3. **Temas**: Cambia la identidad visual del panel. Elija una de las opciones disponibles o cree un nuevo tema. [Lea el artículo Temas](/espanol/skyone-studio/inteligencia-artificial/vibe-coding/biblioteca.md#como-crear-un-nuevo-theme-tema-en-la-biblioteca).
   4. **Mostrar uso de tokens:** Muestra la cantidad de tokens consumidos en la interacción con la IA. Para ocultar estos datos, simplemente haga clic en **Ocultar uso de tokens**.

#### Modo de ejecución

Elija el modo de ejecución del prompt:

* **Local Agent (predeterminado):** Ejecuta comandos y aplica cambios directamente en el entorno local.
* **Build:** Crea y modifica código o archivos en el proyecto con un enfoque en la implementación.
* **Ask:** Resuelve dudas, explica conceptos y analiza el proyecto sin alterar archivos (modo de lectura).
* **Plan:** Mapea el problema y genera un plan detallado en etapas antes de iniciar la ejecución.

#### Modelo de IA

Por defecto, el modelo aparece configurado como Auto, pero es posible elegir otro modelo de su preferencia. Para ello:

1. Acceda al menú de selección de modelos de inteligencia artificial.
2. Seleccione una opción de su preferencia (OpenAI, Google, etc.).

#### Entrada de voz

1. Haga clic en el ícono de **Micrófono** posicionado en el área derecha del campo de texto del chat.
2. Hable su comando o instrucción de forma clara.
3. Supervise la transcripción automática del audio en la pantalla.
4. Haga clic en la flecha de envío para procesar el prompt.

### Barra de herramientas

La barra de herramientas en el lateral derecho permite las siguientes opciones:

#### Vista previa

Gestione el comportamiento y el diseño de su aplicación en tiempo real utilizando los botones de control:

* **Ocultar el chat:** Haga clic para ocultar o mostrar la pestaña del chat, expandiendo el área del preview técnico.
* **Seleccionar Componente / Desactivar Selección de Componente:** Haga clic en el ícono del cursor para activar la inspección directa de bloques en la página o desactivar la selección interactiva.
* **Activar anotaciones:** Haga clic en el ícono de lápiz/varita mágica para habilitar la creación de notas y demarcaciones visuales sobre la interfaz en desarrollo.
* **Atrás / Adelante:** Utilice las flechas direccionales para navegar por el historial de páginas renderizadas en el simulador.
* **Actualizar:** Haga clic en la flecha circular para recargar el estado actual de la página en el preview.
* **Ir a la Página:** Utilice el selector de rutas (campo de texto con el indicador /) para alternar o escribir directamente la ruta de la página que desea visualizar.
* **Reiniciar:** Reinicia completamente la ejecución.
* **Ver en otra pestaña:** Haga clic en el ícono de enlace externo para proyectar la aplicación en una nueva pestaña completa de su navegador.
* **Publicar:** Haga clic para disponibilizar la aplicación en producción.
* **Modos Web, Tablet y Mobile:** Alterne entre los tres íconos de dispositivos ubicados en la parte superior derecha para probar el comportamiento responsivo del diseño en los formatos Desktop, Tablet y Mobile, respectivamente.

<figure><img src="https://3969362974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsZB1uWLMGztphXAzIZJ1%2Fuploads%2F2eGQ0uojafVnFq70vC1U%2FF71926C5-92BA-44CF-AF5F-47A73C2383A1.png?alt=media&amp;token=b3c52159-02fd-4497-82c7-4536af39473f" alt=""><figcaption><p>Opciones de Vista Previa</p></figcaption></figure>

#### Errores

Ejecute verificaciones periódicas en este panel para escanear su aplicación en busca de fallas de compilación en *TypeScript* u otros problemas estructurales.

#### Código

Acceda a este menú para verificar y navegar por las carpetas, archivos y líneas de código generados automáticamente para su proyecto.

#### Config

Acceda al menú **Config** para gestionar las credenciales y los comandos de ejecución de su aplicación.

<figure><img src="https://3969362974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsZB1uWLMGztphXAzIZJ1%2Fuploads%2FnOqEdJF8ozyclnVs8Jtr%2FDA14F533-BC95-4C86-8B66-462832073999.png?alt=media&amp;token=ec3d3efe-298c-4a6b-ba7b-717911c1df20" alt=""><figcaption></figcaption></figure>

* **Variables de Entorno:** Agregue claves de configuración sensibles o específicas del entorno a su proyecto.
  1. Haga clic en **+ Agregar variable de entorno**.
  2. Complete los campos **Clave** y **Valor**.
  3. Haga clic en Guardar para finalizar.

{% hint style="success" %}
Para editar o eliminar variables creadas anteriormente, haga clic en los íconos de lápiz (editar) o papelera (eliminar) junto a la variable correspondiente.
{% endhint %}

* **Comandos de la App:** Configure comandos personalizados para la instalación de dependencias e inicialización de la aplicación.
  1. Clique em **+ Configurar comandos personalizados.**
  2. Defina el comando de instalación (ejemplo: `pnpm install`) y el comando de inicialización (ejemplo: `pnpm dev`).
  3. Haga clic en **Guardar**.

{% hint style="info" %}
Si deja estos campos en blanco, el sistema adoptará automáticamente los comandos predeterminados del administrador `pnpm`.
{% endhint %}

#### Revisión de Seguridad

En **Seguridad**, puede auditar el código de su proyecto, definir reglas de cumplimiento e implementar sistemas de autenticación de forma automatizada.

* **Ejecutar Revisión de Seguridad:** Haga clic en este botón para iniciar un escaneo completo. El sistema escaneará el código del proyecto para evaluar el nivel de seguridad e identificar posibles vulnerabilidades.
* **Editar reglas:** Haga clic en esta opción para abrir el cuadro de diálogo de reglas de cumplimiento. Aquí, puede incluir contextos específicos de su proyecto para guiar las revisiones. El contenido insertado se guarda automáticamente en el archivo `SECURITY_RULES.md`. Esto ayuda a la plataforma a centrarse en vulnerabilidades reales y evita alertas de falsos positivos que no se aplican a su escenario. Al finalizar, haga clic en **Guardar**.
* **Solucionar El Problema:** Después de ejecutar la revisión, si se encuentran vulnerabilidades, un botón **Solucionar El Problema** estará disponible junto a cada elemento. Al hacer clic en él, la Inteligencia Artificial aplicará correcciones y optimizaciones automáticamente en el código afectado.
* **Agregar Capa de Inicio de sesión:** Implemente autenticación segura (correo electrónico y contraseña) para acceder a su aplicación de forma instantánea. Simplemente haga clic en el botón **Add Login Layer**. El sistema utilizará la base de datos existente en su proyecto o configurará una base de datos SQLite automáticamente en caso de que no haya ninguna, sin exigir configuraciones manuales adicionales.

#### Publicar App

En el menú **Publicar**, elija cómo desea publicar la app:

* **Uso compartido del Preview:** Copie la URL para compartir el preview de la app. También es posible generar una nueva URL.

{% hint style="info" %}
Los enlaces de uso compartido caducan en 30 días.
{% endhint %}

* **Exportar código fuente:** Descargue un archivo comprimido (ZIP) que contenga el código fuente completo de esta app para realizar el despliegue manual. El sistema elimina automáticamente las carpetas `node_modules`, `.git`, `builds` y los archivos `.env` locales para garantizar la ligereza y la seguridad del paquete.
* **GitHub:** Conecte y sincronice su código directamente con un repositorio de GitHub para habilitar flujos de trabajo colaborativos y control de versiones integrado.

<figure><img src="https://3969362974-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsZB1uWLMGztphXAzIZJ1%2Fuploads%2FWD3MNRLwwYvDxnqlFchA%2FE645DE61-FB61-44DD-A7F2-972371402CB2.png?alt=media&amp;token=36bf7888-89e3-4ca1-843e-61d004294b0f" alt=""><figcaption><p>La pantalla muestra opciones para compartir</p></figcaption></figure>

#### Reconstruir

Haga clic en este botón para forzar la reestructuración del entorno de desarrollo.

{% hint style="danger" %}
Este comando eliminará permanentemente la carpeta `node_modules`, reinstalará todas las dependencias del proyecto, borrará los datos de sesión del preview y reiniciará el servidor de desarrollo.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.skyone.cloud/espanol/skyone-studio/inteligencia-artificial/vibe-coding/chat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.