Blog

Desarrollo
API de Deepseek
_

Cómo Integrar la API de Deepseek en Laravel

Tutorial sencillo

En este tutorial crearemos una aplicación web responsive usando Laravel que interactúa con la API de Deepseek para obtener respuestas inteligentes. Ideal para implementar un chatbot con diseño adaptable.

Requisitos Previos

  • PHP 8.1+
  • Composer instalado
  • Node.js (para compilar assets)
  • Cuenta en Deepseek (para obtener API key)
  • Conocimientos básicos de Laravel

Paso 1: Configuración Inicial del Proyecto

Crea un nuevo proyecto Laravel:

composer create-project laravel/laravel deepseek-chat
cd deepseek-chat

Instala Guzzle para peticiones HTTP:

composer require guzzlehttp/guzzle

Paso 2: Crear Controlador y Rutas

Genera el controlador:

php artisan make:controller DeepSeekController

app/Http/Controllers/DeepSeekController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use GuzzleHttp\Client;

class DeepSeekController extends Controller
{
    public function index()
    {
        return view('chat');
    }

    public function ask(Request $request)
    {
        $request->validate(['question' => 'required|string|max:500']);

        $client = new Client();
        
        try {
            $response = $client->post('https://api.deepseek.com/v1/chat/completions', [
                'headers' => [
                    'Authorization' => 'Bearer ' . env('DEEPSEEK_API_KEY'),
                    'Content-Type' => 'application/json',
                ],
                'json' => [
                    'model' => 'deepseek-chat',
                    'messages' => [
                        ['role' => 'user', 'content' => $request->question]
                    ]
                ]
            ]);

            $responseData = json_decode($response->getBody(), true);
            
            return response()->json([
                'answer' => $responseData['choices'][0]['message']['content']
            ]);

        } catch (\Exception $e) {
            return response()->json([
                'error' => 'Error al conectar con la API: ' . $e->getMessage()
            ], 500);
        }
    }
}

routes/web.php:

use App\Http\Controllers\DeepSeekController;

Route::get('/chat', [DeepSeekController::class, 'index'])->name('chat');
Route::post('/ask', [DeepSeekController::class, 'ask'])->name('ask');

Paso 3: Crear Vista Responsive

resources/views/chat.blade.php:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat con Deepseek</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto p-4 max-w-4xl">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h1 class="text-2xl font-bold mb-6 text-gray-800">Chat con Deepseek</h1>
            
            <div id="chat-container" class="mb-4 h-96 overflow-y-auto bg-gray-50 p-4 rounded-lg">
                <div id="responses" class="space-y-4"></div>
            </div>

            <form id="chat-form" class="flex gap-2">
                @csrf
                <input type="text" id="question" 
                    class="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Escribe tu pregunta..." autocomplete="off">
                <button type="submit" 
                    class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                    Enviar
                </button>
            </form>

            <div id="loading" class="hidden mt-4 text-gray-500">
                Procesando...
            </div>
        </div>
    </div>

    <script>
        // JavaScript del chat aquí...
    </script>
</body>
</html>

Paso 4: Configurar Variables de Entorno

Añade esta línea a tu archivo .env de Laravel:

DEEPSEEK_API_KEY=tu_api_key_aquí

Diseño Responsive

La interfaz utiliza Tailwind CSS con:

  • Contenedores con ancho máximo adaptable
  • Espacios responsivos (p-4, md:p-6)
  • Altura de chat ajustable
  • Elementos flexibles para móviles

Consejos Finales

  1. Usa HTTPS en producción
  2. Implementa límite de solicitudes
  3. Añade un indicador de escritura
  4. Prueba con diferentes modelos de IA

¡Ahora tienes un chatbot inteligente con diseño profesional! ¿Qué preguntas le harás a tu nueva IA?